@extends('admin.admin_dashboard')

@section('customcss')
    <style>
        /* Layout & typography */
        .section-title {
            font-weight: 700;
            font-size: 16px;
            margin: 8px 0 16px;
            padding-left: 12px;
            border-left: 4px solid #6366f1;
            color: #111827;
        }

        /* Required star */
        .required-star {
            color: #dc2626;
            margin-left: 4px;
        }

        /* Help / hint text */
        .help-text {
            font-size: 12px;
            opacity: .85;
            color: #6b7280;
            margin-top: 4px;
        }

        /* Input error */
        .is-invalid {
            border-color: #dc2626 !important;
            box-shadow: none;
        }

        .invalid-feedback {
            color: #dc2626;
            font-size: 13px;
            margin-top: 4px;
        }

        /* Image preview */
        #student_photo_preview {
            max-height: 120px;
            display: block;
        }

        /* Sticky action bar */
        .sticky-actions {
            position: sticky;
            bottom: 0;
            background: #ffffff;
            padding: 12px;
            border-top: 1px solid #e6e6e6;
            z-index: 20;
            box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04);
        }

        /* Responsive tweaks */
        @media (max-width: 575px) {
            .sticky-actions {
                padding: 10px;
            }
        }

        /* Small subtle card look for sections */
        .form-card {
            padding: 16px;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            margin-bottom: 16px;
        }
    </style>
@endsection

@section('admin')
    <!--**********************************
                        Content body start
                    ***********************************-->
    <div class="content-body">
        <div class="container-fluid">
            <div class="row page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Add New Student</a></li>
                </ol>
            </div>

            <div class="col-xl-12 col-lg-12">
                <div class="card form-card">
                    <div class="card-header">
                        <h4 class="card-title">Student Admission Form</h4>
                    </div>

                    <div class="card-body">
                        <div class="basic-form">
                            <form id="admission_form" action="{{ route('admin.store.student.admission') }}" method="post"
                                enctype="multipart/form-data" novalidate>
                                @csrf

                                {{-- ================= Academic Information ================= --}}
                                <div class="row">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Academic Information</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Form No <span class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="form_no" id="form_no"
                                            value="{{ old('form_no') }}" placeholder="Auto generated" readonly
                                            aria-readonly="true">
                                        @error('form_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Session <span class="required-star">*</span></label>
                                        <select name="session_id" id="session_id" class="default-select form-control wide"
                                            required aria-required="true">
                                            <option value="">--- Select Session ---</option>
                                            @foreach($sessions as $session)
                                                <option value="{{ $session->id }}" {{ old('session_id') == $session->id ? 'selected' : '' }}>{{ $session->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="help-text" id="session_help">Select session to check for missed-month
                                            fees (if any).</div>
                                        @error('session_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Class <span class="required-star">*</span></label>
                                        <select name="class_id" id="class_id" class="default-select form-control wide"
                                            required aria-required="true">
                                            <option value="">Select Class</option>
                                            @foreach($allClass as $class)
                                                <option value="{{ $class->id }}"
                                                    data-class-name="{{ strtolower($class->name) }}" {{ old('class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                                            @endforeach
                                        </select>
                                        {{-- <div class="help-text">Selecting a class auto-generates Form No & Admission
                                            Roll.
                                            Sections will load automatically.</div> --}}
                                        @error('class_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Version</label>
                                        <select id="version" name="version" class="default-select form-control wide">
                                            <option value="Bangla Version" {{ old('version', 'Bangla Version') == 'Bangla Version' ? 'selected' : '' }}>Bangla Version</option>
                                            <option value="English Version" {{ old('version') == 'English Version' ? 'selected' : '' }}>English Version</option>
                                            <option value="English Medium" {{ old('version') == 'English Medium' ? 'selected' : '' }}>English Medium</option>
                                        </select>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Shift</label>
                                        <select id="shift" name="shift_id" class="default-select form-control wide" required>
                                            <option value="">--Select Class--</option>
                                            @foreach($shifts as $shift)
                                                <option value="{{ $shift->id }}" >{{ $shift->name }}</option>
                                            @endforeach
                                            
                                        </select>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Section <span class="required-star">*</span></label>
                                        <select name="section_id" id="section_id" class="default-select form-control wide"
                                            required aria-required="true">
                                            <option value="">Select Section</option>
                                            {{-- Populated by AJAX --}}
                                        </select>
                                        @error('section_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Admission Roll <span
                                                class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="admission_roll" id="admission_roll"
                                            value="{{ old('admission_roll') }}" placeholder="Auto generated" readonly
                                            aria-readonly="true" required>
                                        @error('admission_roll') <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- Group for Class 9/10 (hidden by default) --}}
                                    <div class="mb-3 col-md-3 d-none" id="group_wrapper">
                                        <label class="form-label">Group</label>
                                        <select name="group_name" id="group_name" class="default-select form-control wide"
                                            disabled>
                                            <option value="">--- Select Group ---</option>
                                            @foreach($groups as $group)
                                                <option value="{{ $group->id }}">{{ $group->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Class Roll <span class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="class_roll" id="class_roll" required>
                                        @error('class_roll') <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                {{-- ================= Student Information ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Student Information</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Student Name (Bangla) </label>
                                        <input type="text"
                                            class="form-control @error('student_name_bangla') is-invalid @enderror"
                                            name="student_name_bangla" value="{{ old('student_name_bangla') }}"
                                            placeholder="Student name">
                                        @error('student_name_bangla') <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Student Name (English) <span
                                                class="required-star">*</span></label>
                                        <input type="text"
                                            class="form-control @error('student_name_english') is-invalid @enderror"
                                            name="student_name_english" value="{{ old('student_name_english') }}"
                                            placeholder="Student name" required>
                                        @error('student_name_english') <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Gender <span class="required-star">*</span></label>
                                        <select id="gender" name="gender" class="default-select form-control wide" required>
                                            <option value="Male" {{ old('gender', 'Male') == 'Male' ? 'selected' : '' }}>Male
                                            </option>
                                            <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female
                                            </option>
                                            <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other
                                            </option>
                                        </select>
                                        @error('gender') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Religion</label>
                                        <input type="text" class="form-control" name="religion"
                                            value="{{ old('religion') }}" placeholder="Religion">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Blood Group</label>
                                        <select id="blood_group" name="blood_group"
                                            class="default-select form-control wide">
                                            <option value="">Select Blood Group</option>
                                            <option value="A+" {{ old('blood_group') == 'A+' ? 'selected' : '' }}>A+</option>
                                            <option value="A-" {{ old('blood_group') == 'A-' ? 'selected' : '' }}>A-</option>
                                            <option value="AB+" {{ old('blood_group') == 'AB+' ? 'selected' : '' }}>AB+
                                            </option>
                                            <option value="AB-" {{ old('blood_group') == 'AB-' ? 'selected' : '' }}>AB-
                                            </option>
                                            <option value="B+" {{ old('blood_group') == 'B+' ? 'selected' : '' }}>B+</option>
                                            <option value="B-" {{ old('blood_group') == 'B-' ? 'selected' : '' }}>B-</option>
                                            <option value="O+" {{ old('blood_group') == 'O+' ? 'selected' : '' }}>O+</option>
                                            <option value="O-" {{ old('blood_group') == 'O-' ? 'selected' : '' }}>O-</option>
                                        </select>
                                        @error('blood_group') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="col-xl-3 col-xxl-3 col-md-3 mb-3">
                                        <label class="form-label">Birth Date <span class="required-star">*</span></label>
                                        <input type="text" class="form-control datepicker @error('birth_date') is-invalid @enderror"
                                            name="birth_date" id="birth_date" value="{{ old('birth_date') }}"
                                            placeholder="DD-MM-YYYY" required autocomplete="off">
                                        @error('birth_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Nationality</label>
                                        <select id="nationality" name="nationality"
                                            class="default-select form-control wide">
                                            <option value="Bangladesh" {{ old('nationality', 'Bangladesh') == 'Bangladesh' ? 'selected' : '' }}>Bangladesh
                                            </option>
                                            <option value="India" {{ old('nationality') == 'India' ? 'selected' : '' }}>India
                                            </option>
                                            <option value="China" {{ old('nationality') == 'China' ? 'selected' : '' }}>China
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                {{-- ================= Parents Information ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Parents Information</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Father's Name (English) <span
                                                class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="father_name_english"
                                            value="{{ old('father_name_english') }}" placeholder="Father's name" required>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Father's Name (Bangla)</label>
                                        <input type="text" class="form-control" name="father_name_bangla"
                                            value="{{ old('father_name_bangla') }}" placeholder="Father's name">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Phone</label>
                                        <input type="text" class="form-control" name="father_phone"
                                            value="{{ old('father_phone') }}" placeholder="Phone">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">NID No</label>
                                        <input type="text" class="form-control" name="father_nid"
                                            value="{{ old('father_nid') }}" placeholder="NID No">
                                    </div>

                                    {{-- Mother --}}
                                    <div class="col-md-12"></div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Mother's Name (English) <span
                                                class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="mother_name_english"
                                            value="{{ old('mother_name_english') }}" placeholder="Mother's name" required>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Mother's Name (Bangla)</label>
                                        <input type="text" class="form-control" name="mother_name_bangla"
                                            value="{{ old('mother_name_bangla') }}" placeholder="Mother's name">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Phone</label>
                                        <input type="text" class="form-control" name="mother_phone"
                                            value="{{ old('mother_phone') }}" placeholder="Phone">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">NID No</label>
                                        <input type="text" class="form-control" name="mother_nid"
                                            value="{{ old('mother_nid') }}" placeholder="NID No">
                                    </div>

                                </div>

                                {{-- ================= Present Address ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Present Address</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Village</label>
                                        <input type="text" class="form-control" name="present_village"
                                            value="{{ old('present_village') }}" placeholder="Village">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Post Office</label>
                                        <input type="text" class="form-control" name="present_post_office"
                                            value="{{ old('present_post_office') }}" placeholder="Post Office">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Post Code</label>
                                        <input type="text" class="form-control" name="present_post_code"
                                            value="{{ old('present_post_code') }}" placeholder="Post Code">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Upazilla</label>
                                        <input type="text" class="form-control" name="present_upazilla"
                                            value="{{ old('present_upazilla') }}" placeholder="Upazilla">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">District</label>
                                        <input type="text" class="form-control" name="present_district"
                                            value="{{ old('present_district') }}" placeholder="District">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Division</label>
                                        <input type="text" class="form-control" name="present_division"
                                            value="{{ old('present_division') }}" placeholder="Division">
                                    </div>
                                </div>

                                {{-- ================= Permanent Address ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Permanent Address</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Village</label>
                                        <input type="text" class="form-control" name="permanent_village"
                                            value="{{ old('permanent_village') }}" placeholder="Village">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Post Office</label>
                                        <input type="text" class="form-control" name="permanent_post_office"
                                            value="{{ old('permanent_post_office') }}" placeholder="Post Office">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Post Code</label>
                                        <input type="text" class="form-control" name="permanent_post_code"
                                            value="{{ old('permanent_post_code') }}" placeholder="Post Code">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Upazilla</label>
                                        <input type="text" class="form-control" name="permanent_upazilla"
                                            value="{{ old('permanent_upazilla') }}" placeholder="Upazilla">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">District</label>
                                        <input type="text" class="form-control" name="permanent_district"
                                            value="{{ old('permanent_district') }}" placeholder="District">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Division</label>
                                        <input type="text" class="form-control" name="permanent_division"
                                            value="{{ old('permanent_division') }}" placeholder="Division">
                                    </div>
                                </div>

                                {{-- ================= Guardian Information ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Guardian Information</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Guardian Name</label>
                                        <input type="text" class="form-control" name="guardian_name"
                                            value="{{ old('guardian_name') }}" placeholder="Guardian name">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Student Relation</label>
                                        <input type="text" class="form-control" name="guardian_relation"
                                            value="{{ old('guardian_relation') }}" placeholder="Student Relation">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Address</label>
                                        <input type="text" class="form-control" name="guardian_address"
                                            value="{{ old('guardian_address') }}" placeholder="Address">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Phone</label>
                                        <input type="text" class="form-control" name="guardian_phone"
                                            value="{{ old('guardian_phone') }}" placeholder="Phone">
                                    </div>
                                </div>

                                {{-- ================= Previous School Information ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Previous School Information</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">School Name</label>
                                        <input type="text" class="form-control" name="previous_school_name"
                                            value="{{ old('previous_school_name') }}" placeholder="School name">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Address</label>
                                        <input type="text" class="form-control" name="previous_school_address"
                                            value="{{ old('previous_school_address') }}" placeholder="Address">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Transfer Reason</label>
                                        <input type="text" class="form-control" name="transfer_reason"
                                            value="{{ old('transfer_reason') }}" placeholder="Transfer Reason">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Class</label>
                                        <input type="text" class="form-control" name="previous_class"
                                            value="{{ old('previous_class') }}" placeholder="Class">
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Roll</label>
                                        <input type="text" class="form-control" name="previous_roll"
                                            value="{{ old('previous_roll') }}" placeholder="Roll">
                                    </div>
                                </div>

                                {{-- ================= Contact Information ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Contact Information</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">WhatsApp Number <span
                                                class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="whatsapp_number"
                                            value="{{ old('whatsapp_number') }}" placeholder="Enter WhatsApp number"
                                            required>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">SMS Number <span class="required-star">*</span></label>
                                        <input type="text" class="form-control" name="sms_number"
                                            value="{{ old('sms_number') }}" placeholder="Enter SMS number" required>
                                    </div>
                                </div>

                                {{-- ================= Attached Documents ================= --}}
                                <div class="row form-material">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label section-title">Attached Documents</label>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Photo Of Student</label>
                                        <div class="input-group">
                                            <input type="file" class="form-file-input form-control" name="student_photo"
                                                id="student_photo" accept="image/*" aria-describedby="studentPhotoHelp">
                                        </div>
                                        <div id="studentPhotoHelp" class="help-text">Recommended size: 300x300px. JPG/PNG
                                            only.</div>
                                        <img id="student_photo_preview" src="#" alt="Preview"
                                            class="mt-2 img-thumbnail d-none" style="max-height:120px;">
                                        @error('student_photo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">Birth Certificate (Image / PDF)</label>
                                        <div class="input-group">
                                            <input type="file" class="form-file-input form-control"
                                                name="birth_certificate_photo" accept="image/*,application/pdf">
                                        </div>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">NID of Father</label>
                                        <div class="input-group">
                                            <input type="file" class="form-file-input form-control" name="father_nid_photo"
                                                accept="image/*,application/pdf">
                                        </div>
                                    </div>

                                    <div class="mb-3 col-md-3">
                                        <label class="form-label">NID of Mother</label>
                                        <div class="input-group">
                                            <input type="file" class="form-file-input form-control" name="mother_nid_photo"
                                                accept="image/*,application/pdf">
                                        </div>
                                    </div>
                                </div>

                                {{-- Late months wrapper (injected by session check) --}}
                                <div id="late_months_container"></div>

                                {{-- Sticky action buttons --}}
                                <div class="row sticky-actions">
                                    <div class="mb-3 col-md-6 text-start">
                                        <button type="button" id="btnReset" class="btn btn-light">Reset</button>
                                    </div>

                                    <div class="mb-3 col-md-6 text-end">
                                        <button type="button" id="btnCancel" class="btn btn-danger me-2">Cancel</button>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--**********************************
                        Content body end
                    ***********************************-->
@endsection

@section('customjs')
    <!-- jQuery UI for Datepicker -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize datepicker for birth_date - typeable and selectable
            $('#birth_date').datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                yearRange: '1950:now',
                maxDate: '0', // Cannot select future dates
                showButtonPanel: true,
                beforeShow: function(input, inst) {
                    setTimeout(function() {
                        inst.dpDiv.css({
                            'font-size': '14px'
                        });
                    }, 0);
                }
            });

            // Initialize niceSelect if available
            function updateNice() {
                if ($.fn.niceSelect) { $('.default-select').niceSelect('update'); }
            }

            // CSRF for all AJAX requests
            $.ajaxSetup({
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });

            // Fetch and toggle groups based on selected class
            function loadGroupsForClass(class_id) {
                var $wrap = $('#group_wrapper');
                var $group = $('#group_name');

                if (!class_id) {
                    $wrap.addClass('d-none');
                    $group.val('').prop('disabled', true).empty().append('<option value="">--- Select Group ---</option>');
                    updateNice();
                    return;
                }

                // Fetch groups for selected class
                $.ajax({
                    url: "{{ route('get.groups.by.class') }}",
                    type: "POST",
                    data: { class_id: class_id },
                    success: function (data) {
                        $group.empty().append('<option value="">--- Select Group ---</option>');
                        
                        if (Array.isArray(data) && data.length > 0) {
                            // Class has groups, show the wrapper
                            $.each(data, function (key, value) {
                                var selected = (value.id == '{{ old('group_name') }}') ? 'selected' : '';
                                $group.append('<option value="' + value.id + '" ' + selected + '>' + value.name + '</option>');
                            });
                            $wrap.removeClass('d-none');
                            $group.prop('disabled', false);
                        } else {
                            // No groups for this class, hide the wrapper
                            $wrap.addClass('d-none');
                            $group.val('').prop('disabled', true);
                        }
                        updateNice();
                    },
                    error: function () {
                        console.error('AJAX error while loading groups');
                        $wrap.addClass('d-none');
                        $group.val('').prop('disabled', true).empty().append('<option value="">--- Select Group ---</option>');
                        updateNice();
                    }
                });
            }

            // Initial load (for old values)
            var initialClassId = $('#class_id').val();
            if (initialClassId) {
                loadGroupsForClass(initialClassId);
            }

            // Debounce utility
            function debounce(fn, wait) {
                var t;
                return function () {
                    var args = arguments, ctx = this;
                    clearTimeout(t);
                    t = setTimeout(function () { fn.apply(ctx, args); }, wait);
                };
            }

            // On class change: load sections, groups and get roll/form number
            $('#class_id').on('change', function () {
                var class_id = $(this).val();
                
                // Load groups for selected class
                loadGroupsForClass(class_id);
                var $section = $('#section_id');

                if (class_id) {
                    // show loading placeholder
                    $section.prop('disabled', true).html('<option value="">Loading...</option>');
                    updateNice();

                    // Fetch Sections
                    $.ajax({
                        url: "{{ route('get.sections.by.class') }}",
                        type: "POST",
                        data: { class_id: class_id },
                        success: function (data) {
                            $section.empty().append('<option value="">Select Section</option>');
                            if (Array.isArray(data) && data.length) {
                                $.each(data, function (key, value) {
                                    var selected = (value.id == '{{ old('section_id') }}') ? 'selected' : '';
                                    $section.append('<option value="' + value.id + '" ' + selected + '>' + value.name + '</option>');
                                });
                            }
                            $section.prop('disabled', false);
                            updateNice();
                        },
                        error: function () {
                            $section.prop('disabled', false).html('<option value="">Select Section</option>');
                            updateNice();
                            console.error('AJAX error while loading sections');
                        }
                    });

                    // Fetch Roll & Form Number (GET) - include session_id
                    var session_id = $('#session_id').val();
                    if (session_id) {
                        $.ajax({
                            url: "/admin/generate-roll/" + class_id,
                            type: "GET",
                            data: { session_id: session_id },
                            success: function (data) {
                                $('#admission_roll').val(data.roll || '');
                                $('#form_no').val(data.form_no || '');
                                $('#class_roll').val(data.class_roll || '');
                            },
                            error: function (xhr) {
                                console.error('Roll Fetch error:', xhr.responseJSON);
                                if (xhr.responseJSON && xhr.responseJSON.error) {
                                    alert('Error: ' + xhr.responseJSON.error);
                                }
                            }
                        });
                    } else {
                        alert('Please select session first!');
                        $('#class_id').val('');
                        updateNice();
                    }

                } else {
                    $section.empty().append('<option value="">Select Section</option>').prop('disabled', false);
                    $('#admission_roll').val('');
                    $('#form_no').val('');
                    updateNice();
                }
            });

            // Image preview for student photo (modern and robust)
            $('#student_photo').on('change', function () {
                const file = this.files && this.files[0];
                const $img = $('#student_photo_preview');

                if (!file) {
                    $img.addClass('d-none').attr('src', '#');
                    return;
                }

                // Validate type roughly
                if (!file.type.match('image.*')) {
                    alert('Only image files (JPG/PNG) are allowed for student photo.');
                    $(this).val('');
                    $img.addClass('d-none').attr('src', '#');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function (e) {
                    $img.attr('src', e.target.result).removeClass('d-none');
                };
                reader.readAsDataURL(file);
            });

            // Reset button behavior (soft reset)
            $('#btnReset').on('click', function () {
                const form = document.getElementById('admission_form');
                if (form) { form.reset(); }
                // Clear preview
                $('#student_photo_preview').addClass('d-none').attr('src', '#');
                // Reset selects & group visibility
                updateNice();
                loadGroupsForClass('');
                // remove late months if present
                $('#late_months_container').empty();
            });

            // Cancel button: go back in history
            $('#btnCancel').on('click', function () {
                if (confirm('আপনি কি সত্যিই বাতিল করে পূর্বের পৃষ্ঠায় যেতে চান?')) {
                    window.history.back();
                }
            });

            // Session change: check for missed months fees (debounced)
            $('#session_id').on('change', debounce(function () {
                var session_id = $(this).val();
                if (!session_id) {
                    $('#late_months_container').empty();
                    return;
                }

                // If class is already selected, regenerate roll numbers
                var class_id = $('#class_id').val();
                if (class_id) {
                    $.ajax({
                        url: "/admin/generate-roll/" + class_id,
                        type: "GET",
                        data: { session_id: session_id },
                        success: function (data) {
                            $('#admission_roll').val(data.roll || '');
                            $('#form_no').val(data.form_no || '');
                            $('#class_roll').val(data.class_roll || '');
                        },
                        error: function (xhr) {
                            console.error('Roll Fetch error:', xhr.responseJSON);
                        }
                    });
                }

                $.ajax({
                    url: "/admin/check-session/" + session_id,
                    type: "GET",
                    success: function (res) {
                        $('#late_months_container').empty();
                        if (res.status === 'error') {
                            alert(res.message || 'Session check error.');
                            return;
                        }
                        else if (res.status === 'ended' && Array.isArray(res.months) && res.months.length) {
                            var html = '<div id="late_months_wrapper" class="row mt-3">' +
                                '<div class="mb-3 col-md-12">' +
                                '<label class="form-label section-title">Missed Months Fees</label></div>';

                            $.each(res.months, function (i, m) {
                                // m.value and m.label expected
                                html += '<div class="mb-2 col-md-3">' +
                                    '<label><input type="checkbox" name="late_months[]" value="' + m.value + '"> ' + m.label + '</label>' +
                                    '</div>';
                            });

                            html += '</div>';
                            $('#late_months_container').html(html);
                        } else {
                            // ongoing session or no missed months
                            $('#late_months_container').empty();
                        }
                    },
                    error: function () {
                        console.error('Session check ajax failed');
                        $('#late_months_container').empty();
                    }
                });
            }, 300));

            // Client-side: on form submit, mark invalid fields (HTML5 validation)
            $('#admission_form').on('submit', function (e) {
                // Use native constraint validation for required fields
                if (!this.checkValidity()) {
                    e.preventDefault();
                    e.stopPropagation();

                    // Add is-invalid class to invalid fields for visual feedback
                    $(this).find(':input[required]').each(function () {
                        if (!this.checkValidity()) {
                            $(this).addClass('is-invalid');
                        } else {
                            $(this).removeClass('is-invalid');
                        }
                    });

                    // Scroll to first invalid
                    var $firstInvalid = $(this).find('.is-invalid').first();
                    if ($firstInvalid.length) {
                        $('html, body').animate({ scrollTop: $firstInvalid.offset().top - 100 }, 300);
                    }
                    return false;
                }
                // Let browser submit normally; server-side validation will handle rest
                return true;
            });

            // On input change, clear invalid class when corrected
            $(document).on('input change', '#admission_form :input', function () {
                if ($(this).hasClass('is-invalid') && this.checkValidity()) {
                    $(this).removeClass('is-invalid');
                }
            });

            // If blade passed old section (from validation failure), try to trigger class change to populate it
            @if(old('class_id'))
                // Trigger change to populate sections and form fields
                $('#class_id').trigger('change');
            @endif

            // initial niceSelect update
            updateNice();
        });
    </script>

@endsection