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

<!-- BEGIN PAGE CSS -->
@section('page-css')
    <style>
        .toggle-code-snippet {
            margin-bottom: 0px;
        }

        body.dark .toggle-code-snippet {
            margin-bottom: 0px;
        }
        
        /* 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>
    <link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css">
    <link rel="stylesheet" type="text/css" href="/cork/src/plugins/src/table/datatable/datatables.css">

    <link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/light/table/datatable/dt-global_style.css">
    <link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/light/table/datatable/custom_dt_miscellaneous.css">

    <link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css">
    <link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/dark/table/datatable/custom_dt_miscellaneous.css">
@endsection
<!-- END PAGE CSS -->

<!-- BREADCRUMB -->
@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"><a href="{{ route('enrollments.index') }}">Enrollments</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
            </ol>
        </nav>
    </div>
    <!-- /BREADCRUMB -->
@endsection

@section('content')
    <!-- NEW: Filter Section -->
    <div class="filter-section">
        <h5 class="mb-3">Filter Enrollments</h5>
        <form method="GET" action="{{ route('enrollments.upload-moodle-students') }}" id="filterForm">
            <div class="row">
                <!-- NEW: Teacher Filter - Only teachers with Moodle sections -->
                <div class="col-md-3 mb-3">
                    <label for="teacher_id" class="form-label">Teacher</label>
                    <select name="teacher_id" id="teacher_id" class="form-control">
                        <option value="">All Teachers</option>
                        @foreach($teachers as $teacher)
                            <option value="{{ $teacher->id }}" 
                                {{ $selectedTeacher == $teacher->id ? 'selected' : '' }}>
                                {{ $teacher->last_name }}, {{ $teacher->first_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- NEW: Department Filter -->
                <div class="col-md-3 mb-3">
                    <label for="department_id" class="form-label">Department</label>
                    <select name="department_id" id="department_id" class="form-control">
                        <option value="">All Departments</option>
                        @foreach($departments as $department)
                            <option value="{{ $department->id }}" 
                                {{ $selectedDepartment == $department->id ? 'selected' : '' }}>
                                {{ $department->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- NEW: Section Filter - Updated format: Course Name - Teacher Last, First Initial - Year - Term -->
                <div class="col-md-3 mb-3">
                    <label for="section_id" class="form-label">Section</label>
                    <select name="section_id" id="section_id" class="form-control">
                        <option value="">All Sections</option>
                        @foreach($sections as $section)
                            @php
                                // Format: Course Name - Teacher Last, First Initial - Year - Term
                                $teacherName = $section->teacher->last_name . ', ' . substr($section->teacher->first_name, 0, 1) . '.';
                                $termName = $section->term == 'F' ? 'FALL' : ($section->term == 'S' ? 'SPRING' : 'FULL YEAR');
                                $yearDisplay = $section->year ? $section->year->year : 'Unknown Year';
                                $sectionDisplay = $section->course->name . ' - ' . $teacherName . ' - ' . $yearDisplay . ' - ' . $termName;
                            @endphp
                            <option value="{{ $section->id }}" 
                                data-teacher="{{ $section->teacher_id }}"
                                data-department="{{ $section->course->department_id }}"
                                {{ $selectedSection == $section->id ? 'selected' : '' }}>
                                {{ $sectionDisplay }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- NEW: Term Filter -->
                <div class="col-md-3 mb-3">
                    <label for="term" class="form-label">Term</label>
                    <select name="term" id="term" class="form-control">
                        <option value="fall_full" {{ $selectedTerm == 'fall_full' ? 'selected' : '' }}>
                            Fall/Full Year
                        </option>
                        <option value="spring_full" {{ $selectedTerm == 'spring_full' ? 'selected' : '' }}>
                            Spring/Full Year
                        </option>
                    </select>
                </div>
            </div>

            <!-- NEW: Filter buttons -->
            <div class="row">
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Apply Filters</button>
                    <a href="{{ route('enrollments.upload-moodle-students') }}" class="btn btn-secondary ml-2">Clear Filters</a>
                </div>
            </div>
        </form>
    </div>
    <!-- END: Filter Section -->

    <!-- EXISTING: Main form for updating LMS - no changes to core functionality -->
    <form action="{{ route('enrollments.upload-moodle-students') }}" method="POST" id="updateLmsForm" name="updateLmsForm">
        @csrf
        <table id="enrollments" class="table table-hover" style="width:100%, opacity: 0.85">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all"></th>
                    <th>Status</th>
                    <th>Dept</th>
                    <th>city</th>
                    <th>course1</th>
                    <th>lastname</th>
                    <th>firstname</th>
                    <th>idnumber</th>
                    <th>email</th>
                    <th>username</th>
                    <th>role1</th>
                    <th>password</th>
                    <th>enrolstatus1</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($enrollments as $e)
                @php
                    $e = App\Models\Enrollment::find($e->id)
                @endphp
                @if($e->status == 'W') @continue @endif
                    <tr>
                        <td>
                            <input type="checkbox" name="enrollment_ids[]" value="{{ $e->id }}">
                        </td>
                        <td>
                            @if($e->status == 'R' || $e->status == 'D')<span style="background-color: #FA8072">{{ $e->statusDesc() }}</span>
                            @elseif($e->status == 'W')<span style="background-color: #C4B454">{{ $e->statusDesc() }}</span>
                            @else {{ $e->statusDesc() }}@endif
                        </td>
                        <td>@if(isset($e->section->course))
                            {{ $e->section->course->department->code }}
                            @endif
                        </td>
                        <td>
                            {{ $e->student->school->name }}
                        </td>
                        <td>
                            {{ $e->section->moodle_short_name }}
                        </td>
                        <td>
                            {{ $e->student->last_name }}
                        </td>
                        <td>
                            {{ $e->student->first_name }}
                        </td>
                        <td>
                            {{ $e->student->ssid }}
                        </td>
                        <td>
                            {{ $e->student->email }}
                        </td>
                        <td>
                            {{ str_replace(' ', '', strtolower($e->student->first_name)) . '.' . str_replace(' ', '', strtolower($e->student->last_name)) }}
                        </td>
                        <td>
                            student
                        </td>
                        <td>
                            Password1!
                        </td>
                        <td>@if($e->status == 'R' || $e->status == 'D') 1 @else 0 @endif</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="form-row">
            <button type="button" id="updateLmsBtn" class="mt-4 btn btn-primary">Update LMS</button>
            <button type="button" class="mt-4 ml-4 btn btn-secondary"
                onclick="window.history.go(-1); return false;">Cancel</button>
        </div>
    </form>

@endsection

<!--  BEGIN PAGE SCRIPTS FILE  -->
@section('page-js')
    <script src="/cork/src/plugins/src/table/datatable/datatables.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/dataTables.buttons.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/jszip.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/buttons.html5.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/buttons.print.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/custom_miscellaneous.js"></script>

    <script>
        // EXISTING: DataTable initialization - no changes
        $('#enrollments').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-sm-12 col-md-6 d-flex justify-content-md-start justify-content-center'B><'col-sm-12 col-md-6 d-flex justify-content-md-end justify-content-center mt-md-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>>",
                buttons: [{
                    extend: 'csv',
                    className: 'btn',
                    exportOptions: {
                        columns: [ 3, 4, 5, 6, 7, 8, 9, 10, 11]
                    }
                }],
            "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": [25, 50, 75, 100, -1],
            "pageLength": -1
        });
    </script>
    
    <script>
        $(document).ready(function() {
            // EXISTING: Select/Deselect all checkboxes - no changes
            $('#select-all').click(function() {
                $('input[name="enrollment_ids[]"]').prop('checked', this.checked);
            });

            // EXISTING: If any checkbox is unchecked, uncheck the 'select all' checkbox - no changes
            $('input[name="enrollment_ids[]"]').change(function() {
                if (!this.checked) {
                    $('#select-all').prop('checked', false);
                }

                // If all checkboxes are checked, check the 'select all' checkbox
                if ($('input[name="enrollment_ids[]"]').length === $(
                        'input[name="enrollment_ids[]"]:checked').length) {
                    $('#select-all').prop('checked', true);
                }
            });
            
            // EXISTING: Add confirmation for Update LMS button - no changes
            $('#updateLmsBtn').click(function(e) {
                e.preventDefault();
                if (confirm('Are you sure you want to update the LMS? This action cannot be undone.')) {
                    $('#updateLmsForm').submit();
                }
            });

            // NEW: Filter cascading functionality - when teacher or department changes, filter sections
            $('#teacher_id, #department_id').change(function() {
                filterSections();
            });

            // NEW: Function to filter sections based on selected teacher and department
            function filterSections() {
                var selectedTeacher = $('#teacher_id').val();
                var selectedDepartment = $('#department_id').val();
                var sectionSelect = $('#section_id');
                
                // Show all sections first
                sectionSelect.find('option').show();
                
                // If teacher is selected, hide sections that don't match
                if (selectedTeacher) {
                    sectionSelect.find('option[data-teacher]').each(function() {
                        if ($(this).data('teacher') != selectedTeacher) {
                            $(this).hide();
                        }
                    });
                }
                
                // If department is selected, hide sections that don't match
                if (selectedDepartment) {
                    sectionSelect.find('option[data-department]').each(function() {
                        if ($(this).data('department') != selectedDepartment) {
                            $(this).hide();
                        }
                    });
                }
                
                // Reset section selection if current selection is now hidden
                if (sectionSelect.find('option:selected').is(':hidden')) {
                    sectionSelect.val('');
                }
            }

            // NEW: Initialize section filtering on page load
            filterSections();
        });
    </script>
@endsection
<!--  END PAGE SCRIPTS FILE  -->