@extends('layouts.app')
@section('title', 'إدارة المجموعات الدراسية')
@section('content')
<div class="container">
    <x-header title="إدارة المجموعات الدراسية" />
    
    @canany(['group.create'])
        <a href="{{ route('groups.create') }}" class="btn btn-success mb-3">
            <i class="fa-solid fa-plus"></i> إضافة مجموعة جديدة
        </a>
        <a href="{{ route('groups.bulkCreate') }}" class="btn btn-outline-success mb-3">
            <i class="fa-solid fa-plus"></i> إضافة مجموعات جديدة
        </a>
    @endcanany

    <x-alert />

    @if(empty($groups))
        <div class="alert alert-warning fw-bolder text-center">ليس لديك صلاحية للتعامل على المجموعات، يرجى التواصل مع مدير النظام لإضافة كنيسة لك أولاً.</div>
    @else

    {{-- Selectes Filter --}}    
    <form action="{{ route('groups.index') }}" method="GET" id="filterForm">    
        <div class="row g-2 mb-3">
            {{-- Church Filter --}}
            <div class="col-md-3 mt-3">
                <select name="church_id" class="form-select form-select-sm filter-input tom-select" id="GroupChurchFilter">
                    <option value="0" selected>كل الكنائس</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>

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

            {{-- Teacher Filter --}}
            <div class="col-md-3 mt-3">
                <select name="teacher_id" class="form-select form-select-sm filter-input tom-select" id="GroupTeacherFilter" autocomplete="off">
                    <option value="0" selected>كل المدرسين</option>
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->id }}" {{ request('teacher_id') == $teacher->id ? 'selected' : '' }}>{{ $teacher->name }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Day Filter --}}
            <div class="col-md-3 mt-3">
                <select name="day" class="form-select form-select-sm filter-input tom-select" id="GroupDayFilter">
                    <option value="0" selected>كل الأيام</option>
                    <option value="Saturday" {{ request('day') == 'Saturday' ? 'selected' : '' }}>السبت</option>
                    <option value="Sunday" {{ request('day') == 'Sunday' ? 'selected' : '' }}>الأحد</option>
                    <option value="Monday" {{ request('day') == 'Monday' ? 'selected' : '' }}>الاثنين</option>
                    <option value="Tuesday" {{ request('day') == 'Tuesday' ? 'selected' : '' }}>الثلاثاء</option>
                    <option value="Wednesday" {{ request('day') == 'Wednesday' ? 'selected' : '' }}>الأربعاء</option>
                    <option value="Thursday" {{ request('day') == 'Thursday' ? 'selected' : '' }}>الخميس</option>
                    <option value="Friday" {{ request('day') == 'Friday' ? 'selected' : '' }}>الجمعة</option>
                </select>
            </div>

            {{-- payment_type Filter --}}
            <div class="col-md-3 mt-3">
                <select name="payment_type" class="form-select form-select-sm filter-input tom-select" id="GroupPayment_typeFilter">
                    <option value="0" selected>كل انواع الدفع</option>
                    <option value="per_group" {{ request('payment_type') == 'per_group' ? 'selected' : '' }}>دفع بالمجموعة</option>
                    <option value="per_student" {{ request('payment_type') == 'per_student' ? 'selected' : '' }}>دفع بالطالب</option>
                </select>
            </div>

            {{-- supported Filter --}}
            <div class="col-md-3 mt-3">
                <select name="supported" class="form-select form-select-sm filter-input tom-select" id="GroupSupportedFilter">
                    <option value="0" selected>الكل (مدعومة & غير مدعومة)</option>
                    <option value="true" {{ request('supported') == 'true' ? 'selected' : '' }}>مدعومة</option>
                    <option value="false" {{ request('supported') == 'false' ? 'selected' : '' }}>غير مدعومة</option>
                </select>
            </div>

            {{-- active Filter --}}
            <div class="col-md-3 mt-3">
                <select name="active" class="form-select form-select-sm filter-input tom-select" id="GroupActiveFilter">
                    <option value="0" selected>الكل (مفعل & غير مفعل)</option>
                    <option value="true" {{ request('active') == 'true' ? 'selected' : '' }}>مفعل</option>
                    <option value="false" {{ request('active') == 'false' ? 'selected' : '' }}>غير مفعل</option>
                </select>
            </div>

            <div class="text-center col-12 mt-3">
                <input class="btn btn-outline-primary btn-sm" type="reset" value="إعادة ضبط الفلاتر">
            </div>
        </div>
    </form>

    <div id="groupsTable">
        <div class="accordion mt-3" id="groupsAccordion">
            @forelse ($groups as $group)
                <div class="accordion-item"
                        data-church="{{ $group->church_id }}"
                        data-stage="{{ $group->stage_id }}"
                        data-subject="{{ $group->subject_id }}"
                        data-teacher="{{ $group->teacher_id }}"
                        data-day="{{ $group->day }}"
                        data-payment-type="{{ $group->payment_type }}"
                        data-supported="{{ $group->supported ? 'true' : 'false' }}"
                        data-active="{{ $group->active ? 'true' : 'false' }}">
                    
                    <h2 class="accordion-header" id="heading{{ $group->id }}">
                        <button class="accordion-button collapsed {{ $group->active ? 'text-success' : 'text-danger' }}" 
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $group->id }}">
                            
                            {{-- استخدام flex-column لجعل العناصر تترتب فوق بعضها في الموبايل، وبجانب بعضها في الشاشات الكبيرة --}}
                            <div class="d-flex flex-column flex-md-row align-items-md-center w-100 gap-1 gap-md-3">
                                
                                {{-- السطر الأول: رقم المجموعة والنوع --}}
                                <div class="d-flex align-items-center mb-1 mb-md-0">
                                    <span class="badge bg-dark">{{ $loop->iteration + ($groups->currentPage() - 1) * $groups->perPage() }}</span>
                                    @if($group->type === 'foundation')
                                        <span class="badge bg-info text-dark ms-2">تأسيس</span>
                                    @endif
                                </div>

                                {{-- السطر الثاني: اسم المجموعة (بخط واضح) --}}
                                <div class="text-wrap text-end fw-bold fs-6">
                                    {{ $group->name }}
                                </div>

                                {{-- السطر الثالث: حالة الاكتمال (في أقصى اليمين في الشاشات الكبيرة) --}}
                                <div class="ms-md-auto mt-1 mt-md-0">
                                    @if(!$group->teacher_id || $group->schedules->isEmpty())
                                        <span class="badge bg-danger" style="font-size: 0.7rem;">
                                            <i class="fa-solid fa-triangle-exclamation"></i> غير مكتمل
                                        </span>
                                    @else
                                        <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle">
                                            <i class="fa-solid fa-check-double"></i> مكتمل
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </button>
                    </h2>
                    
                    <div id="collapse{{ $group->id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $group->id }}" data-bs-parent="#groupsAccordion">
                        <div class="accordion-body d-md-block">

                            <h6 class="fw-bold text-primary mb-2">
                                <i class="fa-solid fa-info-circle me-2"></i> بيانات أساسية
                            </h6>
                            <div class="row">
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>العام الدراسي:</strong> {{ $group->academicYear->year }} - {{ $group->academicYear->term_name }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>الكنيسة:</strong> {{ $group->church->name }} {{ $group->church->address ? '(' . $group->church->address . ')' : '' }}
                                </div>
                                
                                {{-- 3️⃣ عرض المراحل بشكل ديناميكي حسب نوع المجموعة --}}
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>المرحلة:</strong> 
                                    @if($group->type === 'foundation')
                                        @if($group->stages->isEmpty())
                                            <span class="text-muted">مشتركة لجميع المراحل</span>
                                        @else
                                            {{ $group->stages->pluck('name')->implode(' & ') }}
                                        @endif
                                    @else
                                        {{ $group->stage->name ?? 'غير محددة' }}
                                    @endif
                                </div>

                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>المادة:</strong> {{ $group->subject->name }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>المدرس:</strong> {{ $group->teacher?->title }} {{ $group->teacher?->name }}
                                </div>
                                @if ( $group->whatsapp_link )
                                    <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                        <a class="text-success" href="{{ $group->whatsapp_link }}" target="_blank" rel="noopener noreferrer">
                                            <strong>جروب الواتساب</strong>
                                        </a>
                                    </div>    
                                @endif
                            </div>

                            <hr class="my-3">

                            <h6 class="fw-bold text-success mb-2">
                                <i class="fa-regular fa-clock me-2"></i> المواعيد الأسبوعية للمجموعة
                            </h6>
                            <div class="row">
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-2">
                                    <strong>تاريخ البدء العام:</strong> {{ $group->start_date }}
                                </div>
                                <div class="col-12 mt-2">
                                    <strong>حصص الأسبوع الحالية:</strong>
                                    <div class="d-flex flex-wrap gap-2 mt-2">
                                        @forelse($group->schedules as $schedule)
                                            <span class="badge bg-light text-dark border p-2 fw-normal" style="font-size: 0.85rem;">
                                                <i class="fa-solid fa-calendar-day text-success me-1"></i>
                                                <strong>{{ $schedule->day_name }}</strong> 
                                                ( من {{ $schedule->start_time_formatted }} إلى {{ $schedule->end_time_formatted }} )
                                            </span>
                                        @empty
                                            {{-- Fallback الحماية التوافقية القديمة لو جدول المواعيد لسه معملتلوش حصر --}}
                                            @if($group->day)
                                                <span class="badge bg-light text-dark border p-2 fw-normal" style="font-size: 0.85rem;">
                                                    <i class="fa-solid fa-calendar-day text-warning me-1"></i>
                                                    <strong>{{ $group->day_name }}</strong> 
                                                    ( من {{ $group->start_time_formatted }} إلى {{ $group->end_time_formatted }} )
                                                </span>
                                            @else
                                                <span class="text-danger">لم يتم تحديد مواعيد أسبوعية بعد لهذه المجموعة.</span>
                                            @endif
                                        @endforelse
                                    </div>
                                </div>
                            </div>

                            <hr class="my-3">

                            <h6 class="fw-bold text-warning mb-2">
                                <i class="fa-solid fa-coins me-2"></i> التفاصيل المالية
                            </h6>
                            <div class="row">
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>الحد الأقصى:</strong> {{ $group->max_students }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>نظام الإشتراك:</strong> {{ $group->subscription_type === 'monthly' ? 'بالشهر' : 'بالحصة' }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>اشتراك الطالب:</strong>
                                    <small class="text-secondary text-decoration-line-through">{{$group->market_fee ?? ''}}</small>
                                    ({{{ $group->student_fee . ' ج م' ?? 'غير محدد' }}}) {{ $group->subscription_type === 'monthly' ? 'للشهر' : 'للحصة' }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>أجر المدرس:</strong> {{ $group->teacher_fee }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>نظام الحساب:</strong> {{ $group->payment_type === 'per_student' ? 'بالطالب' : 'بالمجموعة' }}
                                </div>
                            </div>

                            <hr class="my-3">

                            <h6 class="fw-bold text-danger mb-2">
                                <i class="fa-solid fa-toggle-on me-2"></i> الحالة
                            </h6>
                            <div class="row">
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3 d-flex align-items-center justify-content-start">
                                    <strong>حالة المجموعة:</strong>
                                    <div>
                                        <input type="checkbox"
                                            class="btn-check btn-sm toggle-active mx-2"
                                            id="group_{{ $group->id }}"
                                            data-id="{{ $group->id }}"
                                            autocomplete="off"
                                            {{ $group->active ? 'checked' : '' }}>
                                        <label class="btn btn-sm mx-2 {{ $group->active ? 'btn-success' : 'btn-secondary' }}" for="group_{{ $group->id }}">
                                            {{ $group->active ? 'مفعل' : 'غير مفعل' }}
                                        </label>
                                    </div>
                                </div>

                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3 d-flex align-items-center">
                                    <strong class="me-2">حالة الدعم:</strong>
                                    <div>
                                        <input type="checkbox"
                                            class="btn-check toggle-supported mx-2"
                                            id="supported_{{ $group->id }}"
                                            data-id="{{ $group->id }}"
                                            autocomplete="off"
                                            {{ $group->supported ? 'checked' : '' }}>
                                        <label class="btn btn-sm mx-2 {{ $group->supported ? 'btn-success' : 'btn-secondary' }}" for="supported_{{ $group->id }}">
                                            {{ $group->supported ? 'مدعومة' : 'غير مدعومة' }}
                                        </label>
                                    </div>
                                </div>

                                @if($group->notes)
                                    <div class="col-md-12 mt-3">
                                        <strong>ملاحظات:</strong> {{ $group->notes }}
                                    </div>
                                @endif
                            </div>

                            @canany(['group.edit', 'group.delete'])
                                <div class="d-flex justify-content-evenly mt-3">
                                    @canany(['group.edit'])
                                        <a href="{{ route('groups.edit', $group->id) }}" class="btn btn-sm btn-warning">
                                            <i class="fa-regular fa-pen-to-square"></i> تعديل
                                        </a>
                                    @endcan
                                    @canany(['group.delete'])
                                        <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                                    data-id="{{ $group->id }}"
                                                    data-name="{{ $group->name }}"
                                                    data-url="/groups"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal0">
                                            <i class="fa-solid fa-trash"></i> حذف
                                        </button>
                                    @endcanany
                                </div>
                                @canany(['group.delete'])
                                    <x-delete-modal :id="$group->id" model="groups" />    
                                @endcanany
                            @endcanany
                        </div>
                    </div>
                </div>
            @empty
                <div class="alert alert-info text-center mt-3">
                    لا توجد مجموعات مطابقة لهذه الفلاتر.
                </div>
            @endforelse
        </div>
        
        <div class="d-flex justify-content-center mt-3">
            <x-pagination :data="$groups" />
        </div>
    </div>

    @endif

</div>

@canany(['groups.delete'])
    <x-delete-modal id="0" model="groups" />
@endcanany

{{-- 4️⃣ دمج الـ سكريبتات وتنظيف الـ AJAX والـ Spinners لمنع أي تضارب --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // الفلاتر
        const filterForm = document.getElementById('filterForm');
        const filterInputs = document.querySelectorAll('.form-select');
        const resetButton = document.querySelector('input[type="reset"]');

        function submitFilters() {
            document.body.style.cursor = 'wait';
            filterForm.submit();
        }

        filterInputs.forEach(input => {
            input.addEventListener('change', function () {
                submitFilters();
            });
        });

        if (resetButton) {
            resetButton.addEventListener('click', function (e) {
                e.preventDefault();
                const baseUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
                window.location.href = baseUrl;
            });
        }

        // --- دوال الـ Spinner والـ AJAX المدمجة الاحترافية ---
        
        function showSpinner(label) {
            label.dataset.originalText = label.innerHTML;
            label.innerHTML = `
                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                <span class="visually-hidden">Loading...</span>
            `;
            label.classList.remove('btn-success', 'btn-secondary');
            label.classList.add('btn-primary');
        }

        function restoreButton(label, isActive, activeText, inactiveText) {
            label.innerHTML = isActive ? activeText : inactiveText;
            label.classList.remove('btn-primary');
            label.classList.add(isActive ? 'btn-success' : 'btn-secondary');
        }

        // 1. معالجة تغيير حالة المجموعة (Active) بطلب حقيقي
        document.querySelectorAll('.toggle-active').forEach(checkbox => {
            checkbox.addEventListener('change', function () {
                const groupId = this.dataset.id;
                const label = document.querySelector(`label[for="${this.id}"]`);
                
                showSpinner(label); // ارفع الـ Spinner فوراً

                fetch(`/groups/${groupId}/toggle-active`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        restoreButton(label, data.active, 'مفعل', 'غير مفعل');
                    } else {
                        throw new Error('فشلت العملية من الخادم');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    this.checked = !this.checked; // اعكس الاختيار عشان يرجع مكانه لو ضرب
                    restoreButton(label, this.checked, 'مفعل', 'غير مفعل');
                    alert('حدث خطأ أثناء تحديث حالة المجموعة');
                });
            });
        });

        // 2. معالجة تغيير حالة الدعم (Supported) بطلب حقيقي
        document.querySelectorAll('.toggle-supported').forEach(checkbox => {
            checkbox.addEventListener('change', function () {
                const groupId = this.dataset.id;
                const label = document.querySelector(`label[for="${this.id}"]`);
                
                showSpinner(label); // ارفع الـ Spinner فوراً

                fetch(`/groups/${groupId}/toggle-supported`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        restoreButton(label, data.supported, 'مدعومة', 'غير مدعومة');
                    } else {
                        throw new Error('فشلت العملية من الخادم');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    this.checked = !this.checked; // اعكس الاختيار
                    restoreButton(label, this.checked, 'مدعومة', 'غير مدعومة');
                    alert('حدث خطأ أثناء تحديث حالة الدعم');
                });
            });
        });
    });
</script>
@endsection