@extends('admin.layouts.container')

@push('stack_styles')
    <style>
        .fc-event {
            cursor: pointer;
        }
    </style>
@endpush

@section('content')
    <div class="side-title">
        <h3>{{ $head ?? '' }}</h3>
    </div>

    <div class="border-item">

        <div id='calendar'></div>

    </div> <!-- end of border-item -->

    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

            </div>
        </div>
    </div>

@endsection

@push('stack_scripts')
    <script src="{{ asset('assets/admin/js/lib/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lib/fullcalendar.locales-all.global.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let requestsNumberTemplate = "{{ __('packages.requests_number') }}";
            let calendarEl = document.getElementById('calendar');
            let calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prevYear,prev,next,nextYear today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                initialDate: '{{ date('Y-m-d') }}',
                navLinks: true, // can click day/week names to navigate views
                editable: false, //true - allows to drag events
                dayMaxEvents: true, // allow "more" link when too many events
                locale: "{{ app()->getLocale() }}",
                dateClick: function (info) {
                    // Set the modal content for the date click
                    let date = info.dateStr;

                },
                eventClick: function (info) {
                    // Set the modal content for the event click
                    // info.event.start <=> Tue May 14 2024 00:00:00 GMT+0300 (Eastern European Summer Time)
                    let title = info.event.title,
                        start = info.event.start.toISOString(), //2024-05-13T21:00:00.000Z
                        startDate = info.event.start.toLocaleDateString('en-CA'), //2024-05-14
                        end = info.event.end ? info.event.end.toISOString() : 'N/A';

                    $.ajax({
                        type: 'post',
                        url: '{{ route('packages.subscriptions.modal') }}',
                        //dataType: 'json',
                        data: {
                            package_id: "{{ $package->id ?? null }}",
                            date: startDate,
                        },
                        success: function(data) {
                            $('#eventModal .modal-content').html(data.html);
                            $('#eventModal').modal('show');
                        },
                        error: function(xhr, status, error) {
                            //console.error('Error:', status, error);
                        }
                    });
                },
                events: function (fetchInfo, successCallback, failureCallback) {
                    $.ajax({
                        type: 'post',
                        url: '{{ route('packages.fetch.subscriptions') }}',
                        dataType: 'json',
                        data: {
                            package_id: "{{ $package->id ?? null }}",
                        },
                        success: function (data) {
                            if (data.subscriptions?.length > 0) {
                                let events = [];
                                $(data.subscriptions).each(function () {
                                    let eventTitle = requestsNumberTemplate.replace(':count', this.count);
                                    events.push({
                                        title: eventTitle,
                                        start: this.date,
                                    });
                                });
                                successCallback(events);
                            } else {
                                successCallback([]);
                            }
                        },
                        error: function () {
                            failureCallback();
                        }
                    });
                },
            });
            calendar.render();
        });
    </script>
@endpush