@extends('layouts.app')

@section('content')
<div class="container">
    <x-header title="إضافة مجموعات جديده" />
    <x-alert />

    <div class="container-fluid dir-rtl text-right" style="direction: rtl;">
        {{-- الإعدادات العامة العلوي --}}
        <div class="card mb-4 shadow-sm border-0 bg-white rounded-3">
            <div class="card-body py-3 px-4">
                <div class="row align-items-center g-3">
                    <div class="col-auto">
                        <span class="fw-bold text-dark font-sm"><i class="fa-solid fa-sliders text-primary me-2"></i> الإعدادات العامة للدفعة:</span>
                    </div>
                    
                    {{-- اختيار الكنيسة بناءً على صلاحياتك --}}
                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light fw-bold text-secondary font-xs">الكنيسة</span>
                            <select id="general_church_id" class="form-select fw-bold font-xs text-primary tom-select">
                                @foreach($churches as $church)
                                    <option value="{{ $church->id }}">{{ $church->name . ' (' . $church->address . ')' ?? '' }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light fw-bold text-secondary font-xs">تاريخ البدء الموحد</span>
                            <input type="date" id="general_start_date" class="form-control fw-bold text-center" value="2026-05-29">
                        </div>
                    </div>
                </div>
            </div>
        </div>
                
        {{-- حاوية الأكورديون للمراحل التعليمية --}}
        <div class="accordion" id="stagesAccordion">
            @foreach($stages as $index => $stage)
                <div class="accordion-item mb-3 border rounded shadow-xs overflow-hidden">
                    
                    {{-- رأس الأكورديون --}}
                    <h2 class="accordion-header" id="heading-stage-{{ $stage->id }}">
                        <button class="accordion-button font-sm fw-bold text-primary {{ $index === 0 ? '' : 'collapsed' }} py-2.5 px-3 bg-white" 
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapse-stage-{{ $stage->id }}" 
                                aria-expanded="{{ $index === 0 ? 'true' : 'false' }}">
                            <i class="fa-solid fa-graduation-cap ms-2 text-secondary"></i>
                            المرحلة التعليمية: {{ $stage->name }}
                        </button>
                    </h2>

                    {{-- محتوى الأكورديون --}}
                    <div id="collapse-stage-{{ $stage->id }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" data-bs-parent="#stagesAccordion">
                        <div class="accordion-body bg-light/30 p-3">
                            
                            <div class="table-responsive bg-white rounded border">
                                <table class="table table-hover align-middle mb-0 font-xs">
                                    <thead class="table-light text-secondary">
                                        <tr>
                                            <th style="width: 20%;">اسم المادة</th>
                                            <th style="width: 55%;">تفاصيل المجموعة الحالية</th>
                                            <th style="width: 25%;" class="text-center">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($subjects as $subject)
                                            <tr id="row-{{ $stage->id }}-{{ $subject->id }}" class="subject-row">
                                                {{-- اسم المادة --}}
                                                <td>
                                                    <span class="fw-bold text-dark">
                                                        <i class="fa-solid fa-book text-danger ms-2"></i>{{ $subject->name }}
                                                    </span>
                                                </td>
                                                
                                                {{-- الملخص الذكي للبيانات عند الحفظ --}}
                                                <td>
                                                    <div id="summary-container-{{ $stage->id }}-{{ $subject->id }}" class="d-flex flex-wrap gap-2 align-items-center text-muted font-xxs">
                                                        <span class="text-secondary italic">لم يتم إضافة مجموعات جديدة لهذه المادة.</span>
                                                    </div>
                                                </td>

                                                {{-- الأزرار الديناميكية --}}
                                                <td class="text-center">
                                                    <button type="button" 
                                                            class="btn btn-sm btn-primary fw-bold px-3 btn-trigger-modal"
                                                            data-stage-id="{{ $stage->id }}"
                                                            data-stage-name="{{ $stage->name }}"
                                                            data-subject-id="{{ $subject->id }}"
                                                            data-subject-name="{{ $subject->name }}"
                                                            id="btn-manage-{{ $stage->id }}-{{ $subject->id }}">
                                                        <i class="fa-solid fa-plus-circle me-1"></i> إعداد المجموعة
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- النافذة المنبثقة الموحدة والمريحة جداً (The Core Modal) --}}
    <div class="modal fade" id="groupConfigModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="groupConfigModalLabel" aria-hidden="true" style="direction: rtl;">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow-lg text-right">
                
                {{-- هيدر المودال الأنيق لتحديد الوجهة --}}
                <div class="modal-header bg-dark text-white py-3">
                    <h5 class="modal-title font-sm fw-bold" id="groupConfigModalLabel">
                        <i class="fa-solid fa-sliders text-warning me-2"></i> تهيئة بيانات المجموعة
                    </h5>
                    <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                {{-- لوحة تعريف المكان الحالي --}}
                <div class="bg-light px-3 py-3 border border-secondary border-start-0 border-end-0 font-xxs text-secondary d-flex justify-content-between align-items-center">
                    <div>
                        <strong>الكنيسة:</strong> 
                        {{-- تم إضافة id="modal-church-text" هنا ليتم تحديثه عبر الجافاسكريبت تلقائياً --}}
                        <span id="modal-church-text" class="badge bg-danger fs-6 fw-bold border border-white text-wrap px-2 py-1 align-middle animate__animated animate__shakeX"></span>
                    </div>
                    <div><strong>المرحلة:</strong> <span id="modal-stage-text" class="text-primary fw-bold"></span></div>
                    <div><strong>المادة:</strong> <span id="modal-subject-text" class="text-danger fw-bold"></span></div>
                </div>

                <form id="modalGroupForm">
                    <div class="modal-body p-4 font-xs">
                        
                        <input type="hidden" id="modal_stage_id">
                        
                        {{-- جعل حقل المادة select حقيقي مخفي أو ظاهر ديناميكيًا لاستخدامه في الفورم --}}
                        <select class="form-select" id="modal_subject_id" style="display: none;"></select>

                        <input type="hidden" id="modal_group_id">

                        {{-- القسم الأول: المدرس وعقد العمل --}}
                        <div class="mb-4">
                            <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3 font-xs text-orange-600"><i class="fa-solid fa-user-tie me-1"></i> 1. المدرس وعقد العمل</h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted">إختر المدرس <span class="text-danger">*</span></label>
                                    <select class="form-select form-select-sm tom-select" id="modal_teacher_id" required>
                                        <option value="">إختر المدرس...</option>
                                        @foreach($teachers as $teacher)
                                            <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold text-muted">أجر المدرس</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" step="0.01" class="form-control font-weight-bold text-success text-center" id="modal_teacher_price" value="0">
                                        <span class="input-group-text bg-light font-xxs">جنية</span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fw-bold text-muted">نظام العقد</label>
                                    <select class="form-select form-select-sm tom-select" id="modal_billing_system">
                                        <option value="per_student">بالطالب</option>
                                        <option value="per_group">بالمجموعة</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- القسم الثاني: الماليات ونظام الدعم --}}
                        <div class="mb-4">
                            <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3 font-xs text-amber-600"><i class="fa-solid fa-wallet me-1"></i> 2. الماليات ونظام الدعم</h6>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">سعر السوق الاصلي</label>
                                    <input type="number" step="0.01" class="form-control form-control-sm text-center text-muted" id="modal_market_price" value="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">إشتراك الطالب المدعوم <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control form-control-sm text-center fw-bold text-primary" id="modal_student_price" value="0" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">نظام تحصيل الدفع</label>
                                    <select class="form-select form-select-sm tom-select" id="modal_payment_system">
                                        <option value="monthly">شهري</option>
                                        <option value="per_lesson">بالحصة</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- القسم الثالث: مواعيد الحصص والوقت --}}
                        <div>
                            <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3 font-xs text-blue-600"><i class="fa-solid fa-calendar-days me-1"></i> 3. مواعيد الحصص والوقت</h6>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">يوم الحصة الرئيسي</label>
                                    <select class="form-select form-select-sm tom-select" id="modal_day">
                                        <option value="">إختر اليوم...</option>
                                        <option value="Saturday">السبت</option>
                                        <option value="Sunday">الأحد</option>
                                        <option value="Monday">الإثنين</option>
                                        <option value="Tuesday">الثلاثاء</option>
                                        <option value="Wednesday">الأربعاء</option>
                                        <option value="Thursday">الخميس</option>
                                        <option value="Friday">الجمعة</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">من الساعة</label>
                                    <input type="time" class="form-control form-control-sm text-center" id="modal_time_from">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">إلى الساعة</label>
                                    <input type="time" class="form-control form-control-sm text-center" id="modal_time_to">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer bg-light border-top py-2.5 px-3">
                        <button type="button" class="btn btn-sm btn-secondary font-xs px-3" data-bs-dismiss="modal">إلغاء التراجع</button>
                        <button type="submit" class="btn btn-sm btn-success font-xs px-4 fw-bold" id="btnModalSubmit">
                            <i class="fa-solid fa-floppy-disk me-1"></i> حفظ وإعتماد المجموعة
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    body { background-color: #f4f6f9; }
    .font-sm { font-size: 0.875rem !important; }
    .font-xs { font-size: 0.8rem !important; }
    .font-xxs { font-size: 0.75rem !important; }
    .shadow-xs { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .text-orange-600 { color: #ea580c !important; }
    .text-amber-600 { color: #d97706 !important; }
    .text-blue-600 { color: #2563eb !important; }
    
    .subject-row { transition: background-color 0.2s ease; }
    .row-saved-success { background-color: rgba(25, 135, 84, 0.04) !important; }
    
    .badge-summary {
        background-color: #f8f9fa;
        color: #495057;
        border: 1px solid #dee2e6;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modalElement = document.getElementById('groupConfigModal');
        const subjectSelect = document.getElementById('modal_subject_id');
        const localGroupsData = {};

        // 1. المابينج المعتمد والنهائي للمراحل والمواد
        const subjectMapping = [
            { stages: [1, 2, 3], subjects: [1, 2, 4, 6, 7] },
            { stages: [4, 5, 6, 7, 8, 9], subjects: [1, 2, 3, 4, 5, 6, 7, 8] }
        ];

        // حقن الخيارات ديناميكيًا داخل السيلكت المخفي لضمان إرسال المدخلات بالسيرفر بشكل صحيح
        @foreach($subjects as $subject)
            let opt_{{ $subject->id }} = document.createElement('option');
            opt_{{ $subject->id }}.value = "{{ $subject->id }}";
            opt_{{ $subject->id }}.text = "{{ $subject->name }}";
            subjectSelect.appendChild(opt_{{ $subject->id }});
        @endforeach

        const daysTranslation = {
            'Saturday': 'السبت', 'Sunday': 'الأحد', 'Monday': 'الإثنين', 
            'Tuesday': 'الثلاثاء', 'Wednesday': 'الأربعاء', 'Thursday': 'الخميس', 'Friday': 'الجمعة'
        };

        const subscriptionTranslation = { 'monthly': 'اشتراك شهري', 'per_lesson': 'بالحصة' };

        // دالة لفلترة وتنظيف الجدول الرئيسي فوراً لمنع التداخل والتشوهات البصرية
        function filterMainTableRows() {
            subjectMapping.forEach(map => {
                map.stages.forEach(stageId => {
                    const rows = document.querySelectorAll(`tr[id^="row-${stageId}-"]`);
                    rows.forEach(row => {
                        const parts = row.id.split('-');
                        const subId = parseInt(parts[2]);
                        if (!map.subjects.includes(subId)) {
                            row.style.setProperty('display', 'none', 'important');
                        }
                    });
                });
            });
        }

        // تشغيل الفلترة الصارمة للجدول فور تحميل الصفحة
        filterMainTableRows();

        // 🔄 دالة مساعدة لتحديث قيمة TomSelect بأمان لو كان العنصر مُفعّل به
        function syncTomSelect(elementId, value) {
            const el = document.getElementById(elementId);
            if (el) {
                el.value = value;
                if (el.tomselect) {
                    el.tomselect.setValue(value);
                }
            }
        }

        // فتح المودال وتجهيز الداتا
        document.querySelectorAll('.btn-trigger-modal').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                
                const stageId = this.getAttribute('data-stage-id');
                const stageName = this.getAttribute('data-stage-name');
                const subjectId = this.getAttribute('data-subject-id');
                const subjectName = this.getAttribute('data-subject-name');
                
                // جلب اسم الكنيسة المحددة حالياً من الهيدر
                const churchSelect = document.getElementById('general_church_id');
                const selectedChurchName = churchSelect.options[churchSelect.selectedIndex].text;
                
                // تحديث لوحة المودال بالبيانات الديناميكية الصحيحة
                document.getElementById('modal-church-text').innerText = selectedChurchName;
                document.getElementById('modal-stage-text').innerText = stageName;
                document.getElementById('modal-subject-text').innerText = subjectName;
                
                document.getElementById('modal_stage_id').value = stageId;
                syncTomSelect('modal_subject_id', subjectId);

                const cacheKey = `${stageId}-${subjectId}`;
                if (localGroupsData[cacheKey]) {
                    const data = localGroupsData[cacheKey];
                    document.getElementById('modal_group_id').value = data.group_id || '';
                    document.getElementById('modal_teacher_price').value = data.teacher_fee || 0;
                    document.getElementById('modal_market_price').value = data.market_fee || 0;
                    document.getElementById('modal_student_price').value = data.student_fee || 0;
                    document.getElementById('modal_time_from').value = data.start_time || '';
                    document.getElementById('modal_time_to').value = data.end_time || '';

                    // ✨ تحديث متزامن وآمن لعناصر الـ TomSelect في حالة الكاش
                    syncTomSelect('modal_teacher_id', data.teacher_id || '');
                    syncTomSelect('modal_billing_system', data.payment_type || 'per_student');
                    syncTomSelect('modal_payment_system', data.subscription_type || 'monthly');
                    syncTomSelect('modal_day', data.day || '');
                } else {
                    // ✨ عمل ريسيت للفورم مع إجبار TomSelect على العودة للقيم الافتراضية المزامنة
                    document.getElementById('modalGroupForm').reset();
                    document.getElementById('modal_group_id').value = '';
                    document.getElementById('modal_stage_id').value = stageId;
                    
                    // عمل مَزامنة إجبارية لكل حقول الـ TomSelect بعد الـ reset للقيم الافتراضية للـ HTML
                    document.querySelectorAll('#modalGroupForm .tom-select').forEach(select => {
                        if (select.tomselect) {
                            select.tomselect.setValue(select.value);
                        }
                    });
                    
                    syncTomSelect('modal_subject_id', subjectId);
                }

                modalElement.classList.add('show');
                modalElement.style.display = 'block';
                document.body.classList.add('modal-open');
                
                const backdrop = document.createElement('div');
                backdrop.className = 'modal-backdrop fade show';
                backdrop.id = 'custom-modal-backdrop';
                document.body.appendChild(backdrop);
            });
        });

        // إغلاق المودال يدوياً
        const closeModalElements = modalElement.querySelectorAll('[data-bs-dismiss="modal"]');
        closeModalElements.forEach(closeBtn => {
            closeBtn.addEventListener('click', function () {
                modalElement.classList.remove('show');
                modalElement.style.display = 'none';
                document.body.classList.remove('modal-open');
                const backdrop = document.getElementById('custom-modal-backdrop');
                if (backdrop) backdrop.remove();
            });
        });

        // معالجة الحفظ والاعتماد عبر الـ Fetch API
        document.getElementById('modalGroupForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const stageId = document.getElementById('modal_stage_id').value;
            const subjectId = subjectSelect.value;
            const submitBtn = document.getElementById('btnModalSubmit');
            
            const currentSubscription = document.getElementById('modal_payment_system').value; 

            const payload = {
                _token: '{{ csrf_token() }}',
                group_id: document.getElementById('modal_group_id').value,
                church_id: document.getElementById('general_church_id').value,
                start_date: document.getElementById('general_start_date').value,
                stage_id: stageId,
                subject_id: subjectId,
                teacher_id: document.getElementById('modal_teacher_id').value,
                day: document.getElementById('modal_day').value,
                start_time: document.getElementById('modal_time_from').value,
                end_time: document.getElementById('modal_time_to').value,
                teacher_fee: document.getElementById('modal_teacher_price').value,
                payment_type: document.getElementById('modal_billing_system').value,
                market_fee: document.getElementById('modal_market_price').value,
                student_fee: document.getElementById('modal_student_price').value,
                subscription_type: currentSubscription,
            };

            submitBtn.disabled = true;
            submitBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin me-1"></i> جاري الاعتماد والتسجيل...`;

            fetch('{{ route("groups.quickStoreSingle") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify(payload)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    modalElement.classList.remove('show');
                    modalElement.style.display = 'none';
                    document.body.classList.remove('modal-open');
                    document.body.style.overflow = ''; document.body.style.paddingRight = '';

                    document.querySelectorAll('.modal-backdrop').forEach(b => b.remove());

                    const overlay = document.getElementById('loading-overlay');
                    if (overlay) overlay.style.setProperty('display', 'none', 'important');

                    try {
                        payload.group_id = data.group_id;
                        localGroupsData[`${stageId}-${subjectId}`] = payload;

                        const row = document.getElementById(`row-${stageId}-${subjectId}`);
                        if (row) row.classList.add('row-saved-success');

                        const manageBtn = document.getElementById(`btn-manage-${stageId}-${subjectId}`);
                        if (manageBtn) {
                            manageBtn.className = "btn btn-sm btn-warning fw-bold px-3";
                            manageBtn.innerHTML = `<i class="fa-solid fa-pen-to-square me-1"></i> تعديل البيانات`;
                        }

                        const teacherSelect = document.getElementById('modal_teacher_id');
                        const teacherName = teacherSelect.options[teacherSelect.selectedIndex].text;
                        
                        const selectedDayValue = payload.day; 
                        const dayArabicText = selectedDayValue ? (daysTranslation[selectedDayValue] || selectedDayValue) : null;
                        const dayFinalView = dayArabicText ? `📅 ${dayArabicText}` : '📅 الوقت غير محدد';
                        
                        const subscriptionArabicText = subscriptionTranslation[payload.subscription_type] || 'اشتراك شهري';
                        const billingText = payload.payment_type === 'per_student' ? 'بالطالب' : 'بالمجموعة';

                        const summaryHtml = `
                            <span class="badge bg-success-subtle text-success border border-success-subtle py-1"><i class="fa-solid fa-circle-check me-1"></i> تم الحفظ بنجاح</span>
                            <div class="badge-summary"><i class="fa-solid fa-user-tie text-secondary me-1"></i> المدرس: ${teacherName} (${payload.teacher_fee} ج / ${billingText})</div>
                            <div class="badge-summary"><i class="fa-solid fa-money-bill-wave text-primary me-1"></i> الاشتراك: ${payload.student_fee} ج (${subscriptionArabicText})</div>
                            <div class="badge-summary">${dayFinalView} ${payload.start_time ? '⏰ من ' + payload.start_time : ''} ${payload.end_time ? ' إلى ' + payload.end_time : ''}</div>
                        `;
                        
                        const summaryContainer = document.getElementById(`summary-container-${stageId}-${subjectId}`);
                        if (summaryContainer) summaryContainer.innerHTML = summaryHtml;
                    } catch (domError) {
                        console.warn('تم تجاوز التحديث الشكلي الآمن:', domError);
                    }
                } else {
                    alert('❌ خطأ: ' + data.message);
                    const overlay = document.getElementById('loading-overlay');
                    if (overlay) overlay.style.setProperty('display', 'none', 'important');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('❌ فشل الاتصال بالسيرفر.');
                const overlay = document.getElementById('loading-overlay');
                if (overlay) overlay.style.setProperty('display', 'none', 'important');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = `<i class="fa-solid fa-floppy-disk me-1"></i> حفظ وإعتماد المجموعة`;
                const overlay = document.getElementById('loading-overlay');
                if (overlay) overlay.style.setProperty('display', 'none', 'important');
            });
        });
    });
</script>

@endsection