@extends('layouts.index')
@section('title')
    EMS UIDBC
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css' rel='stylesheet' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
    <style>
        #calendar {
            width: 100%;
            height: auto;
        }

        .fc-disabled {
            background-color: #F0F0F0 !important;
            color: #000;
            cursor: default;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
        }

        .fc-time {
            display: none;
        }

        .fc-title {
            white-space: normal !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-wrap: break-word !important;
            max-width: 100% !important;
            text-align: start !important;
        }

        .fc-scroller::-webkit-scrollbar {
            display: none;
        }

        .fc-scroller {
            scrollbar-width: none;
        }

        .d-flex {
            display: flex;
        }

        .align-items-center {
            align-items: center;
        }

        .justify-content-start {
            justify-content: flex-start;
        }

        .color-box {
            width: 15px;
            height: 15px;
            margin-right: 8px;
            border-radius: 2px;
        }

        .blue {
            background-color: #176ea6;
        }

        .purple {
            background-color: #a32bff;
        }

        .yellow {
            background-color: #f39c12;
        }

        .red {
            background-color: #f31212;
        }

        .me-4 {
            margin-right: 1.5rem;
        }

        .w-100 {
            width: 100%;
        }

        /* Preloader styling */
        #preloader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #f8f9fac8;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        #preloader.hidden {
            display: none;
        }

        .loading-animation {
            text-align: center;
            align-items: center;
            font-size: 25px;
            color: #176ea6;
            font-weight: bold;
        }

        @keyframes fade {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .spinner {
            width: 50px;
            height: 50px;
            display: grid;
            border: 3.5px solid #0000;
            border-radius: 50%;
            border-color: #176ea6 #0000;
            animation: spinner-e04l1k 1.4s infinite linear;
        }

        .spinner::before,
        .spinner::after {
            content: "";
            grid-area: 1/1;
            margin: 2.9px;
            border: inherit;
            border-radius: 50%;
        }

        .spinner::before {
            border-color: #176ea6 #0000;
            animation: inherit;
            animation-duration: 0.7s;
            animation-direction: reverse;
        }

        .spinner::after {
            margin: 11.6px;
        }

        @keyframes spinner-e04l1k {
            100% {
                transform: rotate(1turn);
            }

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }
    </style>
@endsection
@section('content')
    <div id="preloader">
        <div class="loading-animation">
            <img src="{{ asset('loading-animation.gif') }}" alt="Loading..." style="width: 80%; height: 80%" />
        </div>
    </div>
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item active" aria-current="page">
                            Dashboard
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Event Management System UID Bali Campus</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="col-md-12">
                            <div class="row align-items-center">
                                <div class="d-flex justify-content-start w-100">
                                    <div class="d-flex align-items-center me-4">
                                        <div class="color-box blue"></div>
                                        <div class="uid">UID</div>
                                    </div>
                                    <div class="d-flex align-items-center me-4">
                                        <div class="color-box purple"></div>
                                        <div class="tsea">TSEA</div>
                                    </div>
                                    <div class="d-flex align-items-center me-4">
                                        <div class="color-box yellow"></div>
                                        <div class="maintenance">Maintenance</div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="color-box red"></div>
                                        <div class="maintenance">Decline</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="caljump" class="d-flex align-items-center mb-3 mt-3">
                            <select class="form-select me-2" id="months"></select>
                            <select class="form-select" id="years"></select>
                        </div>
                        <div class="table-responsive">
                            <div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal untuk detail event -->
    <div class="modal fade bd-example-modal-lg" 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 class="modal-header">
                    <h3 class="modal-title" id="eventModalLabel">Event Details</h3>
                    <button type="button" class="btn btn-outline-danger close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="loading" style="text-align: center;">
                        <img src="{{ asset('loading-animation.gif') }}" alt="Loading..." style="width: 30%; height: 30%" />
                    </div>
                    <div class="row" id="eventDetails" style="display: none;">
                        <div class="col-12 col-md-12"
                            style="padding-bottom: 30px; padding-left: 30px; padding-right: 30px;">
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Status</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span class="badge bg-success" id="status"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Approved By</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="approvedby"></span> <i style="width: 21px; height: 21px;"
                                        class="text-success" id="iconValidate" data-feather="check-circle"></i></div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Created By</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="createdby"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Date</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="date"></span></div>
                                <div class="col" style="display: none"><span id="id"></span></div>
                                <div class="col" style="display: none"><span id="dateStart"></span></div>
                                <div class="col" style="display: none"><span id="dateEnd"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Host</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="host"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Title</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="title"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Time</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="time"></span></div>
                                <div class="col" style="display: none"><span id="timein"></span></div>
                                <div class="col" style="display: none"><span id="timeout"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Type</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="type"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Primary Pillar</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="pillar"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Participant/pax</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="participant"></span></div>
                                <div class="col" style="display: none"><span id="participants"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Room</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="room"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Blurb</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col text-justify"><span id="blurb"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Event Language</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="language"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Zoom</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="zoom"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Book LED Lobby</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="led"></span></div>
                            </div>
                            <div class="row">
                                <div class="col-3 text-secondary"><strong>Updated By</strong></div>
                                <div class="col-auto text-secondary"><b>:</b></div>
                                <div class="col"><span id="updatedby"></span></div>
                            </div>
                            <div class="button" id="actionButtons" style="display: none;">
                                <hr>
                                <button id="openEditModal" class="btn btn-outline-primary">Edit Event</button>
                                <a id="deleteButton" href="javascript:void(0);" class="ms-2"><button type="button"
                                        class="btn btn-outline-danger">Delete</button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Kedua -->
    <div class="modal fade bd-example-modal-lg" id="editEventModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Edit Event</h3>
                    <button type="button" class="btn btn-outline-danger close" data-bs-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <form id="myForm" role="form" action="{{ route('updateApi') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row g-3">
                            <input type="hidden" name="id" class="form-control" id="editId">
                            <div class="col-md-6">
                                <label for="startDate" class="form-label">Start Date : <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="rdate" class="form-control" id="editStartDate" required>
                            </div>
                            <div class="col-md-6">
                                <label for="endDate" class="form-label">End Date : <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="rdaten" class="form-control" id="editEndDate" required>
                            </div>
                            <div class="col-md-6">
                                <label for="timeIn" class="form-label">Time In : <span
                                        class="text-danger">*</span></label>
                                <input type="time" name="timein" class="form-control required" id="editTimein"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label for="timeOut" class="form-label">Time Out : <span
                                        class="text-danger">*</span></label>
                                <input type="time" name="timeout" class="form-control required" id="editTimeout"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label for="host" class="form-label">Host : <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="host" class="form-control required" id="editHost"
                                    placeholder="Host" required>
                            </div>
                            <div class="col-md-6">
                                <label for="eventTitle" class="form-label">Event Title : <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="evtit" class="form-control required" id="editTitle"
                                    placeholder="Event Title" required>
                            </div>
                            <div class="col-md-6">
                                <label for="eventTypeSelect" class="form-label">Event Type :</label>
                                <select class="form-select" name="evtype" id="editType">
                                    <option selected>--Select--</option>
                                    <option value="One-off">One-off</option>
                                    <option value="Workshop">Workshop</option>
                                    <option value="Bootcamp">Bootcamp</option>
                                    <option value="Seminar/Conference">Seminar/Conference</option>
                                    <option value="Performance">Performance</option>
                                    <option value="Festival">Festival</option>
                                    <option value="Talk Show">Talk Show</option>
                                    <option value="Meeting">Meeting</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="primaryPillar" class="form-label">Primary Pillar :</label>
                                <input type="text" name="prillar" class="form-control" id="editPillar"
                                    placeholder="Primary Pillar">
                            </div>
                            <div class="col-md-6">
                                <label for="participant" class="form-label">Participant/pax :</label>
                                <input type="number" name="participant" class="form-control" id="editParticipant"
                                    placeholder="Participant">
                            </div>
                            <div class="col-md-6">
                                <label for="eventLanguage" class="form-label">Event Language :</label>
                                <select class="form-select" name="evlanguage" id="editLanguage">
                                    <option selected>--Select--</option>
                                    <option value="Indonesian">Indonesian</option>
                                    <option value="English">English</option>
                                    <option value="Indonesian and English">Indonesian and English</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <label for="eventBlurb" class="form-label required">Event Blurb : <span
                                        class="text-danger">*</span></label>
                                <textarea class="form-control" name="evblurb" id="editBlurb" rows="3" placeholder="Event Blurb" required></textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="zoom" class="form-label">Zoom :</label>
                                <select class="form-select" name="zoom" id="editZoom">
                                    <option selected>--Select--</option>
                                    <option value="Hybrid">Hybrid</option>
                                    <option value="Online">Online</option>
                                    <option value="Offline">Offline</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="rooms" class="form-label">Room : <span
                                        class="text-danger">*</span></label>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Awan Auditorium"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Awan Auditorium</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Cloud Lounge"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Cloud Lounge</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Saraswati"
                                                type="checkbox" id="saraswati">
                                            <label class="form-check-label" for="saraswati">Saraswati</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Malajah"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Malajah</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Digi Lab"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Digi Lab</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Giorgian Fan"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Giorgian Fan</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Tech Incubator"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Tech Incubator</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Coco Lounge"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Coco Lounge</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Rainbow Kerthi"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Rainbow Kerthi</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Media Room"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Media Room</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Subak"
                                                type="checkbox" id="awan">
                                            <label class="form-check-label" for="awan">Subak</label>
                                        </div>
                                        <!-- Add more room checkboxes here -->
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Atma"
                                                type="checkbox" id="openAtma">
                                            <label class="form-check-label" for="openAtma">Open Atma</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Jagat"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Open Jagat</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Danu"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Open Danu</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Lagoon"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Open Lagoon</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Wana"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Open Wana</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Samudra"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Open Samudra</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Open Jana"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Open Jana</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" name="room[]" value="Mezzanine"
                                                type="checkbox" id="openJagat">
                                            <label class="form-check-label" for="openJagat">Mezzanine</label>
                                        </div>
                                        <!-- Add more room checkboxes here -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="rooms" class="form-label">Booking LED Lobby :</label>
                                <div class="form-check">
                                    <input class="form-check-input" name="led[]" value="LED Lobby" type="checkbox"
                                        id="openJagat">
                                    <label class="form-check-label" for="openJagat">LED Lobby</label>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" style="width: 120px; height: 45px; font-size: 15px;"
                                    id="btn-loading" class="btn btn-primary mt-3"><b>Save</b></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.15/index.global.min.js"></script>

    <script>
        window.onload = function() {
            setTimeout(function() {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    themeSystem: 'bootstrap5',
                    editable: true,
                    customButtons: {
                        today: {
                            text: 'Today',
                            click: function() {
                                calendar.today();
                                resetDropdownsToToday
                                    ();
                            }
                        }
                    },
                    headerToolbar: {
                        left: 'prev today',
                        center: 'title',
                        right: 'next'
                    },
                    events: function(fetchInfo, successCallback, failureCallback) {
                        const $preloader = $("#preloader");
                        $preloader.removeClass("hidden");
                        $.ajax({
                            url: '{{ url('controllerApi') }}',
                            dataType: 'json',
                            type: 'GET',
                            success: function(data) {
                                successCallback(data);
                                console.log(data);
                                $preloader.addClass("hidden");
                            },
                            error: function() {
                                failureCallback();
                                $preloader.addClass("hidden");
                            }
                        });
                    },
                    eventClick: function(info) {
                        $('#eventModal').modal('show');
                        $('#loading').show();
                        $('#eventDetails').hide();

                        const eventId = String(info.event.id);

                        $.ajax({
                            url: '/events/data',
                            method: 'GET',
                            success: function(data) {
                                const actionButtons = document.getElementById(
                                    "actionButtons");
                                const event = data.find(e => String(e.id) === eventId);
                                if (event) {
                                    function decodeSimpleEntities(str) {
                                        return str
                                            .replace(/&quot;/g, '"')
                                            .replace(/&#039;/g, "'")
                                            .replace(/&amp;/g, '&')
                                            .replace(/&lt;/g, '<')
                                            .replace(/&gt;/g, '>')
                                            .replace(/&nbsp;/g, ' ')
                                            .replace(/&euro;/g, '€');
                                    }
                                    var datein = event.rdate;
                                    var dateout = event.rdaten;
                                    var status = '';
                                    var name = '';
                                    const statusElement = document.getElementById(
                                        "status");
                                    const iconElement = document.getElementById(
                                        "iconValidate");
                                    const dateouts = dateout;
                                    const date = new Date(dateouts);

                                    date.setDate(date.getDate() - 1);

                                    const years = date.getFullYear();
                                    const months = String(date.getMonth() + 1).padStart(
                                        2, '0');
                                    const days = String(date.getDate()).padStart(2,
                                        '0');

                                    const newEndDates =
                                        `${years}-${months}-${days}`;
                                    var fulldate = datein + ' - ' + newEndDates;

                                    var participant = event.participant + ' pax';
                                    var time = event.timein + ' - ' + event.timeout +
                                        ' WITA';

                                    if (event.uid === "31") {
                                        actionButtons.style.display = "block";
                                        name = event.name_user_api;
                                    } else {
                                        actionButtons.style.display = "none";
                                        name = event.fullname_created;
                                    }

                                    if (event.iduid === '2') {
                                        status = 'READY'
                                        statusElement.classList.remove("bg-warning");
                                        statusElement.classList.add("bg-success");
                                        iconElement.classList.remove("text-warning");
                                        iconElement.classList.add("text-success");
                                        iconElement.setAttribute("data-feather",
                                            "check-circle");
                                    } else {
                                        status = 'PENDING'
                                        statusElement.classList.remove("bg-success");
                                        statusElement.classList.add("bg-warning");
                                        iconElement.classList.remove("text-success");
                                        iconElement.classList.add("text-warning");
                                        iconElement.setAttribute("data-feather",
                                            "alert-circle");
                                    }
                                    feather.replace();

                                    const baseUrlUpdate = '{{ url('update') }}';
                                    const editUrl = `${baseUrlUpdate}/${eventId}`;
                                    const baseUrlDelete = '{{ url('delete') }}';
                                    const deleteUrl = `${baseUrlDelete}/${eventId}`;
                                    console.log(editUrl);
                                    console.log(deleteUrl);

                                    $('#editButton').attr('href', editUrl);
                                    $('#deleteButton').attr('href',
                                        `javascript:deleteEvent(${eventId})`);

                                    $('#id').text(event.id || ' ');
                                    $('#approvedby').text(event.fullname_approved ||
                                        ' ');
                                    $('#createdby').text(name || ' ');
                                    $('#updatedby').text(event.fullname_updated || ' ');
                                    $('#status').text(status || ' ');
                                    $('#title').text(decodeSimpleEntities(event
                                        .title) || ' ');
                                    $('#host').text(decodeSimpleEntities(event.host) ||
                                        ' ');
                                    $('#participant').text(participant || ' ');
                                    $('#participants').text(event.participant || ' ');
                                    $('#room').text(event.room || ' ');
                                    $('#language').text(event.evlanguage !==
                                        '--Select--' ? event.evlanguage : ' ');
                                    $('#zoom').text(event.zoom !== '--Select--' ? event
                                        .zoom : ' ');
                                    $('#blurb').text(decodeSimpleEntities(event
                                        .evblurb) || ' ');
                                    $('#timein').text(event.timein || ' ');
                                    $('#timeout').text(event.timeout || ' ');
                                    $('#date').text(fulldate || ' ');
                                    $('#dateStart').text(datein || ' ');
                                    $('#dateEnd').text(dateout || ' ');
                                    $('#time').text(time || ' ');
                                    $('#type').text(event.evtype !== '--Select--' ?
                                        event.evtype : ' ');
                                    $('#pillar').text(decodeSimpleEntities(event
                                        .prillar) || ' ');
                                    $('#led').text(event.led === 'LED Lobby, No' ||
                                        event.led === 'LED Lobby' ? 'Yes' : 'No');

                                    $('#loading').hide();
                                    $('#eventDetails').show();
                                } else {
                                    console.error('Event not found');
                                    $('#loading').hide();
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('Error fetching data:', error);
                                $('#loading').hide();
                            }
                        });
                    },
                    eventContent: function(arg) {
                        let title = document.createElement('div');
                        title.classList.add('fc-title');
                        title.innerHTML = arg.event.title;
                        return {
                            domNodes: [title]
                        };
                    },
                    datesSet: function(info) {
                        updateDropdowns(info.view
                            .currentStart);
                    }
                });

                calendar.render();

                buildMonthList(calendar, 2025); // Menampilkan bulan Januari 2025 secara default
                buildYearsList(calendar);

                // Event handler untuk dropdown bulan
                $('#months').on('change', function() {
                    var selectedDate = $(this).val();
                    calendar.gotoDate(selectedDate);
                });

                // Event handler untuk dropdown tahun
                $('#years').on('change', function() {
                    var selectedYear = parseInt($(this).val());
                    var currentMonth = $('#months').val();

                    calendar.gotoDate(`${selectedYear}-${currentMonth.split('-')[1]}-01`);

                    buildMonthList(calendar, selectedYear);
                });

                function buildMonthList(calendar, selectedYear) {
                    $('#months').empty();

                    for (var i = 0; i < 12; i++) {
                        var date = new Date(selectedYear, i, 1);
                        var option = document.createElement('option');
                        option.value = date.toLocaleDateString('en-CA');
                        option.text = date.toLocaleString('default', {
                            month: 'long'
                        });

                        // Periksa apakah ini bulan Januari pada tahun default
                        if (selectedYear === 2025 && i === 0) {
                            option.selected = true;
                        }

                        $('#months').append(option);
                    }
                }

                function buildYearsList(calendar) {
                    $('#years').empty();
                    var currentYear = calendar.getDate().getFullYear();

                    for (var i = currentYear - 6; i <= currentYear + 6; i++) {
                        var date = new Date(i, 0, 1);
                        var option = document.createElement('option');
                        option.value = date.toLocaleDateString('en-CA');
                        option.text = i;

                        // Tetapkan tahun default ke 2025
                        option.selected = (i === 2025);

                        $('#years').append(option);
                    }
                }

                function resetDropdownsToToday() {
                    var today = new Date();

                    buildMonthList(calendar, today.getFullYear());
                    $('#months').val(new Date(today.getFullYear(), today.getMonth(), 1).toLocaleDateString(
                        'en-CA'));

                    $('#years').val(new Date(today.getFullYear(), 0, 1).toLocaleDateString('en-CA'));
                }

                function updateDropdowns(date) {
                    var currentMonthValue = new Date(date.getFullYear(), date.getMonth(), 1).toLocaleDateString(
                        'en-CA');
                    var currentYearValue = new Date(date.getFullYear(), 0, 1).toLocaleDateString('en-CA');

                    $('#months').val(currentMonthValue);
                    $('#years').val(currentYearValue);
                }

            }, 100);
        };

        function deleteEvent(eventId) {
            const baseUrlDelete = '{{ url('delete') }}';
            const deleteUrl = `${baseUrlDelete}/${eventId}`;
            Swal.fire({
                title: 'Are you sure?',
                text: "Are you sure you want delete?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#4287f5',
                cancelButtonColor: '#ff1100',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        html: '<img src="{{ asset('loading-animation.gif') }}" alt="Loading..." style="width: 200px; height: 200px;"/>',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        timer: 6000000,
                    });

                    setTimeout(() => {
                        window.location.href = deleteUrl;
                    }, 5000);
                }
            })
        }

        $(document).ready(function() {
            $('#openEditModal').on('click', function(e) {
                e.preventDefault();

                const idevent = $('#id').text();
                const startdate = $('#dateStart').text();
                const enddate = $('#dateEnd').text();
                const timein = $('#timein').text();
                const timeout = $('#timeout').text();
                const host = $('#host').text();
                const title = $('#title').text();
                const type = $('#type').text();
                const participants = $('#participants').text();
                const pillar = $('#pillar').text();
                const language = $('#language').text();
                const blurb = $('#blurb').text();
                const zoom = $('#zoom').text();

                const room = $('#room').text().split(",");
                const led = $('#led').text();

                const enddates = enddate;
                const date = new Date(enddates);
                date.setDate(date.getDate() - 1);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const newEndDate = `${year}-${month}-${day}`;

                $('#editId').val(idevent);
                $('#editStartDate').val(startdate);
                $('#editEndDate').val(newEndDate);
                $('#editTimein').val(timein);
                $('#editTimeout').val(timeout);
                $('#editHost').val(host);
                $('#editTitle').val(title);
                $('#editType').val(type);
                $('#editParticipant').val(participants);
                $('#editPillar').val(pillar);
                $('#editLanguage').val(language);
                $('#editBlurb').val(blurb);
                $('#editZoom').val(zoom);

                $('input[name="room[]"]').prop('checked', false);
                room.forEach(function(r) {
                    $(`input[name="room[]"][value="${r.trim()}"]`).prop('checked',
                        true);
                });

                $('input[name="led[]"]').prop('checked', false);
                if (led.includes("Yes") || led.includes("LED lobby, No")) {
                    $(`input[name="led[]"][value="LED Lobby"]`).prop('checked', true);
                }

                $('#editEventModal').modal('show');
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var loading = document.getElementById("btn-loading");
            var form = document.getElementById("myForm");

            loading.addEventListener("click", function(event) {
                event.preventDefault();

                if (!form.checkValidity()) {
                    Swal.fire({
                        icon: "warning",
                        title: "Form is incomplete",
                        html: 'Please fill in <b style="color: red;">Start Date, End Date, Time In, Time Out, Host, Event Title, Room, and Event Blurb</b>',
                        customClass: {
                            confirmButton: 'my-custom-button'
                        }
                    });
                } else {
                    let timerInterval;
                    Swal.fire({
                        html: '<img src="{{ asset('loading-animation.gif') }}" alt="Loading..." style="width: 200px; height: 200px;"/>',
                        timer: 6000000,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => {
                            form.submit();
                        },
                        willClose: () => {}
                    }).then((result) => {
                        if (result.dismiss === Swal.DismissReason.timer) {
                            console.log("I was closed by the timer");
                        }
                    });
                }
            });
        });
    </script>
    <script>
        @if (session('DeleteSuccess'))
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Successfully deleted event',
                showConfirmButton: true,
            });
        @elseif (session('UpdateSuccess'))
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Successfully edited event',
                showConfirmButton: true,
            });
        @elseif (session('DeleteFailed'))
            Swal.fire({
                icon: 'error',
                title: 'Failed',
                text: 'Failed to delete record',
                showConfirmButton: true,
            });
        @elseif (session('UpdateFailed'))
            Swal.fire({
                icon: 'error',
                title: 'Failed',
                text: 'Failed edit data',
                showConfirmButton: true,
            });
        @endif
    </script>
@endsection