<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.company || 'سجل تعليمي جديد' }}</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">اسم الشركة:</label>
                    <input 
                      v-model="education.company" 
                      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">البلد:</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 value="">اختر بلد</option>
                      <option v-for="country in countries" :key="country.value" :value="country.value">
                        {{ country.label }}
                      </option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-gray-700">من تاريخ:</label>
                    <input 
                      type="date" 
                      v-model="education.from_date" 
                      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">الهاتف:</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">نوع التوظيف:</label>
                    <select 
                      v-model="education.type_of_employment" 
                      class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="">اختر نوع التوظيف</option>
                      <option value="Full-time">دوام كامل</option>
                      <option value="Part-time">دوام جزئي</option>
                      <option value="Contract">عقد</option>
                      <option value="Internship">تدريب</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 ErrorMessage from 'frappe-ui/components/ErrorMessage.vue' // تأكد من المسار الصحيح للمكون
  
  // إنشاء مورد الوثيقة للـ DocType الرئيسي
  const request = createDocumentResource({
    doctype: 'Verification Instructions Request',
    // name: 'VIR-2024-26-09-000007', // إلغاء التعليق لإنشاء طلب جديد
  })
  
  // تعريف قائمة البلدان
  const countries = ref([
    { label: 'مصر', value: 'EG' },
    { label: 'اليمن', value: 'YE' },
    { label: 'الإمارات', value: 'AE' },
    { label: 'قطر', value: 'QA' },
    // أضف المزيد من البلدان حسب الحاجة
  ])
  
  // تأكد من تهيئة 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 لمزيد من التميز
      company: '',
      continuous: false,
      country: '',
      from_date: '',
      phone: '',
      type_of_employment: '',
    }
    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.company) {
        errors.value.push(`اسم الشركة مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.country) {
        errors.value.push(`البلد مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.from_date) {
        errors.value.push(`تاريخ البدء مطلوب في السجل رقم ${index + 1}.`)
      }
      if (!education.type_of_employment) {
        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>