<template>
    <div dir="rtl" class="p-6 bg-gray-100 min-h-screen">
      <div v-if="request.doc" class="max-w-7xl mx-auto bg-white shadow-md rounded-lg p-6">
        <!-- <h1 class="text-2xl font-bold mb-4">طلب تعليمات التحقق: {{ request.doc.name }}</h1> -->
        
        <!-- عرض رسائل الخطأ إذا وجدت -->
        <div v-if="errors.length > 0" class="mb-4 space-y-2">
          <ErrorMessage 
            v-for="(error, index) in errors" 
            :key="index" 
            :message="error" 
          />
        </div>
  
        <!-- عرض معلومات الطلب الرئيسي -->
        <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <div>
            <label class="block text-gray-700 font-semibold">العميل:</label>
            <span class="text-gray-900">{{ request.doc.customer }}</span>
          </div>
          <div>
            <label class="block text-gray-700 font-semibold">تاريخ الطلب:</label>
            <span class="text-gray-900">{{ formatDate(request.doc.order_date) }}</span>
          </div>
        </div> -->
    
        <!-- قائمة المعلومات التعليمية الفرعية على شكل ترويجات (Toggles) -->
        <!-- <h2 class="text-xl font-semibold mb-4">المعلومات التعليمية</h2> -->
        <div class="space-y-4">
          <div 
            v-for="(education, index) in request.doc.education_information" 
            :key="education.id" 
            class="border border-gray-200 rounded-md"
          >
            <!-- رأس القسم الذي يمكن النقر عليه لتوسيع/طي -->
            <button 
              @click="toggleSection(education.id)" 
              :aria-expanded="isOpen(education.id)"
              aria-controls="section-content-{{ education.id }}"
              class="w-full flex justify-between items-center px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-t-md focus:outline-none"
            >
              <!-- <span>{{ education.name_of_school_or_college_university || 'سجل تعليمي جديد' }}</span> -->
              <svg 
                :class="{'transform rotate-180': isOpen(education.id)}" 
                class="w-5 h-5 transition-transform duration-200" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24" 
                xmlns="http://www.w3.org/2000/svg"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </button>
  
            <!-- محتوى القسم القابل للتوسيع -->
            <transition name="accordion">
              <div 
                v-show="isOpen(education.id)" 
                class="p-4 space-y-4"
                id="section-content-{{ education.id }}"
                role="region"
                aria-labelledby="section-button-{{ education.id }}"
              >
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-gray-700" > Name of School or College/University</label>
                    <input 
                      v-model="education.name_of_school_or_college_university" 
                      placeholder=""  
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label class="block text-gray-700" > Name of School or College/University</label>
                    <input 
                      v-model="education.field_of_study_or_major" 
                      placeholder=""  
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>

                  <div>
                    <!-- <label class="text-gray-700 mr-2">مستمر:</label>
                    <input 
                      type="checkbox" 
                      v-model="education.continuous" 
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                    /> -->
                  </div>
                  <div>
                    <label class="block text-gray-700">Country</label>
                    <select 
                      v-model="education.country" 
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option v-for="country in optionCountry" :key="country.value" :value="country.value">
                        {{ country.label }}
                      </option>
                    </select>
                  </div>
                  
                  <div>
                    <label class="block text-gray-700">City</label>
                    <select 
                      v-model="education.city" 
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option v-for="city in optionCity" :key="city.value" :value="city.value">
                        {{ city.label }}
                      </option>
                    </select>
                  </div>

                  <div>
                    <label class="block text-gray-700">Muhafazah (Governorate)</label>
                    <select 
                      v-model="education.governorate" 
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option v-for="governorate in optionGovernorate" :key="governorate.value" :value="governorate.value">
                        {{ governorate.label }}
                      </option>
                    </select>
                  </div>

                  <div>
                    <label class="block text-gray-700">الهاتف:</label>
                    <input 
                      type="tel" 
                      v-model="education.phone" 
                      placeholder="الهاتف" 
                      pattern="[0-9]{10,15}"
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>

                  <div>
                    <label class="block text-gray-700" > Ext</label>
                    <input 
                      v-model="education.ext" 
                      placeholder=""  
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>

                  <div>
                    <label class="block text-gray-700" > Did you complete your Degree/Diploma?</label>
                    <select 
                      v-model="education.diploma" 
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-gray-700" >During this time did you use a name other than that which appears on your current, Government-issued ID?</label>
                    <select 
                      v-model="education.another_name" 
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                    </select>
                  </div>
                </div>
  

                
                <!-- زر حذف السجل -->
                <div class="flex justify-end">
                  <button 
                    @click="confirmRemove(education.id)" 
                    class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md"
                  >
                    حذف السجل
                  </button>
                </div>
              </div>
            </transition>
          </div>
        </div>
    
        <!-- أزرار الإضافة والحفظ -->
        <div class="flex items-center mt-6 space-x-4">
          <button 
            @click="addEducation" 
            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md"
          >
            إضافة سجل تعليمي
          </button>
          <button 
            @click="saveRequest" 
            class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md"
          >
            حفظ الطلب
          </button>
        </div>
      </div>
      
      <div v-else class="flex justify-center items-center h-full">
        <p class="text-gray-700">جاري التحميل...</p>
      </div>
    </div>
  </template>
  
  <script setup>
      import { createDocumentResource ,ErrorMessage} from 'frappe-ui'
      import { ref, watch, reactive, nextTick } from 'vue'
      import FieldContainer from '../components/fieldContainer.vue';
      import Autocomp from '../components/autocomp.vue';
      
      import {location} from '../data/useAddressLogic';
      import { computed } from 'vue';

  // إنشاء مورد الوثيقة للـ DocType الرئيسي
  const request = createDocumentResource({
    doctype: 'Verification Instructions Request',
    name: 'VIR-2024-26-09-000007', // إلغاء التعليق لإنشاء طلب جديد
  })
  
  // تعريف قائمة البلدان
  const valueCountry = ref('')
  const valueCity = ref('')
  const valueGovernorate = ref('')
  
  const selectedCountry = ref('')
  const selectedCity= ref('')

  const optionCountry = computed(() => {
        return location.data.filter(loc => loc.location_type === 'Country').map(loc => ({
            label: loc.location_name,
            value: loc.location_name
        }))
    })

    const optionCity = computed(() => {
        return location.data.filter(loc => loc.location_type === 'City' && loc.parent_location == selectedCountry.value).map(loc => ({
            label: loc.location_name,
            value: loc.location_name
        }))
    })

    const optionGovernorate= computed(() => {
        return location.data.filter(loc => loc.location_type === 'Governorate' && loc.parent_location == selectedCity.value).map(loc => ({
            label: loc.location_name,
            value: loc.location_name
        }))
    })

    const handleCountryChange = (value) => {
        selectedCountry.value = value.value
    }
    const handleCityChange = (value) => {
        selectedCity.value = value.value
    }
  
  // تأكد من تهيئة education_information كصفيف
  watch(() => request.doc, (newDoc) => {
    if (newDoc && !newDoc.education_information) {
      newDoc.education_information = []
    }
  }, { immediate: true })
  
  // حالة التوسعة لكل قسم باستخدام معرف فريد
  const openSections = reactive({})
  
  // دالة للتحكم في توسيع/طي كل قسم
  const toggleSection = (id) => {
    openSections[id] = !openSections[id]
  }
  
  const isOpen = (id) => {
    return openSections[id]
  }
  
  // مصفوفة لتخزين رسائل الخطأ
  const errors = ref([])
  
  // إضافة سجل تعليمي جديد
  const addEducation = () => {
    const newEducation = {
      id: Date.now(), // أو استخدم مكتبة UUID لمزيد من التميز
      country: '',
      city: '',
      governorate: '',
      continuous: false,
      name_of_school_or_college_university:'',
      field_of_study_or_major:'',
      phone: '',
      ext: '',
      diploma: '',
      date_enrolled_from: '',
      date_enrolled_to: '',
      another_name: '',
    }
    request.doc.education_information.push(newEducation)
    nextTick(() => {
      openSections[newEducation.id] = true
    })
  }
  
  // تأكيد حذف سجل تعليمي
  const confirmRemove = (id) => {
    if (confirm('هل أنت متأكد من رغبتك في حذف هذا السجل التعليمي؟')) {
      removeEducation(id)
    }
  }
  
  // حذف سجل تعليمي
  const removeEducation = (id) => {
    const index = request.doc.education_information.findIndex(edu => edu.id === id)
    if (index !== -1) {
      request.doc.education_information.splice(index, 1)
      delete openSections[id]
    }
  }
  
  // دالة لحفظ الطلب
  const saveRequest = async () => {
    errors.value = [] // إعادة تعيين رسائل الخطأ قبل البدء في التحقق
  
    request.doc.education_information.forEach((education, index) => {
      if (!education.name_of_school_or_college_university) {
        errors.value.push(`اسم الشركة مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.field_of_study_or_major) {
        errors.value.push(`اسم الشركة مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.country) {
        errors.value.push(`البلد مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.city) {
        errors.value.push(`تاريخ البدء مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.governorate) {
        errors.value.push(`تاريخ البدء مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.diploma) {
        errors.value.push(`نوع التوظيف مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.date_enrolled_from) {
      errors.value.push(`تاريخ البدء مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.date_enrolled_to) {
      errors.value.push(`تاريخ البدء مطلوب في السجل رقم ${index + 1}.`)
      }
      // تحقق إضافي لنمط الهاتف
      const phonePattern = /^[0-9]{10,15}$/
      if (education.phone && !phonePattern.test(education.phone)) {
        errors.value.push(`رقم الهاتف غير صالح في السجل رقم ${index + 1}.`)
      }
    })
  
    if (errors.value.length > 0) {
      // لا تقوم بأي إجراء إضافي إذا كانت هناك رسائل خطأ
      return
    }
  
    try {
      await request.save({
        education_information: request.doc.education_information,
        // إضافة حقول أخرى إذا لزم الأمر
      })
      // يمكنك إضافة رسالة نجاح باستخدام Toast أو مكون آخر إذا رغبت
      alert('تم حفظ الطلب بنجاح!') // مثال بسيط لرسالة نجاح
    } catch (error) {
      errors.value.push(`حدث خطأ أثناء حفظ الطلب: ${error.message}`)
    }
  }
  
  // دالة لتنسيق التاريخ
  const formatDate = (dateStr) => {
    if (!dateStr) return ''
    const date = new Date(dateStr)
    return date.toLocaleDateString('ar-EG')
  }
  </script>
  
  <style scoped>
  .accordion-enter-active, .accordion-leave-active {
    transition: max-height 0.3s ease;
  }
  .accordion-enter-from, .accordion-leave-to {
    max-height: 0;
    overflow: hidden;
  }
  </style>