@extends('layouts.app')
@section('title', 'إدارة أرشيف الطلاب')
@section('content')
<style>
    /* تنسيق حاوية الأزرار */
    .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="إدارة أرشيف الطلاب" />
    
    @canany(['student.create'])
        <a href="{{ route('students.index') }}" class="btn btn-primary mb-3 float-start">
            عودة للطلبة <i class="fa-solid fa-arrow-left"></i>
        </a>
    @endcanany
<br>
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    {{-- فورم البحث والفلترة الموحد --}}
    <form action="{{ route('students.index') }}" method="GET" id="ajaxFilterForm">
        <div class="row">
            {{-- حقل البحث النصي --}}
            <div class="col-md-6 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 {{ request()->except('search', 'page') ? 'show' : '' }}">
                            <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 }}</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>

                                    {{-- 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(['student.delete'])
    @isset ($student->id)
        <x-delete-modal :id="$student->id" model="students" />    
    @endisset
@endcanany


{{-- كود معالجة الأرشفة - يعمل على الموبايل والكمبيوتر --}}
<script>
    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.querySelector('.spinner-border');
            const text = containerElement.querySelector('.label-text');

            // 1. إظهار حالة التحميل (Loading)
            if (spinner) spinner.classList.remove('d-none');
            if (text) text.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) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // تحديث عداد الأرشيف في القائمة العلوية
                    const badge = document.getElementById('archive-count-badge');
                    if (badge && data.archivedCount !== undefined) {
                        badge.textContent = data.archivedCount;
                    }

                    // 3. تأثير الاختفاء السلس (Animation)
                    if (containerElement) {
                        containerElement.style.transition = 'all 0.5s ease';
                        containerElement.style.opacity = '0';
                        containerElement.style.transform = 'scale(0.9) translateX(20px)';

                        // الحذف النهائي من الصفحة بعد انتهاء الأنيميشن
                        setTimeout(() => {
                            containerElement.remove();

                            // إذا فضيت الصفحة تماماً، يفضل عمل ريفريش لإظهار رسالة "لا يوجد بيانات"
                            const mainContainer = document.getElementById('students-container');
                            const remainingItems = document.querySelectorAll('.archive-toggle').length;
                            if (remainingItems === 0) {
                                location.reload();
                            }
                        }, 500);
                    }
                } else {
                    throw new Error(data.message || 'حدث خطأ غير معروف');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // إعادة الحالة كما كانت في حال حدوث خطأ
                checkbox.checked = !checkbox.checked;
                checkbox.disabled = false;
                if (spinner) spinner.classList.add('d-none');
                if (text) text.classList.remove('d-none');
                
                alert('عفواً، تعذر إتمام العملية: ' + error.message);
            });
        }
    });
</script>

<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>


@endsection