@extends('layouts.app')

@section('title', 'Registration Information Update')

@section('content')
<div class="content-header">
    <div class="leftside-content-header">
        <ul class="breadcrumbs">
            <li><i class="fa fa-home" aria-hidden="true"></i><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li><a href="javascript:void(0)">Student</a></li>
            <li><a href="javascript:void(0)">Registration Information Update</a></li>
        </ul>
    </div>
</div>

<div class="row animated fadeInUp">
    
    {{-- Success/Error Feedback Alerts --}}
    @if(session('errorMessage'))
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            {{ session('errorMessage') }}
        </div>
    @endif

    @isset($errorMessage)
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            {{ $errorMessage }}
        </div>
    @endisset

    @isset($successMessage)
        <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            {{ $successMessage }}
        </div>
    @endisset

    <!-- Panel 1: Search Student Form -->
    <div class="panel" style="background-color: #ccc; margin-bottom: 20px;">
        <div class="panel-content">
            <div class="card border-primary text-primary">
                <div class="card-body text-primary" style="background-color: #ccc;">
                    <form id="studentSearchForm" style="padding: 20px;" method="POST" action="{{ route('student.registration_update.search') }}">
                        @csrf
                        <div class="form-group row">
                            <div class="col-sm-2"></div>

                            <label for="search_student_id" class="col-sm-2 col-form-label form-control-sm">
                                Student ID Number <span style="color:red;">*</span>
                            </label>

                            <div class="col-sm-4">
                                <input type="text" class="form-control form-control-sm" name="student_id" id="search_student_id" placeholder="Enter Student ID Number" maxlength="6" value="{{ $student->id ?? old('student_id') }}">
                            </div>

                            <div class="col-sm-2 text-center">
                                <button type="submit" class="btn btn-primary" name="search">
                                    Search Student
                                </button>
                            </div>

                            <div class="col-sm-2"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Panel 2: Update Student Information Form (Hidden until a student is searched) -->
    @isset($student)
    <div class="panel" style="background-color: #ccc;">
        <div class="panel-content">
            <div class="card border-primary text-primary">
                <div class="card-header">
                    <div class="container" style="width: 100%;">
                        <div class="row">
                            <div class="col-12" style="width: 100%; text-align: center;">
                                <h2 class="text-center"><b>Nabinagar Ichchamoyee Pilot Girls' High School</b></h2>
                                <h3 class="text-center"><b>Registration Information Update Form</b></h3>
                                <h3 class="text-center"><b>Session - 2026</b></h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body text-primary" style="background-color: #ccc;">
                    <form style="padding: 20px;" method="POST" action="{{ route('student.registration_update.save') }}">
                        @csrf
                        <div style="border-bottom: 1px dotted blue;"><h4><i>Search Student Information :</i></h4></div><br>
                        
                        <input type="hidden" name="student_id" value="{{ $student->id ?? '' }}">

                        <div class="form-group row">
                            <label for="class_name" class="col-sm-2 col-form-label form-control-sm">Class<span style="color:red;"> *</span></label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control form-control-sm text-center" name="class_name" id="class_name" value="{{ $student->class_name ?? '' }}" readonly>
                            </div>
                            <label for="section_name" class="col-sm-2 col-form-label form-control-sm">Section<span style="color:red;"> *</span></label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control form-control-sm text-center" name="section_name" id="section_name" value="{{ $student->section_name ?? '' }}" readonly>
                            </div>
                            <label for="student_roll" class="col-sm-2 col-form-label form-control-sm">Roll No<span style="color:red;"> *</span></label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control form-control-sm text-center" name="student_roll" id="student_roll" value="{{ $student->student_roll ?? '' }}" readonly>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="student_name" class="col-sm-2 col-form-label form-control-sm">Student Name<span style="color:red;"> *</span></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control form-control-sm" name="student_name" id="student_name" placeholder="Enter Student Name" value="{{ $student->student_name ?? '' }}">
                            </div>
                            <label for="registration_no" class="col-sm-2 col-form-label form-control-sm">Registration Number<span style="color:red;"> *</span></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control form-control-sm" name="registration_no" id="registration_no" placeholder="Enter Registration Number" maxlength="10" value="{{ $student->registration_no ?? '' }}">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="registration_session" class="col-sm-2 col-form-label form-control-sm">Registration Session<span style="color:red;"> *</span></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control form-control-sm" name="registration_session" id="registration_session" placeholder="Enter Registration Session" maxlength="20" value="{{ $student->registration_session ?? '' }}">
                            </div>
                            <label for="reg_roll" class="col-sm-2 col-form-label form-control-sm">Registered Roll No<span style="color:red;"> *</span></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control form-control-sm" name="reg_roll" id="reg_roll" placeholder="Enter Registered Roll No" maxlength="20" value="{{ $student->reg_roll ?? '' }}">
                            </div>
                        </div>

                        <div class="form-group row text-center" style="margin-top: 20px;">
                            <button type="submit" class="btn btn-primary text-center" name="update">Update Student Information</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endisset
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const studentId = document.getElementById("search_student_id");
    const button = document.querySelector('button[name="search"]');

    if (studentId && button) {
        studentId.addEventListener("input", function () {
            this.value = this.value.replace(/\D/g, '');

            if (this.value.length === 6) {
                document.getElementById("studentSearchForm").submit();
            }
        });
    }
});
</script>
@endsection