@extends('layouts.master')
@section('pageTitle') @include('layouts.includes.title', ['moduleTitle' => __('locale.timetable')]) @stop
@section('pageBreadcrumb') @include('layouts.includes.breadcrumb', ['moduleTitle' => __('locale.timetable').' '. __('locale.details') ]) @stop
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-topline-yellow">
                <div class="card-body ">

                    <div class="row">

                        <div id="timetableCalendar"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('scripts')
    <style>
        .fc-event, .fc-event-dot {
            background-color: #1880c9 !important;
        }
        .fc-event .fc-bg {
            opacity: 0 !important;
        }
    </style>
    <link href="{{ asset('assets/plugins/fullcalendar/fullcalendar.css') }}" rel="stylesheet" type="text/css"/>
    <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/fullcalendar/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/calendar/calendar.min.js') }}"></script>

    <link href="{{ asset('assets/plugins/sweet-alert/sweetalert2.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/plugins/sweet-alert/sweetalert2.all.min.js') }}"></script>

    <script>

        let teacherAvailability;
        $(function () {

            $('#timetableCalendar').fullCalendar({
                header: {
                    left: '',
                    center: '',
                    right: ''
                },
                plugins: ['momentPlugin', 'formatDate'],
                // height: 680, // Fix height
                columnFormat: 'dddd', // Display just full length of weekday, without dates
                defaultView: 'agendaWeek', // display week view
                // hiddenDays: [0,6], // hide Saturday and Sunday
                weekNumbers: false, // don't show week numbers
                minTime: '06:00:00', // display from 16 to
                maxTime: '20:00:00', // 23
                slotDuration: '00:15:00', // 15 minutes for each row
                allDaySlot: false, // don't show "all day" at the top
                aspectRatio: 1.5,
                editable: false,
                selectable: false,
                selectHelper: false,
                droppable: false, // this allows things to be dropped onto the calendar
                /*select: function (start, end, allDay) {
                    // Code for creating new events.
                },*/
                eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
                    // Code when you resize an event (for example make it two hours longer
                    eventActions(event);
                },
                eventDrop: function (event, jsEvent, ui, view) {
                    // Code when you drop an element somewhere else
                    eventActions(event);
                },
                eventRender: function (event, element, view) {
                    element.innerHTML = event.title;
                },
                eventClick: function(event, jsEvent, view) {
                    getEventDetails(event.id);
                },
                timeZone: 'UTC',
                events: {
                    url: '{{ route('student-timetable.events') }}',
                    type: 'GET',
                    error: function () {
                        alert('there was an error while fetching events!');
                    }
                }
            });

        });



    </script>


@stop

