@extends('layouts.cork')
@section('title', $title)

@section('page-css')
    <link rel="stylesheet" href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css">
    <style>
        .toggle-code-snippet { margin-bottom: 0; }
        body.dark .toggle-code-snippet { margin-bottom: 0; }
        .action-icon { width: 20px; height: 20px; display: inline-block; margin-right: 5px; }
        
        /* NEW: Styling for filter section */
        .filter-section {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
        }
        
        body.dark .filter-section {
            background-color: #1e1e2e;
            border-color: #3e4465;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="page-meta">
        <nav class="breadcrumb-style-one" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Students</li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <!-- NEW: Filter Section - Only show for admin/provider users -->
    @if(in_array(auth()->user()->role_id, [1, 2]))
    <div class="filter-section">
        <h5 class="mb-3">Filter Students</h5>
        <form method="GET" action="{{ route('students.index') }}" id="filterForm">
            <div class="row">
                <!-- NEW: School Filter - Only for admin/provider users -->
                <div class="col-md-4 mb-3">
                    <label for="school_id" class="form-label">School</label>
                    <select name="school_id" id="school_id" class="form-control">
                        <option value="">All Schools</option>
                        @foreach($schools as $school)
                            <option value="{{ $school->id }}" 
                                {{ $selectedSchool == $school->id ? 'selected' : '' }}>
                                {{ $school->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- NEW: Show Graduated Students Checkbox -->
                <div class="col-md-4 mb-3 d-flex align-items-end">
                    <div class="form-check">
                        <input type="checkbox" 
                               name="show_graduated" 
                               id="show_graduated" 
                               value="1" 
                               class="form-check-input"
                               {{ $showGraduated ? 'checked' : '' }}>
                        <label for="show_graduated" class="form-check-label">
                            Show Graduated Students
                        </label>
                    </div>
                </div>

                <!-- NEW: Filter buttons -->
                <div class="col-md-4 mb-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">Apply Filters</button>
                    <a href="{{ route('students.index') }}" class="btn btn-secondary">Clear Filters</a>
                </div>
            </div>
        </form>
    </div>
    @else
    <!-- NEW: Filter Section for School Personnel - Only show graduated filter -->
    <div class="filter-section">
        <h5 class="mb-3">Filter Students</h5>
        <form method="GET" action="{{ route('students.index') }}" id="filterForm">
            <div class="row">
                <!-- NEW: Show Graduated Students Checkbox -->
                <div class="col-md-6 mb-3">
                    <div class="form-check">
                        <input type="checkbox" 
                               name="show_graduated" 
                               id="show_graduated" 
                               value="1" 
                               class="form-check-input"
                               {{ $showGraduated ? 'checked' : '' }}>
                        <label for="show_graduated" class="form-check-label">
                            Show Graduated Students
                        </label>
                    </div>
                </div>

                <!-- NEW: Filter buttons -->
                <div class="col-md-6 mb-3">
                    <button type="submit" class="btn btn-primary me-2">Apply Filters</button>
                    <a href="{{ route('students.index') }}" class="btn btn-secondary">Clear Filters</a>
                </div>
            </div>
        </form>
    </div>
    @endif
    <!-- END: Filter Section -->

    <!-- EXISTING: Action buttons -->
    <div class="m-2">
        <a href="{{ route('students.create') }}" class="btn btn-primary">+ Add Student</a>
        <button class="btn btn-success" id="exportExcel">Export to Excel</button>
    </div>

    <!-- EXISTING: Students table - no changes to core functionality -->
    <table id="students-table" class="table dt-table-hover" style="width:100%">
        <thead>
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>School</th>
                <th>Email</th>
                <th>Grade</th>
                <th class="no-content">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($students as $student)
                <tr>
                    <td>{{ $student->last_name }}</td>
                    <td>{{ $student->first_name }}</td>
                    <td>{{ $student->school->name }}</td>
                    <td>{{ $student->email }}</td>
                    <td>{{ $student->grade <= 12 ? $student->grade : 'Graduated' }}</td>
                    <td>
                        <a href="{{ route('students.show', $student->id) }}" title="View">
                            <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </a>
                        <a href="{{ route('students.edit', $student->id) }}" title="Edit">
                            <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                            </svg>
                        </a>
                        @if ($student->enrollments->count() == 0)
                            <a href="{{ route('students.delete', $student->id) }}" title="Delete">
                                <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2 2h4a2 2 0 0 1 2 2v2"></path>
                                    <line x1="10" y1="11" x2="10" y2="17"></line>
                                    <line x1="14" y1="11" x2="14" y2="17"></line>
                                </svg>
                            </a>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

@section('page-js')
<script src="/cork/src/plugins/src/table/datatable/datatables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
    $(document).ready(function() {
        // EXISTING: DataTable initialization - no changes
        var studentsTable = $('#students-table').DataTable({
            dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                 "<'table-responsive'tr>" +
                 "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            oLanguage: {
                oPaginate: {
                    sPrevious: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    sNext: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                sInfo: "Showing page _PAGE_ of _PAGES_",
                sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                sSearchPlaceholder: "Search...",
                sLengthMenu: "Results :  _MENU_",
            },
            stripeClasses: [],
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            pageLength: 50
        });

        // EXISTING: Excel export functionality - no changes
        $('#exportExcel').on('click', function() {
            var data = studentsTable.rows().data().toArray();
            var ws = XLSX.utils.aoa_to_sheet([
                ['Last Name', 'First Name', 'School', 'Email', 'Grade']
            ].concat(data.map(row => row.slice(0, -1))));
            var wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Students");
            XLSX.writeFile(wb, 'students.xlsx');
        });

        // NEW: Auto-submit form when checkbox is changed for better UX
        $('#show_graduated').change(function() {
            $('#filterForm').submit();
        });
    });
</script>
@endsection