@extends('layouts.student')
{{-- @section('student-style')
@endsection --}}
 <!-- 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('student-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->where('mstatus','!=','Canceled') 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 + $time_after .' minutes', strtotime($meeting->mstarttime)))  &&
                                        now()->format('H:i:s') > date('H:i:s', strtotime($meeting->mstarttime) - $time_before )
                                        && $meeting->mstartdate === now()->format('Y-m-d') )
                                    @php
                                    $found = 1;
                                    @endphp
                                    @endif
                                    @if ($found)
                                    @if($meeting->mstatus === "Canceled")
                                        url: ""
                                    @else
                                        url: ""
                                    @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 + $time_after .' minutes', strtotime($meeting->mstarttime)))  &&
                                    now()->format('H:i:s') > date('H:i:s', strtotime($meeting->mstarttime) - $time_before )
                                    && $meeting->mstartdate === now()->format('Y-m-d') )
                                @php
                                $found = 1;
                                @endphp
                                @endif
                                @if ($found)
                                @if($meeting->mstatus === "Canceled")
                                    url: ""
                                @else
                                    url: ""
                                @endif
                                @else
                                url:''
                                @endif
                            },
                        @endif
                    @endforeach
                @endforeach
            ],
        };
    </script>
@endsection