@extends('layouts.app')
@section('title', 'إدارة تسجيل الحضور')

@section('content')
<div class="container">
    <x-header title="إدارة تسجيل الحضور" />

    <x-alert />

    <div class="container py-4" dir="rtl">
        <div class="mb-4 border-bottom pb-3">
            <div class="row g-4 mb-4 justify-content-center align-items-center">
    
                {{-- 1. عنوان الصفحة والتاريخ --}}
                <div class="col-12 col-md-auto text-center text-md-start">
                    <h2 class="fw-bold text-primary mb-1 h4">أجندة اليوم</h2>
                    <p class="text-muted mb-0 small">
                        <i class="bi bi-calendar3 ms-1"></i>
                        {{-- ملحوظة: يفضل استخدام التاريخ المختار من الفلتر هنا بدلاً من now() --}}
                        {{ \Carbon\Carbon::parse(request('selected_date', now()))->translatedFormat('l، j F Y') }}
                    </p>
                </div>

                {{-- 2. فلتر الكنائس --}}
                @if($churches->count() > 1)
                    <div class="col-12 col-md-3">
                        <form action="{{ route('agenda.index') }}" method="GET" id="churchFilter">
                            <select name="church_id" id="church_select" class="form-select border-primary py-2 shadow-sm tom-select">
                                <option value="">-- كل كنائسي ({{ $churches->count() }}) --</option>
                                @forelse($churches as $church)
                                    <option value="{{ $church->id }}" {{ request('church_id') == $church->id ? 'selected' : '' }}>
                                        {{ $church->name }} {{ $church->address ? ' (' . $church->address . ')': '' }}
                                    </option>
                                @empty
                                    <option disabled>لا يوجد بيانات</option>
                                @endforelse
                            </select>
                        </form>
                    </div>
                @endif

                {{-- 3. فلتر التاريخ --}}
                <div class="col-8 col-md-2">
                    <input type="date" 
                        name="selected_date" 
                        id="date_filter" 
                        class="form-select border-primary py-2 shadow-sm" 
                        value="{{ request('selected_date', now()->format('Y-m-d')) ?? ''}}"
                        min="{{ now()->startOfMonth()->format('Y-m-d') ?? ''}}"
                        max="{{ now()->endOfMonth()->format('Y-m-d') ?? ''}}">
                </div>

                {{-- 4. زرار الحصة التعويضية (+) --}}
                <div class="col-4 col-md-auto">
                    {{-- غيرنا الرابط ليكون Trigger للمودال اللي هنصممه --}}
                    <button type="button" class="btn btn-success py-2 w-100" data-bs-toggle="modal" data-bs-target="#makeupLessonModal" title="حصة تعويضية/ إضافية">
                        <i class="fa-regular fa-calendar-plus"></i>
                        <span class="d-md-none ms-1 small">إضافة</span>
                    </button>
                </div>

                {{-- 5. إحصائية سريعة --}}
                <div class="col-12 col-md-auto ms-md-auto text-center">
                    <span class="badge bg-primary rounded-pill px-3 py-2 shadow-sm">
                        {{ $todayGroups->count() ?? ''}} مجموعات مجدولة
                    </span>
                </div>
                
            </div>
        </div>

        <div class="row" id="groups-container">
            @forelse($todayGroups as $group)
                @php
                    /* التركة: بنجيب حصة النهاردة المرتبطة بالمجموعة دي.
                       لازم تكون باعت العلاقة دي من الـ Controller باستخدام with('lessons')
                    */
                    $todayLesson = $group->lessons->first(); 
                    
                    // تحديد الحالة: لو مفيش حصة النهاردة بنعتبرها "جديدة" (success)
                    $currentStatus = $todayLesson ? $todayLesson->status : 'new';
                @endphp

                <div class="col-md-6 col-lg-4 mb-4">
                    {{-- تمييز الكارت بالألوان بناءً على حالة الحصة وليس المجموعة --}}
                    <div class="card h-100 shadow-sm border-0 border-top border-4 rounded-3 
                        {{ $currentStatus == 'completed' ? 'border-primary' : ($currentStatus == 'cancelled' ? 'border-danger' : 'border-success') }}">
                        
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h5 class="card-title fw-extrabold text-dark mb-0">{{ $group->name ?? ''}}</h5>
                                <div class="d-flex flex-column align-items-end">
                                    <span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill mb-1">
                                        {{ \Carbon\Carbon::parse($group->start_time)->format('h:i A') ?? ''}}
                                    </span>

                                    {{-- العلامة المميزة للحصة التعويضية --}}
                                    @if($group->lessons->first() && $group->lessons->first()->is_makeup)
                                        <span class="badge bg-warning text-dark border border-warning-subtle rounded-pill shadow-sm animate__animated animate__fadeIn" style="font-size: 0.65rem; letter-spacing: 0.5px;">
                                            <i class="bi bi-exclamation-circle-fill ms-1"></i> حصة تعويضية
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="mb-3">
                                <p class="mb-1 text-secondary small">
                                    <i class="bi bi-book-half ms-1"></i>
                                    <strong>المادة:</strong> {{ $group->subject->name ?? 'غير محددة' }}
                                </p>
                                <p class="mb-0 text-secondary small">
                                    <i class="bi bi-person-badge ms-1"></i>
                                    <strong>المدرس:</strong> أ/ {{ $group->teacher->name ?? 'غير محدد' }}
                                </p>
                                <p class="mb-0 text-secondary small">
                                    <i class="bi bi-person-badge ms-1"></i>
                                    <strong>قيمة الإشتراك:</strong> ({{ $group->student_fee ?? 'غير محدد' }}) {{ $group->subscription_type === 'monthly' ? 'للشهر' : 'للحصة' }}
                                </p>
                            </div>

                            @php
                                // بنجيب الحصة الخاصة بالمجموعة في التاريخ المختار من الفلتر
                                // تأكد أنك مررت متغير $selectedDate من الكنترولر
                                $targetDate = isset($selectedDate) ? $selectedDate->format('Y-m-d') : now()->format('Y-m-d');
                                
                                $lesson = $group->lessons->first(); // دي هترجع الحصة المتفلترة بالتاريخ اللي بعتناه في الكنترولر

                                // إعادة حساب الحالة بناءً على الحصة الملقوطة في التاريخ ده
                                $currentStatus = 'pending'; // الحالة الافتراضية
                                
                                if ($lesson) {
                                    if ($lesson->status == 'cancelled') { // افترضنا إن عندك عمود للإلغاء أو حالة معينة
                                        $currentStatus = 'cancelled';
                                    } elseif($lesson->status == 'completed') {
                                        $currentStatus = 'completed';
                                    } elseif($lesson->is_makeup == true) {
                                        $currentStatus = 'makeup';
                                    }
                                }

                                    // التحقق من اكتمال البيانات
                                    $isComplete = $group->teacher_id;

                                    $admin = \App\Models\User::role('Admin')->first();
                                    $adminPhone = $admin ? '+2' . $admin->phone : ''; 
                                    $userName = Auth::user()->name;

                                    // تحديد محتوى الرسالة بناءً على العائق اللي واجه المستخدم
                                    if (!$isComplete) {
                                        $reason = "إستكمال بيانات مجموعة";
                                    } elseif ($currentStatus == 'completed') {
                                        $reason = "تعديل حضور مجموعة";
                                    } elseif ($currentStatus == 'cancelled') {
                                        $reason = "إعادة تفعيل حصة ملغية لمجموعة";
                                    } else {
                                        $reason = "طلب صلاحية خاصة لمجموعة";
                                    }

                                    $message = "تحية طيبة،\nبرجاء المساعدة في: *$reason*\n";
                                    $message .= "اسم المجموعة: *(" . $group->name . ")*\n";
                                    $message .= "رقم ID: (" . $group->id . ")\n";
                                    $message .= "المرسل: " . $userName;

                                    $waUrl = "https://wa.me/" . $adminPhone . "?text=" . urlencode($message);
                            @endphp

                            <div class="d-grid gap-2 mt-auto">
                                {{-- الفورم يلتف حول كل الحالات --}}
                                <form action="{{ route('lesson.start', $group->id) }}" method="POST" class="w-100">
                                    @csrf
                                    
                                    {{-- المدخلات المخفية --}}
                                    <input type="hidden" name="date" value="{{ $selectedDate->format('Y-m-d') ?? ''}}">
                                    <input type="hidden" name="start_time" value="{{ $group->start_time ?? ''}}">

                                    @if($isComplete)
                                        @php
                                            $studentCount = $group->students_count ?? $group->students->count();
                                        @endphp

                                        {{-- 1. حالة تم تسجيل الحضور مسبقاً --}}
                                        @if($currentStatus == 'completed')
                                            @can('attendance.edit')
                                                <button type="submit" class="btn btn-primary w-100 py-2 rounded-3 shadow-sm fw-bold">
                                                    <i class="bi bi-check2-all ms-1"></i> تعديل الحضور
                                                    <span class="badge text-bg-light ms-1">{{ $studentCount ?? ''}} طالب</span>
                                                </button>
                                            @else
                                                <div class="alert alert-light border-dashed text-center rounded-3 shadow-sm">
                                                    <p class="small mb-2 text-muted">
                                                        <strong>تم تسجيل الحضور مسبقاً</strong>
                                                    </p>
                                                    <a href="{{ $waUrl }}" target="_blank" class="btn btn-sm btn-outline-success fw-bold">
                                                        <i class="fab fa-whatsapp ms-1"></i> اطلب مساعدة المسؤول لتعديل الحضور
                                                    </a>
                                                </div>
                                            @endcan

                                        {{-- 2. حالة الحصة الملغية --}}
                                        @elseif($currentStatus == 'cancelled')
                                            @can('lesson.cancel')
                                                <button type="submit" class="btn btn-outline-danger mb-0 py-2 text-center rounded-3 fw-bold shadow-sm w-100">
                                                    <i class="bi bi-x-circle ms-1"></i> هذه الحصة ملغية (اضغط للتعديل)
                                                </button>
                                            @else
                                                <div class="alert alert-danger mb-0 py-2 text-center rounded-3 fw-bold border-0 shadow-sm w-100">
                                                    <i class="bi bi-x-circle ms-1"></i> هذه الحصة ملغية (لا تملك صلاحية التعديل)
                                                    <a href="{{ $waUrl ?? ''}}" target="_blank" class="btn btn-sm btn-outline-success fw-bold">
                                                        <i class="fab fa-whatsapp ms-1"></i> اطلب مساعدة المسؤول
                                                    </a>                                                    
                                                </div>
                                            @endcan
                                        
                                        {{-- 3. حالة الحصة التعويضية --}}
                                        @elseif($currentStatus == 'makeup')
                                            @can('attendance.create')
                                                <button type="submit" class="btn btn-warning mb-0 py-2 text-center rounded-3 fw-bold shadow-sm w-100">
                                                    <i class="fas fa-sync-alt ms-1"></i> (حصة تعويضية) تسجيل الحضور
                                                </button>
                                            @endcan

                                        {{-- 4. حالة حصة جديدة عادية --}}
                                        @else
                                            @can('attendance.create')
                                                <button type="submit" class="btn btn-success w-100 py-2 rounded-3 shadow-sm fw-bold">
                                                    <i class="bi bi-person-plus ms-1"></i> تسجيل الحضور
                                                    <span class="badge text-bg-light ms-1">{{ $studentCount ?? ''}} طالب</span>
                                                </button>
                                            @else
                                                <div class="alert alert-secondary mb-0 py-2 text-center rounded-3 fw-bold border-0 shadow-sm w-100">
                                                    <i class="bi bi-lock ms-1"></i> بانتظار تسجيل الحضور
                                                    <a href="{{ $waUrl ?? ''}}" target="_blank" class="btn btn-sm btn-outline-success fw-bold">
                                                        <i class="fab fa-whatsapp ms-1"></i> اطلب مساعدة المسؤول
                                                    </a>  
                                                </div>
                                            @endcan
                                        @endif

                                    @else
                                        {{-- حالة البيانات غير مكتملة --}}
                                        @can('group.edit')
                                            <div class="text-center">
                                                <a href="{{ route('groups.edit', $group->id) }}" class="alert alert-dark d-block mb-0 py-2 text-center rounded-3 fw-bold border-0 shadow-sm w-100 text-decoration-none">
                                                    <i class="fas fa-pen-to-square ms-1"></i> بيانات المجموعة غير مكتملة (اضغط للتعديل)
                                                </a>
                                            </div>
                                        @else
                                            <div class="text-center">
                                                <div class="alert alert-dark mb-0 py-2 text-center rounded-3 fw-bold border-0 shadow-sm w-100">
                                                    <i class="bi bi-exclamation-triangle ms-1"></i> 
                                                    <strong>بيانات المجموعة غير مكتملة</strong>
                                                    <hr class="my-2">
                                                    <a href="{{ $waUrl ?? ''}}" target="_blank" class="btn btn-sm btn-outline-success fw-bold">
                                                        <i class="fab fa-whatsapp ms-1"></i> اطلب مساعدة المسؤول
                                                    </a>
                                                </div>
                                            </div>
                                        @endcan 
                                    @endif
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-light border text-center py-5 shadow-sm rounded-4">
                        <i class="bi bi-emoji-slight-smile display-4 text-muted mb-3 d-block"></i>
                        <h4 class="text-secondary">لا توجد حصص مجدولة لهذا اليوم</h4>
                        <p class="text-muted mb-0 small">أو ربما جميع المجموعات غير نشطة حالياً.</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</div>

{{-- موديل الحصص الإضافية / المرحلة --}}
<div class="modal fade" id="makeupLessonModal" tabindex="-1" aria-labelledby="makeupModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-warning text-dark" dir="ltr">
                <h5 class="modal-title fw-bold" id="makeupModalLabel">
                    <i class="bi bi-plus-circle-fill me-2"></i> إضافة حصة تعويضية جديدة
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="makeupLessonForm" action="{{ route('lesson.storeMakeup') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-bold">الكنيسة</label>
                            <select name="church_id" id="m_church_id" class="form-select py-2 border-primary tom-select" >
                                <option value="">اختر الكنيسة...</option>
                                @forelse($churches as $church)
                                    <option value="{{ $church->id }}">{{ $church->name }} {{ $church->address ? '(' . $church->address . ')' : '' }}</option>
                                @empty
                                    <option disabled>لا يوجد بيانات</option>
                                @endforelse
                            </select>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label fw-bold">المرحلة</label>
                            <select name="level_id" id="m_level_id" class="form-select py-2 tom-select" disabled >
                                <option value="">اختر المرحلة...</option>
                            </select>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label fw-bold">المادة</label>
                            <select name="subject_id" id="m_subject_id" class="form-select py-2 tom-select" disabled >
                                <option value="">اختر المادة...</option>
                            </select>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label fw-bold">المجموعة</label>
                            <select name="group_id" id="m_group_id" class="form-select py-2 tom-select" disabled >
                                <option value="">اختر المجموعة...</option>
                            </select>
                        </div>

                        <hr class="my-3 text-muted">

                        <div class="col-12 col-md-6">
                            <label class="form-label fw-bold text-danger">تاريخ الحصة التعويضية</label>
                            <input type="date" name="lesson_date" id="m_lesson_date" class="form-control py-2 border-danger" 
                                   value="{{ $selectedDate->format('Y-m-d') ?? ''}}" >
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label fw-bold text-danger">وقت الحصة</label>
                            <input type="time" name="start_time" id="m_start_time" class="form-control py-2 border-danger" 
                                   value="{{ now()->format('H:i') ?? ''}}" >
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" id="saveMakeupBtn" class="btn btn-warning fw-bold px-4">حفظ الحصة التعويضية</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- سكربت الفلترة بالأجاكس --}}
<script>
    window.onload = function() {
        if (window.jQuery) {
            $(document).ready(function() {
                // مراقبة تغيير الكنيسة أو التاريخ
                $(document).on('change', '#church_select, #date_filter', function() {
                    let churchId = $('#church_select').val();
                    let selectedDate = $('#date_filter').val(); // تأكد أن الـ ID في الـ input هو date_filter
                    let url = "{{ route('agenda.index') }}";

                    $('#groups-container').css('opacity', '0.5');

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: { 
                            church_id: churchId,
                            selected_date: selectedDate 
                        },
                        success: function(response) {
                            // تحديث محتوى المجموعات
                            let newContent = $(response).find('#groups-container').html();
                            if (newContent) {
                                $('#groups-container').html(newContent);
                                
                                // تحديث العداد (Badge)
                                let newCount = $(response).find('.badge.bg-primary').first().text();
                                $('.badge.bg-primary').text(newCount);
                                
                                // تحديث التاريخ المعروض في العنوان إذا كان هناك عنصر له class معين
                                let newTitleDate = $(response).find('#display-date').text();
                                $('#display-date').text(newTitleDate);
                            }
                            $('#groups-container').css('opacity', '1');
                            
                            // تحديث الرابط في المتصفح ليحتوي على التاريخ والكنيسة المختارين
                            let newUrl = url + "?church_id=" + churchId + "&selected_date=" + selectedDate;
                            window.history.pushState({path: newUrl}, '', newUrl);
                        },
                        error: function() {
                            // في حال الفشل نعمل Refresh مع القيم المختارة
                            window.location.href = url + "?church_id=" + churchId + "&selected_date=" + selectedDate;
                        }
                    });
                });
            });
        } else {
            console.error("jQuery is not loaded!");
        }
    };
</script>

{{-- سكربت الحصة التعويضية الكامل --}}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof jQuery === "undefined") {
            console.error("jQuery is still not loaded!");
            return;
        }

        (function($) {
            console.log("jQuery is ready and working in Agenda!");

            // 1. عند تغيير الكنيسة -> جلب المراحل
            $(document).on('change', '#m_church_id', function() {
                let churchId = $(this).val();
                resetSelect(['#m_level_id', '#m_subject_id', '#m_group_id']);
                
                if (churchId) {
                    $.get('/api/get-levels/' + churchId, function(data) {
                        fillSelect('#m_level_id', data, 'اختر المرحلة...');
                    });
                }
            });

            // 2. عند تغيير المرحلة -> جلب المواد
            $(document).on('change', '#m_level_id', function() {
                let stageId = $(this).val();
                resetSelect(['#m_subject_id', '#m_group_id']);
                if (stageId) {
                    $.get('/api/get-subjects/' + stageId, function(data) {
                        fillSelect('#m_subject_id', data, 'اختر المادة...');
                    });
                }
            });

            // 3. عند تغيير المادة -> جلب المجموعات (بناءً على الكنيسة والمرحلة والمادة)
            $(document).on('change', '#m_subject_id', function() {
                let subjectId = $(this).val();
                let churchId = $('#m_church_id').val();
                let stageId = $('#m_level_id').val();
                
                resetSelect(['#m_group_id']);
                
                if (subjectId) {
                    $.get('/api/get-groups', { 
                        subject_id: subjectId, 
                        church_id: churchId, 
                        stage_id: stageId 
                    }, function(data) {
                        fillSelect('#m_group_id', data, 'اختر المجموعة...');
                    });
                }
            });

            // 4. حفظ الحصة التعويضية (Ajax POST)
            $(document).on('click', '#saveMakeupBtn', function(e) {
                e.preventDefault();
                let btn = $(this);
                
                // تجميع البيانات
                let formData = {
                    _token: '{{ csrf_token() }}',
                    group_id: $('#m_group_id').val(),
                    lesson_date: $('#m_lesson_date').val(), 
                    start_time: $('#m_start_time').val(),   
                };

                // التأكد من اختيار المجموعة قبل الإرسال
                if(!formData.group_id || !formData.lesson_date || !formData.start_time) {
                    alert('برجاء استكمال كافة البيانات الأساسية');
                    return;
                }

                btn.prop('disabled', true).text('جاري الحفظ...');

                $.ajax({
                    url: '{{ route("lesson.storeMakeup") }}',
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            alert(response.message);
                            location.reload(); // تحديث الأجندة فوراً
                        }
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).text('حفظ الحصة التعويضية');
                        let errorMsg = "حدث خطأ أثناء الحفظ";
                        if(xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        alert(errorMsg);
                    }
                });
            });

            // الدوال المساعدة
            function resetSelect(selectors) {
                selectors.forEach(selector => {
                    $(selector).empty().append('<option value="">جاري التحميل...</option>').prop('disabled', true);
                });
            }

            function fillSelect(selector, data, placeholder) {
                let $el = $(selector);
                $el.empty().append('<option value="">' + placeholder + '</option>');
                if (data.length > 0) {
                    $el.prop('disabled', false);
                    $.each(data, function(key, item) {
                        $el.append('<option value="' + item.id + '">' + item.name + '</option>');
                    });
                } else {
                    $el.append('<option value="">لا توجد بيانات</option>');
                }
            }

        })(jQuery);
    });
</script>
@endsection