{{-- resources/views/components/calendar.blade.php --}}

@props(['id', 'editValue' => null, 'dbAlreadyFlexible' => null, 'name', 'dmenu', 'holidays', 'bookings', 'rooms', 'inputRoomId', 'thisBookingStatus' => 'pending', 'formGotAnyError' => false, 'detailedPopover' => false])
@php    
    // Inisialisasi variabel kosong
    $invalidMessages = null; 
    $invalidDateArr = null; 
    $holidayArr = null;
    $bookingArr = null;
    $roomArr = null;

    // dd($defaultValue);
    $defaultValue = '';
    if (old($name)) {
        $defaultValue = old($name);
    }
    if (!(old($name)) && $editValue && is_string($editValue)) {
        $defaultValue = str_replace(""", "\"", $editValue);
    }

    // Mendapatkan daftar hari libur
    $currentDate = new DateTime;
    $currentYear = $currentDate->format('Y');
    $startOfLastYear = new DateTime("first day of January $currentYear -1 year");
    $endOfNextYear = new DateTime("last day of December $currentYear +1 year");

    if ($holidays && is_string($holidays)) {
        $holidayArr = str_replace(""", "\"", $holidays);
    }
    if ($bookings && is_string($bookings)) {
        $bookingArr = str_replace(""", "\"", $bookings);
    }
    if ($rooms && is_string($rooms)) {
        $roomArr = str_replace(""", "\"", $rooms);
    }
    // dd($holidayArr, $bookingArr);
    
@endphp

{{-- <div id="{{ $id }}" class="magang-form-control magang-max-w-full magang-mx-auto magang-bg-white magang-rounded-lg magang-overflow-hidden"> --}}
<div id="{{ $id }}" class="magang-form-control magang-max-w-full magang-mx-auto magang-bg-white magang-rounded-lg magang-mobile-multi-datepicker-calendar-scale">
    <textarea class="magang-hidden" name="{{ $name }}" id="input-{{ $dmenu }}-calendar-data">{{ $defaultValue }}</textarea>
    <!-- Header Kalender -->
    <div class="magang-flex magang-justify-between magang-items-center magang-p-4 magang-text-white">
        <h4 id="calendarTitle" class="magang-font-bold"></h4>
        <span class="magang-flex magang-gap-2">
            <span id="prevMonth" class="magang-cursor-pointer magang-px-3 magang-py-1 btn-secondary magang-rounded-md magang-transition magang-duration-300 magang-select-none">◀</span>
            <span id="nextMonth" class="magang-cursor-pointer magang-px-3 magang-py-1 btn-secondary magang-rounded-md magang-transition magang-duration-300 magang-select-none">▶</span>
        </span>
    </div>

    <!-- Hari dalam Minggu -->
    <div class="magang-grid magang-grid-cols-7 magang-select-none magang-text-center magang-bg-gray-200 magang-py-2">
        @foreach(['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'] as $day)
            <div class="{{ 'magang-font-semibold ' . (($day == 'Minggu' || $day == 'Sabtu') ? 'magang-text-red-500' : 'magang-text-gray-600') }}">{{ $day }}</div>
        @endforeach
    </div>

    <!-- Tanggal dalam Bulan -->
    <div id="calendarDays" class="magang-grid magang-grid-cols-7 magang-select-none"></div>

    <!-- Tanggal yang Dipilih -->
    <!-- <div class="magang-p-4 magang-bg-gray-100 magang-hidden">
        <p class="magang-text-sm magang-text-gray-600">Tanggal yang dipilih:
        <pre id="selectedDates"></pre>
        </p>
    </div> -->

    <hr class="horizontal dark mb-0">
    <div class="magang-p-4">
        <span class="magang-text-sm magang-text-gray-600 magang-font-semibold">Keterangan:</span>
        <!-- Keterangan Tanggal Pilihan -->
        <div class="magang-flex magang-justify-between">
            <div class="magang-text-gray-600">
                <div class="magang-flex magang-items-center magang-gap-2 magang-p-2">
                    <span class="magang-w-4 magang-h-4 magang-multi-datepicker-today-inner-outline"></span>
                    <span>Hari ini</span>
                </div>
                <div class="magang-flex magang-items-center magang-gap-2 magang-p-2">
                    <span class="magang-w-4 magang-h-4 magang-bg-blue-500 magang-rounded-full"></span>
                    <span>Tanggal yang dipilih</span>
                </div>
                <div class="magang-flex magang-items-center magang-gap-2 magang-p-2">
                    <span class="magang-w-4 magang-h-4 bg-danger magang-rounded-full"></span>
                    <span>Pilihan tidak lolos validasi</span>
                </div>
                <div class="magang-flex magang-items-center magang-gap-2 magang-p-2">
                    <span class="magang-w-4 magang-h-4 magang-bg-orange-200"></span>
                    <span>Terdapat pesanan (pengguna) lain</span>
                </div>
                <div class="magang-flex magang-items-center magang-gap-2 magang-p-2">
                    <span class="magang-w-4 magang-h-4 magang-bg-red-200"></span>
                    <span>Ruangan tidak tersedia untuk dipesan</span>
                </div>
            </div>

            <!-- Keterangan Tanggal Libur  -->
            <div class="magang-text-red-500" id="holidaysDescription">
            </div>
        </div>
    </div>
</div>

@error($name)
    @php
        $invalidMessages = $message;
        if ($invalidMessages && is_string($invalidMessages)) {
            $invalidDateArr = str_replace("&quot;", "\"", $invalidMessages);
        }
    @endphp
@enderror

<script>
    // console.log(@json($defaultValue));
    // Main Functionality
    document.addEventListener("DOMContentLoaded", function() {
        const calendarTitle = document.getElementById("calendarTitle");
        const calendarDays = document.getElementById("calendarDays");
        const prevMonthBtn = document.getElementById("prevMonth");
        const nextMonthBtn = document.getElementById("nextMonth");
        // const selectedDatesContainer = document.getElementById("selectedDates");
        const multiDatepickerContainer = document.getElementById('input-{{ $dmenu }}-calendar');
        const hiddenInput = document.getElementById('input-{{ $dmenu }}-calendar-data');
        const holidaysDescription = document.getElementById('holidaysDescription');
        const roomIdInput = document.getElementById('{{ $inputRoomId }}');
        const nonFlexibleStartTimeInput = document.getElementById('input-{{ $dmenu }}-start-time');
        const nonFlexibleEndTimeInput = document.getElementById('input-{{ $dmenu }}-end-time');
        const flexibleSchedule = document.getElementById('input-{{ $dmenu }}-flexible-time');
        let isFlexible = ((flexibleSchedule.value == '1') ? true : false);
        
        let invalidDateArr = stringToJSON(@json($invalidDateArr)) ?? [];
        let holidayArr = stringToJSON(@json($holidayArr)) ?? [];
        let bookingArr = stringToJSON(@json($bookingArr)) ?? [];
        let roomArr = stringToJSON(@json($roomArr)) ?? [];
        let formGotAnyError = @json($formGotAnyError);
        let detailedPopover = @json($detailedPopover);
        let thisBookingApproved = (@json($thisBookingStatus) == 'approved');

        console.log('formGotAnyError', formGotAnyError, thisBookingApproved);

        let selectedRoom = roomIdInput.value ? roomArr.find(room => room.id == roomIdInput.value) : null;
        let selectedDates = stringToJSON(@json($defaultValue)) ?? [];
        let availableRooms = roomArr ?? [];
        let fullBookedRooms = [];

        // Data bookingan dari database (untuk edit) sudah fleksibel (flexible_time == 1)
        const dbAlreadyFlexible = (@json($dbAlreadyFlexible) == 1) ? true : false;
        let bookingHasCompletedSchedule = false;

        // Menyimpan string data-order dari tr dalam tabel schedule setting
        let scheduleSettingHighlightOrder = null;

        // ============ Mengatur perilaku form di halaman SHOW ======================================= Start
        
        let viewOnlyState = false;
        const formEditButton = document.getElementById("{{ $dmenu }}-edit");
        const calendarDatepickerDates = document.getElementsByClassName("magang-calendar-date-number");
        
        // formEditButton hanya ada di halaman SHOW
        if (formEditButton && !formGotAnyError) {
            // Saat pertama kali masuk ke halaman SHOW
            viewOnlyState = true;
            // Sekali, saat masuk ke mode edit
            formEditButton.addEventListener('click', function() {
                viewOnlyState = false;

                // Render ulang
                renderCalendarContent();
                renderScheduleSetting();                
            });
        }

        // ============ Mengatur perilaku form di halaman SHOW ======================================= End

        // ============ Fungsionalitas Kalender (Datepicker) ========================================= Start

        let date = new Date();
        let today = date;
        // Set waktu ke tengah malam untuk nantinya membandingkan hanya tahun, bulan, dan tanggal
        today.setHours(0, 0, 0, 0);

        // let currentMonth = date.getMonth();
        // let currentYear = date.getFullYear();
        let currentMonth = (selectedDates.length > 0) ? (new Date(selectedDates[0]['date']).getMonth()) : date.getMonth();
        let currentYear = (selectedDates.length > 0) ? (new Date(selectedDates[0]['date']).getFullYear()) : date.getFullYear();

        let dragging = false;

        updateRoomOptions(); // Akan menjalankan fungsi renderRoomIdInputOptions dan renderCalendarContent

        function renderCalendarContent() {
            calendarTitle.textContent = new Intl.DateTimeFormat('id-ID', {
                month: 'long',
                year: 'numeric'
            }).format(new Date(currentYear, currentMonth));
            calendarDays.innerHTML = "";

            let firstDay = new Date(currentYear, currentMonth, 1).getDay();
            let daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
            let prevDaysInMonth = new Date(currentYear, currentMonth, 0).getDate();
            let nextMonthDays = 1;

            // Tambahkan hari dari bulan sebelumnya jika ada
            for (let i = firstDay; i > 0; i--) {
                let div = document.createElement("div");
                div.className = "magang-p-6 magang-relative magang-text-center " + ((i == firstDay) ? "magang-text-red-300" : "magang-text-gray-400");

                // Nomor tanggal
                let dateNumber = document.createElement("span");
                dateNumber.className = "magang-absolute-center magang-z-10";
                dateNumber.textContent = prevDaysInMonth - i + 1;
                div.appendChild(dateNumber);

                calendarDays.appendChild(div);
            }

            // Tambahkan hari dari bulan saat ini
            for (let i = 1; i <= daysInMonth; i++) {
                
                let currentDateTrueValue = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;

                let isSelected = (selectedDates.find(day => day.date === currentDateTrueValue)) ? true : false;
                let isHoliday = (holidayArr.find(day => day.date == currentDateTrueValue)) ? true : false;
                let isInvalid = (invalidDateArr.find(day => day.date == currentDateTrueValue)) ? true : false;
                let isUnavailable = checkIsDateUnavailable(currentDateTrueValue);
                let isReserved = checkIsDateReserved(currentDateTrueValue);
                let thisBookings = isReserved ? getThisDateBookings(currentDateTrueValue) : [];
                let thisDate = new Date(currentYear, currentMonth, i);
                thisDate.setHours(0, 0, 0, 0);
                let isToday = thisDate.getTime() == today.getTime();
                let pastDate = thisDate.getTime() < today.getTime();
                let isWeekend = (thisDate.getDay() == 0 || thisDate.getDay() == 6); // Hari minggu dan sabtu
                
                // Kontainer Utama
                let div = document.createElement("div");
                div.dataset.date = currentDateTrueValue;
                div.dataset.holiday = isHoliday;
                div.dataset.weekend = isWeekend;
                div.className = "magang-calendar-date-number magang-relative magang-p-6 magang-text-center " +
                    (!pastDate && !isUnavailable ? "magang-cursor-pointer magang-hover:bg-gray-200 " : "magang-cursor-not-allowed ") + (isToday ? "magang-box-border magang-multi-datepicker-today-inner-outline " : "") + (isUnavailable ? "magang-bg-red-200 " : ((isReserved && !pastDate) ? "magang-bg-orange-200 " : ""));

                
                // Nomor tanggal
                let dateNumber = document.createElement("span");
                if (isWeekend || isHoliday) {
                    dateNumber.className = "magang-absolute-center magang-z-10 magang-font-semibold " +
                        (isSelected ? "magang-text-white " : ((pastDate) ? "magang-text-red-300 " : "magang-text-red-500 "));
                } else {
                    dateNumber.className = "magang-absolute-center magang-z-10 magang-font-semibold " +
                        (isSelected ? "magang-text-white " : "") + ((pastDate && !isSelected) ? "magang-text-gray-400 " : "");
                }
                dateNumber.textContent = i;
                div.appendChild(dateNumber);

                // Penanda Hari Libur Nasional (Dari database Tanggal Merah)
                if (isHoliday) {
                    let holidayBadge = document.createElement("span");
                    holidayBadge.className = "magang-rounded-full magang-absolute-center magang-transition magang-duration-300 " +
                    (isSelected || isInvalid ? "bg-white " : (pastDate ? "magang-bg-red-300 " : "magang-bg-red-500"));
                    holidayBadge.style.padding = "2px";
                    // holidayBadge.style.transform = "translate(-50%, -200%)";
                    holidayBadge.style.top = "30%";
                    holidayBadge.style.zIndex = "1";
                    div.appendChild(holidayBadge);
                }

                // Popover (Daftar jadwal yang memesan tanggal ini)
                if (isReserved && !pastDate) {
                    renderPopover(div, currentDateTrueValue, thisBookings);
                }

                // Lingkaran "dipilih"
                let circle = document.createElement("span");
                circle.className = "magang-p-4 magang-rounded-full magang-absolute-center magang-transition magang-duration-300 " +
                    (isSelected && isInvalid ? "bg-danger " : (isSelected ? "magang-bg-blue-500 " : ""));
                div.appendChild(circle);

                // Event Listener
                // if (!pastDate && !isWeekend && !isHoliday) {
                if (!pastDate) {
                    if (!viewOnlyState && !isUnavailable) {
                        div.addEventListener("mousedown", startDrag);
                        div.addEventListener("mouseup", stopDrag);
                        div.addEventListener("mouseenter", toggleDateOnDrag);
                    }
                    div.addEventListener("mouseenter", showPopover);
                    div.addEventListener("mouseleave", hidePopover);
                }

                calendarDays.appendChild(div);
            }

            // Tambahkan hari dari bulan berikutnya agar kalender penuh satu baris terakhir
            while (calendarDays.children.length % 7 !== 0) {
                let div = document.createElement("div");
                div.className = "magang-p-6 magang-relative magang-text-center " + (((calendarDays.children.length + 1) % 7 == 0) ? "magang-text-red-300" : "magang-text-gray-400");

                // Nomor tanggal
                let dateNumber = document.createElement("span");
                dateNumber.className = "magang-absolute-center magang-z-10";
                dateNumber.textContent = nextMonthDays++;
                div.appendChild(dateNumber);

                calendarDays.appendChild(div);
            }

            // Keterangan tanggal pilihan dan libur
            holidaysDescription.innerHTML = "";
            let thisMonthHolidays = holidayArr.filter(day => 
                (day.date.slice(0, 4) == currentYear) && 
                (day.date.slice(5, 7) == (currentMonth + 1))
            );

            // Menyortir berdasarkan tanggal
            thisMonthHolidays.sort((a, b) => {
                // Mengonversi string tanggal menjadi objek Date untuk perbandingan
                return new Date(a.date) - new Date(b.date);
            });

            // console.log('libur', thisMonthHolidays);
            thisMonthHolidays.forEach(function(day, index) {
                let div = document.createElement("div");
                div.className = "magang-flex magang-items-center magang-gap-2 magang-p-2";
                let date = document.createElement("span");
                date.className = "magang-font-semibold";
                date.innerHTML = prettyShortDate(day.date, true);
                let icon = document.createElement("span");
                icon.innerHTML = ':';
                let text = document.createElement("span");
                text.innerHTML = day.description;
                div.appendChild(date);
                div.appendChild(icon);
                div.appendChild(text);
                holidaysDescription.appendChild(div);
            });

            // Penyesuaian tinggi pengaturan jadwal
            const scheduleSettingContainer = document.getElementById('input-{{ $dmenu }}-schedule-setting-container');
            if (scheduleSettingContainer) {
                scheduleSettingContainer.style = "height: " + (multiDatepickerContainer.clientHeight + 2) + "px";
            }
        }

        function renderPopover(parentElement, trueDate, dataArray) {
            let container = document.createElement("div");
            container.role = "tooltip";
            container.className = "magang-popover-top magang-text-nowrap magang-p-4 magang-rounded-md magang-bg-white"

            let popoverTitle = document.createElement("div");
            popoverTitle.className = "magang-font-bold magang-text-lg magang-p-2 magang-bg-orange-200 magang-rounded-t-md";
            popoverTitle.innerHTML = prettyShortDate(trueDate);
            container.appendChild(popoverTitle)
            
            let table = document.createElement("table");
            table.innerHTML = `
                <thead class="table-auto">
                    <tr class="magang-font-semibold magang-bg-gray-200">`+
                        (detailedPopover ? `
                            <td>ID Booking</td>
                        ` : ``)
                        +`<td>Jam Mulai</td>
                        <td>Jam Selesai</td>
                        <td>Durasi</td>
                    </tr>
                </thead>
                <tbody></tbody>
            `;
            container.appendChild(table);

            dataArray.forEach(function(item, index) {
                let tr = document.createElement('tr');
                tr.className = "magang-py-1 magang-px-2"

                if (detailedPopover) {
                    let tdBookingId = document.createElement('td');
                    tdBookingId.innerHTML = item['booking_id'];

                    // let tdRepresentation = document.createElement('td');
                    // tdRepresentation.innerHTML = item['representation_name'] + ' - ' + item['representation_dept'];

                    tr.appendChild(tdBookingId);
                    // tr.appendChild(tdRepresentation);
                }
                
                let tdStartTime = document.createElement('td');
                tdStartTime.innerHTML = item['start_time'];
                
                let tdEndTime = document.createElement('td');
                tdEndTime.innerHTML = item['end_time'];

                let tdDuration = document.createElement('td');
                tdDuration.innerHTML = estimateDuration(item['start_time'], item['end_time']) + " Menit";

                tr.appendChild(tdStartTime);
                tr.appendChild(tdEndTime);
                tr.appendChild(tdDuration);
                table.appendChild(tr);
            });

            parentElement.appendChild(container);
        }

        function showPopover(event) {
            const thisDate = this.dataset.date;
            const popoverElement = document.querySelector('div[data-date="' + thisDate + '"] div[role="tooltip"]');
            // console.log("popoverElement", popoverElement, thisDate);
            if (popoverElement) {
                popoverElement.classList.add("magang-popover-top-show");
            }
            // debugger;
        }
        
        function hidePopover(event) {
            const thisDate = this.dataset.date;
            const popoverElement = document.querySelector('div[data-date="' + thisDate + '"] div[role="tooltip"]');
            // console.log("popoverElement", popoverElement, thisDate);
            if (popoverElement) {
                popoverElement.classList.remove("magang-popover-top-show");
            }
        }

        function toggleDate(event) {
            // "this" akan menarget ke element yang di-addEventListener

            let selectedDate = this.dataset.date;
            let isHoliday = this.dataset.holiday == 'true' ? true : false;
            let isWeekend = this.dataset.weekend == 'true' ? true : false;
            let index = selectedDates.findIndex(d => d.date === selectedDate);

            if (index !== -1) {
                selectedDates.splice(index, 1);
                this.firstElementChild.classList.remove("magang-text-white");
                this.lastElementChild.classList.remove("magang-bg-blue-500");
                if (isWeekend) {
                    this.firstElementChild.classList.add("magang-text-red-500");
                }
                if (isHoliday) {
                    this.firstElementChild.classList.add("magang-text-red-500");
                    this.firstElementChild.nextElementSibling.classList.remove("bg-white");
                    this.firstElementChild.nextElementSibling.classList.add("magang-bg-red-500");
                }
            } else {
                if (isFlexible) {
                    selectedDates.push({
                        date: selectedDate,
                        start_time: "",
                        end_time: ""
                    });
                } else {
                    selectedDates.push({
                        date: selectedDate,
                        start_time: nonFlexibleStartTimeInput.value,
                        end_time: nonFlexibleEndTimeInput.value
                    });
                }
                if (isWeekend) {
                    this.firstElementChild.classList.remove("magang-text-red-500");
                }
                if (isHoliday) {
                    this.firstElementChild.classList.remove("magang-text-red-500");
                    this.firstElementChild.nextElementSibling.classList.remove("magang-bg-red-500");
                    this.firstElementChild.nextElementSibling.classList.add("bg-white");
                }
                this.firstElementChild.classList.add("magang-text-white");
                this.lastElementChild.classList.add("magang-bg-blue-500");
                
                // Simpan order-nya untuk disorot
                scheduleSettingHighlightOrder = 'schedule-setting-row-' + selectedDate;
            }

            // Sorting
            selectedDates.sort((a, b) => new Date(a.date) - new Date(b.date));

            // hiddenInput.value = JSON.stringify(selectedDates, null, 2);
            hiddenInput.value = JSON.stringify(selectedDates);
            // console.dir(hiddenInput);
            console.log(hiddenInput.value);
            // selectedDatesContainer.textContent = hiddenInput.value;

            renderScheduleSetting();
        }

        function toggleDateOnDrag(event) {
            if (dragging) toggleDate.call(this);
        }

        function stopDrag() {
            dragging = false;
            // Perbarui opsi ruangan setiap kali penambahan/penghapusan tanggal (setelah drag)
            updateRoomOptions();
        }

        function startDrag() {
            dragging = true;
            // console.log("start drag", dragging);
            toggleDate.call(this);
        }

        prevMonthBtn.addEventListener("click", function() {
            currentMonth--;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            renderCalendarContent();
        });

        nextMonthBtn.addEventListener("click", function() {
            currentMonth++;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            renderCalendarContent();
        });

        document.addEventListener('mouseleave', function() {
            // console.log('Cursor has left the window!');
            dragging = false;
        });

        // Fungsi untuk memriksa apakah argumen (tanggal) adalah tanggal "tidak tersedia"-nya ruangan
        function checkIsDateUnavailable(dateToCheck) {
            if (roomIdInput.value && dateToCheck) {
                selectedRoom = selectedRoom ? selectedRoom : roomArr.find(room => room.id == roomIdInput.value);
                const startDate = new Date(selectedRoom.start_date);
                const endDate = new Date(selectedRoom.end_date);
                const checkDate = new Date(dateToCheck);
                if (selectedRoom) {
                    return startDate <= checkDate && endDate >= checkDate;
                }
            }
            return false;
        };

        // Fungsi untuk memriksa apakah argumen (tanggal) adalah tanggal sibuk (sudah dipesan)
        function checkIsDateReserved(dateToCheck) {
            if (roomIdInput.value && dateToCheck) {
                if (bookingArr[roomIdInput.value]) {
                    return bookingArr[roomIdInput.value].hasOwnProperty(dateToCheck) ? true : false
                }
            }
            return false;
        };
        
        // Fungsi untuk mengambil data 
        function getThisDateBookings(thisDate) {
            if (roomIdInput.value) {
                if (bookingArr.hasOwnProperty(roomIdInput.value)) {
                    if (bookingArr[roomIdInput.value].hasOwnProperty(thisDate)) {
                        return bookingArr[roomIdInput.value][thisDate];
                    }
                }
            }
            return [];
        };

        // renderCalendarContent(); 

        // ============ Fungsionalitas Kalender (Datepicker) ========================================= End

        // ============ Fungsionalitas Pengaturan Jadwal ============================================= Start

        const tabelPengaturanJadwal = document.getElementById('input-{{ $dmenu }}-schedule-setting');

        const headerAction = document.getElementById('input-{{ $dmenu }}-schedule-setting-action-header');
        const headerOpsiEditSimultan = document.getElementById('input-{{ $dmenu }}-schedule-setting-simultan-header');
        const opsiEditSimultan = document.getElementById('input-{{ $dmenu }}-schedule-setting-simultan');
        const arrayOpsiSimultan = document.getElementsByClassName('magang-simultan-checkboxes');
        const arrayInputStartTime = document.getElementsByClassName('magang-simultan-start-time-inputs');
        const arrayInputEndTime = document.getElementsByClassName('magang-simultan-end-time-inputs');
        const arrayDurationCols = document.getElementsByClassName('magang-simultan-duration-cols');

        let simultanEdit = false;
        const hightlightColor = "gray-200";

        function renderScheduleSetting() {
            tabelPengaturanJadwal.replaceChildren(); // Menghapus semua child

            if (isFlexible) {
                headerAction.classList.remove("text-center");
                headerOpsiEditSimultan.classList.add("magang-table-cell");
                headerOpsiEditSimultan.classList.remove("magang-hidden");
            } else {
                headerAction.classList.add("text-center");
                headerOpsiEditSimultan.classList.add("magang-hidden");
                headerOpsiEditSimultan.classList.remove("magang-table-cell");
            }

            if (selectedDates.length > 0) {
                selectedDates.forEach(function(item, index) {
                    let thisScheduleEnd = new Date(item.date + " " + item.end_time);
                    // Jika ada jadwal yang melewati waktu sekarang (sudah dilaksanakan)
                    if (!bookingHasCompletedSchedule && item.end_time) {
                        // console.log('book', bookingHasCompletedSchedule);
                        bookingHasCompletedSchedule = thisScheduleEnd.getTime() <= today.getTime();
                    }
                    // Set waktu ke tengah malam untuk nantinya membandingkan hanya tahun, bulan, dan tanggal (agar tanggal hari ini tidak dihitung "past date")
                    thisScheduleEnd.setHours(0, 0, 0, 0);
                    let pastDate = thisScheduleEnd.getTime() < today.getTime();
                    // Status tanggal invalid
                    let invalidData = invalidDateArr.find(day => day.date == item.date);
                    let isInvalid = (invalidData != undefined) ? true : false;
                    
                    // Baris tabel
                    let tr = document.createElement("tr");
                    tr.dataset.order = 'schedule-setting-row-' + item.date;
                    tr.className = (isInvalid ? "magang-multi-datepicker-invalid-inner-border " : "") + "magang-hover:bg-" + hightlightColor;
                    tr.addEventListener('click', function() {
                        // Hapus sorotan baris sebelumnya
                        if (scheduleSettingHighlightOrder) {
                            let prevHighlightedRow = document.querySelector('tr[data-order="' + scheduleSettingHighlightOrder + '"]');
                            // console.log('prevHighlightedRow', prevHighlightedRow);
                            prevHighlightedRow.classList.remove("magang-bg-" + hightlightColor);
                        }
                        // Sorot baris yang ditekan
                        scheduleSettingHighlightOrder = tr.dataset.order;
                        tr.classList.add("magang-bg-" + hightlightColor);
                    });
                    // Agar baris (tanggal) langsung disorot seketika ditambahkan ke tabel
                    if (tr.dataset.order == scheduleSettingHighlightOrder) {
                        tr.classList.add("magang-bg-" + hightlightColor);
                    }
                    
                    // Jika booking fleksibel
                    if (isFlexible) {
                        // Kolom Check Simultan dan Konfigurasinya
                        let tdSimultan = document.createElement("td");
                        
                        // tdSimultan.className = "";
                        let tdSimultanlabel = document.createElement("label");
                        tdSimultanlabel.className = "magang-m-0 magang-w-full magang-h-6 magang-flex magang-justify-center magang-align-center magang-cursor-pointer";
                        tdSimultanlabel.for = "magang-simultan-checkbox-" + index;
                        let checkSimultan = document.createElement("input");
                        checkSimultan.type = "checkbox";
                        checkSimultan.id = "magang-simultan-checkbox-" + index;
                        checkSimultan.className = "magang-simultan-checkboxes magang-w-6 magang-h-6 bg-secondary";
                        
                        // Jika tanggal sudah lewat (sudah terjadi), maka jangan beri opsi simultan (tidak ikut diedit secara simultan)
                        if (!pastDate) {
                            tdSimultanlabel.classList.add("disabled");
                            checkSimultan.checked = simultanEdit;
                            checkSimultan.onchange = function () {
                                // Jika salah satu checkbox di buat false, maka buat simultanEdit menjadi false
                                if (checkSimultan.checked == false) {
                                    simultanEdit = false;
                                    opsiEditSimultan.checked = false;
                                }
                            };
                        } else {
                            checkSimultan.disabled = true;
                            checkSimultan.readOnly = true;
                        }
                        tdSimultanlabel.appendChild(checkSimultan);
                        tdSimultan.appendChild(tdSimultanlabel);

                        tr.appendChild(tdSimultan);
                    }

                    // Kolom Action
                    let tdAction = document.createElement("td");
                    let buttonDeleteDate = document.createElement("span");
                    // Kolom Tanggal
                    let tdDate = document.createElement("td");
                    // Kolom Jam Mulai
                    let tdStartTime = document.createElement("td");
                    let inputStartTime = document.createElement("input");
                    // Kolom Jam Selesai
                    let tdEndTime = document.createElement("td");
                    let inputEndTime = document.createElement("input");
                    // Kolom Durasi
                    let tdDuration = document.createElement("td");

                    // Konfigurasi Kolom Action
                    tdAction.className = (!isFlexible ? "text-center " : "") + ((isInvalid && pastDate) ? "magang-blinking-bg" : "");
                    buttonDeleteDate.className = "btn " + ((viewOnlyState || (thisBookingApproved && pastDate)) ? "magang-element-disabled " : "btn-danger ") + "mb-0 py-1 px-2";
                    buttonDeleteDate.innerHTML = `<i class="fas fa-trash" aria-hidden="true"></i>`;
                    // if (!viewOnlyState && !pastDate) {
                    if (!viewOnlyState && (thisBookingApproved ? (!pastDate) : true)) {
                        buttonDeleteDate.addEventListener('click', function() {
                            tableDateDelete(item.date);
                        });
                    }
                    tdAction.appendChild(buttonDeleteDate);
                    tr.appendChild(tdAction);

                    // Konfigurasi Kolom Durasi
                    tdDuration.className = "magang-simultan-duration-cols";
                    tdDuration.innerHTML = isInvalid ? invalidData.status : ((item.start_time && item.end_time) ? estimateDuration(item.start_time, item.end_time) + " Menit" : "Invalid");

                    // Konfigurasi Kolom Tanggal
                    tdDate.textContent = prettyShortDate(item.date);
                    tr.appendChild(tdDate);

                    // Konfigurasi Kolom Jam Mulai
                    inputStartTime.type = "time";
                    inputStartTime.required = (!isFlexible || pastDate);
                    inputStartTime.disabled = (!isFlexible || pastDate);
                    inputStartTime.readOnly = (!isFlexible || pastDate);
                    inputStartTime.className = "magang-simultan-start-time-inputs magang-border-none magang-focus:magang-border-gray-100 " + ((isInvalid && isFlexible && !pastDate) ? "magang-blinking-bg " : "") + ((!isFlexible || pastDate || viewOnlyState) ? "magang-text-gray-600 magang-bg-transparent  " : "magang-text-gray-800 ");
                    inputStartTime.value = item.start_time;
                    inputStartTime.onchange = function() {
                        inputEndTime.min = inputStartTime.value; // atur minimum input inputEndTime
                        updateSelectedDateProp(index, "start_time", inputStartTime.value);
                        updateDurationCol(tdDuration, inputStartTime.value, item.end_time);

                        // Edit Jam Mulai Secara Simultan
                        if (arrayOpsiSimultan[index].checked) {
                            // Jelajahi setiap entry
                            for (let i = 0; i < arrayInputStartTime.length; i++) {
                                if (i == index) continue; // lewati inputStartTime ini
                                // Jika opsiSimultan suatu entry bernilai "true", maka ubah nilai input sesuai nilai input ini
                                if (arrayOpsiSimultan[i].checked) {
                                    arrayInputStartTime[i].value = inputStartTime.value;
                                    arrayInputEndTime[i].min = inputStartTime.value; // atur minimum input inputEndTime
                                    updateSelectedDateProp(i, "start_time", inputStartTime.value); // perbarui nilainya di array SelectedDates
                                    updateDurationCol(arrayDurationCols[i], inputStartTime.value, arrayInputEndTime[i].value); // perbarui durasi yang ditampilkan
                                }
                            }
                        }
                    };
                    tdStartTime.appendChild(inputStartTime);
                    tr.appendChild(tdStartTime);

                    // Konfigurasi Kolom Jam Selesai
                    inputEndTime.type = "time";
                    inputEndTime.required = (!isFlexible || pastDate);
                    inputEndTime.disabled = (!isFlexible || pastDate);
                    inputEndTime.readOnly = (!isFlexible || pastDate);
                    inputEndTime.className = "magang-simultan-end-time-inputs magang-border-none magang-focus:magang-border-gray-100 " + ((isInvalid && isFlexible && !pastDate) ? "magang-blinking-bg " : "") + ((!isFlexible || pastDate || viewOnlyState) ? "magang-text-gray-600 magang-bg-transparent  " : "magang-text-gray-800 ");
                    inputEndTime.value = item.end_time;
                    inputEndTime.onchange = function() {
                        inputStartTime.max = inputEndTime.value; // atur maksimum input inputStartTime
                        updateSelectedDateProp(index, "end_time", inputEndTime.value);
                        updateDurationCol(tdDuration, item.start_time, inputEndTime.value);

                        // Edit Jam Selesai Secara Simultan
                        if (arrayOpsiSimultan[index].checked) {
                            // Jelajahi setiap entry
                            for (let i = 0; i < arrayInputEndTime.length; i++) {
                                if (i == index) continue; // lewati inputEndTime ini
                                // Jika opsiSimultan suatu entry bernilai "true", maka ubah nilai input sesuai nilai input ini
                                if (arrayOpsiSimultan[i].checked) {
                                    arrayInputEndTime[i].value = inputEndTime.value;
                                    arrayInputStartTime[i].max = inputEndTime.value; // atur maksimum input inputStartTime
                                    updateSelectedDateProp(i, "end_time", inputEndTime.value); // perbarui nilainya di array SelectedDates
                                    updateDurationCol(arrayDurationCols[i], arrayInputStartTime[i].value, inputEndTime.value); // perbarui durasi yang ditampilkan
                                }
                            }
                        }
                    };
                    tdEndTime.appendChild(inputEndTime);
                    tr.appendChild(tdEndTime);

                    // Tempel kolom durasi di akhir
                    tr.appendChild(tdDuration);

                    tabelPengaturanJadwal.appendChild(tr);
                });
            } else {
                let tr = document.createElement("tr");
                let tdInfo = document.createElement("td");
                tdInfo.className = "text-center";
                tdInfo.colSpan = 10;
                tdInfo.textContent = "Tidak ada tanggal yang dipilih.";
                tr.appendChild(tdInfo);
                tabelPengaturanJadwal.appendChild(tr);
            }

            // Pastikan flexibleSchedule (tidak bisa diubah) jika bookingan adalah bookingan dengan jadwal fleksibel (dbAlreadyFlexible)
            if (dbAlreadyFlexible && bookingHasCompletedSchedule) {
                flexibleSchedule.disabled = true;
                flexibleSchedule.readOnly = true;
                console.log('lll', dbAlreadyFlexible, flexibleSchedule);
            }
        }

        // Perbarui properti selectedDates
        function updateSelectedDateProp(index, property, value) {
            // Memastikan indeks valid
            if (index >= 0 && index < selectedDates.length) {
                selectedDates[index][property] = value;
                // console.log(selectedDates[index][property]);
            } else {
                console.error('Index tidak valid:', index);
            }

            // Perbarui opsi ruangan setiap kali perubahan properti (jam) di selectedDates
            updateRoomOptions();
        }

        // Perbarui kolom durasi
        function updateDurationCol(element, startTime, endTime) {
            const estimatedDuration = estimateDuration(startTime, endTime);
            // console.log("estimatedDuration", estimatedDuration);
            element.innerHTML = estimatedDuration;
            element.innerHTML = (estimatedDuration > 0 ) ? (element.innerHTML + " Menit") : ("Invalid");
            // Ketika jam mulai/selesi diganti, perbarui juga
            hiddenInput.value = JSON.stringify(selectedDates);
        }

        // Render untuk pertama kalinya
        renderScheduleSetting();

        // Check semua checkbox ketika opsiEditSimultan di check, begitu pula saat di uncheck
        opsiEditSimultan.addEventListener('click', function() {
            // console.dir(this);
            simultanEdit = this.checked;
            if (simultanEdit) {
                Array.from(arrayOpsiSimultan).forEach(checkbox => {
                    if (!checkbox.disabled) {
                        checkbox.checked = true;
                    }
                });
            } else {
                Array.from(arrayOpsiSimultan).forEach(checkbox => {
                    checkbox.checked = false;
                });
            }
        });

        
        function tableDateDelete(selectedDate) {
            let index = selectedDates.findIndex(d => d.date === selectedDate);
            let dateElement = document.querySelector('div[data-date="' + selectedDate + '"]');
            // console.log("dateElement.dataset", dateElement.dataset);

            let sameMonthAsDatepickerDisplayedMonth = (new Date(selectedDate).getMonth()) == currentMonth;

            if (index !== -1) {
                selectedDates.splice(index, 1);
                console.log('hapus', selectedDate);
                
                if (dateElement && sameMonthAsDatepickerDisplayedMonth) {                    
                    let isHoliday = dateElement.dataset.holiday == 'true' ? true : false;

                    dateElement.firstElementChild.classList.remove("magang-text-white");
                    dateElement.lastElementChild.classList.remove("magang-bg-blue-500");
                    if (isHoliday) {
                        dateElement.firstElementChild.classList.add("magang-text-red-500");
                    }
                }
            }

            // Perbarui opsi ruangan setiap kali ada jadwal yang dihapus dari tabel pengaturan jadwal
            updateRoomOptions()

            // Sorting
            selectedDates.sort((a, b) => new Date(a.date) - new Date(b.date));

            hiddenInput.value = JSON.stringify(selectedDates);

            renderScheduleSetting();
        }

        flexibleSchedule.addEventListener('change', function() {
            isFlexible = ((flexibleSchedule.value == '1') ? true : false);

            // Jika tidak fleksibel, maka bersihkan inputStartTime dan inputEndTime dalam tabel pengaturan jadwal
            if (!isFlexible) {
                let startTimeFiller = "";
                let endTimeFiller = "";
                for(let i = 0; i < arrayInputStartTime.length; i++) {
                    // Jika ada jadwal sudah terlewat hari ini (past date), pakai start_time dan end_time dari jadwal yang sudah terlewat untuk mengisi kekosongan
                    if (bookingHasCompletedSchedule) {
                        startTimeFiller = arrayInputStartTime[0].value; // start_time of past date
                        endTimeFiller = arrayInputEndTime[0].value;     // end_time of past date
                    }
                    arrayInputStartTime[i].value = startTimeFiller;
                    arrayInputEndTime[i].min = startTimeFiller; // atur minimum input inputEndTime
                    updateSelectedDateProp(i, "start_time", startTimeFiller); // perbarui nilainya di array SelectedDates
                    arrayInputEndTime[i].value = endTimeFiller;
                    arrayInputStartTime[i].max = endTimeFiller; // atur maksimum input inputStartTime
                    updateSelectedDateProp(i, "end_time", endTimeFiller); // perbarui nilainya di array SelectedDates

                    updateDurationCol(arrayDurationCols[i], startTimeFiller, endTimeFiller); // perbarui durasi yang ditampilkan
                }
                // Jika ada jadwal sudah terlewat hari ini (past date), pakai start_time dan end_time dari jadwal yang sudah terlewat untuk mengisi input jam jadwal non-flexible
                if (bookingHasCompletedSchedule) {
                    nonFlexibleStartTimeInput.value = startTimeFiller;
                    nonFlexibleEndTimeInput.min = startTimeFiller;
                    nonFlexibleEndTimeInput.value = endTimeFiller;
                    nonFlexibleStartTimeInput.min = endTimeFiller;
                }
            }

            renderScheduleSetting();
        });

        nonFlexibleStartTimeInput.addEventListener('change', function() {
            renderScheduleSetting();
            if (!isFlexible) {
                // Jelajahi setiap entry
                for (let i = 0; i < arrayInputStartTime.length; i++) {
                    if (bookingHasCompletedSchedule) {
                        // Jika tanggal sudah terlewat hari ini (past date), maka jangan ikut diubah
                        let thisDate = new Date(selectedDates[i].date);
                        thisDate.setHours(0, 0, 0, 0);
                        if (thisDate.getTime() < today.getTime()) {
                            // Paksa jadi bookingan fleksibel
                            flexibleSchedule.click();
                            continue;
                        }
                    }

                    arrayInputStartTime[i].value = nonFlexibleStartTimeInput.value;
                    arrayInputEndTime[i].min = nonFlexibleStartTimeInput.value; // atur minimum input inputEndTime
                    updateSelectedDateProp(i, "start_time", nonFlexibleStartTimeInput.value); // perbarui nilainya di array SelectedDates
                    updateDurationCol(arrayDurationCols[i], nonFlexibleStartTimeInput.value, arrayInputEndTime[i].value); // perbarui durasi yang ditampilkan
                }
            }
        });
        
        nonFlexibleEndTimeInput.addEventListener('change', function() {
            renderScheduleSetting();
            if (!isFlexible) {
                // Jelajahi setiap entry
                for (let i = 0; i < arrayInputEndTime.length; i++) {
                    if (bookingHasCompletedSchedule) {
                        // Jika tanggal sudah terlewat hari ini (past date), maka jangan ikut diubah
                        let thisDate = new Date(selectedDates[i].date);
                        thisDate.setHours(0, 0, 0, 0);
                        if (thisDate.getTime() < today.getTime()) {
                            // Paksa jadi bookingan fleksibel
                            flexibleSchedule.click();
                            continue;
                        }
                    }

                    arrayInputEndTime[i].value = nonFlexibleEndTimeInput.value;
                    arrayInputStartTime[i].max = nonFlexibleEndTimeInput.value; // atur maksimum input inputStartTime
                    updateSelectedDateProp(i, "end_time", nonFlexibleEndTimeInput.value); // perbarui nilainya di array SelectedDates
                    updateDurationCol(arrayDurationCols[i], arrayInputStartTime[i].value, nonFlexibleEndTimeInput.value); // perbarui durasi yang ditampilkan
                }
            }
        });

        // ============ Fungsionalitas Pengaturan Jadwal ============================================= End

        // ============ Fungsionalitas Pemilihan Ruangan ============================================= Start

        function renderRoomIdInputOptions() {
            roomIdInput.replaceChildren(); // Menghapus semua child
            let optionDefault = document.createElement("option");
            roomIdInput.appendChild(optionDefault);
            for(let i = 0; i < availableRooms.length; i++) {
                let optionRoom = document.createElement("option");
                optionRoom.value = availableRooms[i].id;
                optionRoom.selected = (availableRooms[i].id == roomIdInput.dataset.selectedValue); // dari properti "data-selected-value"
                optionRoom.innerHTML = availableRooms[i].id + " - " + availableRooms[i].name;
                roomIdInput.appendChild(optionRoom);
            }
        }
        
        // console.log(bookingArr);

        // Perbarui nilai properti data-selected-value setiap kali input/ubah pilihan ruang
        roomIdInput.addEventListener("change", function() {
            roomIdInput.dataset.selectedValue = roomIdInput.value;
            selectedRoom = roomArr.find(room => room.id == roomIdInput.value);
            console.log("yahooo")
            renderCalendarContent();
        });

        // Perbarui pilihan ruangan setiap kali ada perubahan pada tanggal yang dipilih
        function updateRoomOptions() {
            // Memeriksa ruangan dengan jadwal booking yang bentrok dengan tanggal dan jam yang dipesan pengguna saat ini
            fullBookedRooms = Object.keys(bookingArr).flatMap(roomId => {
                const bookingsByDate = bookingArr[roomId];
                return Object.keys(bookingsByDate).flatMap(date => {
                    const bookings = bookingsByDate[date];
                    // Memeriksa apakah tanggal ada dalam selectedDates &&
                    // Memeriksa apakah start_time atau end_time yang dipesan bentrok dengan jadwal/bookingan (pengguna) lain
                    // Memeriksa apakah ada start_time jadwal (pengguna) lain yang berada diantara start_time dan end_time yang dipesan
                    if (selectedDates.some(day => 
                        day.date === date &&
                        (isTimeBetween(day.start_time, bookings[0].start_time, bookings[0].end_time) || 
                        isTimeBetween(day.end_time, bookings[0].start_time, bookings[0].end_time) || 
                        isTimeBetween(bookings[0].start_time, day.start_time, day.end_time))
                    )) {
                        // return bookings;
                        return bookings[0].room_id;
                    }
                    return []; // Mengembalikan array kosong jika tidak ada yang bentrok
                });
            });

            availableRooms = roomArr.filter(room => !(fullBookedRooms.some(fullRoom => fullRoom == room.id)));
            availableRooms = availableRooms.filter(room => !roomUnavailibilityIsClashWithUserSelectedDates(room));

            // console.log("full", fullBookedRooms);

            renderRoomIdInputOptions();
            renderCalendarContent();
        }

        function roomUnavailibilityIsClashWithUserSelectedDates(room) {
            if (selectedDates.length > 0 && room.start_date && room.end_date) {
                const isClashing = selectedDates.some(function(item) {
                    return isDateBetween(item.date, room.start_date, room.end_date);
                });

                if (isClashing) {
                    // console.log("true", room);
                    return true;
                }
            }
            // console.log("false", room);
            return false;
        }

        // ============ Fungsionalitas Pemilihan Ruangan ============================================= End

    });
</script>