@props(['bookArr', 'room_list'])

@php
    $bookArr = json_decode(htmlspecialchars_decode($bookArr), true);
    $room_list = json_decode(htmlspecialchars_decode($room_list), true);
    // dd($room_list);
    // Sorting pesanan berdasarkan hari, jam mulai, dan jam selesai secara ASC
    usort($bookArr, function ($a, $b) {
        // Pertama, bandingkan berdasarkan tanggal
        $timeComparison = strtotime($a['date']) - strtotime($b['date']);
        // Jika tanggal sama, bandingkan berdasarkan jam mulai
        if ($timeComparison === 0) {
            $timeComparison = strtotime($a['start_time']) - strtotime($b['start_time']);
            // Jika jam mulai juga sama, bandingkan berdasarkan jam selesai
            if ($timeComparison === 0) {
                return strtotime($a['end_time']) - strtotime($b['end_time']);
            }
        }
        return $timeComparison;
    });
@endphp

<div id="calendar"
    class="magang-form-control magang-max-w-full magang-mx-auto magang-bg-white magang-rounded-lg magang-overflow-hidden">
    <!-- Calendar Header -->
    <div
        class="magang-flex magang-justify-between magang-items-center magang-p-4 magang-text-white magang-mobile-multi-datepicker-calendar-scale">
        <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">◀</span>
            <span id="nextMonth"
                class="magang-cursor-pointer magang-px-3 magang-py-1 btn-secondary magang-rounded-md magang-transition magang-duration-300">▶</span>
        </span>
    </div>

    <!-- Week Days -->
    <div
        class="magang-grid magang-grid-cols-7 magang-select-none magang-text-center magang-py-2 magang-mobile-multi-datepicker-calendar-scale">
        @foreach (['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'] as $day)
            <div
                class="magang-font-semibold {{ $day == 'Minggu' ? 'magang-text-red-700' : ($day == 'Sabtu' ? 'magang-text-red-700' : 'magang-text-gray-600') }}">
                {{ $day }}</div>
        @endforeach
    </div>

    <!-- Calendar Days -->
    <div id="calendarDays" class="magang-grid magang-grid-cols-7 magang-select-none"></div>

    <!-- Holiday Description -->
    <div id="holidayDesc" class="text-end mx-2 mt-3"></div>

    <!-- Selected Date Display -->
    <div class="text-start mx-2 d-none">
        <p id="selectedDate"></p>
    </div>

    <!-- Booking Modal -->
    <x-modal-schedule :room_list="$room_list" />

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // DOM Elements
        const elements = {
            calendarTitle: document.getElementById("calendarTitle"),
            calendarDays: document.getElementById("calendarDays"),
            selectedDate: document.getElementById("selectedDate"),
            prevMonthBtn: document.getElementById("prevMonth"),
            nextMonthBtn: document.getElementById("nextMonth"),
            holidayDesc: document.getElementById("holidayDesc"),
            bookingModal: new bootstrap.Modal(document.getElementById('bookingModal')),
            bookingDateTitle: document.getElementById("bookingDateTitle"),
            bookingTableBody: document.getElementById("bookingTableBody"),
            dropdownStatus: document.getElementById("status"),
            allCheckbox: document.getElementById('room-all'),
            roomCheckboxes: document.querySelectorAll('.room-checkbox'),
            roomLabels: document.querySelectorAll('.room-label')
        };
        // Data
        const data = {
            bookdate: @json($bookArr),
            holidays: holidays || [],
            holidayDescriptions: desc || [],
            currentDate: new Date(),
            selectedDate: null
        };
        console.log(data);
        // init awal
        function initCalendar() {
            updateCalendar();
            setupEventListeners();
            updateButtonStates();
        }

        // update calendar
        function updateCalendar() {
            const year = data.currentDate.getFullYear();
            const month = data.currentDate.getMonth();

            elements.calendarTitle.textContent = new Intl.DateTimeFormat('id-ID', {
                month: 'long',
                year: 'numeric'
            }).format(data.currentDate);

            elements.calendarDays.innerHTML = "";

            const firstDay = new Date(year, month, 1).getDay();
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            const prevDaysInMonth = new Date(year, month, 0).getDate();

            let lastDay = null;

            for (let i = firstDay; i > 0; i--) {
                elements.calendarDays.appendChild(createDayElement((prevDaysInMonth - firstDay + 1), lastDay,
                    prevDaysInMonth - i + 1, true, false));
            }

            for (let i = 1; i <= daysInMonth; i++) {
                const currentDate = formatDate(year, month, i);
                const bookings = data.bookdate.filter(item => item.date === currentDate);
                const isBooked = bookings.length > 0;

                elements.calendarDays.appendChild(
                    createDayElement(firstDay, lastDay, i, false, false, currentDate, isBooked, bookings
                        .length)
                );
            }

            let nextMonthDay = 1;

            while (elements.calendarDays.children.length % 7 !== 0) {
                if ((elements.calendarDays.children.length + 1) % 7 == 0) {
                    lastDay = nextMonthDay;
                }
                elements.calendarDays.appendChild(createDayElement(firstDay, lastDay, nextMonthDay++, false,
                    true));
            }

            updateHolidayDesc();
        }

        // hari dalam bulan N
        function createDayElement(firstday, lastday, day, prevMonth = false, nextMonth = false, date = null,
            isBooked = false, bookingCount = 0) {
            const div = document.createElement("div");
            div.className =
                "magang-calendar-date-number magang-relative magang-p-6 magang-text-center magang-whitespace-no-wrap magang-mobile-multi-datepicker-calendar-scale";

            if (prevMonth) {
                div.className += ((day == firstday) ? " magang-text-red-300" : " magang-text-gray-400");
                div.textContent = day;
                return div;
            }

            if (nextMonth) {
                div.className += ((day == lastday) ? " magang-text-red-300" : " magang-text-gray-400");
                div.textContent = day;
                return div;
            }


            const currentDate = new Date(date);
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            const isWeekend = currentDate.getDay() === 0 || currentDate.getDay() === 6;
            const isPast = currentDate < today;
            const isHoliday = data.holidays.includes(date);
            const isSelected = data.selectedDate === date;

            div.classList.add("magang-cursor-pointer", "magang-hover:bg-gray-200");

            if (isSelected) {
                div.classList.add("magang-text-white");
            }

            const circle = document.createElement("span");
            if (isSelected) circle.classList.add("bg-primary");
            div.appendChild(circle);
            const holidayBadge = document.createElement("span");

            if (isPast) {
                div.classList.add("magang-pointer-events-none");

                if (isWeekend) {
                    div.classList.add("magang-text-red-300");
                } else if (isHoliday) {
                    div.classList.add("magang-text-red-300");
                    holidayBadge.className =
                        "magang-absolute magang-bg-red-300 magang-rounded-full magang-w-1 magang-h-1";
                    holidayBadge.style.bottom = "62%";
                    holidayBadge.style.right = "50%";
                    holidayBadge.style.transform = "translate(50%, 0)";
                    div.appendChild(holidayBadge);
                } else {
                    div.classList.add("magang-text-gray-400");
                }
            } else {
                if (isHoliday) {
                    div.classList.add("magang-text-red-700");
                    holidayBadge.className =
                        "magang-absolute magang-bg-red-700 magang-rounded-full magang-w-1 magang-h-1";
                    holidayBadge.style.bottom = "62%";
                    holidayBadge.style.right = "50%";
                    holidayBadge.style.transform = "translate(50%, 0)";
                    div.appendChild(holidayBadge);
                } else if (isWeekend) {
                    div.classList.add("magang-text-red-700");
                }
            }

            if (!isBooked) {
                const dayNumber = document.createElement("span");
                dayNumber.textContent = day;
                dayNumber.className = "magang-relative magang-z-10 text-bold";
                if (isSelected) dayNumber.classList.add("text-white");
                div.appendChild(dayNumber);
            }

            if (isBooked) {
                const badge = document.createElement("span");
                const circle = document.createElement("span");
                circle.className =
                    "magang-p-5 magang-rounded-md magang-relative magang-overflow-visible magang-transition magang-duration-300 bg-primary";

                holidayBadge.style.background = "#fff";
                holidayBadge.style.zIndex = "2";

                const dayNumber = document.createElement("span");
                dayNumber.textContent = day;
                dayNumber.className = "magang-relative magang-z-10 text-white text-bold";
                div.appendChild(dayNumber);

                if (isSelected) circle.classList.add("bg-primary");
                div.appendChild(circle);

                // Pakai style manual untuk pastikan bekerja
                badge.className =
                    "magang-absolute magang-bg-teal-200 magang-rounded-full magang-text-teal-700 magang-text-xs magang-font-bold magang-w-5 magang-h-5 magang-flex magang-items-center magang-justify-center";
                badge.style.bottom = "-10px";
                badge.style.right = "-10px";
                badge.style.border = "2px solid white";
                badge.textContent = bookingCount;
                circle.appendChild(badge);

                //Pengecekan booking tanggal merah
                if (isWeekend || isHoliday) {
                    circle.className =
                        "magang-p-5 magang-rounded-md magang-absolute-center magang-transition magang-duration-300 magang-bg-red-400";
                    dayNumber.className = "magang-relative magang-z-10 text-white";
                    badge.className =
                        "magang-absolute magang-bottom-0 magang-right-0 magang-translate-x-2 magang-translate-y-2 magang-bg-red-400 magang-rounded-full magang-text-white magang-text-sm magang-font-bold magang-flex magang-items-center magang-justify-center magang-w-6 magang-h-6";
                } else {
                    circle.className =
                        "magang-p-5 magang-rounded-md magang-absolute-center magang-transition magang-duration-300 bg-primary";
                    dayNumber.className = "magang-relative magang-z-10 text-white";
                    badge.className =
                        "magang-absolute magang-bottom-0 magang-right-0 magang-translate-x-2 magang-translate-y-2 magang-bg-teal-200 magang-rounded-full magang-text-teal-700 magang-text-sm magang-font-bold magang-flex magang-items-center magang-justify-center magang-w-6 magang-h-6";
                }

                div.addEventListener("click", () => showBookings(date));
            }

            if (!isPast && !isWeekend && !isHoliday) {
                div.addEventListener("click", () => selectDate(date));
            }

            return div;
        }

        // Deskripsi Tanggal Merah
        function updateHolidayDesc() {
            const titleParts = elements.calendarTitle.textContent.split(" ");
            const monthName = titleParts[0];
            const year = titleParts[1];

            const monthMap = {
                "Januari": "01",
                "Februari": "02",
                "Maret": "03",
                "April": "04",
                "Mei": "05",
                "Juni": "06",
                "Juli": "07",
                "Agustus": "08",
                "September": "09",
                "Oktober": "10",
                "November": "11",
                "Desember": "12"
            };

            const monthNum = monthMap[monthName];
           
            const filteredHolidays = data.holidayDescriptions.filter(item =>
                item.tanggal.startsWith(`${year}-${monthNum}`)
            );
          
            elements.holidayDesc.innerHTML = filteredHolidays.length > 0 ?
                filteredHolidays.map(holiday => {
                    const dateParts = holiday.tanggal.split("-");
                    const day = dateParts[2];
                    return `<p class="magang-text-red-500 text-sm text-bold">${monthName} ${day}: ${holiday.deskripsi}</p>`;
                }).join('') :
                "";
        }

        function selectDate(date) {
            if (data.selectedDate) {
                const prevSelected = document.querySelector(`[data-date="${data.selectedDate}"]`);
                if (prevSelected) {
                    prevSelected.classList.remove("magang-text-white");
                    const oldCircle = prevSelected.querySelector("span.magang-p-5");
                    if (oldCircle) oldCircle.classList.remove("bg-primary");
                }
            }

            data.selectedDate = date;
            elements.selectedDate.textContent = date;

            const newSelected = document.querySelector(`[data-date="${date}"]`);
            if (newSelected) {
                newSelected.classList.add("magang-text-white");
                const newCircle = newSelected.querySelector("span.magang-p-5");
                if (newCircle) newCircle.classList.add("bg-primary");
            }

            elements.bookingDateTitle.textContent = new Intl.DateTimeFormat('id-ID', {
                weekday: 'long',
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            }).format(new Date(date));
        }

        // build struktur label untuk status
        function getStatusLabel(status) {
            switch ((status || '').toLowerCase()) {
                case 'approved':
                    return 'Approved';
                case 'pending':
                    return 'Pending';
                case 'rejected':
                    return 'Rejected';
                default:
                    return 'Unknown';
            }
        }

        // build struktur badge untuk status
        function getBadgeClass(status) {
            switch ((status || '').toLowerCase()) {
                case 'approved':
                    return 'bg-success';
                case 'pending':
                    return 'bg-warning';
                case 'rejected':
                    return 'bg-danger';
                default:
                    return 'bg-secondary';
            }
        }

        let activeDate = null;
        // show booking modal
        function showBookings(date) {
            activeDate = date;
            let selectedStatus = $('#statusFilter').val();
            //console.log(data);
            const bookings = data.bookdate.filter(item =>
                item.date === date && item.booking_status === selectedStatus
            );
            const statusList = bookings.map(b => b.booking_status);
            //console.log(statusList);
            // Update modal title
            elements.bookingDateTitle.textContent = new Intl.DateTimeFormat('id-ID', {
                weekday: 'long',
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            }).format(new Date(date));

            // Update informasi modal
            elements.bookingTableBody.innerHTML = bookings.length > 0 ?
                bookings.map(booking => `
                <tr class="booking-row" data-room="${booking.room_name}">
                    <td>${booking.room_name}</td>
                    <td>${booking.representation}</td>
                    <td>${booking.department_name || ' '}</td>
                    <td>${booking.start_time.substring(0, 5)}</td>
                    <td>${booking.end_time.substring(0, 5)}</td>
                     <td style="
                white-space: normal;
                word-wrap: break-word;
                word-break: break-word;
                max-width: 300px;
                min-width: 200px;
                line-height: 1.6;
                padding: 12px 8px;
            ">
                ${booking.description}
            </td>
                    <td>
                        <span class="badge ${getBadgeClass(booking.booking_status)}">
                            ${getStatusLabel(booking.booking_status)}
                        </span>
                    </td>
                </tr>
            `).join('') :
                `<tr><td colspan="6" class="text-center">Tidak ada booking pada tanggal ini</td></tr>`;

            // Show modal
            elements.bookingModal.show();
        }

        document.getElementById('statusFilter').addEventListener('change', function() {
            if (activeDate) {
                showBookings(activeDate); // reload data dengan status baru
            }
        });

        // filtering room
        function filterTable() {
            const selectedRooms = Array.from(elements.roomCheckboxes)
                .filter(checkbox => checkbox.checked)
                .map(checkbox => checkbox.value);

            document.querySelectorAll('.booking-row').forEach(row => {
                const roomName = row.getAttribute("data-room");
                row.style.display = (selectedRooms.length === 0 || selectedRooms.includes(roomName)) ?
                    "" :
                    "none";
            });
        }

        // checkbox room
        function updateButtonStates() {
            let allChecked = true;

            elements.roomLabels.forEach(label => {
                const checkbox = document.getElementById(label.getAttribute('for'));

                // ruang button update
                if (checkbox.checked) {
                    label.classList.replace("btn-outline-primary", "btn-primary");
                } else {
                    label.classList.replace("btn-primary", "btn-outline-primary");
                    allChecked = false;
                }
            });

            // update checkbox
            elements.allCheckbox.checked = allChecked;
            elements.allCheckbox.parentElement.classList.toggle("btn-primary", allChecked);
            elements.allCheckbox.parentElement.classList.toggle("btn-outline-primary", !allChecked);
        }

        // Format date YYYY-MM-DD
        function formatDate(year, month, day) {
            return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        }

        // Set up event listener
        function setupEventListeners() {
            elements.prevMonthBtn.addEventListener("click", () => {
                data.currentDate.setMonth(data.currentDate.getMonth() - 1);
                updateCalendar();
            });

            elements.nextMonthBtn.addEventListener("click", () => {
                data.currentDate.setMonth(data.currentDate.getMonth() + 1);
                updateCalendar();
            });

            // Ruang Button
            elements.roomCheckboxes.forEach(checkbox => {
                checkbox.addEventListener("change", () => {
                    updateButtonStates();
                    filterTable();
                });
            });

            // 'Semua' Button
            elements.allCheckbox.addEventListener("change", () => {
                const isChecked = elements.allCheckbox.checked;
                elements.roomCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
                updateButtonStates();
                filterTable();
            });
        }

        // init
        initCalendar();
    });
</script>