@extends('layouts.app')
@section('title', 'إدارة الطلاب')
@section('content')
<style>
/* أزرار الإضافة و الأرشيف */
    .btn-action {
        font-weight: 600;
        padding: 0.6rem 1.2rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        font-size: 0.95rem;
    }

    /* زر إضافة طالب جديد */
    .btn-add-student {
        background-color: #2e7d32; /* أخضر مريح للعين */
        color: #ffffff !important;
    }
    .btn-add-student:hover {
        background-color: #1b5e20;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
    }

    /* زر تحميل الإكسيل */
    .btn-download-excel {
        background-color: #0d6efd; /* أزرق صريح مريح */
        color: #ffffff !important;
    }
    .btn-download-excel:hover {
        background-color: #0b5ed7;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
    }

    /* زر أرشيف الطلبة */
    .btn-archive {
        background-color: #f8f9fa; /* خلفية هادئة فاتحة */
        color: #495057 !important;
        border: 1px solid #dee2e6 !important;
    }
    .btn-archive:hover {
        background-color: #e9ecef;
        color: #212529 !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    /* تعديل مظهر أيقونات الفونت أوسم ليتناسب مع الاتجاه العربي */
    .btn-action i {
        margin-left: 6px; /* مسافة جهة اليسار لأن الاتجاه عربي RTL */
    }

    /* لتوسيع الأزرار في الموبايل بالكامل وتوفير تجربة مستخدم ممتازة */
    @media (max-width: 575.98px) {
        .actions-wrapper .btn-action {
            width: 100%;
            margin-bottom: 0.25rem;
        }
    }



    /* تنسيق حاوية أزرار الطلاب */
    .student-actions-container {
        background: #f8f9fa;
        padding: 4px 8px;
        border-radius: 50px;
        border: 1px solid #e9ecef;
        display: inline-flex !important;
    }

    /* التنسيق الموحد لكل الأزرار */
    .btn-action-icon {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        padding: 0;
        border: none;
        background: transparent;
        transition: all 0.2s ease;
        color: #555;
        position: relative;
    }

    .btn-action-icon i { font-size: 0.95rem; }

    /* تأثيرات الـ Hover */
    .btn-action-icon:hover { background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transform: translateY(-1px); }

    .btn-print-pdf:hover { color: #dc3545; }
    .btn-edit-profile:hover { color: #0d6efd; }
    .btn-delete-trash:hover { color: #dc3545; background: #fff5f5; }
    .btn-placement-test:hover { color: #6610f2; }
    .btn-placement-test.has-tests { color: #6610f2; background: #f3ebff; }

    /* الـ Badge الخاص بالخصم داخل الزرار */
    .btn-discount-tag { 
        width: auto; 
        min-width: 45px; /* زودنا العرض الأدنى شوية */
        padding: 0 8px; 
        border-radius: 20px !important; 
        gap: 2px; 
    }
    .discount-badge { font-size: 0.75rem; font-weight: bold; }

    /* تنسيق زرار الأرشفة عند التفعيل */
    .btn-check:checked + .btn-archive-check {
        background: #6c757d;
        color: #fff;
    }

    /* ضبط زرار الواتساب ليتناسب مع الصف */
    .whatsapp-adjuster .btn {
        width: 100% !important;
        height: 38px !important; /* نفس ارتفاع إخواته */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        padding: 0 !important;
        font-size: 1.1rem !important; /* حجم الأيقونة */
    }

    /* لو فيه نص جوه زرار الواتساب وعايز تخفيه في الموبايل */
    @media (max-width: 768px) {
        .whatsapp-adjuster .btn span {
            display: none; 
        }
    }

    /* --- تنسيق قائمة الخصومات (Dropdown Menu) --- */
    .student-actions-group .dropdown-menu {
        z-index: 1060 !important; /* لضمان ظهورها فوق أي عنصر آخر */
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        border-radius: 12px;
        margin-top: 10px !important;
        min-width: 180px;
    }

    .dropdown-item {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
        transition: 0.2s;
        text-align: right; /* للغة العربية */
    }

    .dropdown-item.active {
        background-color: #f0f5ff !important;
        color: #0d6efd !important;
        font-weight: bold;
    }

    .dropdown-item:hover:not(.active) {
        background-color: #f8f9fa;
    }

    /* --- تنسيق حالة الأرشفة (Checkbox) --- */
    .btn-check:checked + .btn-archive {
        background: #6c757d !important;
        color: #fff !important;
    }

    /* تأثير دخول ناعم للمنيو */
    .animated.fadeIn {
        animation: fadeIn 0.2s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* تأثير الـ Hover لأزرار الاختبار */
    .btn-test-add:hover { color: #0d6efd !important; background: #f0f5ff !important; }
    .btn-test-success:hover { color: #198754 !important; background: #f0fff4 !important; }

    @media (max-width: 768px) {
        /* تأكد من أن الجسم لا يحبس الموديل */
        body.modal-open {
            position: fixed;
            width: 100%;
        }

        .modal {
            /* الـ 2000 ممتازة، لكن التأكد من الـ position أهم */
            position: fixed !important;
            z-index: 2050 !important; 
            --bs-modal-zindex: 2050;
            --bs-backdrop-zindex: 2040;
        }

        .modal-backdrop {
            /* يجب أن يكون دائماً أقل من الموديل */
            z-index: 2040 !important;
        }

        /* هذا السطر قد يسبب مشاكل في التصميم، جرب حذفه أو استبداله */
        .student-actions-group {
            position: visible !important; 
            transform: none !important; /* الهواتف أحياناً تعتبر الـ transform طبقة جديدة */
        }

    }


</style>

<div class="container">
    <x-header title="إدارة الطلاب" />
    
    <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-2 mb-4 actions-wrapper">
        <div class="d-flex flex-nowrap gap-2 w-100 w-md-auto">
            @canany(['student.create'])
                <a href="{{ route('students.create') }}" class="btn btn-action-sm btn-student-primary shadow-sm flex-shrink-0">
                    <i class="fa-solid fa-plus-circle"></i> <span>طالب جديد</span>
                </a>

                <div class="dropdown flex-shrink-0">
                    <button class="btn btn-action-sm btn-student-outline dropdown-toggle shadow-sm" type="button" id="bulkActionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-layer-group"></i> <span>عمليات جماعية (دفعة واحدة)</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end text-end shadow" aria-labelledby="bulkActionsDropdown">
                        <li>
                            <a class="dropdown-item py-2" href="{{ route('students.download-template') }}">
                                <i class="fas fa-file-excel text-success me-2"></i> تحميل النموذج الفارغ
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item py-2" href="#" data-bs-toggle="modal" data-bs-target="#importExcelModal">
                                <i class="fa-solid fa-cloud-arrow-up text-primary me-2"></i> رفع ملف إكسيل
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item py-2" href="{{ route('students.download-incomplete') }}">
                                <i class="fa-solid fa-file-pen text-warning me-2"></i> تحميل البيانات غير المكتملة
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item py-2" href="{{ route('students.export_all') }}">
                                <i class="fa-solid fa-download text-info me-2"></i> تحميل كل بيانات الطلاب
                            </a>
                        </li>
                    </ul>
                </div>
            @endcanany
        </div>

        <div class="w-100 w-md-auto text-end mt-1 mt-md-0">
            @canany(['student.archive'])
                <a href="{{ route('students.archive') }}" class="btn btn-action-sm btn-student-archive shadow-sm w-100 w-md-auto justify-content-center">
                    <i class="fa-solid fa-box-archive"></i> 
                    <span>الأرشيف</span>
                    <span id="archive-count-badge" class="badge rounded-pill bg-warning text-dark fw-bold ms-1">{{ $archivedCount }}</span>
                </a>
            @endcanany
        </div>
    </div>

    {{-- رفع بيانات الطلاب --}}
@canany(['student.create' ,'student.edit'])
<div class="modal fade" id="importExcelModal" tabindex="-1" aria-labelledby="importExcelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header bg-success text-white" style="border-top-left-radius: 12px; border-top-right-radius: 12px;" dir="ltr">
                <h5 class="modal-title fw-bold" id="importExcelModalLabel">
                    <i class="fa-solid fa-file-import me-1"></i> رفع بيانات الطلاب عبر الإكسيل
                </h5>
                <button type="button" class="btn-close btn-close-white m-0 ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="importExcelForm" action="{{ route('students.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3 text-right">
                        <label for="excel_file" class="form-label fw-bold text-secondary mb-2">اختر ملف نموذج الطلاب المعبأ:</label>
                        <input type="file" name="excel_file" id="excel_file" class="form-control form-control-lg" accept=".xlsx, .xls" required>
                        <div class="form-text text-muted mt-2">
                            <i class="fa-solid fa-circle-info text-info me-1"></i> يرجى التأكد من عدم التعديل على أعمدة النموذج الأساسية لتجنب أخطاء القراءة.
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light d-flex justify-content-between" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
                    <button type="button" class="btn btn-secondary fw-bold px-3" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-success fw-bold px-4">
                        <i class="fa-solid fa-cloud-arrow-up me-1"></i> بدء الرفع الآن
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
@endcanany

    <x-alert />

    {{-- فورم البحث والفلترة الموحد --}}
    <form action="{{ route('students.index') }}" method="GET" id="ajaxFilterForm">
        <div class="row">
            {{-- حقل البحث النصي --}}
            <div class="col-md-12 mb-3">
                <div class="input-group input-group-sm">
                    <input  type="text"
                            name="search"
                            value="{{ request('search') }}"
                            class="form-control filter-input"
                            placeholder="بحث (بالإسم - رقم قومى - تليفون - كود خارجى)">
                </div>
            </div>

            {{-- الأكورديون الخاص بالفلاتر الإضافية --}}
            <div class="col-md-12">
                <div class="accordion mb-3" id="filterAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#Filter-selected">
                                تصفية متقدمة
                            </button>
                        </h2>
                        <div id="Filter-selected" class="accordion-collapse collapse">
                            <div class="accordion-body">
                                <div class="row g-2">
                                    {{-- Church --}}
                                    <div class="col-md-3">
                                        <select name="church_id" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">كل الكنائس</option>
                                            @foreach ($churches as $church)
                                                <option value="{{ $church->id }}" {{ request('church_id') == $church->id ? 'selected' : '' }}>{{ $church->name }} {{ $church->address ? '(' . $church->address . ')' : '' }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Gender --}}
                                    <div class="col-md-3">
                                        <select name="gender" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">النوع (الكل)</option>
                                            <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>ذكر</option>
                                            <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>أنثى</option>
                                        </select>
                                    </div>

                                    {{-- Stage --}}
                                    <div class="col-md-3">
                                        <select name="stage_id" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">كل المراحل</option>
                                            @foreach ($stages as $stage)
                                                <option value="{{ $stage->id }}" {{ request('stage_id') == $stage->id ? 'selected' : '' }}>{{ $stage->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Education Type --}}
                                    <div class="col-md-3">
                                        <select name="school_type" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">نوع التعليم</option>
                                            <option value="public" {{ request('school_type') == 'public' ? 'selected' : '' }}>حكومى</option>
                                            <option value="private" {{ request('school_type') == 'private' ? 'selected' : '' }}>خاص</option>
                                        </select>
                                    </div>
                                    
                                    {{-- study Type --}}
                                    <div class="col-md-3">
                                        <select name="study_type" class="form-select form-select-sm filter-input tom-select">
                                            <option value="0">نوع الدراسة</option>
                                            <option value="arabic" {{ request('study_type') == 'عربي' ? 'selected' : '' }}>عربي</option>
                                            <option value="experimental" {{ request('study_type') == 'تجريبي' ? 'selected' : '' }}>تجريبي</option>
                                        </select>
                                    </div>

                                    {{-- Discount --}}
                                    <div class="col-md-3">
                                        <select name="discount_id" class="form-select form-select-sm filter-input tom-select"  id="GroupChurchFilter" aria-label="Floating label select example">
                                            <option value="0" selected>الخصم (الكل)</option>
                                            <option value="">بدون خصم</option>
                                            @foreach ($discounts as $discount)
                                                <option value="{{ $discount->id }}" {{ request('discount_id') == '$discount->id' ? 'selected' : '' }}>{{ $discount->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="text-center col-12 mt-3">
                                        <button type="button" id="resetFilters" class="btn btn-outline-secondary btn-sm">إعادة ضبط</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {{-- الحاوية التي سيتم تحديثها بالـ AJAX --}}
    <div id="students-container">
        @include('students._student_list')
    </div>

</div>

@canany(['placement_test.create', 'placement_test.update'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-placement-test-modal />
@endcanany

@canany(['student.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="students" />
@endcanany

<livewire:finance-modal />

{{-- تغيير الخصم --}}
<script>
    document.addEventListener('click', function (e) {
        const optionLink = e.target.closest('.discount-option');
        if (!optionLink) return;
        e.preventDefault();

        const studentId = optionLink.getAttribute('data-student');
        const discountId = optionLink.getAttribute('data-value');
        
        // تحديد القائمة والزرار الحالي
        const dropdownMenu = optionLink.closest('.dropdown-menu');
        const currentDropdown = optionLink.closest('.dropdown');
        const dropdownBtn = currentDropdown.querySelector('[data-bs-toggle="dropdown"]');

        if (dropdownBtn.disabled) return;

        // 1. قفل القائمة وحفظ شكل الزرار
        dropdownMenu.classList.remove('show');
        dropdownBtn.classList.remove('show');
        const originalContent = dropdownBtn.innerHTML;

        // 2. حالة التحميل
        dropdownBtn.disabled = true;
        dropdownBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

        fetch(`/students/${studentId}/discount`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ discount_id: discountId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // استخراج الرقم من النص (مثلاً "خصم 10%" ياخد 10)
                const match = optionLink.innerText.match(/(\d+)%/);
                const newPercentage = match ? match[1] : '0';

                // ==========================================
                // 🔥 التعديل السحري: إرجاع وتحديث الزرار الحالي فوراً
                // ==========================================
                dropdownBtn.disabled = false;
                dropdownBtn.innerHTML = originalContent; // طيرنا السبنر ورجعنا الأيقونة والـ badge
                
                // هنا بنحدث الرقم جوه الـ badge الحالي (سواء كان الكلاس اسمه discount-badge أو discount-value-display)
                const currentBadge = dropdownBtn.querySelector('.discount-badge');
                if (currentBadge) {
                    // استخدام الـ padding اللطيف بتاعك لو حابب تخليه 3 أرقام (010%)
                    currentBadge.innerText = newPercentage.padStart(3, '0');
                }

                // تأثير لون النجاح المؤقت للزرار الحالي
                dropdownBtn.classList.add('text-success');
                setTimeout(() => dropdownBtn.classList.remove('text-success'), 1500);

                // ==========================================
                // لو عندك أزرار تانية فعلاً للطلب وعايز تلف عليها:
                // ==========================================
                const allButtons = document.querySelectorAll(`[id*="discountMenu"][id$="${studentId}"]`);
                allButtons.forEach(btn => {
                    if (btn !== dropdownBtn) { // تخطي الحالي لأننا حدثناه فوق خلاص
                        btn.disabled = false;
                        const span = btn.querySelector('.discount-value-display') || btn.querySelector('.discount-badge');
                        if (span) {
                            span.innerText = newPercentage.padStart(3, '0');
                        }
                    }
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            dropdownBtn.disabled = false;
            dropdownBtn.innerHTML = originalContent;
        });
    });
</script>

{{-- كود معالجة الأرشفة - يعمل على الموبايل والكمبيوتر --}}
<script>
    // استخدام الـ Event Delegation لضمان العمل مع الـ Ajax والترشيح
    document.addEventListener('change', function (e) {
        if (e.target.classList.contains('archive-toggle')) {
            const checkbox = e.target;
            const studentId = checkbox.getAttribute('data-student');
            const isArchived = checkbox.checked ? 1 : 0;

            // تحديد السطر أو الكارت المستهدف
            const containerElement = checkbox.closest('tr') || checkbox.closest('.card');
            const spinner = containerElement ? containerElement.querySelector('.spinner-border') : null;
            const textLabel = containerElement ? containerElement.querySelector('.label-text') : null;

            // 1. واجهة المستخدم: حالة التحميل
            if (spinner) spinner.classList.remove('d-none');
            if (textLabel) textLabel.classList.add('d-none');
            checkbox.disabled = true;

            // 2. إرسال الطلب للسيرفر
            fetch(`/students/${studentId}/archive`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ is_archived: isArchived })
            })
            .then(response => {
                if (!response.ok) return response.json().then(err => { throw err; });
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // تحديث العداد في القائمة العلوية (Badge)
                    const badge = document.getElementById('archive-count-badge');
                    if (badge && data.archivedCount !== undefined) {
                        badge.textContent = data.archivedCount;
                    }

                    // 3. الأنيميشن: إخفاء العنصر بسلاسة من الصفحة الحالية
                    if (containerElement) {
                        containerElement.style.transition = 'all 0.4s ease-out';
                        containerElement.style.opacity = '0';
                        containerElement.style.transform = 'scale(0.95) translateX(-20px)';

                        setTimeout(() => {
                            containerElement.remove();
                            // لو الصفحة بقت فاضية، اعمل ريفريش لإظهار رسالة "لا يوجد بيانات"
                            const remaining = document.querySelectorAll('.archive-toggle').length;
                            if (remaining === 0) {
                                location.reload();
                            }
                        }, 400);
                    }
                }
            })
            .catch(error => {
                console.error('Archive Error:', error);
                // استعادة الحالة في حال الفشل
                checkbox.checked = !checkbox.checked;
                checkbox.disabled = false;
                if (spinner) spinner.classList.add('d-none');
                if (textLabel) textLabel.classList.remove('d-none');
                
                alert('عفواً: ' + (error.message || 'حدث خطأ في الاتصال بالسيرفر'));
            });
        }
    });
</script>

{{-- Filter --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 1. تعريف العناصر الأساسية
        const filterForm = document.getElementById('ajaxFilterForm');
        const container = document.getElementById('students-container');
        const searchInput = document.querySelector('input[name="search"]');
        const resetBtn = document.getElementById('resetFilters');
        const allFilters = document.querySelectorAll('.filter-input');
        
        let debounceTimer;

        // 2. الدالة المركزية لجلب البيانات (AJAX Fetch)
        function fetchResults() {
            const formData = new FormData(filterForm);
            const params = new URLSearchParams(formData).toString();
            
            // تحديث الرابط في المتصفح دون إعادة تحميل الصفحة (للحفاظ على حالة البحث)
            window.history.pushState({}, '', `${window.location.pathname}?${params}`);

            // تأثير بصري بسيط أثناء التحميل
            container.style.opacity = '0.5';

            fetch(`${window.location.pathname}?${params}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest' // ضروري ليتعرف عليه Laravel كطلب AJAX
                }
            })
            .then(response => {
                if (!response.ok) throw new Error('حدث خطأ في السيرفر');
                return response.json();
            })
            .then(data => {
                // تحديث محتوى الجدول والكروت معاً
                container.innerHTML = data.html;
                container.style.opacity = '1';
            })
            .catch(error => {
                console.error('Error:', error);
                container.style.opacity = '1';
            });
        }

    // 3. مراقبة التغييرات في الفلاتر
    allFilters.forEach(input => {
        // إذا كان العنصر قائمة منسدلة (Select) -> تنفيذ فوري
        if (input.tagName === 'SELECT') {
            input.addEventListener('change', fetchResults);
        }
        
        // إذا كان العنصر مربع نص (البحث) -> تنفيذ بعد توقف الكتابة (Debounce)
        if (input.tagName === 'INPUT' && input.type === 'text') {
            input.addEventListener('input', function() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(fetchResults, 700); 
            });
        }
    });

    // 4. منع إرسال الفورم التقليدي عند ضغط Enter
    filterForm.addEventListener('submit', function (e) {
        e.preventDefault();
        fetchResults();
    });

    // 5. تشغيل زر إعادة الضبط (Reset)
    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            // التوجيه للرابط النظيف (أضمن وأسرع طريقة لتنظيف الفلاتر والـ URL)
                window.location.href = window.location.pathname;
            });
        }

        // 6. التعامل مع الـ Pagination (الترقيم) بالـ AJAX
        // نستخدم Delegation لأن روابط الصفحات تتغير ديناميكياً
        container.addEventListener('click', function(e) {
            const link = e.target.closest('.pagination a');
            if (link) {
                e.preventDefault();
                const url = new URL(link.href);
                const page = url.searchParams.get('page');
                
                // إضافة رقم الصفحة للـ Query الحالي
                const formData = new FormData(filterForm);
                const params = new URLSearchParams(formData);
                params.set('page', page);

                // استدعاء البيانات للصفحة الجديدة
                window.history.pushState({}, '', `${window.location.pathname}?${params.toString()}`);
                
                fetch(`${window.location.pathname}?${params.toString()}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(response => response.json())
                .then(data => {
                    container.innerHTML = data.html;
                    window.scrollTo({ top: 0, behavior: 'smooth' }); // صعود للأعلى بسلاسة
                });
            }
        });
    });
</script>

{{-- Exam_Modal --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. تعريف العناصر
        const modalElement = document.getElementById('placementModal');
        const modalStudentName = document.getElementById('modalStudentName');
        const modalStudentIdInput = document.getElementById('modal_student_id');
        const testsTableBody = document.getElementById('testsTableBody');
        const placementForm = document.getElementById('unified-placement-form');
        const testListWrapper = document.getElementById('test-list-wrapper');
        const testFormWrapper = document.getElementById('test-form-wrapper');

        // 2. الدوال العالمية (Global) للتبديل بين الجدول والفورم
        window.showPlacementForm = function() {
            testListWrapper.classList.add('d-none');
            testFormWrapper.classList.remove('d-none');
        }

        window.hidePlacementForm = function() {
            testListWrapper.classList.remove('d-none');
            testFormWrapper.classList.add('d-none');
            if(placementForm) placementForm.reset();
            document.getElementById('modal_test_id').value = '';
        }

        function openModal() {
            modalElement.classList.add('show');
            modalElement.style.display = 'block';
            modalElement.removeAttribute('aria-hidden');
            document.body.classList.add('modal-open');
            
            let backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.id = 'manual-backdrop';
            document.body.appendChild(backdrop);
        }

        function closeModal() {
            modalElement.classList.remove('show');
            modalElement.style.display = 'none';
            modalElement.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('modal-open');
            const backdrop = document.getElementById('manual-backdrop');
            if (backdrop) backdrop.remove();
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            window.hidePlacementForm();
        }

        // 3. مراقبة الضغطات (Event Delegation)
        document.addEventListener('click', function(event) {
            // أ. فتح الموديل من جدول الطلاب
            const btn = event.target.closest('.open-placement-modal');
            if (btn) {
                event.preventDefault();
                const studentId = btn.getAttribute('data-id');
                const studentName = btn.getAttribute('data-name');
                modalStudentName.textContent = studentName;
                modalStudentIdInput.value = studentId;
                window.hidePlacementForm(); 
                openModal();
                fetchStudentTests(studentId);
                return;
            }

            // ب. زرار إضافة نتيجة جديدة
            if (event.target.closest('.btn-add-test')) {
                window.showPlacementForm();
                return;
            }

            // ج. زرار التعديل
            const editBtn = event.target.closest('.edit-test-btn');
            if (editBtn) {
                event.preventDefault();
                try {
                    const testData = JSON.parse(editBtn.getAttribute('data-test'));
                    fillFormForEdit(testData);
                } catch (e) { console.error("Error parsing test data", e); }
                return;
            }

            // د. زرار الحذف (تم حذف التأكيد هنا)
            const deleteBtn = event.target.closest('.delete-test-btn');
            if (deleteBtn) {
                event.preventDefault();
                const testId = deleteBtn.getAttribute('data-id');
                // تم إزالة الـ Alert والحذف يتم فوراً
                deleteTest(testId, deleteBtn);
                return;
            }

            // هـ. إغلاق الموديل
            if (event.target.closest('[data-bs-dismiss="modal"]') || event.target === modalElement) {
                closeModal();
            }
        });

        // 4. جلب بيانات الاختبارات
        function fetchStudentTests(studentId) {
            testsTableBody.innerHTML = '<tr><td colspan="5" class="text-center py-4"><i class="fas fa-spinner fa-spin"></i> جاري التحميل...</td></tr>';
            fetch(`/placement_tests/student/${studentId}`)
                .then(response => response.json())
                .then(data => {
                    let html = '';
                    if (data.success && data.tests.length > 0) {
                        data.tests.forEach(test => {
                            const testJson = JSON.stringify(test).replace(/'/g, "&apos;");
                            html += `
                                <tr>
                                    <td>${test.exam_date}</td>
                                    <td class="fw-bold text-primary">${test.arabic_result || '-'}</td>
                                    <td class="fw-bold text-success">${test.english_result || '-'}</td>
                                    <td class="fw-bold text-danger">${test.math_result || '-'}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm text-warning edit-test-btn" data-test='${testJson}' title="تعديل">
                                            <i class="fa-solid fa-pen"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm text-danger delete-test-btn" data-id="${test.id}" title="حذف سريع">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>`;
                        });
                    } else {
                        html = '<tr><td colspan="5" class="text-center text-muted py-4">لا توجد اختبارات مسجلة</td></tr>';
                    }
                    testsTableBody.innerHTML = html;
                });
        }

        // 5. دالة الحذف المباشرة
        function deleteTest(testId, btnElement) {
            // تغيير شكل الأيقونة لتعطي انطباع بالتحميل أثناء الحذف
            const icon = btnElement.querySelector('i');
            icon.className = 'fas fa-spinner fa-spin';
            btnElement.style.pointerEvents = 'none'; // منع الضغط المتكرر

            fetch(`/placement_tests/delete/${testId}`, {
                method: 'DELETE',
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest', 
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload(); // تحديث الصفحة لرؤية النتيجة
                } else {
                    alert(data.message || 'حدث خطأ أثناء الحذف');
                    icon.className = 'fa-solid fa-trash';
                    btnElement.style.pointerEvents = 'auto';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                icon.className = 'fa-solid fa-trash';
                btnElement.style.pointerEvents = 'auto';
            });
        }

        // 6. دالة ملء الفورم للتعديل
        window.fillFormForEdit = function(test) {
            placementForm.reset();
            document.getElementById('modal_test_id').value = test.id;
            document.getElementById('input_exam_date').value = test.exam_date;
            document.getElementById('input_arabic_degree').value = test.arabic_degree;
            document.getElementById('input_english_degree').value = test.english_degree;
            document.getElementById('input_math_degree').value = test.math_degree;
            document.getElementById('input_notes').value = test.notes || '';
            
            const levels = { 'arabic': test.foundation_arabic_level, 'english': test.foundation_english_level, 'math': test.foundation_math_level };
            for (const [sub, val] of Object.entries(levels)) {
                const radio = document.querySelector(`input[name="${sub}_level"][value="${val}"]`);
                if (radio) radio.checked = true;
            }
            window.showPlacementForm();
        }

        // 7. حفظ البيانات
        if (placementForm) {
            placementForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const saveBtn = document.getElementById('save_test_btn');
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';

                fetch('{{ route("placement_tests.save") }}', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: new FormData(this)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload(); 
                    } else {
                        alert(data.message);
                        saveBtn.disabled = false;
                        saveBtn.innerHTML = '<i class="fa-solid fa-save ms-1"></i> حفظ بيانات الاختبار';
                    }
                })
                .catch(error => {
                    alert('حدث خطأ فني');
                    saveBtn.disabled = false;
                });
            });
        }
    });
</script>

{{-- Delete --}}
<script>
    // بنراقب أي ضغطة على زراير الحذف
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.delete-ajax-trigger');
        if (btn) {
            // 1. نجيب البيانات من الزرار
            const studentId = btn.getAttribute('data-id');
            const studentName = btn.getAttribute('data-name');
            
            // 2. نوصل للمودال الثابت
            const modalElement = document.getElementById('deleteModal0');
            
            if (modalElement) {
                // 3. تحديث رابط الحذف (الـ Action)
                const form = modalElement.querySelector('form');
                if (form) {
                    form.setAttribute('action', `/students/${studentId}`);
                }
                
                // 4. تحديث اسم الطالب في نص الرسالة
                const modalBody = modalElement.querySelector('.modal-body');
                if (modalBody) {
                    modalBody.innerHTML = `هل أنت متأكد من حذف الطالب: <strong>${studentName}</strong>؟`;
                }
            }
        }
    });
</script>

{{-- WhatsApp --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // بنمسك الضغطة على الزرار يدوياً
        $(document).on('click', '.btn-whatsapp-trigger', function(e) {
            e.preventDefault();
            
            // بنجيب الموديل اللي جوه الـ Component ده بالظبط
            var modal = $(this).siblings('.modal'); 
            
            // بنظهره يدوياً "Force Show"
            modal.css({
                'display': 'block',
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'width': '100%',
                'height': '100%',
                'z-index': '99999'
            }).addClass('show');

            // بنشيل أي Backdrop قديمة عاملة الـ Error
            $('.modal-backdrop').remove();
        });

        // زرار الإغلاق
        $(document).on('click', '[data-bs-dismiss="modal"]', function() {
            $(this).closest('.modal').hide().removeClass('show');
        });
    });
</script>

{{-- Import Excel --}}
<script>
    document.getElementById('importExcelForm').addEventListener('submit', function() {
        // 1. تشغيل الـ Preloader فوراً عند الضغط
        $('.preload, #preload, .loader-wrapper').fadeIn();
        $('#importExcelModal').modal('hide');

        // 2. بما إن الـ iframe بيستقبل الملف في الخلفية، الصفحة الأساسية مش هتعلق!
        // هننتظر 3.5 ثانية (وهي المدة الكافية لإنهاء الرفع وبدء التحميل) ثم نخفي الـ Preloader ونعمل ريفريش ينعش الجدول
        setTimeout(function() {
            $('.preload, #preload, .loader-wrapper').fadeOut();
            window.location.reload();
        }, 3500);
    });
</script>

{{-- Preloader --}}
<script>
    document.getElementById('importExcelForm').addEventListener('submit', function() {
        // تعطيل الزر لتجنب الضغط المكرر
        const btn = this.querySelector('button[type="submit"]');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> جاري المعالجة...';
    });
</script>

@endsection