@extends('layouts.app')

@section('title', 'Student Registration Search')

@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 Search</a></li>
        </ul>
    </div>
</div>

<div class="row animated fadeInUp">
    <div class="col-xs-12 col-sm-12">
        <div class="panel">
            <div class="panel-content" style="margin-left: 10px; margin-right: 10px; padding-top: 10px; padding-bottom: 10px;">
                <div class="row">
                    <div class="text-center">
                        <form class="form-inline" action="{{ route('student.registration.submit') }}" method="POST">
                            @csrf
                            
                            <!-- Class Dropdown -->
                            <div class="form-group form-group-sm">
                                <label for="class_list" class="sr-only">Choose Class</label>
                                <select class="form-control" name="choose_class" id="class_list" style="min-width: 150px;" required>
                                    <option value="">Select Class</option>
                                    @foreach ($classes ?? [] as $class)
                                        <option value="{{ $class }}" {{ (isset($selectedClass) && $selectedClass == $class) || old('choose_class') == $class ? 'selected' : '' }}>
                                            {{ $class }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Section Dropdown -->
                            <div class="form-group form-group-sm">
                                <label for="section_list" class="sr-only">Choose Section</label>
                                <select class="form-control" name="choose_section" id="section_list" style="min-width: 150px;" required>
                                    <option value="">Select Section</option>
                                    @foreach ($sections ?? [] as $sec)
                                        <option value="{{ $sec }}" {{ (isset($selectedSection) && $selectedSection == $sec) || old('choose_section') == $sec ? 'selected' : '' }}>
                                            {{ $sec }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Session Dropdown -->
                            <div class="form-group form-group-sm">
                                <label for="choose_session" class="sr-only">Choose Session</label>
                                <select class="form-control" name="choose_session" id="choose_session" style="min-width: 150px;" required>
                                    <option value="">Select Session</option>
                                    @foreach ($sessions ?? [] as $sess)
                                        <option value="{{ $sess }}" {{ (isset($selectedSession) && $selectedSession == $sess) || old('choose_session') == $sess ? 'selected' : '' }}>
                                            {{ $sess }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Submit Button -->
                            <div class="form-group form-group-sm">
                                <button type="submit" class="btn btn-success btn-sm" name="student_search">View List</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Results panel hidden until a search is executed -->
    @isset($students)
    <div class="col-sm-12">
        <div class="panel">
            <div class="panel-content" id="print_list">
                <h2 class="text-center"><strong>Nabinagar Ichchhamoyee Pilot Girls' High School</strong></h2>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 text-center">
                        <h5><strong><u>Form Fillup Student List</u></strong></h5>
                        <div class="col-sm-4">
                            <strong>Class : </strong> {{ $selectedClass ?? 'N/A' }}
                        </div>
                        <div class="col-sm-4">
                            <strong>Section : </strong> {{ $selectedSection ?? 'N/A' }}
                        </div>
                        <div class="col-sm-4">
                            <strong>Session : </strong> {{ $selectedSession ?? 'N/A' }}
                        </div>
                    </div>
                </div>
                <hr>
                
                <div class="row">
                    <div class="col-sm-12">
                        <div class="table-responsive">
                            <style>
                                table, td, th { border: 1px solid black; }
                                table { width: 100%; border-collapse: collapse; color: black; }
                            </style>
                            <table cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th class="text-center">SN</th>
                                        <th class="text-center">Student ID</th>
                                        <th class="text-center">Birth Reg. Number</th>
                                        <th class="text-center">Roll No</th>
                                        <th class="text-center">Student Name</th>
                                        <th class="text-center">Fathers Name</th>
                                        <th class="text-center">Mothers Name</th>
                                        <th class="text-center">Religion</th>
                                        <th class="text-center">Date of Birth</th>
                                        <th class="text-center">Mobile Number</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($students as $index => $student)
                                        <tr>
                                            <td class="text-center">{{ $index + 1 }}</td>
                                            <td class="text-center">{{ $student->id ?? $student->student_id ?? 'N/A' }}</td>
                                            <td class="text-center">{{ $student->birth_registration_no ?? 'N/A' }}</td>
                                            <td class="text-center">{{ $student->student_roll ?? $student->roll ?? 'N/A' }}</td>
                                            <td>{{ $student->student_name ?? $student->student_name_en ?? 'N/A' }}</td>
                                            <td>{{ $student->father_name ?? $student->father_name_en ?? 'N/A' }}</td>
                                            <td>{{ $student->mother_name ?? $student->mother_name_en ?? 'N/A' }}</td>
                                            <td class="text-center">{{ $student->religion ?? 'N/A' }}</td>
                                            <td class="text-center"></td>
                                            <td class="text-center">{{ $student->mobile ?? 'N/A' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="10" class="text-center text-muted" style="padding: 15px;">No students found matching your search criteria.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <center><br><span>Powered by: <b>Biddaloy 365</b></span></center>
                </div>
            </div>
        </div>
    </div>
    @endisset
</div>

<!-- jQuery script to dynamically load sections based on selected class -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#class_list').on('change', function() {
            var selectedClass = $(this).val();
            var sectionSelect = $('#section_list');

            sectionSelect.empty().append('<option value="">Select Section</option>');

            if (selectedClass) {
                sectionSelect.empty().append('<option value="">Loading Sections...</option>');

                $.ajax({
                    url: "{{ route('student.get_sections') }}",
                    type: "GET",
                    data: { class_name: selectedClass },
                    dataType: "json",
                    success: function(data) {
                        sectionSelect.empty().append('<option value="">Select Section</option>');
                        if (Array.isArray(data) && data.length > 0) {
                            $.each(data, function(key, value) {
                                sectionSelect.append('<option value="' + value + '">' + value + '</option>');
                            });
                        }
                    },
                    error: function() {
                        sectionSelect.empty().append('<option value="">Select Section</option>');
                    }
                });
            }
        });
    });
</script>
@endsection