@extends('adminlte::page')

@section('content_header')
    <h1>@lang('global.Calendar')</h1>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <x-card>

                <!-- THE CALENDAR -->
                <div id="calendar"></div>
            </x-card>
        </div>
    </div>
@endsection

@section('adminlte_js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar(calendarEl, {
                locale: fc_{{ app()->getLocale() }},
                plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,listWeek'
                },
                events: {
                    url: '{{ route('call-centers.appointments') }}'
                },
                eventClick: function(info) {

                    console.log(info);
                },
                eventContent: function(arg) {

                    const {pid, nom, prenom, appointment_id, appointment_mobile, patient_id, appointment_time} = arg.event.extendedProps;
                    const time = arg.timeText;
                    const text_color = arg.textColor;
                    const background_color = arg.backgroundColor;
                    const title = arg.event.title;
                    
                    let element = document.createElement('div');
                    // element.innerHTML = `<span>${appointment_id} - ${appointment_time}</span> <span class="float-right">${patient_id}</span>`;
                    element.innerHTML = `#<span>${appointment_id}</span> - <span>${appointment_time}</span> <span class="float-right">${appointment_mobile}</span>`;                  
                    element.setAttribute('title', `@lang('global.Nom'): ${nom} ${prenom} - @lang('global.NoPid'): ${pid}`);
                    

                    /* if (arg.event.extendedProps.isUrgent) {
                        element.innerHTML = 'urgent event'
                    } else {
                        element.innerHTML = 'normal event'
                    } */

                    let arrayOfDomNodes = [ element ];
                    return { domNodes: arrayOfDomNodes }
                },
                eventDisplay: 'block',
            });
            calendar.render();
        });

        // $('#calendar').fullCalendar({
        //     headerToolbar: {
        //         left  : 'prev,next today',
        //         center: 'title',
        //         right : 'dayGridMonth,timeGridWeek,timeGridDay'
        //     },
        //     themeSystem: 'bootstrap',
        //     events: function () {

        //         $.get('{{ route('call-centers.calendar') }}', response => {

        //             console.log(response);
        //         });

        //         return [];
        //     }
        // });
    </script>
@endsection