@extends('layouts.app')

@section('content')
<div class="container">
    <x-header title="إضافة طالب جديد" />
    
    @if(session('success'))
        <div class="alert alert-success text-center alert-dismissible fade show">{{ session('success') }}</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif
   
    @if(session('status'))
        <div class="alert alert-danger text-center alert-dismissible fade show">
            {{ session('status') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <form action="{{ route('students.store') }}" method="POST" class="row g-3 needs-validation" novalidate>
        @csrf

        <!-- الكنيسة -->
        <div class="col-md-4">
            <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 " 
                    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>
            @else
                <div class="invalid-feedback">Please select a valid state.</div>
            @enderror
        </div>

        <!-- الرقم القومى -->
        <div class="col-md-4">
            <label for="NID" class="form-label">الرقم القومى</label>
            <input type="number" 
                class="form-control @error('NID') is-invalid @enderror 
              @if(old('NID') && !$errors->has('NID')) is-valid @endif" 
                id="NID" 
                name="NID" 
                value="{{ old('NID') }}">
            @error('NID')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="valid-feedback">كده تمام 👍</div>
            @enderror
        </div>
        
        <!-- الإسم -->
        <div class="col-md-4">
            <label for="name" class="form-label">الإسم رباعى</label>
            <input type="text" 
                class="form-control @error('name') is-invalid @enderror 
              @if(old('name') && !$errors->has('name')) is-valid @endif" 
                id="name" 
                name="name" 
                value="{{ old('name') }}">
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="valid-feedback">كده تمام 👍</div>
            @enderror
        </div>
        
        <!-- المرحلة الدراسية -->
        <div class="col-md-4">
            <label for="stage_id" class="form-label">المرحلة الدراسية</label>
            <select class="form-select @error('stage_id') is-invalid @enderror 
              @if(old('stage_id') && !$errors->has('stage_id')) is-valid @endif " 
                    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>
            @else
                <div class="invalid-feedback">Please select a valid state.</div>
            @enderror
        </div>
        
        <!-- نظام التعليم -->
        <div class="col-md-4">
            <label for="school_type" class="form-label">نظام التعليم</label>
            <select class="form-select @error('school_type') is-invalid @enderror 
              @if(old('school_type') && !$errors->has('school_type')) is-valid @endif " 
                    id="school_type" 
                    name="school_type" 
                    >
                <option selected disabled value="">إختار...</option>
                <option value="public" {{ old('school_type') == 'public' ? 'selected' : '' }}>
                    حكومى
                </option>
                <option value="private" {{ old('school_type') == 'private' ? 'selected' : '' }}>
                    خاص
                </option>
            </select>
            @error('school_type')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="invalid-feedback">Please select a valid state.</div>
            @enderror
        </div>
        
        <!-- نوع الدراسة -->
        <div class="col-md-4">
            <label for="study_type" class="form-label">نوع الدراسة</label>
            <select class="form-select @error('study_type') is-invalid @enderror 
              @if(old('study_type') && !$errors->has('study_type')) is-valid @endif " 
                    id="study_type" 
                    name="study_type" 
                    >
                <option selected disabled value="">إختار...</option>
                    <option value="arabic" {{ old('study_type') == 'arabic' ? 'selected' : '' }}>
                        عربى
                    </option>
                    <option value="experimental" {{ old('study_type') == 'experimental' ? 'selected' : '' }}>
                        تجريبي
                    </option>
            </select>
            @error('study_type')
                <div class="invalid-feedback">{{ $message }}</div>
            @else
                <div class="invalid-feedback">Please select a valid state.</div>
            @enderror
        </div>

        <!-- الهاتف -->
        <div class="col-md-6">
            <label for="phone_1" class="form-label">الهاتف</label>
            <input type="text" name="phone[]" id="phone_1" value="{{ old('phone.0')}}" class="form-control @error('phone.0') is-invalid @enderror @if(old('phone.0') && !$errors->has('phone.0')) is-valid @endif">
            @error('phone.0')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- الهاتف -->
        <div class="col-md-6">
            <label for="phone_2" class="form-label">هاتف أخر</label>
            <input type="text" name="phone[]" id="phone_2" value="{{ old('phone.1')}}" class="form-control @error('phone.1') is-invalid @enderror @if(old('phone.1') && !$errors->has('phone.1')) is-valid @endif">
            @error('phone.1')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- المجموعات --}}
        <div class="col-md-12 mt-4 d-none" id="groups-section">
            <h5 class="mb-3 pb-2 border-bottom text-primary fw-bold text-end">المجموعات المتاحة للمرحلة:</h5>
            
            <div id="groups-cards-container" class="d-md-none">
                </div>

            <div class="table-responsive d-none d-md-block" dir="rtl">
                <table class="table table-bordered table-hover align-middle text-center">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 10%">إختيار</th>
                            <th>المادة</th>
                            <th>المدرس</th>
                            <th>المواعيد</th>
                            <th style="width: 15%">السعر</th>
                        </tr>
                    </thead>
                    <tbody id="groups-table-body">
                        </tbody>
                </table>
            </div>
        </div>

        <!-- زر الإضافة -->
        <div class="text-center my-3">
            <button type="submit" class="btn btn-success">إضافة</button>
        </div>

    </form>
</div>

{{-- بحث عن طريق الرقم القومى --}}
<script>
    /**
     * 1. دالة لتصفير الحقول وإعادة تفعيل زر الإضافة
     */
    function resetFormFields() {
        const fieldsToReset = ['name', 'phone_1']; 
        fieldsToReset.forEach(id => {
            const field = document.getElementById(id);
            if (field) {
                field.value = '';
                field.style.backgroundColor = '';
            }
        });

        const msgDiv = document.getElementById('nid_message');
        if (msgDiv) msgDiv.classList.add('d-none');
        
        document.querySelector('button[type="submit"]').disabled = false;

        const groupsSection = document.getElementById('groups-section');
        if (groupsSection) groupsSection.classList.add('d-none');
    }

    /**
     * 2. دالة إظهار الرسائل وتغيير حالة زر الإرسال
     */
    function showMessage(text, colorClass, disableSubmit = false) {
        const msgDiv = document.getElementById('nid_message');
        if (msgDiv) {
            msgDiv.textContent = text;
            msgDiv.className = `small fw-bold mt-2 ${colorClass}`;
            msgDiv.classList.remove('d-none');
        }
        document.querySelector('button[type="submit"]').disabled = disableSubmit;
    }

    /**
     * 3. حدث مراقبة الحقل (Input Event)
     */
    document.getElementById('NID').addEventListener('input', function() {
        let nid = this.value;

        if (nid.length === 0) {
            resetFormFields();
            return;
        }

        if (nid.length === 14) {
            showMessage('جاري التحقق من البيانات...', 'text-secondary');

            fetch(`/students/check-old-data/${nid}`)
            .then(response => response.json())
            .then(data => {
                if (data.exists) {
                    if (data.is_current) {
                        // الحالة 1: موجود في النظام الحالي (تحذير ومنع)
                        showMessage(data.message, 'text-danger', true);
                        const nameField = document.getElementById('name');
                        if (nameField) {
                            nameField.value = data.student.name;
                            nameField.style.backgroundColor = '#f8d7da'; 
                        }
                    } else {
                        // الحالة 2: موجود في البيانات القديمة (تسهيل)
                        showMessage(data.message + ' - يرجى استكمال البيانات', 'text-success', false);
                        const nameField = document.getElementById('name');
                        const phoneField = document.getElementById('phone_1');
                        if (nameField) { nameField.value = data.student.name || ''; nameField.style.backgroundColor = '#e8f0fe'; }
                        if (phoneField) { phoneField.value = data.student.phone || ''; phoneField.style.backgroundColor = '#e8f0fe'; }
                    }
                } else {
                    // الحالة 3: الرقم مش موجود خالص (طلب الموظف)
                    showMessage('هذا الرقم غير مسجل مسبقاً، يمكنك البدء في إدخال بيانات جديدة', 'text-primary', false);
                    
                    // تنظيف الحقول عشان الموظف يكتب براحته
                    const nameField = document.getElementById('name');
                    const phoneField = document.getElementById('phone_1');
                    if (nameField) { nameField.value = ''; nameField.style.backgroundColor = '#d1e7dd'; } // لون أخضر فاتح للترحيب
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage('حدث خطأ في الاتصال بالسيرفر', 'text-danger');
            });

        } else {
            // لو لسه مكملش الـ 14 رقم أو مسح
            const msgDiv = document.getElementById('nid_message');
            if (msgDiv) msgDiv.classList.add('d-none');
            document.querySelector('button[type="submit"]').disabled = false;
        }
    });
</script>

{{-- بحث عن المجموعات --}}
<script>
    // 1. مراقبة التغيير في الحقول الأساسية
    ['church_id', 'stage_id', 'study_type'].forEach(id => {
        const element = document.getElementById(id);
        if(element) {
            element.addEventListener('change', checkInputsAndFetch);
        }
    });

    function checkInputsAndFetch() {
        const church = document.getElementById('church_id').value;
        const stage = document.getElementById('stage_id').value;
        const studyType = document.getElementById('study_type').value;

        // لا يتم البحث إلا إذا اكتملت الخيارات الثلاثة
        if (church && stage && studyType) {
            fetchGroups(church, stage, studyType);
        }
    }

    function fetchGroups(church, stage, studyType) {
        const container = document.getElementById('groups-cards-container');
        const tableBody = document.getElementById('groups-table-body');
        const section = document.getElementById('groups-section');

        fetch(`/get-groups?church_id=${church}&stage_id=${stage}&study_type=${studyType}`)
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(groups => {
            let cardsHtml = '';
            let rowsHtml = '';

            if (groups && groups.length > 0) {
                // بداية الـ Loop اللي كانت مسببة الخطأ
                groups.forEach(group => {
                    const teacherName = group.teacher ? group.teacher.name : 'مدرس غير محدد';
                    const priceDisplay = (parseFloat(group.student_fee) > 0) 
                                        ? group.student_fee + ' ج.م' 
                                        : 'غير محدد';

                    // --- حساب المقاعد المتاحة ---
                    const availableSeats = group.max_students - (group.registered_count || 0);
                    const isFull = availableSeats <= 0;
                    const seatsColor = isFull ? 'text-danger' : (availableSeats <= 5 ? 'text-warning' : 'text-success');
                    const seatsText = isFull ? '(مكتملة)' : `(متاح ${availableSeats})`;
                    const isDisabled = isFull ? 'disabled' : '';

                    // --- قالب الكروت للموبايل (Mobile Cards) ---
                    cardsHtml += `
                    <div class="card mb-3 shadow-sm border-0 border-start border-4 ${isFull ? 'border-danger opacity-75' : 'border-success'} text-end">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h6 class="fw-bold mb-1">
                                        ${group.subject_name} 
                                        <span class="${seatsColor} small" style="font-size: 0.8rem;">${seatsText}</span>
                                    </h6>
                                    <div class="small text-muted mb-1">
                                        <i class="fas fa-chalkboard-teacher me-1"></i> ${teacherName}
                                    </div>
                                    <div class="small text-secondary mb-2">
                                        <i class="far fa-calendar-alt me-1"></i> ${group.day_name || 'يوم غير محدد'} 
                                        <i class="far fa-clock ms-2 me-1"></i> من ${group.start_time_formatted || group.start_time} لـ ${group.end_time_formatted || group.end_time}
                                    </div>
                                    <span class="badge rounded-pill bg-primary-subtle text-primary border border-primary-subtle px-3 py-1">
                                        <i class="fas fa-tags me-1 small"></i> ${priceDisplay}
                                    </span>
                                </div>
                                <div class="col-4 text-center">
                                    <input type="checkbox" class="btn-check group-checkbox" 
                                        id="m-grp-${group.id}" name="groups[]" value="${group.id}" ${isDisabled}>
                                    <label class="btn ${isFull ? 'btn-outline-secondary' : 'btn-outline-success'} btn-sm w-100 py-3 fw-bold" for="m-grp-${group.id}">
                                        ${isFull ? 'مكتملة' : 'إختيار'}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>`;

                    // --- قالب الجدول للكمبيوتر (Desktop Table) ---
                    rowsHtml += `
                    <tr class="${isFull ? 'table-light text-muted' : ''}">
                        <td>
                            <input type="checkbox" class="btn-check group-checkbox" 
                                id="d-grp-${group.id}" name="groups[]" value="${group.id}" ${isDisabled}>
                            <label class="btn ${isFull ? 'btn-outline-secondary' : 'btn-outline-success'} btn-sm px-3" for="d-grp-${group.id}">
                                ${isFull ? 'مكتملة' : 'إختيار'}
                            </label>
                        </td>
                        <td class="text-end">
                            <div class="fw-bold">${group.subject_name}</div>
                            <div class="${seatsColor} small fw-bold">${seatsText}</div>
                        </td>
                        <td class="text-end">${teacherName}</td>
                        <td class="text-end small">
                            ${group.day_name || 'يوم غير محدد'} 
                            <br>
                            <span class="text-secondary">من ${group.start_time_formatted || group.start_time} لـ ${group.end_time_formatted || group.end_time}</span>
                        </td>
                        <td class="text-center"><span class="badge bg-light text-dark border">${priceDisplay}</span></td>
                    </tr>`;
                }); // نهاية الـ Loop

                container.innerHTML = cardsHtml;
                tableBody.innerHTML = rowsHtml;
                section.classList.remove('d-none');
            } else {
                section.classList.add('d-none');
            }
        })
        .catch(error => {
            console.error('Error fetching groups:', error);
        });
    }

    // 2. مزامنة الاختيار بين الموبايل والديسكتوب
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('group-checkbox')) {
            const groupId = e.target.value;
            const isChecked = e.target.checked;
            
            const relatedInputs = document.querySelectorAll(`input[name="groups[]"][value="${groupId}"]`);
            relatedInputs.forEach(input => {
                input.checked = isChecked;
            });
        }
    });
</script>


@endsection