@extends('layouts.admin')
{{-- @section('admin-style')
@endsection --}}

@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>Zoom Schedule</x-page.header>
            <div class="card">
                <card class="card-header">
                    <h5 class="card-tile">@lang('student.filter by')</h5>
                </card>
                <div class="card-body">
                    <div class="alert alert-warning text-center mb-2">
                        <b>This report returns for max the data of a month after today (today is included).</b>
                    </div>
                    <form method="POST" id="searchForm" action="{{ route('zoom_report') }}">
                        @csrf
                        <div class="form-group ">
                            <label class="form-label mt-2" for="emails" style="font-size:15px">Zoom E-mail</label>

                            <select name="emails" id="emails" class="form-control select2-show-search">
                                <option value="0">Select account</option>
                                @foreach ($emails as $email)
                                    <option value="{{$email->email}}">{{$email->email}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <label class="mt-3 mb-sm-1"> from: </label>
                                <div>
                                <input type="date" class="form-control" name="from" id="from" value="{{request()->from ? request()->from :''}}">
                                </div>
                            </div>
                            <div class="col-6">
                                <label class="mt-3 mb-sm-1"> to: </label>
                                <div>
                                    <input type="date" class="form-control" {{  request()->to ? '':'disabled'}} name="to" id="to" value="{{request()->to ? request()->to :''}}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-6 d-flex justify-content-center gap-3">
                            <button type="submit" class="btn btn-primary waves-effect waves-light">Search</button>
                            <a href="{{ route('meetings_report') }}" class="btn btn-danger waves-effect waves-light">Reset</a>
                        </div>
                    </form>
                </div>
            </div>

            <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('admin-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 ($meetings as $meeting)
                        {
                        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',[$meeting->coffid,$meeting->mid])}}"
                          @endif
                        @else
                        url:''
                        @endif
                    },
                    @endforeach
            ],
        };
    </script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var startDateInput = document.getElementById('from');
        var endDateInput = document.getElementById('to');

        startDateInput.addEventListener('change', function () {
            var startDate = new Date(startDateInput.value);
            var maxEndDate = new Date(startDate);
            maxEndDate.setDate(maxEndDate.getDate() + 31);
            if(startDateInput.value != ''){
                endDateInput.disabled = false;
            }else{
                endDateInput.disabled = true;
            }
            // Set the max attribute of the end date input
            endDateInput.setAttribute('max', maxEndDate.toISOString().split('T')[0]);
            endDateInput.setAttribute('min', startDateInput.value);

        });

        // Prevent users from selecting a date beyond the maximum allowed range
        endDateInput.addEventListener('change', function () {
            var maxEndDate = new Date(startDateInput.value);
            maxEndDate.setDate(maxEndDate.getDate() + 31);
            if (new Date(endDateInput.value) >= maxEndDate) {
                endDateInput.value = maxEndDate.toISOString().split('T')[0];
                alert('End date cannot exceed 30 days from the start date.');
            }

            // Ensure end date is not greater than start date
            if (new Date(endDateInput.value) < new Date(startDateInput.value)) {
                endDateInput.value = startDateInput.value;
                alert('End date cannot be earlier than start date.');
            }
        });


    });
</script>


@endsection