@extends('layouts.app')

@section('content')
<div class="container">
    {{-- عنوان الصفحة يتغير ديناميكياً بواسطة الجافاسكريبت --}}
    <x-header id="page_title" title="إضافة مجموعة دراسية جديدة" />
    
    <x-alert />

    @if(count($churches) == 0)
        <div class="alert alert-warning fw-bolder text-center">
            ليس لديك صلاحية للتعامل على المجموعات، يرجى التواصل مع مدير النظام لإضافة كنيسة لك أولاً.
        </div>
    @else
        <form action="{{ route('groups.store') }}" method="POST" class="row g-3 needs-validation" novalidate>
            @csrf
            
            {{-- أزرار الراديو لاختيار نوع المجموعة --}}
            <div class="col-md-3" dir="ltr">
                <label class="form-label fw-bold text-secondary">نوع المجموعة</label>
                <div class="btn-group w-100" role="group" aria-label="Group Type">
                    {{-- راديو: منهج عادي (الافتراضي) --}}
                    <input type="radio" class="btn-check" name="type" id="type_curriculum" value="curriculum" 
                        {{ old('type', 'curriculum') == 'curriculum' ? 'checked' : '' }}>
                    <label class="btn btn-outline-primary fw-bold" for="type_curriculum">📚 منهج عادي</label>

                    {{-- راديو: كورس تأسيس --}}
                    <input type="radio" class="btn-check" name="type" id="type_foundation" value="foundation" 
                        {{ old('type') == 'foundation' ? 'checked' : '' }}>
                    <label class="btn btn-outline-primary fw-bold" for="type_foundation">🚀 تأسيس</label>
                </div>
            </div>

            {{-- الكنيسة --}}
            <div class="col-md-3">
                <label for="church_id" class="form-label">الكنيسة</label>
                <select class="form-select @error('church_id') is-invalid @enderror 
                  @if(old('church_id') && !$errors->has('church_id')) is-valid @endif tom-select" 
                        id="church_id" 
                        name="church_id">
                    <option selected disabled value="">إختر...</option>
                    @foreach ($churches as $church)
                        <option value="{{ $church->id }}" {{ old('church_id') == $church->id ? 'selected' : '' }}>
                            {{ $church->name }} {{ $church->address ? ' - ' . $church->address : '' }}
                        </option>
                    @endforeach
                </select>
                @error('church_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            {{-- حقل المنهج العادي: مرحلة دراسية واحدة --}}
            <div class="col-md-3" id="single_stage_wrapper">
                <label for="stage_id" class="form-label">المرحلة الدراسية</label>
                <select class="form-select @error('stage_id') is-invalid @enderror tom-select" 
                        id="stage_id" 
                        name="stage_id">
                    <option selected disabled value="">إختر مرحلة واحدة...</option>
                    @foreach ($stages as $stage)
                        <option value="{{ $stage->id }}" {{ old('stage_id') == $stage->id ? 'selected' : '' }}>
                            {{ $stage->name }}
                        </option>
                    @endforeach
                </select>
                @error('stage_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- حقل التأسيس: مراحل متعددة --}}
            <div class="col-md-3 d-none" id="multi_stage_wrapper">
                <label for="stages_array" class="form-label">المراحل الدراسية المستهدفة</label>
                <select class="form-select @error('stages_array') is-invalid @enderror tom-select" 
                        id="stages_array" 
                        name="stages_array[]" 
                        multiple 
                        placeholder="إختر مرحلة أو أكثر...">
                    @foreach ($stages as $stage)
                        <option value="{{ $stage->id }}" {{ collect(old('stages_array'))->contains($stage->id) ? 'selected' : '' }}>
                            {{ $stage->name }}
                        </option>
                    @endforeach
                </select>
                @error('stages_array')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            {{-- المادة الدراسية / مادة التأسيس --}}
            <div class="col-md-3">
                <label for="subject_id" class="form-label" id="subject_label">المادة الدراسية</label>
                <select class="form-select @error('subject_id') is-invalid @enderror 
                  @if(old('subject_id') && !$errors->has('subject_id')) is-valid @endif tom-select" 
                        id="subject_id" 
                        name="subject_id">
                    <option selected disabled value="">إختر...</option>
                    @foreach ($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ old('subject_id') == $subject->id ? 'selected' : '' }}>
                            {{ $subject->name }}
                        </option>
                    @endforeach
                </select>
                @error('subject_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- المدرس --}}
            <div class="col-md-3">
                <label for="teacher_id" class="form-label">المدرس</label>
                <select class="form-select @error('teacher_id') is-invalid @enderror 
                  @if(old('teacher_id') && !$errors->has('teacher_id')) is-valid @endif tom-select" 
                        id="teacher_id" 
                        name="teacher_id">
                    <option value="" {{ old('teacher_id') == '' ? 'selected' : '' }}>لم يحدد بعد</option>
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->id }}" {{ old('teacher_id') == $teacher->id ? 'selected' : '' }}>
                            {{ $teacher->name }}
                        </option>
                    @endforeach
                </select>
                @error('teacher_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <hr class="my-2">

            {{-- كارد المواعيد --}}
            <div class="col-md-12">
                <div class="card bg-light border-0">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="card-title mb-0 fw-bold text-secondary" id="schedule_card_title">📅 مواعيد المجموعة</h6>
                            <button type="button" class="btn btn-sm btn-primary" id="add-schedule-btn">
                                ➕ إضافة ميعاد آخر
                            </button>
                        </div>
                        
                        @if ($errors->any())
                            <div class="alert alert-danger mt-3 mb-3">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div id="schedules-wrapper">
                            @if(old('schedules'))
                                @foreach(old('schedules') as $index => $oldSchedule)
                                    <div class="row g-2 schedule-row mb-2 align-items-end">
                                        <div class="col-md-4">
                                            <label class="form-label small">اليوم</label>
                                            <select name="schedules[{{$index}}][day]" class="form-select form-select-sm">
                                                <option value="Saturday" {{ $oldSchedule['day'] == 'Saturday' ? 'selected' : '' }}>السبت</option>
                                                <option value="Sunday" {{ $oldSchedule['day'] == 'Sunday' ? 'selected' : '' }}>الأحد</option>
                                                <option value="Monday" {{ $oldSchedule['day'] == 'Monday' ? 'selected' : '' }}>الاثنين</option>
                                                <option value="Tuesday" {{ $oldSchedule['day'] == 'Tuesday' ? 'selected' : '' }}>الثلاثاء</option>
                                                <option value="Wednesday" {{ $oldSchedule['day'] == 'Wednesday' ? 'selected' : '' }}>الأربعاء</option>
                                                <option value="Thursday" {{ $oldSchedule['day'] == 'Thursday' ? 'selected' : '' }}>الخميس</option>
                                                <option value="Friday" {{ $oldSchedule['day'] == 'Friday' ? 'selected' : '' }}>الجمعة</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small">من الساعة</label>
                                            <input type="time" name="schedules[{{$index}}][start_time]" class="form-control form-control-sm" value="{{ $oldSchedule['start_time'] }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small">إلى الساعة</label>
                                            <input type="time" name="schedules[{{$index}}][end_time]" class="form-control form-control-sm" value="{{ $oldSchedule['end_time'] }}">
                                        </div>
                                        <div class="col-md-2 text-center">
                                            <button type="button" class="btn btn-sm btn-danger remove-schedule-btn w-100" {{ $index == 0 ? 'disabled' : '' }}>حذف</button>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                {{-- الحالة الافتراضية (مجموعة واحدة) --}}
                                <div class="row g-2 schedule-row mb-2 align-items-end">
                                    <div class="col-md-4">
                                        <label class="form-label small">اليوم</label>
                                        <select name="schedules[0][day]" class="form-select form-select-sm">
                                            <option value="Saturday">السبت</option>
                                            <option value="Sunday">الأحد</option>
                                            <option value="Monday">الاثنين</option>
                                            <option value="Tuesday">الثلاثاء</option>
                                            <option value="Wednesday">الأربعاء</option>
                                            <option value="Thursday">الخميس</option>
                                            <option value="Friday">الجمعة</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">من الساعة</label>
                                        <input type="time" name="schedules[0][start_time]" class="form-control form-control-sm" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">إلى الساعة</label>
                                        <input type="time" name="schedules[0][end_time]" class="form-control form-control-sm" required>
                                    </div>
                                    <div class="col-md-2 text-center">
                                        <button type="button" class="btn btn-sm btn-danger remove-schedule-btn w-100" disabled>حذف</button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-2">

            {{-- بقية الحقول التابعة للفورم --}}
            <div class="col-md-3">
                <label for="start_date" class="form-label" id="date_label">تاريخ بدء الدراسة</label>
                <input type="date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" name="start_date" value="{{ old('start_date') }}">
                @error('start_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-3">
                <label for="max_students" class="form-label">الحد الأقصى للطلبة</label>
                <input type="number" class="form-control @error('max_students') is-invalid @enderror" id="max_students" name="max_students" value="{{ old('max_students', 20) }}">
                @error('max_students') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-3">
                <label for="market_fee" class="form-label">السعر السوقى</label>
                <input type="number" step="0.01" class="form-control @error('market_fee') is-invalid @enderror" id="market_fee" name="market_fee" value="{{ old('market_fee') }}">
            </div>

            <div class="col-md-3">
                <label for="student_fee" class="form-label">اشتراك الطالب الفعلى</label>
                <input type="number" step="0.01" class="form-control @error('student_fee') is-invalid @enderror" id="student_fee" name="student_fee" value="{{ old('student_fee') }}">
            </div>
            
            <div class="col-md-3">
                <label for="subscription_type" class="form-label">نظام دفع الطالب</label>
                <select class="form-select tom-select" id="subscription_type" name="subscription_type">
                    <option value="monthly" {{ old('subscription_type') == 'monthly' ? 'selected' : '' }}>شهرى</option>
                    <option value="per_lesson" {{ old('subscription_type') == 'per_lesson' ? 'selected' : '' }}>بالحصة</option>
                </select>
            </div>

            <div class="col-md-3">
                <label for="payment_type" class="form-label">نظام تحصيل المدرس</label>
                <select class="form-select tom-select" id="payment_type" name="payment_type">
                    <option value="per_student" {{ old('payment_type') == 'per_student' ? 'selected' : '' }}>بالطالب</option>
                    <option value="per_group" {{ old('payment_type') == 'per_group' ? 'selected' : '' }}>بالمجموعة</option>
                </select>
            </div>

            <div class="col-md-3">
                <label for="teacher_fee" class="form-label">أجر المدرس</label>
                <input type="number" step="0.01" class="form-control @error('teacher_fee') is-invalid @enderror" id="teacher_fee" name="teacher_fee" value="{{ old('teacher_fee') }}">
            </div>
            
            <div class="col-md-3">
                <label for="whatsapp_link" class="form-label">رابط جروب الواتس</label>
                <input type="url" class="form-control @error('whatsapp_link') is-invalid @enderror" id="whatsapp_link" name="whatsapp_link" value="{{ old('whatsapp_link') }}" placeholder="https://chat.whatsapp.com/...">
            </div>

            <input type="hidden" name="supported" value="0">
            <div class="form-group col-md-3">
                <label class="mb-2">دعم المركز</label>
                <input type="checkbox" class="btn-check" id="supported" name="supported" value="1" {{ old('supported', '1') == 1 ? 'checked' : '' }}>
                <label class="btn btn-outline-primary w-100" for="supported">مدعومة</label>
            </div>

            <input type="hidden" name="active" value="0">
            <div class="form-group col-md-3">
                <label class="mb-2">حالة الكورس</label>
                <input type="checkbox" class="btn-check" id="active" name="active" value="1" {{ old('active', '1') == 1 ? 'checked' : '' }}>
                <label class="btn btn-outline-primary w-100" for="active">نشط</label>
            </div>

            <div class="col-md-6">
                <label for="notes" class="form-label">ملاحظات إضافية</label>
                <input type="text" class="form-control" id="notes" name="notes" value="{{ old('notes') }}">
            </div>

            <div class="text-center my-3">
                <button type="submit" class="btn btn-success px-5 fw-bold" id="submit_btn">حفظ المجموعة الدراسية</button>
            </div>
        </form>
    @endif
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // --- 1️⃣ التحكم بنوع المجموعة بناءً على أزرار الراديو ---
        const radioRegular = document.getElementById('type_curriculum');
        const radioFoundation = document.getElementById('type_foundation');
        
        const singleStageWrapper = document.getElementById('single_stage_wrapper');
        const multiStageWrapper = document.getElementById('multi_stage_wrapper');
        const subjectLabel = document.getElementById('subject_label');
        const dateLabel = document.getElementById('date_label');
        const scheduleCardTitle = document.getElementById('schedule_card_title');
        const submitBtn = document.getElementById('submit_btn');
        
        const pageTitleElement = document.querySelector('#page_title h4, #page_title h5, #page_title h3, #page_title .card-title');

        function updateFormUI() {
            if (radioFoundation.checked) {
                // حالة: تأسيس
                singleStageWrapper.classList.add('d-none');
                multiStageWrapper.classList.remove('d-none');
                
                subjectLabel.innerText = "مادة التأسيس (المستوى)";
                dateLabel.innerText = "تاريخ بدء الكورس";
                scheduleCardTitle.innerText = "📅 مواعيد المجموعة المتعددة";
                if(submitBtn) submitBtn.innerText = "حفظ كورس التأسيس";
                if(pageTitleElement) pageTitleElement.innerText = "إضافة مجموعة دراسية جديدة (تأسيس)";
            } else {
                // حالة: منهج عادي
                singleStageWrapper.classList.remove('d-none');
                multiStageWrapper.classList.add('d-none');
                
                subjectLabel.innerText = "المادة الدراسية";
                dateLabel.innerText = "تاريخ بدء الدراسة";
                scheduleCardTitle.innerText = "📅 مواعيد المجموعة";
                if(submitBtn) submitBtn.innerText = "حفظ المجموعة الدراسية";
                if(pageTitleElement) pageTitleElement.innerText = "إضافة مجموعة دراسية جديدة";
            }
        }

        // تشغيل التحديث فور التحميل لالتقاط حالة الـ old()
        updateFormUI();

        // إضافة مستمع للأحداث عند التغيير
        radioRegular.addEventListener('change', updateFormUI);
        radioFoundation.addEventListener('change', updateFormUI);


        // --- 2️⃣ كود إدارة المواعيد الديناميكية ---
        let scheduleIndex = {{ old('schedules') ? count(old('schedules')) : 1 }};
        const wrapper = document.getElementById('schedules-wrapper');
        const addBtn = document.getElementById('add-schedule-btn');

        addBtn.addEventListener('click', function () {
            const newRow = document.createElement('div');
            newRow.className = 'row g-2 schedule-row mb-2 align-items-end';
            newRow.innerHTML = `
                <div class="col-md-4">
                    <select name="schedules[${scheduleIndex}][day]" class="form-select form-select-sm">
                        <option value="Saturday">السبت</option>
                        <option value="Sunday">الأحد</option>
                        <option value="Monday">الاثنين</option>
                        <option value="Tuesday">الثلاثاء</option>
                        <option value="Wednesday">الأربعاء</option>
                        <option value="Thursday">الخميس</option>
                        <option value="Friday">الجمعة</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="time" name="schedules[${scheduleIndex}][start_time]" class="form-control form-control-sm" required>
                </div>
                <div class="col-md-3">
                    <input type="time" name="schedules[${scheduleIndex}][end_time]" class="form-control form-control-sm" required>
                </div>
                <div class="col-md-2 text-center">
                    <button type="button" class="btn btn-sm btn-danger remove-schedule-btn w-100">حذف</button>
                </div>
            `;
            wrapper.appendChild(newRow);
            scheduleIndex++;
        });

        wrapper.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-schedule-btn')) {
                e.target.closest('.schedule-row').remove();
            }
        });
    });
</script>
@endsection