@extends('index')
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-sm-12">

                        <div class="page-title-box d-md-flex justify-content-md-between align-items-center">
                            <h4 class="page-title">{{ $title }}</h4>
                            <div class="">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                                    <li class="breadcrumb-item active">Exam Timetable</li>
                                </ol>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="row align-items-center justify-content-center">
                                            <div class="col-12">
                                                @include('layouts.flashmessages')
                                                {{-- <a href="javascript:void(0)" onclick="basic_modal('', 'notifications/addstaffnotifications', 'Add Notifications')" class="waves-effect waves-light btn btn-outline btn-sm btn-info
                                                 float-end" title="Add" data-bs-toggle="modal" data-bs-target="#exampleModalDefault"><i class="fas fa-plus"></i> Add Notifications</i></a>  --}}
                                            </div>
                                            <div class="col-3">
                                                <select class="form-control border-primary" id="classFilter">
                                                    <option value="">Select Class</option>
                                                    @foreach ($classes as $class)
                                                        <option value="{{ $class->className }}">{{ $class->className }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <select class="form-control border-primary" id="academicYearFilter">
                                                    <option value="">Select Academic Year</option>
                                                    @foreach ($academicYears as $year)
                                                        <option value="{{ $year->accId }}">{{ $year->accYear }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-3">
                                                <select class="form-control border-primary" id="publishFilter">
                                                    <option value="">Select Publish Status</option>
                                                    <option value="Y">Published</option>
                                                    <option value="N">Unpublished</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="table-responsive">
                                            <table class="table datatable" id="example3" width="100%"
                                                style="table-layout:fixed">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>SL No</th>
                                                        <th>Exam Name</th>
                                                        <th>Class</th>
                                                        <th>Exam Type</th>
                                                        <th>Exam Code</th>
                                                        <th>Max Marks</th>
                                                        <th>Academic Year/Month</th>
                                                        <th>Location</th>
                                                        {{-- <th>Month</th> --}}
                                                        <th>Date</th>
                                                        {{-- <th>End Date</th> --}}
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('contentjs')
    <script>
        $(document).ready(function() {
            $('#example3').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('exam.examtimetableview') }}",
                    data: function(d) {
                        d.class = $('#classFilter').val();
                        d.publish = $('#publishFilter').val();
                        d.academicYear = $('#academicYearFilter').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'ExamName',
                        name: 'ExamName'
                    },
                    {
                        data: 'Class',
                        name: 'Class'
                    },
                    {
                        data: 'ExamType',
                        name: 'ExamType'
                    },
                    {
                        data: 'ECode',
                        name: 'ECode'
                    },
                    {
                        data: 'maxMark',
                        name: 'maxMark'
                    },
                    {
                        data: 'academicYear',
                        name: 'academicYear'
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    // { data: 'month', name: 'month' },
                    // { data: 'startDate', name: 'startDate' },
                    // { data: 'endDate', name: 'endDate' },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    }
                ]
            });
        });
        $('#classFilter, #publishFilter, #academicYearFilter').on('keyup change', function() {
            $('#example3').DataTable().ajax.reload();
        });

        $(document).on('change', '.status-toggle', function() {

            let examId = $(this).data('id');

            $.ajax({
                url: "{{ route('exam.changeExamStatus') }}",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: examId
                },
                success: function(response) {
                    if (response.success) {
                        $('#example3').DataTable().ajax.reload();
                    } else {
                        alert('Failed to change status');
                    }
                },
                error: function() {
                    alert('An error occurred while changing status');
                }
            });
        });
    </script>
@endsection