@extends('layouts.app')
@section('title', 'إدارة مجموعات التأسيس')
@section('content')
<div class="container">
    <x-header title="إدارة مجموعات التأسيس" />
    
    @canany(['group.create'])
        <a href="{{ route('foundation_groups.create') }}" class="btn btn-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('foundation_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" aria-label="Church Filter">
                    <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>
            
            {{-- 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" aria-label="Subject Filter">
                    <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" aria-label="Teacher Filter" 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" aria-label="فلتر اليوم">
                    <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-4 mt-3">
                <select name="payment_type" class="form-select form-select-sm filter-input tom-select" id="GroupPayment_typeFilter" aria-label="فلتر نوع الدفع">
                    <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-4 mt-3">
                <select name="supported" class="form-select form-select-sm filter-input tom-select" id="GroupSupportedFilter" aria-label="فلتر حالة الدعم">
                    <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-4 mt-3">
                <select name="active" class="form-select form-select-sm filter-input tom-select" id="GroupActiveFilter" aria-label="فلتر الحالة">
                    <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-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 == true ? 'text-success' : 'text-danger'}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $group->id }}" aria-expanded="false" aria-controls="collapse{{ $group->id }}">
                            <span class="badge bg-dark ms-2">{{ $loop->iteration }}</span>
                            {{ $group->name }}

                            {{-- قسم التحذيرات --}}
                            <div class="warnings-container mx-3">
                                @if(!$group->teacher_id || !$group->day || !$group->start_time_formatted)
                                    <span class="badge bg-danger animate__animated animate__flash animate__infinite" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-triangle-exclamation"></i> بيانات ناقصة:
                                        <small class="ms-1">
                                            @if(!$group->teacher_id) <span class="text-white">| المدرس</span> @endif
                                            @if(!$group->day) <span class="text-white">| اليوم</span> @endif
                                            @if(!$group->start_time_formatted) <span class="text-white">| الوقت</span> @endif
                                        </small>
                                    </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>
                        </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 ?? 'تأسيس مستقل' }}
                                </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>
                                <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>
                                <div class="col-sm-12 col-md-12 col-lg-8 mt-3">
                                    <strong>المراحل المسموحة بالتسجيل:</strong> 
                                    @if(!empty($group->allowed_stages_models_attribute))
                                        @foreach($group->allowed_stages_models_attribute as $stageModel)
                                            <span class="badge bg-primary rounded-pill mx-1">{{ $stageModel->name }}</span>
                                        @endforeach
                                    @else
                                        <span class="badge bg-secondary rounded-pill mx-1">كل المراحل مسموحة</span>
                                    @endif
                                </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>جروب الواتساب <i class="fa-brands fa-whatsapp"></i></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-3">
                                    <strong>تاريخ البدء:</strong> {{ $group->start_date }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>اليوم:</strong> {{ $group->day_name }}
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-4 mt-3">
                                    <strong>من:</strong> {{ $group->start_time_formatted }} <strong class="me-3">إلى:</strong> {{ $group->end_time_formatted }}
                                </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('foundation-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="/foundation-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="foundation-groups" />    
                                @endcanany
                            @endcanany
                        </div>
                    </div>
                </div>
            @empty
                <div class="alert alert-info text-center mt-3">
                    لا توجد مجموعات تأسيس مطابقة لهذه الفلاتر.
                </div>
            @endforelse
        </div>
    </div>
    @endif
</div>

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

<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;
            });
        }
    });
</script>
    
<script>
    document.addEventListener('DOMContentLoaded', function () {
    
    function updateToggleUI(checkbox, isChecked, successText, failText) {
        const label = checkbox.nextElementSibling;
        if (isChecked) {
            label.textContent = successText;
            label.classList.remove('btn-secondary');
            label.classList.add('btn-success');
        } else {
            label.textContent = failText;
            label.classList.remove('btn-success');
            label.classList.add('btn-secondary');
        }
    }

    // 1. تغيير حالة تفعيل مجموعة التأسيس (الرابط الجديد)
    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);
            
            fetch(`/foundation-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.success) {
                    restoreButton(label, data.active, 'مفعل', 'غير مفعل');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                this.checked = !this.checked;
                restoreButton(label, this.checked, 'مفعل', 'غير مفعل');
                alert('حدث خطأ أثناء التحديث');
            });
        });
    });

    // 2. تغيير حالة دعم مجموعة التأسيس (الرابط الجديد)
    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);

            fetch(`/foundation-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.success) {
                    restoreButton(label, data.supported, 'مدعومة', 'غير مدعومة');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                this.checked = !this.checked;
                restoreButton(label, this.checked, 'مدعومة', 'غير مدعومة');
                alert('حدث خطأ أثناء التحديث');
            });
        });
    });
});

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');
}
</script>
@endsection