@extends('layouts.app')

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

    <form action="{{ route('groups.update', $group->id) }}" method="POST" class="row g-3 needs-validation" novalidate>
        @csrf
        @method('PUT')
        
        {{-- عرض نوع المجموعة الحالي بشكل ثابت بدون أزرار --}}
        <div class="col-md-3">
            <label class="form-label fw-bold text-secondary">نوع المجموعة</label>
            <div class="mt-1">
                @if(old('type', $group->type) == 'foundation')
                    <span class="badge fs-6 py-2 px-3 w-100 text-white fw-bold" style="background-color: #6f42c1;">🚀 كورس تأسيس</span>
                @else
                    <span class="badge bg-primary fs-6 py-2 px-3 w-100 fw-bold">📚 منهج عادي</span>
                @endif
                <small class="text-danger d-block text-center mt-1 fw-bold" style="font-size: 11px;">⚠️ لا يمكن تعديل نوع المجموعة</small>
            </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 tom-select" id="church_id" name="church_id">
                <option selected disabled value="">إختر...</option>
                @foreach ($churches as $church)
                    <option value="{{ $church->id }}" {{ old('church_id', $group->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', $group->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', $group->stages->pluck('id')))->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 tom-select" id="subject_id" name="subject_id">
                <option selected disabled value="">إختر...</option>
                @foreach ($subjects as $subject)
                    <option value="{{ $subject->id }}" {{ old('subject_id', $group->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 tom-select" id="teacher_id" name="teacher_id">
                <option value="" {{ old('teacher_id', $group->teacher_id) == '' ? 'selected' : '' }}>لم يحدد بعد</option>
                @foreach ($teachers as $teacher)
                    <option value="{{ $teacher->id }}" {{ old('teacher_id', $group->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">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div id="schedules-wrapper">
                        @php
                            $currentSchedules = old('schedules', $group->schedules->toArray());
                        @endphp

                        @if(count($currentSchedules) > 0)
                            @foreach($currentSchedules as $index => $schedule)
                                <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">
                                            @foreach(['Saturday'=>'السبت', 'Sunday'=>'الأحد', 'Monday'=>'الاثنين', 'Tuesday'=>'الثلاثاء', 'Wednesday'=>'الأربعاء', 'Thursday'=>'الخميس', 'Friday'=>'الجمعة'] as $val => $name)
                                                <option value="{{ $val }}" {{ $schedule['day'] == $val ? 'selected' : '' }}>{{ $name }}</option>
                                            @endforeach
                                        </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="{{ substr($schedule['start_time'], 0, 5) }}" required>
                                    </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="{{ substr($schedule['end_time'], 0, 5) }}" required>
                                    </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', $group->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', $group->max_students) }}">
            @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', $group->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', $group->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', $group->subscription_type) == 'monthly' ? 'selected' : '' }}>شهرى</option>
                <option value="per_lesson" {{ old('subscription_type', $group->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 selected disabled value="">إختر...</option>
                <option value="per_student" {{ old('payment_type', $group->payment_type) == 'per_student' ? 'selected' : '' }}>بالطالب</option>
                <option value="per_group" {{ old('payment_type', $group->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', $group->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', $group->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', $group->supported) == 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', $group->active) == 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', $group->notes) }}">
        </div>

        <div class="text-center my-3">
            <button type="submit" class="btn btn-primary px-5 fw-bold" id="submit_btn">تحديث البيانات</button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const isFoundation = "{{ old('type', $group->type ?? 'curriculum') }}" === 'foundation';
        
        // عناصر التحكم في واجهة المستخدم
        const wrapper = document.getElementById('schedules-wrapper');
        const addBtn = document.getElementById('add-schedule-btn');
        const form = document.querySelector('form'); // تأكد أن لديك فورم واحد في الصفحة

        // دالة لإعادة ترقيم الصفوف (Re-indexing)
        function reindexSchedules() {
            const rows = wrapper.querySelectorAll('.schedule-row');
            rows.forEach((row, index) => {
                row.querySelector('select[name*="day"]').setAttribute('name', `schedules[${index}][day]`);
                row.querySelector('input[name*="start_time"]').setAttribute('name', `schedules[${index}][start_time]`);
                row.querySelector('input[name*="end_time"]').setAttribute('name', `schedules[${index}][end_time]`);
            });
        }

        // إضافة صف جديد
        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[new][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[new][start_time]" class="form-control form-control-sm" required>
                </div>
                <div class="col-md-3">
                    <input type="time" name="schedules[new][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);
        });

        // حذف صف
        wrapper.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-schedule-btn')) {
                e.target.closest('.schedule-row').remove();
            }
        });

        // قبل إرسال الفورم، قم بإعادة ترتيب الـ Names
        form.addEventListener('submit', function (e) {
            reindexSchedules();
        });

        // --- منطق تبديل الواجهة (UI) ---
        function updateFormUI() {
            // ... (كود التبديل الخاص بك كما هو لا تغيير فيه)
        }
        updateFormUI();
    });
    </script>
@endsection