@php
    use App\Models\DaClass;
@endphp
<x-dashboard.admin-layout>
    <x-slot name='title'>Edit Class - Dreamers Academy</x-slot>
    <x-slot name="style">
        <style>
            .select2-container .select2-selection--single {
                height: 38px;
            }
            .select2-container--default .select2-selection--single .select2-selection__rendered {
                margin-top: -3px;
            }
        </style>
    </x-slot>

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

        <div class="row">
            <div class="col-12">
                <form action="{{ route('class.update', ['id' => encrypt($class->id)]) }}" class="ajax-form" method="POST">
                    @csrf
                    @method('PUT')

                    <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" value="{{ $class->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 }}" {{$class->course_id == $course->id ? 'selected' : '' }}>
                                                {{ $course->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                      </div>
                                </div>
                                <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>
                                            @foreach($tracks as $track)
                                            <option value="{{ $track->id }}" {{ $class->track_id == $track->id ? 'selected' : '' }}>{{ 'Track#' . $track->track_num . ' - ' . $track->title }}</option>
                                            @endforeach
                                        </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>
                                            @foreach($levels as $level)
                                            <option value="{{ $level->id }}" {{ $class->level_id == $level->id ? 'selected' : '' }}>{{ 'Level#' .  $level->level_num . ' - ' . $level->title }}</option>
                                            @endforeach
                                        </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 }}" {{ $class->teacher_id == $teacher->id ? 'selected' : '' }}>{{ $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" required>
                                            <option value="" disabled selected>Select Coordinator</option>
                                            @foreach($coordinators as $coordinator)
                                            <option value="{{ $coordinator->id }}" {{ $class->coordinator_id == $coordinator->id ? 'selected' : '' }}>
                                              {{ $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 }}" @if($class->type === DaClass::CLASS_TYPE_ONE_TO_ONE) selected @endif>1:1</option>
                                            <option value="{{ DaClass::CLASS_TYPE_GROUP }}" @if($class->type === DaClass::CLASS_TYPE_GROUP) selected @endif>Group</option>
                                            <option value="{{ DaClass::CLASS_TYPE_CSR }}" @if($class->type === DaClass::CLASS_TYPE_CSR) selected @endif>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" @if($class->disabled_due_reminder == 1) selected @endif>Yes</option>
                                            <option value="0" @if($class->disabled_due_reminder == 0) selected @endif>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" @if($class->notif_enable) checked @endif >
                                        </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" @if($class->isZoomAutomated) checked @endif>
                                        </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 (Remaining)</label>
                                    <input type="number" name="number_of_students" value="{{ $class->number_of_students }}" 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" value="{{ $class->start_date }}" class="form-control" id="start_date">
                                </div>

                                <div class="col-md-6 col-12 mb-3 form-group">
                                    <label for="estimated_level_completion_date" class="form-label">Estimated Level Completion Date</label>
                                    <input type="date" name="estimated_level_completion_date" value="{{ $class->estimated_level_completion_date }}" class="form-control" id="estimated_level_completion_date">
                                </div>

                                <div class="col-md-6 col-12 mb-3 form-group">
                                    <label for="due_date" class="form-label">Due Date</label>
                                    <input type="date" name="due_date" value="{{ $class->due_date }}" class="form-control" id="due_date">
                                </div>

                                @can('update_class_status')
                                    <div class="col-lg-6 mb-4">
                                        <label for="status" class="form-label fw-semibold"><span class="text-danger">*</span>Status</label>
                                        <select id="status" name="status" class="form-select select2" data-placeholder="Select Status" required>
                                            <option></option>
                                            <option value="1" @if($class->status === DaClass::STATUS_ACTIVE) selected @endif>Active</option>
                                            <option value="0" @if($class->status === DaClass::STATUS_INACTIVE) selected @endif>Inactive</option>
                                            <option value="2" @if($class->status === DaClass::STATUS_OPEN) selected @endif>Open</option>
                                            <option value="3" @if($class->status === DaClass::STATUS_CLOSED) selected @endif>Closed</option>
                                            <option value="4" @if($class->status === DaClass::STATUS_COMPLETED) selected @endif>Completed</option>
                                        </select>
                                    </div>
                                @endcan
                                <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;">{{ $class->note }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card card-outline w-100 position-relative overflow-hidden mb-0 mt-4">
                        <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">
                                        @foreach($class->class_schedules as $class_schedule)
                                        <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" @if($class_schedule->day == 'Saturday') selected @endif>Saturday</option>
                                                    <option value="Sunday" @if($class_schedule->day == 'Sunday') selected @endif>Sunday</option>
                                                    <option value="Monday" @if($class_schedule->day == 'Monday') selected @endif>Monday</option>
                                                    <option value="Tuesday" @if($class_schedule->day == 'Tuesday') selected @endif>Tuesday</option>
                                                    <option value="Wednesday" @if($class_schedule->day == 'Wednesday') selected @endif>Wednesday</option>
                                                    <option value="Thursday" @if($class_schedule->day == 'Thursday') selected @endif>Thursday</option>
                                                    <option value="Friday" @if($class_schedule->day == 'Friday') selected @endif>Friday</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4 col-12 mb-3 form-group">
                                                <label for="time" class="form-label"><span class="text-danger">*</span>Time</label>
                                                <input type="time" name="time[]" value="{{ $class_schedule->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>
                                        @endforeach
                                    </div>

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

                    <div class="card w-100 position-relative overflow-hidden mb-0 mt-4">
                        <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>
                                @if($class->status != DaClass::STATUS_COMPLETED)
                                    <button class="btn btn-primary float-end">Submit</button>
                                @endif
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </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("");
                    },
                });
            }
        </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>