@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;
        }
        
        .date-filter-section {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        body.dark .date-filter-section {
            background-color: #1e293b;
        }
    </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')
    <!-- Date Filter Section -->
    <div class="date-filter-section">
        <h5>Date Range Filter</h5>
        <form method="GET" action="{{ route('enrollments.upload-powerschool-students') }}" class="row">
            <div class="col-md-4">
                <label for="start_date" class="form-label">Start Date</label>
                <input type="date" 
                       id="start_date" 
                       name="start_date" 
                       class="form-control" 
                       value="{{ $startDate }}" 
                       required>
            </div>
            <div class="col-md-4">
                <label for="end_date" class="form-label">End Date</label>
                <input type="date" 
                       id="end_date" 
                       name="end_date" 
                       class="form-control" 
                       value="{{ $endDate }}" 
                       max="{{ now()->format('Y-m-d') }}" 
                       required>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-primary me-2">Filter</button>
                <a href="{{ route('enrollments.upload-powerschool-students') }}" class="btn btn-secondary">Reset</a>
            </div>
        </form>
        <small class="text-muted mt-2">
            Showing enrollments created or updated between {{ date('M j, Y', strtotime($startDate)) }} and {{ date('M j, Y', strtotime($endDate)) }}
        </small>
    </div>

    <form action="{{ route('enrollments.update-powerschool-enrollments') }}" method="POST">
        @csrf
        <!-- Hidden inputs to preserve date range -->
        <input type="hidden" name="start_date" value="{{ $startDate }}">
        <input type="hidden" name="end_date" value="{{ $endDate }}">
        
        <table id="enrollments" class="table dt-table-hover" style="width:100%">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all"></th>
                    <th>Date</th>
                    <th>Status</th>
                    <th>Middle_name</th>
                    <th>Gender</th>
                    <th>Grade_level</th>
                    <th>Last_name</th>
                    <th>First_name</th>
                    <th>DOB</th>
                    <th>State_studentnumber</th>
                    <th>student_number</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($enrollments as $e)
                    @php $e = App\Models\Enrollment::find($e->id) @endphp
                    @if ($e->student->ssid == 0)
                        @continue
                    @endif
                    <tr>
                        <td>
                            <input type="checkbox" name="enrollment_ids[]" value="{{ $e->id }}">
                        </td>
                        <td>
                            {{ date('m/d/Y H:i:s', strtotime($e->updated_at > $e->created_at ? $e->updated_at : $e->created_at)) }}
                        </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>
                            {{ $e->student->school->name }}
                        </td>
                        <td>
                            {{ $e->student->gender }}
                        </td>
                        <td>
                            {{ $e->student->grade }}
                        </td>
                        <td>
                            {{ $e->student->last_name }}
                        </td>
                        <td>
                            {{ $e->student->first_name }}
                        </td>
                        <td>
                            {{ date('m/d/Y', strtotime($e->student->dob)) }}
                        </td>
                        <td>
                            {{ $e->student->ssid }}
                        </td>
                        <td>
                            {{ $e->student->ssid }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="form-row">
            <button type="submit" class="mt-4 btn btn-primary">Mark as Done</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>
        $('#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]
                }
            }],
            "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() {
            // Select/Deselect all checkboxes
            $('#select-all').click(function() {
                $('input[name="enrollment_ids[]"]').prop('checked', this.checked);
            });

            // If any checkbox is unchecked, uncheck the 'select all' checkbox
            $('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);
                }
            });

            // Set minimum date for start_date and maximum date for end_date
            document.getElementById('start_date').setAttribute('min', '2025-03-01');
            document.getElementById('end_date').setAttribute('max', '{{ now()->format("Y-m-d") }}');
            
            // Validate date range
            document.getElementById('start_date').addEventListener('change', function() {
                const startDate = this.value;
                const endDateInput = document.getElementById('end_date');
                endDateInput.setAttribute('min', startDate);
                
                if (endDateInput.value < startDate) {
                    endDateInput.value = startDate;
                }
            });
            
            document.getElementById('end_date').addEventListener('change', function() {
                const endDate = this.value;
                const startDateInput = document.getElementById('start_date');
                startDateInput.setAttribute('max', endDate);
                
                if (startDateInput.value > endDate) {
                    startDateInput.value = endDate;
                }
            });
        });
    </script>
@endsection
<!--  END PAGE SCRIPTS FILE  -->