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

    <x-slot name="style">
        <style>

        </style>
    </x-slot>

    <!-- Main wrapper -->
    <div class="container-fluid">
        <x-inc.breadcrumb title="Class Schedules" />

            <input type="hidden" id="class_id" class="class_id" value="{{ $class->id }}">
            
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                            <div class="card-body p-4">
                                @can('classes.add')
                                    <button type="button" class="btn btn-sm btn-primary float-end align-items-center" id="add-new" data-bs-toggle="modal" data-bs-target="#add-schedule-modal">
                                        <span class="font-weight-medium fs-3">
                                            <i class="ti ti-plus me-0 me-md-1 fs-4"></i>
                                        </span>
                                    </button>
                                @endcan

                                <div class="modal fade" id="add-schedule-modal">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <form action="javascript:void(0)" method="POST" id="add-form">
                                                @csrf
                                                <div class="modal-header">
                                                    <h4 class="modal-title">Add Schedule</h4>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="form-group row">
                                                        <label for="addSession_date" class="col-sm-3 col-form-label text-right"> Schedule Date <i
                                                                class="text-danger"> *</i></label>
                                                        <div class="col-sm-9">
                                                            <input type="date" name="addSession_date" class="form-control datepicker" id="addSession_date">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mt-3">
                                                        <label for="addSession_started" class="col-sm-3 col-form-label text-right"> Schedule Time <i
                                                                class="text-danger"> *</i></label>
                                                        <div class="col-sm-9">
                                                            <input type="time" name="addSession_started" class="form-control" id="addSession_started">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer justify-content-between">
                                                    <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                                                    <button type="button" class="btn btn-primary btn-sm" onclick="classScheduleSave()">Save</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <div class="nav nav-pills rounded align-items-center flex-row">
                                    <div class="">
                                        <h4>Class: {{ (!empty($class->name) ? $class->name : '') }}</h4>
                                        <h5>Course#{{ (!empty($class->course->name) ? $class->course->name : '') }}  </h5>
                                        <h5>Track#{{ (!empty($class->track->track_num) ? $class->track->track_num : '') }}  {{ (!empty($class->track->title) ? $class->track->title : '') }}</h5>
                                        <h5>Level#{{ (!empty($class->level->level_num) ? $class->level->level_num : '') }} {{ (!empty($class->level->title) ? $class->level->title : '') }}</h5>
                                        <h6>Instructor: {{ (!empty($class->teacher->name) ? $class->teacher->name : '') }}</h6>
                                        <h6>Coordinator: {{ (!empty($class->coordinator->name) ? $class->coordinator->name : '') }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="load-sessions-info"></div>

                <div class="modal fade" id="edit-modal">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content data-load">

                        </div>
                    </div>
                </div>
    </div>

    <script>
        $(document).ready(function(){

            loadClassScheduleSessions();

        });

        function loadClassScheduleSessions(){
            var class_id = $(".class_id").val();
            
            $.ajax({
                type: "GET",
                url: "{{ route('load-class-schedule-sessions') }}",
                data: {
                    class_id: class_id
                },
                success: function(response) {
                    $('.load-sessions-info').html(response);
                },
                error: function(data) {
                    console.log('fail');
                }
            });
        }

    </script>
</x-dashboard.admin-layout>