@extends('layouts.master')
@section('title', 'Calendar')

@section('css')
<link rel="stylesheet" href=" {{ asset('assets/vendor/libs/fullcalendar/fullcalendar.css') }}" />
<link rel="stylesheet" href=" {{ asset('assets/vendor/css/pages/app-calendar.css') }}" />
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    @section('breadcrumbs')
    <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
        <ol class="breadcrumb mb-0 me-1">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">
                Calendar
            </li>

        </ol>
    </nav>
    @endsection

    <div class="card app-calendar-wrapper">
        <div class="row g-0">
            <!-- Calendar Sidebar -->
            <div class="col app-calendar-sidebar" id="app-calendar-sidebar">

                <div class="border-bottom p-4 my-sm-0 mb-3 {{ !auth()->user()->can('create-calendar')? 'd-none': '' }}">
                    <div class="d-grid">
                        <button class="btn btn-primary btn-toggle-sidebar" data-bs-toggle="offcanvas" data-bs-target="#addEventSidebar" aria-controls="addEventSidebar">
                            <i class="ti ti-plus me-1"></i>
                            <span class="align-middle">Add Event</span>
                        </button>

                    </div>
                </div>

                <div class="p-3">
                    <!-- inline calendar (flatpicker) -->
                    <div class="inline-calendar"></div>

                    <hr class="container-m-nx mb-4 mt-3" />

                    <!-- Filter -->
                    <div class="mb-3 ms-3">
                        <small class="text-small text-muted text-uppercase align-middle">Filter</small>
                    </div>

                    <div class="form-check form-check-secondary mb-2 ms-3">
                        <input class="form-check-input select-all" type="checkbox" id="selectAll" data-value="all" checked />
                        <label class="form-check-label" for="selectAll">View All</label>
                    </div>

                    <div class="app-calendar-events-filter ms-3">
                        <div class="form-check form-check-danger mb-2">
                            <input class="form-check-input input-filter" type="checkbox" id="select-personal" data-value="personal" checked />
                            <label class="form-check-label" for="select-personal">Personal</label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input input-filter" type="checkbox" id="select-business" data-value="business" checked />
                            <label class="form-check-label" for="select-business">Business</label>
                        </div>
                        <div class="form-check form-check-success mb-2">
                            <input class="form-check-input input-filter" type="checkbox" id="select-holiday" data-value="holiday" checked />
                            <label class="form-check-label" for="select-holiday">Holiday</label>
                        </div>
                        <div class="form-check form-check-info">
                            <input class="form-check-input input-filter" type="checkbox" id="select-etc" data-value="etc" checked />
                            <label class="form-check-label" for="select-etc">ETC</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Calendar Sidebar -->

            <!-- Calendar & Modal -->
            <div class="col app-calendar-content">
                <div class="card shadow-none border-0">
                    <div class="card-body pb-0">
                        <!-- FullCalendar -->
                        <div id="calendar"></div>
                    </div>
                </div>
                <div class="app-overlay"></div>
                <!-- FullCalendar Offcanvas -->
                <div class="offcanvas offcanvas-end event-sidebar" tabindex="-1" id="addEventSidebar" aria-labelledby="addEventSidebarLabel">
                    <div class="offcanvas-header my-1">
                        <h5 class="offcanvas-title" id="addEventSidebarLabel">Add Event</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body pt-0">
                        <form class="event-form pt-0" id="eventForm" onsubmit="return false">
                            <input type="hidden" id="id" value="" name="id">

                            <div class="mb-3 d-none" id="created_by_div">
                                <label class="form-label" for="createdBy">Created By</label>
                                <input type="text" class="form-control" id="createdBy" name="createdBy" placeholder="created By" readonly disabled />
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="eventTitle">Title</label>
                                <span class="error">*</span>
                                <input type="text" class="form-control" id="eventTitle" name="eventTitle" placeholder="Event Title" />
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="eventDescription">Description</label>
                                <span class="error">*</span>
                                <textarea class="form-control" placeholder="Event Description" name="eventDescription" id="eventDescription"></textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="eventLabel">Label</label>
                                <span class="error">*</span>
                                <select class="select2 select-event-label form-select" id="eventLabel" name="eventLabel">
                                    @foreach ($labels as $key => $label)
                                    <option data-label="{{ $label['alert'] }}" value="{{ $key }}" {{ $loop->first ? 'selected' : '' }}>{{ $label['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="eventStartDate">Start Date</label>
                                <span class="error">*</span>
                                <input type="text" class="form-control" id="eventStartDate" name="eventStartDate" placeholder="Start Date" />
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="eventEndDate">End Date</label>
                                <input type="text" class="form-control" id="eventEndDate" name="eventEndDate" placeholder="End Date" />
                            </div>
                            <div class="mb-3 d-none">
                                <label class="switch">
                                    <input type="checkbox" class="switch-input allDay-switch" />
                                    <span class="switch-toggle-slider">
                                        <span class="switch-on"></span>
                                        <span class="switch-off"></span>
                                    </span>
                                    <span class="switch-label">All Day</span>
                                </label>
                            </div>

                            <div class="mb-3">
                                <span>Type</span>
                                <span class="error">*</span>
                                <div class="d-flex mt-2">
                                    <div class="form-group">
                                        <input name="eventType" class="form-check-input answer-input" type="radio" value="{{ config('const.eventOnlineInt') }}" id="type_online" checked />
                                        <label class="form-check-label" for="type_online">Online</label>
                                    </div>

                                    <div class="form-group ms-3">
                                        <input name="eventType" class="form-check-input answer-input" type="radio" value="{{ config('const.eventOfflineInt') }}" id="type_offline" />
                                        <label class="form-check-label" for="type_offline">Offline</label>
                                    </div>
                                </div>

                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="eventURL">Event URL</label>
                                <input type="url" class="form-control" id="eventURL" name="eventURL" placeholder="https://www.google.com" />
                            </div>

                            <div class="mb-3 d-none">
                                <label class="form-label" for="eventLocation">Location</label>
                                <textarea class="form-control" id="eventLocation" name="eventLocation" placeholder="Enter Location"> </textarea>
                            </div>

                            <div class="mb-3 select2-primary">
                                <label class="form-label" for="eventGuests">Add Participants</label>
                                <select class="select2 select-event-guests form-select" id="eventGuests" name="eventGuests[]" multiple>
                                    @foreach ($users as $user)
                                    <option data-avatar="{{ $user->profile_pic }}" value="{{ $user->id }}">
                                        {{ $user->owner_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="intivite_other">Invite Other (Enter Only One Email)</label>
                                <input type="text" class="form-control" id="intivite_other" name="intivite_other" placeholder="Invite Other" />
                            </div>

                            <div class="mb-3 d-flex justify-content-sm-between justify-content-start my-4">
                                <div>
                                    <button type="submit" class="btn btn-primary btn-add-event me-sm-3 me-1 submitbutton {{ auth()->user()->can('create-calendar') ||auth()->user()->can('update-calendar')? '': 'd-none' }}">
                                        <span class="spinner-border me-1 loader-btn d-none" role="status" aria-hidden="true"></span> Add
                                    </button>
                                    <button type="reset" class="btn btn-label-secondary btn-cancel me-sm-0 me-1" data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-label-danger btn-delete-event d-none {{ auth()->user()->can('delete-calendar')? '': 'display-done' }}">Delete</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /Calendar & Modal -->
        </div>
    </div>


</div>
</div>
@include('admin.confirmalert')
@endsection

@section('scripts')

<script src="{{ asset('assets/vendor/libs/fullcalendar/fullcalendar.js') }}"></script>
<script>
    $(document).ready(function() {
        $('input[type=radio][name=eventType]').change(function() {
            $('#eventLocation').removeClass('error')
            $('#eventLocation-error').remove();
            $('#eventURL').removeClass('error')
            $('#eventURL-error').remove();

            if (this.value == 0) {
                $('#eventLocation').parent().removeClass('d-none');
                $('#eventURL').parent().addClass('d-none');
            } else if (this.value == 1) {
                $('#eventURL').parent().removeClass('d-none');
                $('#eventLocation').parent().addClass('d-none');
            }
        });
    });

    /* initiate variables */
    var calendarEl = document.getElementById('calendar')
    var inlineCalendar = document.querySelector('.inline-calendar');
    var btnToggleSidebar = document.querySelector('.btn-toggle-sidebar')
    var appCalendarSidebar = document.querySelector('.app-calendar-sidebar')
    var appOverlay = document.querySelector('.app-overlay')
    var calendarsColor = {
        Business: 'primary',
        Holiday: 'success',
        Personal: 'danger',
        Family: 'warning',
        Etc: 'info'
    }
    var addEventSidebar = document.getElementById('addEventSidebar');
    var eventStartDate = document.querySelector('#eventStartDate');
    var eventEndDate = document.querySelector('#eventEndDate');
    var eventGuests = $('#eventGuests')
    var filterInput = [].slice.call(document.querySelectorAll('.input-filter'))
    var offcanvasTitle = document.querySelector('.offcanvas-title')
    var btnSubmit = document.querySelector('button[type="submit"]')
    var btnDeleteEvent = document.querySelector('.btn-delete-event')
    var btnCancel = document.querySelector('.btn-cancel')
    var eventUrl = document.querySelector('#eventURL')
    var allDaySwitch = document.querySelector('.allDay-switch')
    var eventLabel = $('#eventLabel')
    var eventType = $('#eventType')
    var eventLocation = document.querySelector('#eventLocation')
    var eventDescription = document.querySelector('#eventDescription')
    // Init event Offcanvas
    var bsAddEventSidebar = new bootstrap.Offcanvas(addEventSidebar);
    const createdByDiv = $('#created_by_div');



    /* reset values of form */
    function resetValues() {
        $('#created_by_div').addClass('d-none');
        $('#eventEndDate').val('');
        $('#eventURL').val('');
        $('#eventStartDate').val('')
        $('#eventStartDate')[0]._flatpickr.clear();
        $('#eventTitle').val('');
        $('#eventLocation').val('');
        $('#eventGuests').val('').trigger('change')
        $('#eventDescription').val('');
        $('#eventLabel').val('personal').trigger('change');
        $('.answer-input').each(function() {
            if ($(this).val() == 1) {
                $(this).prop('checked', true)
            }
        })
        $('#intivite_other').val('');
        eventForm.resetForm();
    }

    addEventSidebar.addEventListener('hidden.bs.offcanvas', function() {
        resetValues();
    });

    addEventSidebar.addEventListener('shown.bs.offcanvas', function() {
        var input = $('input[type=radio][name=eventType]:checked').val()
        if (input == 0) {
            $('#eventLocation').parent().removeClass('d-none');

            $('#eventURL').parent().addClass('d-none');
        } else if (input == 1) {
            $('#eventURL').parent().removeClass('d-none');
            $('#eventLocation').parent().addClass('d-none');
        }

    });

    // Calender filter functionality
    // ------------------------------------------------
    if (selectAll) {
        selectAll.addEventListener('click', e => {
            if (e.currentTarget.checked) {
                document.querySelectorAll('.input-filter').forEach(c => (c.checked = 1));
            } else {
                document.querySelectorAll('.input-filter').forEach(c => (c.checked = 0));
            }
            calendar.refetchEvents();
        })
    }

    if (filterInput) {
        filterInput.forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.input-filter:checked').length < document.querySelectorAll(
                        '.input-filter').length ?
                    (selectAll.checked = false) :
                    (selectAll.checked = true);
                calendar.refetchEvents();
            });
        });
    }

    // Event Label (select2)
    if (eventLabel.length) {
        function renderBadges(option) {
            if (!option.id) {
                return option.text;
            }
            var $badge =
                "<span class='badge badge-dot bg-" + $(option.element).data('label') + " me-2'> " + '</span>' + option
                .text;

            return $badge;
        }
        eventLabel.wrap('<div class="position-relative"></div>').select2({
            placeholder: 'Select value',
            dropdownParent: eventLabel.parent(),
            templateResult: renderBadges,
            templateSelection: renderBadges,
            minimumResultsForSearch: -1,
            escapeMarkup: function(es) {
                return es;
            }
        });
    }

    //Event Guests (select2)
    if (eventGuests.length) {
        function renderGuestAvatar(option) {
            if (!option.id) {
                return option.text;
            }
            var $avatar =
                "<div class='d-flex flex-wrap align-items-center'>" +
                "<div class='avatar avatar-xs me-2'>" +
                "<img src='" +
                $(option.element).data('avatar') +
                "' alt='avatar' class='rounded-circle' />" +
                '</div>' +
                option.text +
                '</div>';

            return $avatar;
        }
        eventGuests.wrap('<div class="position-relative"></div>').select2({
            placeholder: 'Select Participants',
            dropdownParent: eventGuests.parent(),
            closeOnSelect: false,
            templateResult: renderGuestAvatar,
            templateSelection: renderGuestAvatar,
            escapeMarkup: function(es) {
                return es;
            }
        });
    }
    // Inline sidebar calendar (flatpicker)
    if (inlineCalendar) {
        inlineCalInstance = inlineCalendar.flatpickr({
            monthSelectorType: 'static',
            inline: true
        });
    }

    // Jump to date on sidebar(inline) calendar change
    inlineCalInstance.config.onChange.push(function(date) {
        calendar.changeView(calendar.view.type, moment(date[0]).format('YYYY-MM-DD'));
        modifyToggler();
        appCalendarSidebar.classList.remove('show');
        appOverlay.classList.remove('show');
    });

    // Event start (flatpicker)

    if (eventStartDate) {
        var date = new Date();
        var defaultTime = date.getHours() + ":" + date.getMinutes()

        var start = eventStartDate.flatpickr({
            // minDate: "today",
            enableTime: true,
            altFormat: 'Y-m-dTH:i:S',
            defaultDate: date,
            // minTime: defaultTime,
            defaultHour: date.getHours(),
            defaultMinute: date.getMinutes(),
            minuteIncrement: 1,
            onReady: function(selectedDates, dateStr, instance) {
                if (instance.isMobile) {
                    instance.mobileInput.setAttribute('step', null);
                }
            },

        });
    }

    // Event end (flatpicker)
    if (eventEndDate) {
        var end = eventEndDate.flatpickr({
            enableTime: true,
            defaultDate: defaultTime,
            altFormat: 'Y-m-dTH:i:S',
            defaultHour: date.getHours(),
            defaultMinute: date.getMinutes(),
            minuteIncrement: 1,
            onReady: function(selectedDates, dateStr, instance) {
                if (instance.isMobile) {
                    instance.mobileInput.setAttribute('step', null);
                }
            },
        });
    }

    // Event click function
    function eventClick(info) {
        var userCanUpdate = "{{ auth()->user()->can('update-calendar') }}"
        if (!userCanUpdate) {
            btnSubmit.classList.add('d-none');
        }
        // return;
        eventToUpdate = info.event;
        if (eventToUpdate.url) {
            info.jsEvent.preventDefault();
            window.open(eventToUpdate.url, '_blank');
        }

        
        $('#createdBy').val(eventToUpdate.extendedProps.createdBy);
        createdByDiv.removeClass('d-none')

        console.log('eventToUpdate',eventToUpdate);

        bsAddEventSidebar.show();
        // For update event set offcanvas title text: Update Event
        if (offcanvasTitle) {
            offcanvasTitle.innerHTML = `Update Event`;
        }
        btnSubmit.innerHTML = '<span class="spinner-border me-1 loader-btn d-none" role="status"aria-hidden="true"></span> Update';
        btnSubmit.classList.add('btn-update-event');
        btnSubmit.classList.remove('btn-add-event');
        btnDeleteEvent.classList.remove('d-none');

        eventTitle.value = eventToUpdate.title;
        start.setDate(eventToUpdate.start, true, 'Y-m-d');
        eventToUpdate.allDay === true ? (allDaySwitch.checked = true) : (allDaySwitch.checked = false);
        eventToUpdate.end !== null ?
            end.setDate(eventToUpdate.end, true, 'Y-m-d') :
            end.setDate(eventToUpdate.start, true, 'Y-m-d');
        eventLabel.val(eventToUpdate.extendedProps.calendar.toLowerCase()).trigger('change');
        // eventToUpdate.url !== null ? eventUrl.value = eventToUpdate.url : ''
        $('.answer-input').each(function() {
            if ($(this).val() == eventToUpdate.extendedProps.eventType) {
                $(this).prop('checked', true)
            } else {
                $(this).prop('checked', false);
            }
        })


        eventToUpdate.extendedProps.location !== undefined ? (eventLocation.value = eventToUpdate.extendedProps
            .location) : null;
        eventToUpdate.extendedProps.guests !== undefined ? eventGuests.val(eventToUpdate.extendedProps.guests).trigger(
            'change') : null;
        eventToUpdate.extendedProps.description !== undefined ? (eventDescription.value = eventToUpdate.extendedProps
            .description) : null;
        $('#id').val(eventToUpdate.id);
        btnDeleteEvent.addEventListener('click', e => {
            $('#delete-modal').modal('show');
        });


        $('#eventURL').val(eventToUpdate.url);



    }

    $('#delete-record').on('click', function() {
        var id = $("#id").val();
        var deleteUrl = 'calendar/' + id;
        $('#delete-modal').modal('hide');
        $.ajax({
            url: deleteUrl,
            type: "DELETE",
            dataType: 'json',
            success: function(data) {
                calendar.refetchEvents();
                toastr.success(data.msg, "@lang('admin.success')");
                bsAddEventSidebar.hide();

            },
            error: function(data) {
                toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
            }
        });
    })

    // Hide left sidebar if the right sidebar is open
    btnToggleSidebar.addEventListener('click', e => {
        if (offcanvasTitle) {
            offcanvasTitle.innerHTML = 'Add Event';
        }
        createdByDiv.addClass('d-none');
        btnSubmit.innerHTML = '<span class="spinner-border me-1 loader-btn d-none" role="status" aria-hidden="true"></span> Add';
        btnSubmit.classList.remove('btn-update-event');
        btnSubmit.classList.add('btn-add-event');
        btnDeleteEvent.classList.add('d-none');
        appCalendarSidebar.classList.remove('show');
        appOverlay.classList.remove('show');
    });



    var eventForm = $("#eventForm").validate({
        rules: {
            eventTitle: {
                required: true,
                maxlength: 100
            },
            eventLabel: {
                required: true,
            },
            eventStartDate: {
                required: true
            },

            eventType: {
                required: true
            },
            eventURL: {
                url: true
            },
            eventLocation: {
                maxlength: 200
            },
            intivite_other: {
                email: true
            },
            eventDescription: {
                required: true,
                maxlength: 500
            }
        },
        submitHandler: function(form) {
            // if ($("#eventForm").validate().checkForm()) {
            $('.submitbutton').attr('disabled', true);
            $('.loader-btn').removeClass("d-none");
            // add Event Ajax call
            if (btnSubmit.classList.contains('btn-add-event')) {
                $.ajax({
                    url: "{{route('admin.calendar.store')}}",
                    type: 'POST',
                    data: $('#eventForm').serialize(),
                    success: function(result) {
                        calendar.refetchEvents();
                        bsAddEventSidebar.hide();
                        toastr.success(result.msg, "@lang('admin.success')");
                    },
                    error: function(e) {
                        if (e.responseJSON.msg) {
                            toastr.error(e.responseJSON.msg, "@lang('admin.error')");
                        } else {
                            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                        }
                    },
                    complete: function() {
                        $('.submitbutton').attr('disabled', false);
                        $('.loader-btn').addClass("d-none");
                    }
                });
            } else {
                // edit event Ajax call
                let id = $('#id').val()
                $.ajax({
                    url: "{{url('admin/calendar/update')}}",
                    type: 'PATCH',
                    data: $('#eventForm').serialize(),
                    success: function(result) {
                        calendar.refetchEvents();
                        bsAddEventSidebar.hide();
                        toastr.success(result.msg, "@lang('admin.success')");

                    },
                    error: function(e) {
                        if (e.responseJSON.msg) {
                            toastr.error(e.responseJSON.msg, "@lang('admin.error')");
                        } else {
                            toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                        }
                    },
                    complete: function() {
                        $('.submitbutton').attr('disabled', false);
                        $('.loader-btn').addClass("d-none");
                    }
                });
            }
            // }
        },
    });


    let direction = 'ltr';

    /* main calendar init */

    let calendar = new Calendar(calendarEl, {
        eventTimeFormat: { // like '14:30:00'
            hour: '2-digit',
            minute: '2-digit',
            meridiem: 'short'
        },
        eventContent: function(arg) {
            let italicEl = document.createElement('i')
            let title = arg.event.title
            italicEl.innerHTML = title.length > 15 ? arg.timeText + ' ' + title.substr(0, 12) + '...' : arg
                .timeText.split() + ' ' + title

            let arrayOfDomNodes = [italicEl]
            return {
                domNodes: arrayOfDomNodes
            }
        },
        initialView: 'dayGridMonth',
        events: fetchEvent,
        plugins: [dayGridPlugin, interactionPlugin, listPlugin, timegridPlugin],
        editable: false,
        dragScroll: true,
        dayMaxEvents: 3,
        eventResizableFromStart: true,
        customButtons: {
            sidebarToggle: {
                text: 'Sidebar'
            }
        },
        headerToolbar: {
            start: 'sidebarToggle, prev,next, title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        direction: direction,
        initialDate: new Date(),
        navLinks: true, // can click day/week names to navigate views
        eventClassNames: function({
            event: calendarEvent
        }) {
            //console.log(calendarEvent._def.extendedProps.calendar);
            const colorName = calendarsColor[calendarEvent._def.extendedProps.calendar];

            // Background Color
            return ['fc-event-' + colorName];
        },
        dateClick: function(info) {
            let date = moment(info.date).format('YYYY-MM-DD HH:mm');
            resetValues();
            bsAddEventSidebar.show();

            // For new event set offcanvas title text: Add Event
            if (offcanvasTitle) {
                offcanvasTitle.innerHTML = 'Add Event';
            }
            btnSubmit.innerHTML = '<span class="spinner-border me-1 loader-btn d-none" role="status"aria-hidden="true"></span> Add';
            btnSubmit.classList.remove('btn-update-event');
            btnSubmit.classList.add('btn-add-event');
            btnDeleteEvent.classList.add('d-none');
            eventStartDate.value = date;
            eventEndDate.value = date;
        },
        eventClick: function(info) {
            eventClick(info);
        },
        datesSet: function() {
            modifyToggler();
        },
        viewDidMount: function() {
            modifyToggler();
        }

    });

    /* fetch event display in calendar */

    function fetchEvent(info, successCallback) {
        var filteredCalendars = selectedCalendars();
        $.ajax({
            url: 'events',
            type: 'GET',
            data: {
                filters: filteredCalendars
            },
            success: function(result) {
                let events = [];
                for (let i = 0; i < result.data.length; i++) {
                    const word = result.data[i].tag;
                    const capitalized = word.charAt(0).toUpperCase() + word.slice(1);
                    let participants = [];
                    if (result.data[i].participants.length > 0) {
                        $(result.data[i].participants).each(function() {
                            participants.push($(this)[0].user_id);
                        })
                    }

                    let event = {
                        id: result.data[i].id,
                        url: result.data[i].event_url ?? '',
                        title: result.data[i].title,
                        start: new Date(result.data[i].start_date_time),
                        end: new Date(result.data[i].end_date_time),
                        allDay: false,

                        extendedProps: {
                            calendar: capitalized,
                            eventType: result.data[i].type,
                            location: result.data[i].location,
                            description: result.data[i].description,
                            guests: participants,
                            createdBy: result.data[i].created_by ? result.data[i].created_by.owner_name : '-'
                        }
                    }
                    events.push(event);
                }
                successCallback(events);
            },
            error: function(error) {
                console.error(error);
            }
        });

    }

    function modifyToggler() {
        const fcSidebarToggleButton = document.querySelector('.fc-sidebarToggle-button');
        fcSidebarToggleButton.classList.remove('fc-button-primary');
        fcSidebarToggleButton.classList.add('d-lg-none', 'd-inline-block', 'ps-0');
        while (fcSidebarToggleButton.firstChild) {
            fcSidebarToggleButton.firstChild.remove();
        }
        fcSidebarToggleButton.setAttribute('data-bs-toggle', 'sidebar');
        fcSidebarToggleButton.setAttribute('data-overlay', '');
        fcSidebarToggleButton.setAttribute('data-target', '#app-calendar-sidebar');
        fcSidebarToggleButton.insertAdjacentHTML('beforeend', '<i class="ti ti-menu-2 ti-sm"></i>');
    }

    function selectedCalendars() {
        let selected = [],
            filterInputChecked = [].slice.call(document.querySelectorAll('.input-filter:checked'));

        filterInputChecked.forEach(item => {
            selected.push(item.getAttribute('data-value'));
        });

        return selected;
    }


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