@extends('layouts.app')

@section('title', 'Noipunno Student 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)">Noipunno Search</a></li>
        </ul>
    </div>
</div>

<div class="row animated fadeInUp">
    <div class="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">
                        <hr>
                        <!-- Search Form -->
                        <form class="form-inline" action="{{ route('student.search_noipunno.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 ? '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 ? '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 ? '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>
                        <hr>
                    </div>
                </div>

                <!-- Results Section: Hidden until search is submitted -->
                @isset($students)
                <div class="row">
                    <div class="col-sm-12">
                        <h3 class="text-center"><strong>Nabinagar Ichchhamoyee Pilot Girls' High School</strong></h3>
                        <h5 class="text-center"><strong><u>Student List</u></strong></h5>
                        <div class="col-sm-4 text-center">
                            <strong>Class : </strong> {{ $selectedClass }}
                        </div>
                        <div class="col-sm-4 text-center">
                            <strong>Section : </strong> {{ $selectedSection }}
                        </div>
                        <div class="col-sm-4 text-center">
                            <strong>Session : </strong> {{ $selectedSession }}
                        </div>
                    </div>
                </div>
                <hr>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="table-responsive">
                            <table id="basic-table" class="table table-striped table-hover table-bordered text-center" cellspacing="0" width="100%">
                                <thead>
                                    <tr class="success">
                                        <th>Roll No</th>
                                        <th>Student Name<br>Bangla</th>
                                        <th>Student Name<br>English</th>
                                        <th>Birth Registration No</th>
                                        <th>Date of Birth</th>
                                        <th>Religion</th>
                                        <th>Mobile</th>
                                        <th colspan="2">Father Name</th>
                                        <th>Mobile</th>
                                        <th colspan="2">Mother Name</th>
                                        <th>Mobile</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($students as $student)
                                        <tr>
                                            <td>{{ $student->student_roll ?? $student->roll ?? 'N/A' }}</td>
                                            <td>{{ $student->student_name_bn ?? $student->student_name ?? 'N/A' }}</td>
                                            <td>{{ $student->student_name_en ?? $student->student_name ?? 'N/A' }}</td>
                                            <td>{{ $student->birth_registration_no ?? 'N/A' }}</td>
                                            <td>{{ $student->date_of_birth ?? 'N/A' }}</td>
                                            <td>{{ $student->religion ?? 'N/A' }}</td>
                                            <td>{{ $student->mobile ?? 'N/A' }}</td>
                                            <td>{{ $student->father_name_en ?? $student->father_name ?? 'N/A' }}</td>
                                            <td>{{ $student->father_name_bn ?? $student->father_name ?? 'N/A' }}</td>
                                            <td>{{ $student->father_mobile ?? $student->mobile ?? 'N/A' }}</td>
                                            <td>{{ $student->mother_name_en ?? $student->mother_name ?? 'N/A' }}</td>
                                            <td>{{ $student->mother_name_bn ?? $student->mother_name ?? 'N/A' }}</td>
                                            <td>{{ $student->mother_mobile ?? 'N/A' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="13" class="text-center text-muted">No students found matching your search criteria.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endisset

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

<!-- jQuery AJAX for Dynamic Sections -->
<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