@extends('layouts.layout')
@section('one_page_css')
    <style>
        #calendar {
            
        }
    </style>
@endsection

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    @can('patient-appointment-create')
                        <h3>
                            <a href="{{ route('patient-appointments.create') }}" class="btn btn-outline btn-info">+ @lang('Patient Appointment')</a>
                            <span class="pull-right"></span>
                        </h3>
                    @endcan
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">@lang('Doctor Schedule')</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <div id="calendar"></div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>@lang('Doctor Schedule')</h3>
                    <div class="card-tools">
                        <button class="btn btn-default" data-toggle="collapse" href="#filter"><i class="fas fa-filter"></i> @lang('Filter')</button>
                    </div>
                </div>
                <div class="cardbody">
                    {{-- <div id="filter" class="collapse @if (request()->isFilterActive) show @endif">
                        <div class="card-body border">
                            <form action="" method="get" role="form" autocomplete="off">
                                <input type="hidden" name="isFilterActive" value="true">
                                <div class="row">                                    
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>@lang('Therapists')</label>
                                            <select name="doctor_id[]" class="form-control select2" id="doctor_id" multiple>
                                                <option value="">--@lang('Select')--</option>
                                                @foreach ($doctors as $doctor)                                                    
                                                    <option value="{{ $doctor->id }}" {{ old('doctor_id', request()->doctor_id) == $doctor->id ? 'selected' : '' }}>{{ $doctor->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>@lang('Appointment Date')</label>
                                            <input type="text" name="appointment_date" id="appointment_date" class="form-control flatpickr" placeholder="@lang('Appointment Date')" value="{{ old('appointment_date', request()->appointment_date) }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <button type="submit" class="btn btn-info">@lang('Submit')</button>
                                        @if (request()->isFilterActive)
                                            <a href="{{ route('patient-schedule.calendar') }}" class="btn btn-secondary">@lang('Clear')</a>
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div> --}}

                </div>
                
                <div class="card">
                    <div id="dp">


                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('one_page_js')
    {{-- <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    {{-- <script src="{{ asset('assets/js/daypilot/daypilot-all.min.js') }}"></script> --}}

    {{-- <script type="text/javascript">
        var dp = new DayPilot.Calendar("dp", {
            locale: "en-us",
            columnWidthSpec: "Auto",
            viewType: "Resources",

            headerLevels: 1,
            headerHeight: 30,
            cellDuration: 15,
            cellHeight: 20,
            crosshairType: "Header",
            businessBeginsHour: 0,
            businessEndsHour: 24,
            dayBeginsHour: 0,
            dayEndsHour: 24,
            showCurrentTime: false,
            eventArrangement: "Cascade",
            allowEventOverlap: true,
            timeRangeSelectedHandling: "Enabled",
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
                const dp = args.control;
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result,
                    resource: args.resource
                });
            },

            eventDeleteHandling: "Update",
            onEventDeleted: (args) => {
                args.control.message("Event deleted: " + args.e.text());
            },
            eventMoveHandling: "Update",
            onEventMoved: (args) => {
                args.control.message("Event moved: " + args.e.text());
            },
            eventResizeHandling: "Update",
            onEventResized: (args) => {
                args.control.message("Event resized: " + args.e.text());
            },
            eventClickHandling: "Edit",
            eventEditHandling: "Update",
            onEventEdited: (args) => {
                args.control.message("Event edited: " + args.e.text());
            },
            eventHoverHandling: "Bubble",
            contextMenu: new DayPilot.Menu({
                items: [{
                    text: "Delete",
                    onClick: (args) => {
                        const dp = args.source.calendar;
                        dp.events.remove(args.source);
                    }
                }]
            }),
            bubble: new DayPilot.Bubble({
                onLoad: (args) => {
                    // if event object doesn't specify "bubbleHtml" property 
                    // this onLoad handler will be called to provide the bubble HTML
                    args.html = "Event details";
                }
            }),
        });


        /* dp.resources = [
            @foreach ($appointmentsGroupedByDoctors as $doc_name => $doctor)
                {
                    name: "{{ $doc_name }}",
                    id: "{{ $loop->index }}"
                },
            @endforeach
        ]; */

        dp.columns.list = [
            @foreach ($appointmentsGroupedByDoctors as $doc_name => $doctor)
                {
                    name: "{{ $doc_name }}",
                    id: "{{ $loop->index }}"
                },
            @endforeach            
        ];

        /* dp.columns = [{
                "name": "Resource 1",
                "id": "R1"
            },
            {
                "name": "Resource 2",
                "id": "R2"
            },
            {
                "name": "Resource 3",
                "id": "R3"
            }
        ]; */

        loadEvents();

        function loadEvents() {

            var _url = '{{ route('patient-schedule.ajax') }}';

            $.ajax({
                url: _url,
                method: 'GET',
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response) {

                    //console.log(response);
                    $.each(response, function(key, item) {
                        console.log(item)
                    });

                    /* dp.events.list = [{
                            start: response,
                            end: "2020-08-27T00:00:00",
                            id: "1",
                            resource: "A",
                            text: "Event 1"
                        },
                        {
                            start: "2020-08-26T12:00:00",
                            end: "2020-08-27T00:00:00",
                            id: "2",
                            resource: "B",
                            text: "Event 2"
                        }
                    ]; */

                    //return response;
                }
                // dp.events.load(response);
            });

        }

        dp.init();
    </script> --}}

    {{-- <script>
        var resources = [{
                name: "Doctor1",
                id: "D1",
                children: [{
                        name: "2022-01-01",
                        id: "D1D1"
                    },
                    {
                        name: "2022-01-02",
                        id: "D1D2"
                    },
                ]
            },
            {
                name: "Doctor2",
                id: "D2",
                children: [{
                        name: "2022-01-01",
                        id: "D2D1"
                    },
                    {
                        name: "2022-01-02",
                        id: "D2D2"
                    },
                ]
            }
        ];

        var events = [{
                id: 1,
                resource: "D1D1",
                start: "2022-01-01T09:00:00",
                end: "2022-01-01T10:00:00",
                text: "Appointment1"
            },
            {
                id: 2,
                resource: "D1D1",
                start: "2022-01-01T10:00:00",
                end: "2022-01-01T11:00:00",
                text: "Appointment2"
            },
            {
                id: 3,
                resource: "D1D2",
                start: "2022-01-02T09:00:00",
                end: "2022-01-02T10:00:00",
                text: "Appointment3"
            },
            {
                id: 4,
                resource: "D2D1",
                start: "2022-01-01T09:00:00",
                end: "2022-01-01T10:00:00",
                text: "Appointment4"
            },
            {
                id: 5,
                resource: "D2D1",
                start: "2022-01-01T10:00:00",
                end: "2022-01-01T11:00:00",
                text: "Appointment5"
            },
            {
                id: 6,
                resource: "D2D2",
                start: "2022-01-02T09:00:00",
                end: "2022-01-02T10:00:00",
                text: "Appointment6"
            },
        ];

        var dp = new DayPilot.Scheduler("dp", {
            treeEnabled: true,
            resources: resources,
            events: events,
            startDate: "2022-01-01",
            days: 2,
            cellWidthSpec: "Auto",
            timeHeaders: [{
                    groupBy: "Month"
                },
                {
                    groupBy: "Day",
                    format: "d"
                },
                {
                    groupBy: "Hour",
                    format: "H"
                }
            ],
            onBeforeResHeaderRender: function(args) {
                var res = args.resource;
                if (res.level === 0) {
                    args.resource.html = res.name;
                } else if (res.level === 1) {
                    args.resource.html = res.name;
                }
            }
            // other config options
        });

        /*  var dp = new DayPilot.Calendar("dp", {
             views: [{
                     name: "Day",
                     id: "day"
                 },
                 {
                     name: "Week",
                     id: "week"
                 },
                 {
                     name: "Month",
                     id: "month"
                 }
             ],
             onViewChange: function(args) {
                 switch (args.view) {
                     case "day":
                         dp.startDate = new DayPilot.Date().getDatePart();
                         dp.days = 1;
                         break;
                     case "week":
                         var start = new DayPilot.Date().getDatePart();
                         var end = start.addDays(7);
                         dp.startDate = start;
                         dp.days = 7;
                         break;
                     case "month":
                         var start = new DayPilot.Date().firstDayOfMonth();
                         var end = start.addMonths(1);
                         dp.startDate = start;
                         dp.days = start.daysInMonth();
                         break;
                 }
                 dp.update();
             }
         }); */

        /*  dp.viewType = "Month";
         dp.columns = [
             
        ];*/
        // other code here
        dp.init();
    </script> --}}





    {{-- <script src="{{ asset('assets/fullcalendar-scheduler-6.0.3/dist/index.global.js') }}"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.0.3/index.global.min.js"></script>
    <script>
        /*  document.addEventListener('DOMContentLoaded', function() {
                              var calendarEl = document.getElementById('calendar');
                              var calendar = new FullCalendar.Calendar(calendarEl, {
                                initialView: 'dayGridMonth'
                              });
                              calendar.render();
                            }); */


        /* var calendarEl = document.getElementById('calendar');
                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        defaultView: 'agendaDay',
                        groupByResource: true,
                        resources: [{
                                id: '1',
                                title: 'Doctor 1'
                            },
                            {
                                id: '2',
                                title: 'Doctor 2'
                            },
                            {
                                id: '3',
                                title: 'Doctor 3'
                            },
                        ],
                        events: [{
                                id: '1',
                                resourceId: '1',
                                start: '2022-01-01T09:00:00',
                                end: '2022-01-01T10:00:00',
                                title: 'Appointment 1'
                            },
                            {
                                id: '2',
                                resourceId: '1',
                                start: '2022-01-02T09:00:00',
                                end: '2022-01-02T10:00:00',
                                title: 'Appointment 2'
                            },
                            {
                                id: '3',
                                resourceId: '2',
                                start: '2022-01-01T09:00:00',
                                end: '2022-01-01T10:00:00',
                                title: 'Appointment 3'
                            },
                            {
                                id: '4',
                                resourceId: '2',
                                start: '2022-01-02T09:00:00',
                                end: '2022-01-02T11:00:00',
                                title: 'Appointment 4'
                            },
                        ],
                        eventRender: function(event, element) {
                            var resourceId = event.resourceId;
                            $("#resource-" + resourceId).append(element);
                        },
                        eventAfterAllRender: function(view) {
                            //Customize the way events are displayed after all events are rendered
                        },
                        columnHeaderHtml: function(column) {
                            //Customize the html for column headers
                        }


                    });
                    calendar.render();
         */
        /* var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                plugins: ['resourceTimeGrid'],
                defaultView: 'resourceTimeGridFourDay',
                resources: [{
                        id: 'a',
                        title: 'Doctor A'
                    },
                    {
                        id: 'b',
                        title: 'Doctor B'
                    },
                    {
                        id: 'c',
                        title: 'Doctor C'
                    }
                ],
                events: [{
                        id: '1',
                        resourceId: 'a',
                        title: 'Appointment 1',
                        start: '2022-07-01T10:00:00',
                        end: '2022-07-01T11:00:00'
                    },
                    {
                        id: '2',
                        resourceId: 'a',
                        title: 'Appointment 2',
                        start: '2022-07-02T12:00:00',
                        end: '2022-07-02T13:00:00'
                    },
                    {
                        id: '3',
                        resourceId: 'b',
                        title: 'Appointment 3',
                        start: '2022-07-03T14:00:00',
                        end: '2022-07-03T15:00:00'
                    },
                    {
                        id: '4',
                        resourceId: 'c',
                        title: 'Appointment 4',
                        start: '2022-07-04T08:00:00',
                        end: '2022-07-04T09:00:00'
                    },
                ]
            });

            calendar.render();  */

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                timeZone: 'UTC',

                initialView: 'resourceTimeGridFourDay',
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'resourceTimeGridDay,resourceTimeGridFourDay'
                },
                views: {
                    resourceTimeGridFourDay: {
                        type: 'resourceTimeGrid',
                        duration: {
                            days: 4
                        },
                        buttonText: '4 days'
                    }
                },
                resources: [{
                        id: 'a',
                        title: 'Room A'
                    },
                    {
                        id: 'b',
                        title: 'Room B'
                    }

                ],
                events: 'https://fullcalendar.io/api/demo-feeds/events.json?with-resources=2&start=2023-01-26T00%3A00%3A00Z&end=2023-01-30T00%3A00%3A00Z&timeZone=UTC'
            });

            calendar.render();
        });
    </script>
@endsection