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

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

        </style>
    </x-slot>

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

        <form action="{{ route('class.store') }}" method="POST" class="ajax-form">
            @csrf
            <div class="row">
                <div class="col-12">
                    <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body p-4">
                            <div class="nav nav-pills mb-3 rounded align-items-center flex-row">
                                <h5 class="card-title fw-semibold">Class Info</h5>
                                @can('classes.list')
                                    <small class="ms-auto">
                                        <a href="{{ route('class.index') }}" class="btn btn-primary d-flex align-items-center px-3" id="add-notes">
                                           <i class="ti ti-list me-0 me-md-1 fs-4"></i>
                                           <span class="d-none d-md-block font-weight-medium fs-3">Classes</span>
                                        </a>
                                    </small>
                                @endcan
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label for="name" class="form-label fw-semibold"><i class="text-danger"> * </i> Name (Auto Generate)</label>
                                        <input type="text" name="name" class="form-control" id="name" readonly >
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label for="course_id" class="form-label fw-semibold"><i class="text-danger">* </i>Course</label>
                                        <select id="course_id" name="course_id" class="form-select select2" onchange="courseWiseTrack()">
                                            <option value="" disabled selected>Select Course</option>
                                            @foreach($courses as $course)
                                                <option value="{{ $course->id }}">{{ $course->name }}</option>
                                            @endforeach
                                        </select>
                                      </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label for="track_id" class="form-label fw-semibold"><i class="text-danger">*</i> Track</label>
                                        <select id="track_id" name="track_id" class="form-select select2" onchange="trackWiseLevel()">
                                            <option value="" disabled selected>Select Track</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label for="level_id" class="form-label fw-semibold"><i class="text-danger">*</i> Level</label>
                                        <select id="level_id" name="level_id" class="form-select select2">
                                            <option value="" disabled selected>Select Level</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                    <label for="teacher_id" class="form-label fw-semibold"><i class="text-danger">*</i> Teacher</label>
                                        <select id="teacher_id" name="teacher_id" class="form-select select2" required>
                                            <option value="" disabled selected>Select Teacher</option>
                                            @foreach($teachers as $teacher)
                                                <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label for="coordinator_id" class="form-label fw-semibold"><i class="text-danger">*</i> Coordinator</label>
                                        <select id="coordinator_id" name="coordinator_id" class="form-select select2">
                                            <option value="" disabled selected>Select Coordinator</option>
                                            @foreach($coordinators as $coordinator)
                                                <option value="{{ $coordinator->id }}">{{ $coordinator->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label for="type" class="form-label fw-semibold"><i class="text-danger">*</i> Class Type</label>
                                        <select id="type" name="type" class="form-select select2" required>
                                            <option value="" disabled selected>Select Class Type</option>
                                            <option value="{{ DaClass::CLASS_TYPE_ONE_TO_ONE }}">1:1</option>
                                            <option value="{{ DaClass::CLASS_TYPE_GROUP }}" selected>Group</option>
                                            <option value="{{ DaClass::CLASS_TYPE_CSR }}">CSR</option>
                                        </select>
                                    </div>
                                </div>

                                @can('disabled_due_reminder')
                                    <div class="col-lg-6 mb-4">
                                        <label for="disabled_due_reminder" class="form-label fw-semibold">Disabled Due Reminder</label><br>
                                        <select id="disabled_due_reminder" name="disabled_due_reminder" class="form-select select2" data-placeholder="Select Disabled Due Reminder" required>
                                            <option></option>
                                            <option value="1">Yes</option>
                                            <option value="0" selected>No</option>
                                        </select>
                                    </div>
                                @endcan

                                <div class="col-md-6 mb-3">
                                    <div class="d-flex" style="align-items: center; justify-content: space-between;">
                                        <label for="notif_enable" class="form-label">Notifications</label>
                                        <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" name="notif_enable" id="notif_enable" value="1" >
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex" style="align-items: center; justify-content: space-between;">
                                        <label for="isZoomAutomated" class="form-label">Is Zoom Automated?</label>
                                        <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" name="isZoomAutomated" id="isZoomAutomated" value="1" checked>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 mb-3 form-group">
                                    <label for="number_of_students" class="form-label"><span class="text-danger">*</span>Number of Students</label>
                                    <input type="number" name="number_of_students" value="15" class="form-control" id="number_of_students">
                                </div>
                                <div class="col-md-6 col-12 mb-3 form-group">
                                    <label for="start_date" class="form-label"><span class="text-danger">*</span>Start Date</label>
                                    <input type="date" name="start_date" class="form-control" id="start_date">
                                </div>
                                <div class="col-md-12 col-12 mb-3 form-group">
                                    <label class="form-label">Note</label>
                                    <textarea class="form-control" name="note" id="note" rows="5" style="height: 100px;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body">
                            <h5 class="card-title fw-semibold mb-3">Class Schedule</h5>
                            <div class="row">
                                <!-- plus button start -->
                                <div class="col-md-12 form-group">
                                    <button type="button" class="btn btn-primary add-class-schedule-item float-end">
                                        <i class="ti ti-plus"></i>
                                    </button>
                                </div>
                                <!-- plus button end -->
                                <div class="col-md-12 class-schedule-list">
                                    <div class="row class-schedule-item">
                                        <div class="col-md-6 col-12 mb-3 form-group">
                                            <label for="day" class="form-label"><span class="text-danger">*</span> Day</label>
                                            <select name="day[]" class="form-select select2" data-placeholder="Select Day">
                                                <option></option>
                                                <option value="Saturday">Saturday</option>
                                                <option value="Sunday">Sunday</option>
                                                <option value="Monday">Monday</option>
                                                <option value="Tuesday">Tuesday</option>
                                                <option value="Wednesday">Wednesday</option>
                                                <option value="Thursday">Thursday</option>
                                                <option value="Friday">Friday</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 col-12 mb-3 form-group">
                                            <label for="time" class="form-label"><span class="text-danger">*</span>Time</label>
                                            <input type="time" name="time[]" class="form-control" id="time">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body p-4">
                            <div class=" align-items-center justify-content-end gap-3">
                                <a class="btn btn-light" href="{{ route('class.index') }}">Back</a>
                                <button class="btn btn-primary float-end">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <x-slot name="script">
        <script src="{{asset('assets/js/ajax_form_submit-1.0.1.js')}}"></script>
        <script>
            function courseWiseTrack(){
                var course_id = $("#course_id").val();

                $.ajax({
                    url: "{{ route('course-wise-track') }}",
                    type: "POST",
                    data: {
                        course_id: course_id
                    },
                    beforeSend: function () {
                        $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                    },
                    success: function (r) {
                        $("#track_id").html(r);
                        $(".loader-populate").html("");
                    },
                });
            }
            function trackWiseLevel(){
                var track_id = $("#track_id").val();
                $.ajax({
                    url: "{{ route('track-wise-level') }}",
                    type: "POST",
                    data: {
                        track_id: track_id
                    },
                    beforeSend: function () {
                        $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                    },
                    success: function (r) {
                        $("#level_id").html(r);
                        $(".loader-populate").html("");
                    },
                });
            }

            document.getElementsByName("start_date")[0].setAttribute('min', tomorrow());

            $(document).on('change', '#level_id', function () {
                $('#name').val($("#level_id option:selected").text().split(' - ')[1]);
            });
        </script>

        <script>
            $(document).on("click",".add-class-schedule-item", function(){
                $(".class-schedule-list").append(`
                    <div class="row class-schedule-item">

                        <div class="col-md-6 col-10 mb-3 form-group">
                            <label for="day" class="form-label"><span class="text-danger">*</span> Day</label>
                            <select name="day[]" class="form-select select2" data-placeholder="Select Day">
                                <option></option>
                                <option value="Saturday">Saturday</option>
                                <option value="Sunday">Sunday</option>
                                <option value="Monday">Monday</option>
                                <option value="Tuesday">Tuesday</option>
                                <option value="Wednesday">Wednesday</option>
                                <option value="Thursday">Thursday</option>
                                <option value="Friday">Friday</option>
                            </select>
                        </div>
                        <div class="col-md-4 col-10 mb-3 form-group">
                            <label for="time" class="form-label"><span class="text-danger">*</span>Time</label>
                            <input type="time" name="time[]" class="form-control" id="time">
                        </div>

                        <div class="col-md-2 col-2 form-group mt-4">
                            <button type="button" class="btn btn-danger float-end delete-class-schedule-item">
                                 <i class="ti ti-x"></i>
                            </button>
                        </div>

                    </div>
                `);
                $(".select2").select2();
            })

            $(document).on("click",".delete-class-schedule-item", function(){
                let $this = $(this)
                $this.closest(".class-schedule-item").remove();
            });
        </script>

        <script src="{{ asset('assets/modernize/libs/ckeditor/ckeditor.js') }}"></script>
        <script>
            CKEDITOR.replace( 'note' );
        </script>
    </x-slot>
</x-dashboard.admin-layout>