function calendar(events = '', list) {
    if (window.dp) {
        window.dp.dispose();
    }
    var type = "{{ $type }}";
    window.dp = new DayPilot.Calendar("scheduleCalendar", {
        rtl: true,
        startDate: DayPilot.Date.today(),
        viewType: "Resources",
        columnWidthSpec: "Fixed",
        headerLevels: 2,
        heightSpec: "BusinessHoursNoScroll",
        height: 800,
        // columnWidth: 100,
        businessBeginsHour: 7,
        businessEndsHour: 17,
        timeHeaderCellDuration: 15,
        cellDuration: 15,
        events: events,
        columns: list.map(column => {
            return {
                name: `<span class="days-header">${column.name}</span>`,
                id: column.id,
                children: column.children.map(child => ({
                    id: child.id,
                    name: `<div class="schedule-user-name text-center wrap-text">${child.first_name ?? '-'}<br>${child.family_name ?? '-'}<br>${child.profession ?? '-'}<br>${child.association ?? '-'}</div>`
                })),
            };
        }),
        onBeforeTimeHeaderRender: function (args) {
            var hour = DayPilot.Date.today().addTime(args.header.time);
            args.header.html = hour.toString("HH:mm");
        },
        onTimeRangeSelected: async args => {
            if (type == 'view') {
                dp.clearSelection();
            } else {
                if (args.resource == '' || args.resource == undefined || args.resource == null) {
                    toastr.error("The chosen resource dosen't have any user");
                    return true;
                }
                const resource = args.resource.match(/^(\d+)([a-zA-Z]+)$/);
                Object.keys(eventData).forEach(key => delete eventData[key]);
                eventData.day = resource[2].charAt(0).toUpperCase() + resource[2].slice(1);
                eventData.resource = args.resource;
                eventData.startTime = args.start.value.split("T")[1].slice(0, 5);
                eventData.endTime = args.end.value.split("T")[1].slice(0, 5);
                eventData.therapistIds = [resource[1]];
                eventData.mode = 'create';
                $('#eventTypeModal').modal('toggle');
            }
        },
        onBeforeEventRender: function (args) {
            let title = '';
            function eventName(fullNames) {
                return fullNames.split(", ").map(fullName => {
                    const nameParts = fullName.trim().split(" ");
                    const firstName = nameParts[0];
                    const lastNameInitial = nameParts.length > 1 ? nameParts[1][0] : "";
                    return `${firstName} ${lastNameInitial}`;
                }).join(", ");
            }
            let cellTitle = args.data.type.split('-').map((item, index) => item[0].toUpperCase() + '' + item.slice(1)).join(' ');
            switch (args.data.type) {
                case 'staff-meeting':
                    title = 'Staff Meeting: ' + eventName(args.data.twoChildrenNames);
                    break;
                case 'group':
                    title = args.data.groupName + ': ' + eventName(args.data.twoChildrenNames);
                    break;
                case 'individual':
                    title = `<p style="font-size: 16px; margin-bottom: 0px;">${eventName(args.data.twoChildrenNames)}</p>`;
                    break;
                case 'parental-guidance':
                    title = `<p style="font-size: 16px; margin-bottom: 0px;">${eventName(args.data.twoChildrenNames)}</p>`;
                    break;
                default:
                    title = cellTitle;
                    break;
            }
            function escapeJson(json) {
                return JSON.stringify(json).replace(/'/g, '&#39;');
            }
            args.data.html = `
                <div class="p-1 event-box d-flex flex-column justify-content-between" style="${args.data.color[0]}; ${args.data.color[1]}">
                    <div class="d-flex justify-content-between">
                        <span>${args.data.start.toString("HH:mm")}</span>
                        <span><i class="fa fa-${args.data.icon}"></i></span>
                    </div>
                    <div class="text-center" style="font-size: 12px;">${title}</div>
                    ${type === 'create' ? `
                        <div class="d-flex justify-content-start mt-auto" style="position: relative; bottom: 0;">
                            <i class="fa fa-edit" onclick='editEvent(${escapeJson(args.data)})'></i>&nbsp;
                            <i class="fa fa-trash" onclick='deleteEvent(["${args.data.uniqueId}"])'></i>&nbsp;
                        </div>
                    ` : ''}
                </div>`;

            args.data.bubbleHtml = `
                <div class="p-3 calendar-event-overlay tooltip-left" style="word-wrap: break-word; white-space: normal; direction: rtl; text-align: right;">
                    <ul>
                        <li class="d-flex gap-4 text-dark fs-6 mb-2 justify-content-start">
                            <i class="fa fa-info fa-lg"></i>${cellTitle}
                        </li>
                        ${['individual', 'group', 'staff-meeting', 'parental-guidance'].includes(args.data.type) ? `
                            <li class="d-flex gap-4 text-dark fs-6 mb-2 justify-content-start">
                                <i class="fa fa-${args.data.icon}"></i>${args.data.childrenNames.trim()}
                            </li>
                        ` : ''}
                        <li class="d-flex gap-4 text-dark fs-6 mb-2 justify-content-start">
                            <i class="fa fa-calendar"></i>${args.data.start.toString("HH:mm")} - ${args.data.end.toString("HH:mm")}
                        </li>
                        <li class="d-flex gap-4 text-dark fs-6 mb-2 justify-content-start">
                            <i class="fa fa-clock-o"></i>${args.data.frequencyRepeat || ''} ${args.data.frequencyRepeatAt || ''}
                        </li>
                        <li class="d-flex gap-4 text-dark fs-6 mb-2 justify-content-start">
                            <i class="fa fa-users"></i>${args.data.therapistNames.trim()}
                        </li>
                        <li class="d-flex gap-4 text-dark fs-6 mb-2 justify-content-start">
                            <i class="fa fa-align-justify"></i>
                            <p class="m-0">${args.data.description || ''}</p>
                        </li>

                    </ul>
                </div>`;
        },
        headerHeightAutoFit: true,
        showCurrentTime: false
    });
    dp.init();

    const app = {
        elements: {
            export: document.getElementById("export"),
            exportButton: document.getElementById("export-button"),
            downloadButton: document.getElementById("download-button"),
            area: document.getElementById("area"),
        },
        init: function (events) {
            this.elements.exportButton.addEventListener("click", (ev) => {
                ev.preventDefault();
                const area = this.elements.area.value;
                const element = dp.exportAs("jpeg", {
                    area: area,
                }).toElement();
                app.elements.export.innerHTML = '';
                app.elements.export.appendChild(element);
            });
            this.elements.downloadButton.addEventListener("click", (ev) => {
                ev.preventDefault();
                const area = this.elements.area.value;
                dp.exportAs("svg", {
                    area: area,
                }).download();
            });

            this.loadEventData(events);
        },
        loadEventData(events) {
            dp.update({ events });
        }
    };
    app.init(events);
}