@extends('layouts.teacher')
 <!-- INTERNAl Full Calendar css -->
 <link href="{{ env('SECURE_ASSETS').'/plugins/fullcalendar/fullcalendar.css' }}" rel="stylesheet" />
@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>@lang('student.schedule.my schedule')</x-page.header>
            <div class="row">
                <div class="col-lg-12" id="external-events-list">
                    <div class="card">
                        <div class="card-body">
                            <div class="" id="calendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('teacher-js')
    <!-- INTERNAL Fullcalendar js-->
    <script src="{{ env('SECURE_ASSETS').'/plugins/fullcalendar/moment.min.js'}}"></script>
    <script src="{{ env('SECURE_ASSETS').'/plugins/fullcalendar/fullcalendar.min.js'}}"></script>
    <script src="{{ env('SECURE_ASSETS').'/plugins/fullcalendar/popper.min.js'}}"></script>
    <script src="{{ env('SECURE_ASSETS').'/plugins/fullcalendar/tippy.min.js'}}"></script>
    <script>
        //________ FullCalendar
        document.addEventListener('DOMContentLoaded', function() {
            var containerEl = document.getElementById('external-events-list');
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                eventMouseEnter: function(info) {
                    // change the border color just for fun
                    info.el.style.borderColor = 'red';
                },
                eventMouseLeave: function(info) {
                    // change the border color just for fun
                    info.el.style.borderColor = '';
                },
                eventDidMount: function(info) {
                var tooltip = new tippy(info.el, {
                content: info.event.extendedProps.description,
                interactive: true,
                moveTransition: 'transform 1s ease-out',
                allowHTML:true,
                });
                },
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialView: 'listMonth',
                timeZone: 'local',
                dayMaxEventRows: true, // for all non-TimeGrid views
                displayEventTime: true,
                displayEventEnd: true,
                dayMaxEvents: true,
                nowIndicator: true,
                weekNumbers: true,
                navLinks: true, // can click day/week names to navigate views
                businessHours: false, // display business hours
                editable: false,
                selectable: false,
                selectMirror: false,
                droppable: false,
                locale:"{{App::getLocale() == 'en'? 'en':'ar'}}",
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    meridiem: 'short'
                },
                eventSources: [schedule],
            });
            calendar.render();
        });
        // sample calendar events data
        'use strict'
        var curYear = moment().format('YYYY');
        var curMonth = moment().format('MM');
        var schedule = {
            id: 1,
            events: [
                    @foreach ($courses as $course)
                       @foreach ($course->meeting as $meeting)
                            // Plain Meeting
                            @if($meeting->is_extra == 0)
                                @if($meeting->groupSchedule->is_deleted == 0)
                                    {
                                    id: '{{$meeting->mid}}',
                                    start: '{{ $meeting->mstartdate }}'+'T'+'{{ $meeting->mstarttime }}',
                                    allDaySlot: false,
                                    title: '{{ $meeting->mtopic }}',
                                    description: '{{$meeting->mstatus === "Canceled" ? "Canceled": "$meeting->mtopic"}}' ,
                                    className: "bg-success-transparent",
                                    {{-- // @php
                                        // $found = 0;
                                        // @endphp
                                        // @if( now()->format('H:i:s') < date('H:i:s', strtotime('+'. $meeting->mduration .' minutes', strtotime($meeting->mstarttime)))  &&
                                        //     now()->format('H:i:s') > date('H:i:s', strtotime($meeting->mstarttime) - 900 )
                                        //     && $meeting->mstartdate === now()->format('Y-m-d') )
                                        // @php
                                        // $found = 1;
                                        // @endphp
                                        // @endif
                                        // @if ($found)
                                        // @if($meeting->mstatus === "Canceled")
                                        //     url: ""
                                        // @else
                                        //     url: "{{route('teacher.course.lesson.join',[$course->coffid,$meeting->mid])}}"
                                        // @endif
                                        // @else
                                        // url:''
                                        // @endif
                                        --}}
                                    },
                                @endif
                            @endif
                            // Extra Meeting
                            @if($meeting->is_extra == 1)
                                {
                                    id: '{{$meeting->mid}}',
                                    start: '{{ $meeting->mstartdate }}'+'T'+'{{ $meeting->mstarttime }}',
                                    allDaySlot: false,
                                    title: '{{ $meeting->mtopic }}',
                                    description: '{{$meeting->mstatus === "Canceled" ? "Canceled": "$meeting->mtopic"}}' ,
                                    className: "bg-success-transparent",
                                    {{-- // @php
                                        // $found = 0;
                                        // @endphp
                                        // @if( now()->format('H:i:s') < date('H:i:s', strtotime('+'. $meeting->mduration .' minutes', strtotime($meeting->mstarttime)))  &&
                                        //     now()->format('H:i:s') > date('H:i:s', strtotime($meeting->mstarttime) - 900 )
                                        //     && $meeting->mstartdate === now()->format('Y-m-d') )
                                        // @php
                                        // $found = 1;
                                        // @endphp
                                        // @endif
                                        // @if ($found)
                                        // @if($meeting->mstatus === "Canceled")
                                        //     url: ""
                                        // @else
                                        //     url: "{{route('teacher.course.lesson.join',[$course->coffid,$meeting->mid])}}"
                                        // @endif
                                        // @else
                                        // url:''
                                        // @endif
                                        --}}
                                },
                            @endif

                       @endforeach
                    @endforeach

            ],
        };
    </script>
@endsection