@extends('layouts.app')

@section('title', '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)">Student 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.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>
                        <hr>
                    </div>
                </div>

                <!-- Results container hidden until search is submitted -->
                @isset($students)
                    <!-- Header Info Display -->
                    <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>

                    <!-- Table Section -->
                    <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>SN</th>
                                            <th>Student ID</th>
                                            <th>Class</th>
                                            <th>Section</th>
                                            <th>Roll No</th>
                                            <th>Student Name</th>
                                            <th>Father Name</th>
                                            <th>Mother Name</th>
                                            <th>Birth Registration No</th>
                                            <th>Stipend</th>
                                            <th>Session</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($students as $index => $student)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $student->student_id ?? $student->id }}</td>
                                                <th>{{ $student->class_name ?? $selectedClass }}</th>
                                                <th>{{ $student->section_name ?? $selectedSection }}</th>
                                                <td>{{ $student->student_roll ?? $student->roll ?? 'N/A' }}</td>
                                                <td>{{ $student->student_name }}</td>
                                                <td>{{ $student->father_name ?? 'N/A' }}</td>
                                                <td>{{ $student->mother_name ?? 'N/A' }}</td>
                                                <td>{{ $student->birth_registration_no ?? 'N/A' }}</td>
                                                <td>
                                                    <span class="badge badge-xs {{ (isset($student->stipend) && $student->stipend == 'Yes') ? 'x-success' : 'x-danger' }}">
                                                        {{ $student->stipend ?? 'No' }}
                                                    </span>
                                                </td>
                                                <td>{{ $student->session ?? $selectedSession }}</td>
                                                <td>
                                                    <span class="badge badge-xs {{ (isset($student->status) && strtolower($student->status) == 'active') ? 'x-success' : 'x-danger' }}">
                                                        {{ ucfirst($student->status ?? 'Active') }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0)" class="btn btn-xs btn-success" data-toggle="modal" data-target="#student-{{ $student->id }}"><i class="fa fa-eye"></i></a>
                                                    <a href="" target="_blank" class="btn btn-xs btn-success"><i class="fa fa-user"></i></a>
                                                    <a href="javascript:void(0)" class="btn btn-xs btn-success" data-toggle="modal" data-target="#student"><i class="fa fa-pencil-square-o"></i></a>
                                                    <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></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