@php
    use Carbon\Carbon;
@endphp
<x-dashboard.teacher-layout>
    <x-slot name='title'>Dashboard - Dreamers Academy</x-slot>
    <section class="body-wrapper">
        <div class="container-fluid" style="padding-top: 150px !important;">
            <div class="col-12">

                <input type="hidden" id="class_id" class="class_id" value="{{ $class->id }}">
                <div class="card card-outline w-100 position-relative overflow-hidden mb-0">
                    <div class="card-body p-4">
                        <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 class="col-12 mt-3">
                <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>
        </div>
    </section>
    <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>

    <script src="{{asset('assets/js/dashboards/teacher-1.2.0..js')}}"></script>
    <script src="{{asset('assets/modernize/js/apps/notes.js')}}"></script>
</x-dashboard.teacher-layout>