@extends('admin.admin_dashboard')

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

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

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

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

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

        #student_photo_preview {
            max-height: 120px;
            display: block;
        }

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

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

        .form-card {
            padding: 16px;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            margin-bottom: 16px;
        }

        .field-changed {
            border-color: #10b981 !important;
            background-color: #f0fdf4 !important;
        }
    </style>
@endsection

@section('admin')
    <div class="content-body">
        <div class="container-fluid">
            <div class="row page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Edit 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">Edit Student Information</h4>
                    </div>
                    <div class="card-body">
                        <form id="edit_form" action="{{ route('admin.update.admission', $studentinfo->id) }}" method="post"
                            enctype="multipart/form-data">
                            @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="{{ $studentinfo->form_no }}" readonly>
                                </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>
                                        <option value="">--- Select Session ---</option>
                                        @foreach($sessions as $session)
                                        <option value="{{ $session->id }}" {{ $studentinfo->session_id == $session->id ?
                                            'selected' : '' }}>
                                            {{ $session->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </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>
                                        <option value="">Select Class</option>
                                        @foreach($allClass as $class)
                                        <option value="{{ $class->id }}" data-class-name="{{ strtolower($class->name) }}" {{
                                            $studentinfo->class_id == $class->id ? 'selected' : '' }}>
                                            {{ $class->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

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

                                <div class="mb-3 col-md-3">
                                    <label class="form-label">Shift</label>
                                    <select name="shift" class="default-select form-control wide">
                                        <option value="Day Shift" {{ $studentinfo->shift == 'Day Shift' ? 'selected' : ''
                                            }}>Day Shift</option>
                                        <option value="Morning Shift" {{ $studentinfo->shift == 'Morning Shift' ? 'selected'
                                            : '' }}>Morning Shift</option>
                                    </select>
                                </div>

                                <div class="mb-3 col-md-3">
                                    <label class="form-label">Section:</label>
                                    <select name="section_id" id="section_id" class="default-select form-control wide">
                                        <option value="">Select Section</option>
                                        @foreach($sections as $section)
                                        <option value="{{ $section->id }}" {{ $studentinfo->section_id == $section->id ?
                                            'selected' : '' }}>
                                            {{ $section->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </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="{{ $studentinfo->admission_roll }}" readonly>
                                </div>

                                <div class="mb-3 col-md-3">
                                    <label class="form-label">Status</label>
                                    <select name="status" class="default-select form-control wide">
                                        <option value="1" {{ $studentinfo->status == 1 ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ $studentinfo->status == 0 ? 'selected' : '' }}>Inactive
                                        </option>
                                    </select>
                                </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" name="student_name_bangla"
                                        value="{{ $studentinfo->student_name_bangla }}"></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"
                                        name="student_name_english" value="{{ $studentinfo->student_name_english }}"
                                        required></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Gender</label><select name="gender"
                                        class="default-select form-control wide">
                                        <option value="Male" {{ $studentinfo->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                        <option value="Female" {{ $studentinfo->gender == 'Female' ? 'selected' : '' }}>Female
                                        </option>
                                        <option value="Other" {{ $studentinfo->gender == 'Other' ? 'selected' : '' }}>Other
                                        </option>
                                    </select></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Religion</label><input type="text"
                                        class="form-control" name="religion" value="{{ $studentinfo->religion }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Phone</label><input type="text"
                                        class="form-control" name="phone" value="{{ $studentinfo->phone }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Blood Group</label><select
                                        name="blood_group" class="default-select form-control wide">
                                        <option value="">Select</option>
                                        <option value="A+" {{ $studentinfo->blood_group == 'A+' ? 'selected' : '' }}>A+</option>
                                        <option value="A-" {{ $studentinfo->blood_group == 'A-' ? 'selected' : '' }}>A-</option>
                                        <option value="B+" {{ $studentinfo->blood_group == 'B+' ? 'selected' : '' }}>B+</option>
                                        <option value="B-" {{ $studentinfo->blood_group == 'B-' ? 'selected' : '' }}>B-</option>
                                        <option value="AB+" {{ $studentinfo->blood_group == 'AB+' ? 'selected' : '' }}>AB+
                                        </option>
                                        <option value="AB-" {{ $studentinfo->blood_group == 'AB-' ? 'selected' : '' }}>AB-
                                        </option>
                                        <option value="O+" {{ $studentinfo->blood_group == 'O+' ? 'selected' : '' }}>O+</option>
                                        <option value="O-" {{ $studentinfo->blood_group == 'O-' ? 'selected' : '' }}>O-</option>
                                    </select></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Birth Date</label><input type="date"
                                        class="form-control" name="birth_date" value="{{ $studentinfo->birth_date }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Birth Certificate</label><input
                                        type="text" class="form-control" name="birth_certificate"
                                        value="{{ $studentinfo->birth_certificate }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Email</label><input type="email"
                                        class="form-control" name="email" value="{{ $studentinfo->email }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Nationality</label><select
                                        name="nationality" class="default-select form-control wide">
                                        <option value="Bangladesh" {{ $studentinfo->nationality == 'Bangladesh' ? 'selected' : '' }}>Bangladesh</option>
                                        <option value="India" {{ $studentinfo->nationality == 'India' ? 'selected' : '' }}>India
                                        </option>
                                        <option value="China" {{ $studentinfo->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 (Bangla)</label><input
                                        type="text" class="form-control" name="father_name_bangla"
                                        value="{{ $studentinfo->father_name_bangla }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Father's Name (English)</label><input
                                        type="text" class="form-control" name="father_name_english"
                                        value="{{ $studentinfo->father_name_english }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Profession</label><input type="text"
                                        class="form-control" name="father_profession"
                                        value="{{ $studentinfo->father_profession }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Phone</label><input type="text"
                                        class="form-control" name="father_phone" value="{{ $studentinfo->father_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="{{ $studentinfo->father_nid }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Income</label><input type="text"
                                        class="form-control" name="father_income" value="{{ $studentinfo->father_income }}">
                                </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="{{ $studentinfo->mother_name_bangla }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Mother's Name (English)</label><input
                                        type="text" class="form-control" name="mother_name_english"
                                        value="{{ $studentinfo->mother_name_english }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Profession</label><input type="text"
                                        class="form-control" name="mother_profession"
                                        value="{{ $studentinfo->mother_profession }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Phone</label><input type="text"
                                        class="form-control" name="mother_phone" value="{{ $studentinfo->mother_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="{{ $studentinfo->mother_nid }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Income</label><input type="text"
                                        class="form-control" name="mother_income" value="{{ $studentinfo->mother_income }}">
                                </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="{{ $studentinfo->present_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="{{ $studentinfo->present_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="{{ $studentinfo->present_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="{{ $studentinfo->present_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="{{ $studentinfo->present_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="{{ $studentinfo->present_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="{{ $studentinfo->permanent_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="{{ $studentinfo->permanent_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="{{ $studentinfo->permanent_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="{{ $studentinfo->permanent_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="{{ $studentinfo->permanent_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="{{ $studentinfo->permanent_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="{{ $studentinfo->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="{{ $studentinfo->guardian_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="{{ $studentinfo->guardian_address }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Profession</label><input type="text"
                                        class="form-control" name="guardian_profession"
                                        value="{{ $studentinfo->guardian_profession }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Phone</label><input type="text"
                                        class="form-control" name="guardian_phone"
                                        value="{{ $studentinfo->guardian_phone }}"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">Income</label><input type="text"
                                        class="form-control" name="guardian_income"
                                        value="{{ $studentinfo->guardian_income }}"></div>
                            </div>

                            {{-- ================= Previous School ================= --}}
                            <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="{{ $studentinfo->previous_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="{{ $studentinfo->previous_school_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="{{ $studentinfo->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="{{ $studentinfo->previous_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="{{ $studentinfo->previous_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</label><input
                                        type="text" class="form-control" name="whatsapp_number"
                                        value="{{ $studentinfo->whatsapp_number }}" placeholder="Enter WhatsApp number">
                                </div>
                                <div class="mb-3 col-md-3"><label class="form-label">SMS Number</label><input type="text"
                                        class="form-control" name="sms_number" value="{{ $studentinfo->sms_number }}"
                                        placeholder="Enter SMS number"></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>
                                    <input type="file" class="form-file-input form-control" name="student_photo"
                                        id="student_photo" accept="image/*">
                                    @if($studentinfo->student_photo)
                                        <img src="{{ asset('uploads/students/' . $studentinfo->student_photo) }}"
                                            class="mt-2 img-thumbnail" style="max-height:120px;">
                                    @endif
                                    <img id="student_photo_preview" src="#" alt="Preview" class="mt-2 img-thumbnail d-none"
                                        style="max-height:120px;">
                                </div>
                                <div class="mb-3 col-md-3"><label class="form-label">Birth Certificate
                                        (Image/PDF)</label><input type="file" class="form-file-input form-control"
                                        name="birth_certificate_photo" accept="image/*,application/pdf"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">NID of Father</label><input type="file"
                                        class="form-file-input form-control" name="father_nid_photo"
                                        accept="image/*,application/pdf"></div>
                                <div class="mb-3 col-md-3"><label class="form-label">NID of Mother</label><input type="file"
                                        class="form-file-input form-control" name="mother_nid_photo"
                                        accept="image/*,application/pdf"></div>
                            </div>

                            {{-- ================= Actions ================= --}}
                            <div class="row sticky-actions">
                                <div class="col-md-6 text-start"><button type="button" id="btnReset"
                                        class="btn btn-light">Reset</button></div>
                                <div class="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">Update</button></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script>
        $(document).ready(function () {
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } });

            // Store original form values to track changes
            const originalFormData = {};
            $('#edit_form').find('input, select, textarea').each(function() {
                const name = $(this).attr('name');
                if (name && $(this).attr('type') !== 'file') {
                    originalFormData[name] = $(this).val();
                }
            });

            // Track changed fields
            const changedFields = new Set();
            $('#edit_form').find('input:not([type="file"]), select, textarea').on('change input', function() {
                const name = $(this).attr('name');
                if (name && originalFormData[name] !== $(this).val()) {
                    changedFields.add(name);
                    $(this).addClass('field-changed');
                } else {
                    changedFields.delete(name);
                    $(this).removeClass('field-changed');
                }
            });

            // Track file inputs separately
            $('#edit_form').find('input[type="file"]').on('change', function() {
                const name = $(this).attr('name');
                if (this.files && this.files.length > 0) {
                    changedFields.add(name);
                    $(this).addClass('field-changed');
                }
            });

            // Before form submission, add a hidden field to indicate which fields changed
            $('#edit_form').on('submit', function(e) {
                // Add hidden input with changed fields info
                if (changedFields.size > 0) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'changed_fields',
                        value: JSON.stringify(Array.from(changedFields))
                    }).appendTo(this);
                }
            });

            $('#class_id').on('change', function () {
                var class_id = $(this).val();
                if (class_id) {
                    $.post("{{ route('get.sections.by.class') }}", { class_id: class_id }, function (data) {
                        $('#section_id').empty().append('<option value="">Select Section</option>');
                        $.each(data, function (key, value) {
                            $('#section_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    });
                    $.get("/admin/generate-roll/" + class_id, function (data) {
                        $('#admission_roll').val(data.roll || '');
                        $('#form_no').val(data.form_no || '');
                    });
                }
            });

            $('#student_photo').on('change', function () {
                const file = this.files && this.files[0];
                if (!file) { $('#student_photo_preview').addClass('d-none'); return; }
                if (!file.type.match('image.*')) { alert('Only image files allowed'); $(this).val(''); return; }
                const reader = new FileReader();
                reader.onload = e => $('#student_photo_preview').attr('src', e.target.result).removeClass('d-none');
                reader.readAsDataURL(file);
            });

            $('#btnReset').on('click', function () {
                document.getElementById('edit_form').reset();
                $('#student_photo_preview').addClass('d-none').attr('src', '#');
                // Clear changed fields tracking
                changedFields.clear();
                $('#edit_form').find('.field-changed').removeClass('field-changed');
            });
            
            $('#btnCancel').on('click', function () {
                if (confirm('আপনি কি বাতিল করতে চান?')) window.history.back();
            });
        });
    </script>
@endsection