@php use App\Models\DaClass; @endphp
<x-dashboard.admin-layout>
    <x-slot name='title'>Classes - Dreamers Academy</x-slot>

    <x-slot name="style">

    </x-slot>

      <!-- Main wrapper -->
    <div class="container-fluid">

        <x-inc.breadcrumb title="Classes" />

        <div class="row mb-4">
            <div class="accordion" id="accordion_filter">
                <div class="accordion-item" >
                    <h2 class="accordion-header" id="accordion_search">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_search" aria-expanded="false" aria-controls="collapse_search">Search Here</button>
                    </h2>
                    <div id="collapse_search" class="accordion-collapse collapse" aria-labelledby="accordion_search" data-bs-parent="#accordion_filter">
                        <div class="accordion-body h-auto">
                            <form action="" class="filter-form">
                                <div class="row">
                                    <div class="col-md-3">
                                        <h6>Is Zoom Automated?</h6>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input success" type="radio" name="isZoomAutomated" id="isZoomAutomatedYes" value="yes">
                                            <label class="form-check-label" for="isZoomAutomatedYes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input danger" type="radio" name="isZoomAutomated" id="isZoomAutomatedNo" value="no">
                                            <label class="form-check-label" for="isZoomAutomatedNo">No</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="status" class="form-label"> Status</label>
                                        <select id="status" name="status" class="form-control select2" onchange="searchMapping()">
                                            <option value="" disabled selected >Select Status</option>
                                            <option value="{{ DaClass::STATUS_ACTIVE }}">Active</option>
                                            <option value="{{ DaClass::STATUS_OPEN }}">Open</option>
                                            <option value="{{ DaClass::STATUS_CLOSED }}">Closed</option>
                                            <option value="{{ DaClass::STATUS_COMPLETED }}">Completed</option>
                                            <option value="inactive">Inactive</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="coordinator_id" class="form-label fw-semibold">Coordinator</label>
                                        <select id="coordinator_id" name="coordinator_id" class="form-select select2" onchange="searchMapping()">
                                            <option value="" disabled selected>Select Coordinator</option>
                                            @foreach($coordinators as $coordinator)
                                                <option value="{{ $coordinator->id }}">{{ $coordinator->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="teacher_id" class="form-label fw-semibold">Teacher</label>
                                        <select id="teacher_id" name="teacher_id" class="form-select select2" onchange="searchMapping()">
                                            <option value="" disabled selected>Select Teacher</option>
                                            @foreach($teachers as $teacher)
                                                <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 ">
                                        <button type="button" onclick="resetForm()" class="btn btn-outline-danger float-end" style="margin-top: 30px" title="Reset">
                                            <i class="ti ti-refresh" style="font-size: 17px;"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="">
                    @can('classes.add')
                        <a href="{{ route('class.add') }}" class="btn btn-primary float-end m-3 align-items-center px-3" id="add-new">
                            <span class="font-weight-medium fs-3">
                                <i class="ti ti-plus me-0 me-md-1 fs-4"></i>Add New
                            </span>
                        </a>
                    @endcan
                </div>
                <div class="card-body">
                  <div class="table-responsive overflow-x-auto">
                    <table id="datatable" class="table border table-striped table-bordered display table-responsive datatable-data" style="width: 100%">
                        <thead>
                            <tr>
                                <th scope="col">SL</th>
                                <th scope="col">Name</th>
                                <th scope="col">Teacher</th>
                                <th scope="col">Coordinator</th>
                                <th scope="col">No. of Students</th>
                                <th scope="col">Track</th>
                                <th scope="col">Level</th>
                                <th scope="col">Status</th>
                                <th scope="col">Type</th>
                                <th scope="col">Notification</th>
                                <th scope="col">Start Date</th>
                                <th scope="col">Estimated Level Completion Date</th>
                                <th scope="col">Note</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                    </table>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>

    <x-slot name="script">
        <script>
            var datatable = $('.datatable-data').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                ajax: {
                    url: "{{ route('class.data') }}",
                    type: "GET",
                    data: function (data) {
                        data.isZoomAutomated = $('input[name="isZoomAutomated"]:checked').val();
                        data.status = $('#status').val();
                        data.coordinator_id = $('#coordinator_id').val();
                        data.teacher_id = $('#teacher_id').val();
                    }
                },
                order: [
                    [4, 'DESC']
                ],
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'name',
                        name: 'name',
                    },
                    {
                        data: 'teacher_id',
                        name: 'teacher_id',
                    },
                    {
                        data: 'coordinator_id',
                        name: 'coordinator_id',
                    },
                    {
                        data: 'number_of_students',
                        name: 'number_of_students',
                    },
                    {
                        data: 'track_id',
                        name: 'track_id',
                    },
                    {
                        data: 'level_id',
                        name: 'level_id',
                    },
                    {
                        data: 'status',
                        name: 'status',
                    },
                    {
                        data: 'type',
                        name: 'type',
                    },
                    {
                        data: 'notif_enable',
                        name: 'notif_enable',
                    },
                    {
                        data: 'start_date',
                        name: 'start_date',
                    },
                    {
                        data: 'estimated_level_completion_date',
                        name: 'estimated_level_completion_date',
                    },
                    {
                        data: 'note',
                        name: 'note',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                    },
                ]
            });
        </script>

        <script>
            function searchMapping() {
                $("#datatable").DataTable().ajax.reload();
            }
            function resetForm() {
                $('.filter-form')[0].reset();
                $('.select2').val(null).trigger('change');
                datatable.search('').order([]).draw();
                searchMapping();
            }
        </script>

        <script>
            $(document).on('click', 'input[name="isZoomAutomated"]', function () {
                searchMapping();
            })
        </script>

        <script>
            $(document).on('click','[data-action="confirm"]', function(e) {
                e.preventDefault();
                var $this = $(this);

                let data = $this.data('data') ?? {};
                let method = $this.data('method') ?? 'GET';

                Swal.fire({
                    title:"Want to Inactive the class?",
                    text: "Are You Sure !!!, You Wont Be Able To Undo...",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#30d689",
                    confirmButtonText: "Yes, do it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            type: method,
                            url: $this.data('route'),
                            data: data,
                            contentType: false,
                            processData: false,
                            cache: false,
                            success: function (response) {
                                $(".loader-populate").html("");

                                if (response.message != null) {
                                    swal.fire('', `${response.message}`, `${response.status}`);
                                }
                                if ($("#datatable").length) {
                                    $("#datatable").DataTable().ajax.reload();
                                }
                                console.clear();
                            },
                            error: function (response) {
                                $(".loader-populate").html("");
                                console.clear();
                            }
                        });
                    }
                });
            });
        </script>
    </x-slot>
</x-dashboard.admin-layout>