@php use App\Enums\TimeBlockCategory; @endphp
@extends('admin.layouts.dashboard')
@section('title', 'My Calendar')

@push('head')
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.css' rel='stylesheet'/>
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet'/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* General Modal Styling */
        .fc .fc-timegrid-slot {
            height: 7.5em;
            border-bottom: 0;
        }
        td.fc-day{
            background: #dbefd7;
        }
        td.fc-day.fc-day-past {
            background: #efd7d9;
        }
        /* Closed days - red background */
        td.fc-day.fc-day-closed {
            background: #ffcccc !important;
        }
        /* Blocked days - dark red background */
        td.fc-day.fc-day-blocked {
            background: #dc3545 !important;
            opacity: 0.85;
        }
        /* Keep events clickable on closed days */
        td.fc-day.fc-day-closed .fc-daygrid-event {
            pointer-events: auto !important;
            opacity: 1 !important;
        }
        hr {
            margin-top: 0rem;
            margin-bottom: 0.5rem;
        }
        /* Styling for the table */
        .calendar-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .calendar-table th,
        .calendar-table td {
            border: 1px solid #ddd;
            vertical-align: top;
            position: relative;
            padding: 5px;
        }
        .time-column {
            background-color: #f8f9fa;
            text-align: right;
            font-size: 12px;
            color: #666;
            width: 100px;
        }
        .gmt-header {
            background-color: #f8f9fa;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
        }
        .date-header {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .fc-timeGridDay-view .fc-timegrid-event-harness{
            width: auto !important;
        }
        .fc-timeGridDay-view .table-bordered th, .fc-timeGridDay-view .table-bordered td{
            border-color: #d4d1c8 !important;
        }
        .event-card {
            background-color: #e6f7ff;
            border: 1px solid #b3d7ff;
            border-radius: 5px;
            font-size: 12px;
            margin-bottom: 5px;
            overflow-wrap: break-word;
            cursor: pointer;
            color: black;
            word-wrap: break-word; /* Ensure long words break into multiple lines */
            white-space: normal; /* Allow text to wrap to the next line */
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            min-height: 50px; /* Minimum height to prevent text overflow */
            width: 100%;
        }
        .event-card .event-header,
        .event-card .event-content{
            padding: 5px;
        }
        .event-card{
            & .event-content{
                letter-spacing: .1em;
            }

            &.blocked{
                cursor: not-allowed;
                background-color: #ffe7ed;
                border-color: #ffe7e7;
                color: #402727;
                /*min-height: 100%;*/

                .event-header{
                    background-color: #fac6c6;
                    color: #3e2727;
                }
            }

            &.alterations{
                background-color: #f1e7ff;
                border-color: #f1e7ff;
                color: #372740;

                .event-header{
                    background-color: #ddc6fa;
                    color: #34273e;
                }
            }

            &.prom-dress{
                background-color: #dcedfd;
                border-color: #dcedfd;
                color: #29353e;

                .event-header{
                    background-color: #bfe1fc;
                    color: #1d2932;
                }
            }

            &.bridal-dress{
                background-color: #effaf4;
                border-color: #effaf4;
                color: #1b3529;

                .event-header{
                    background-color: #ceeedf;
                    color: #24372e;
                }
            }

            &.tuxedo-dress {
                background-color: #f7e6f9;
                border-color: #f7e6f9;
                color: #372035;

                .event-header {
                    background-color: #dbc3f8;
                    color: #281b2e;
                }
            }

            &.others {
                background-color: #f3f7ea;
                border-color: #f3f7ea;
                color: #263c22;

                .event-header {
                    background-color: #cfebc7;
                    color: #273c32;
                }
            }
        }

        .event-detail-mobile {
            display: none;
        }

        .event-mobile-id {
            font-size: 10px;
            font-weight: 700;
            line-height: 1.3;
            word-break: break-word;
        }

        .event-mobile-date {
            font-size: 10px;
            opacity: 0.85;
            margin-top: 2px;
            line-height: 1.3;
        }

        @media screen and (max-width: 767px) {
            .event-detail-desktop {
                display: none !important;
            }

            .event-detail-mobile {
                display: block !important;
            }
        }

        @media screen and (width < 568px) {
            .event-card .end-time {
                display: none;
            }

            .event-card .event-category{
                display: none;
            }

            .event-card {
                font-size: smaller;
            }

            .event-card .event-header,
            .event-card .event-content{
                padding: 0px;
                letter-spacing: 0;
            }

            .event-card .event-content {
                letter-spacing: 0;
            }
        }

        .event-card:hover {
            /*background-color: #cceeff;*/
        }

        /* Fade past date event cards */
        td.fc-day.fc-day-past .event-card {
            opacity: 0.45;
            filter: grayscale(30%);
        }

        .fc-event {
            background-color: transparent !important; /* Blue background ko transparent banaye */
            border: none !important; /* Border bhi hata de */
            box-shadow: none !important; /* Shadow bhi remove kar de */
        }

        .fc-event, .fc-daygrid-event {
            width: auto !important; /* Auto width so events align side-by-side */
            /*min-width: 120px; !* Ensure minimum width *!*/
            max-width: 100%; /* Prevent overflow */
            white-space: normal !important; /* Ensure text wrapping */
        }

        .event-card:hover {
            background-color: #cceeff;
        }

        .fc-timegrid-event {
            width: 100% !important; /* Full Width */
            display: block; /* Ensure it Stacks */
            position: relative;
        }

        .fc-timegrid-event-harness {
            width: 100% !important;
        }

        button.fc-today-button.btn {
            display: none;
        }

        /* Block Time Modal Styling */
        .block-time-modal {
            /*display: none;*/
            /*position: fixed;*/
            /*z-index: 1000;*/
            /*left: 0;*/
            /*top: 0;*/
            /*width: 100%;*/
            /*height: 100%;*/
            /*background-color: rgba(0, 0, 0, 0.5);*/
            /*overflow: auto;*/
        }

        .block-time-modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 500px;
        }

        .block-time-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .block-time-modal-header h4 {
            margin: 0;
        }

        .block-time-modal-close {
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            background: none;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .block-time-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .block-time-form input,
        .block-time-form select,
        .block-time-form textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .block-time-form textarea {
            resize: vertical;
            min-height: 80px;
        }

        .block-time-form button {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .block-time-form button:hover {
            background-color: #0069d9;
        }

        .block-time-form .btn-secondary {
            background-color: #6c757d;
        }

        .block-time-form .btn-secondary:hover {
            background-color: #5a6268;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        /* Blocked time event styling */
        .blocked-time-event {
            background-color: #f8d7da !important;
            border-color: #f5c6cb !important;
        }

        .block-time-form ::-webkit-calendar-picker-indicator{
            /*display: none;*/
        }
    </style>
    <script>
        // Initialize popovers for event cards
        document.querySelectorAll('[data-bs-toggle="popover"]').forEach((el) => {
            new bootstrap.Popover(el, {html: true});
        });
    </script>

        <style>
            /* Block Time Modal Styling */
            .block-time-modal-content {
                background-color: #fff;
                margin: 10% auto;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                width: 80%;
                max-width: 500px;
            }

            .block-time-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }

            .block-time-modal-header h4 {
                margin: 0;
                color: #2c3e50;
            }

            .block-time-modal-close {
                font-size: 24px;
                font-weight: bold;
                cursor: pointer;
                border: none;
                background: none;
                transition: color 0.2s;
            }

            .block-time-modal-close:hover {
                color: #e74c3c;
            }

            .form-group {
                margin-bottom: 15px;
            }

            .block-time-form label {
                display: block;
                margin-bottom: 5px;
                font-weight: 500;
                color: #34495e;
            }

            .block-time-form input,
            .block-time-form select,
            .block-time-form textarea {
                width: 100%;
                padding: 10px 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                transition: border-color 0.3s;
            }

            .block-time-form input:focus,
            .block-time-form select:focus,
            .block-time-form textarea:focus {
                border-color: #3498db;
                outline: none;
                box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
            }

            .block-time-form textarea {
                resize: vertical;
                min-height: 80px;
            }

            .block-time-form button {
                padding: 10px 16px;
                background-color: #3498db;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                transition: background-color 0.3s;
            }

            .block-time-form button:hover {
                background-color: #2980b9;
            }

            .block-time-form .btn-secondary {
                background-color: #7f8c8d;
            }

            .block-time-form .btn-secondary:hover {
                background-color: #6c7a7d;
            }

            .modal-footer {
                display: flex;
                justify-content: flex-end;
                gap: 10px;
                margin-top: 20px;
            }

            /* Blocked time event styling */
            .blocked-time-event {
                background-color: #f8d7da !important;
                border-color: #f5c6cb !important;
            }

            .block-time-form ::-webkit-calendar-picker-indicator {
                /*display: none;*/
            }

            /* Action buttons styling */
            .action-btn {
                padding: 5px 10px;
                border-radius: 4px;
                font-size: 12px;
                margin-right: 5px;
            }
            /* Time duration indicator */
            .time-duration {
                display: block;
                margin-top: 5px;
                font-size: 12px;
                color: #7f8c8d;
                font-style: italic;
            }
            /* Tooltip styles */
            .tooltip-container {
                position: relative;
                display: inline-block;
            }
            .tooltip-text {
                visibility: hidden;
                width: 180px;
                background-color: #34495e;
                color: #fff;
                text-align: center;
                border-radius: 4px;
                padding: 5px;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                transform: translateX(-50%);
                opacity: 0;
                transition: opacity 0.3s;
            }
            .tooltip-container:hover .tooltip-text {
                visibility: visible;
                opacity: 1;
            }
            /* Animation for modal */
            dialog[open] {
                animation: fadeIn 0.3s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        </style>
@endpush
@section('content')
    <div class="d-flex flex-column flex-md-row justify-content-between">
        <button type="button" class="btn btn-dark mb-2" onclick="document.getElementById('blockTimeModal').showModal()">
            Block Date & Time
        </button>
        <div class="labels d-flex gap-3 flex-wrap">
            <div class="label d-flex align-items-center gap-1">
                <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#ffcccc;border:1px solid #e99;"></span>
                <small>Closed Day</small>
            </div>
            <div class="label d-flex align-items-center gap-1">
                <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#efd7d9;border:1px solid #dbb;"></span>
                <small>Past Day</small>
            </div>
            <div class="label d-flex align-items-center gap-1">
                <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#dc3545;border:1px solid #c00;"></span>
                <small>Blocked Day</small>
            </div>
            <div class="label d-flex align-items-center gap-1">
                <span style="display:inline-block;width:18px;height:18px;border-radius:4px;background-color:#fed7aa;border:1px solid #f59e0b;"></span>
                <small>Admin Booking</small>
            </div>
        </div>
    </div>
    <div id='calendar'></div>

    <!-- Block Time Modal -->
    <dialog id="blockTimeModal" class="block-time-modal">
        <div class="block-time-modal-content_">
            <div class="block-time-modal-header">
                <h4 id="modalTitle">Block Time</h4>
                <button class="block-time-modal-close" onclick="this.closest('dialog').close();">&times;</button>
            </div>
            <form id="blockTimeForm" class="block-time-form">
                @csrf
                <input type="hidden" id="timeBlockId" name="timeBlockId" value="">
                <div class="d-flex gap-2">
                    <div class="form-group w-100">
                        <label for="start_date">Start Date</label>
                        <div class="tooltip-container">
                            <input type="date" id="start_date" name="start_date"
                                   value="{{ now()->addDay()->format('Y-m-d') }}" min="{{ now()->addDay()->format('Y-m-d') }}" required>
                            <span class="tooltip-text">Select the starting date</span>
                        </div>
                    </div>
                    <div class="form-group w-100">
                        <label for="start_time">Start Time</label>
                        <div class="tooltip-container">
                            <select id="start_time" name="start_time" required>
                                <option data-index="1" value="10:00">10:00 AM</option>
                                <option data-index="2" value="11:00">11:00 AM</option>
                                <option data-index="3" value="12:00">12:00 PM</option>
                                <option data-index="4" value="13:00">1:00 PM</option>
                                <option data-index="5" value="14:00">2:00 PM</option>
                                <option data-index="6" value="15:00">3:00 PM</option>
                                <option data-index="7" value="16:00">4:00 PM</option>
                                <option data-index="8" value="17:00">5:00 PM</option>
                                <option data-index="9" value="18:00">6:00 PM (Close till day)</option>
                            </select>
                            <span class="tooltip-text">Choose when the block starts</span>
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <div class="form-group w-100">
                        <label for="end_date">End Date</label>
                        <div class="tooltip-container">
                            <input type="date" id="end_date" name="end_date"
                                   value="{{ now()->addDay()->format('Y-m-d') }}" min="{{ now()->addDay()->format('Y-m-d') }}" required>
                            <span class="tooltip-text">Select the ending date</span>
                        </div>
                    </div>
                    <div class="form-group w-100">
                        <label for="end_time">End Time</label>
                        <div class="tooltip-container">
                            <select id="end_time" name="end_time" required>
                                <option data-index="1" value="10:00">10:00 AM</option>
                                <option data-index="2" value="11:00">11:00 AM</option>
                                <option data-index="3" value="12:00">12:00 PM</option>
                                <option data-index="4" value="13:00">1:00 PM</option>
                                <option data-index="5" value="14:00">2:00 PM</option>
                                <option data-index="6" value="15:00">3:00 PM</option>
                                <option data-index="7" value="16:00">4:00 PM</option>
                                <option data-index="8" value="17:00">5:00 PM</option>
                                <option data-index="9" value="18:00">6:00 PM (Close till day)</option>
                            </select>
                            <span class="tooltip-text">Choose when the block ends</span>
                        </div>
                    </div>
                </div>
                <div class="time-duration" id="timeDuration">Duration: 1 hour</div>
                <div class="form-group d-none">
                    <label for="duration">Quick Duration</label>
                    <div class="btn-group w-100" role="group">
                        <button type="button" class="btn btn-outline-secondary" onclick="setDuration(1)">1 hour</button>
                        <button type="button" class="btn btn-outline-secondary" onclick="setDuration(2)">2 hours</button>
                        <button type="button" class="btn btn-outline-secondary" onclick="setDuration(4)">Half day</button>
                        <button type="button" class="btn btn-outline-secondary" onclick="setDuration(8)">Full day</button>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <div class="form-group w-100">
                        <label for="category">Category</label>
                        <select id="category" name="category" required>
                            <option value="">Select a category</option>
                            @foreach(TimeBlockCategory::cases() as $timeBlock)
                                <option value="{{ $timeBlock->value }}">{{ $timeBlock->value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group w-100">
                        <label for="remarks">Remarks</label>
                        <textarea id="remarks" name="remarks" placeholder="Add any additional information here"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="this.closest('dialog').close();">Cancel</button>
                    <button type="submit" class="btn btn-dark" id="submitButton">Block Time</button>
                </div>
            </form>
        </div>
    </dialog>

    <dialog id="event-detail">
        <div class="event-content">
            <div class="my-2">
                <div class="d-flex gap-2 justify-content-between align-items-center">
                    <div>
                        <h5 class="modal-title">Appointment Details</h5>
                        <small><strong>Appointment ID:</strong> <span class="appointment_id"></span></small>
                    </div>
                    <button type="button" class="close" onclick="this.closest('dialog').close()">&times;</button>
                </div>
            </div>
            <div class="modal-content">

            </div>
        </div>
    </dialog>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script src="{{ asset('vendor/jquery.ui.touch.js') }}"></script>
    <script>

        function openBlockTimeModal() {
            // Reset form and prepare for new entry
            document.getElementById('modalTitle').textContent = 'Block Time';
            document.getElementById('blockTimeForm').reset();
            document.getElementById('timeBlockId').value = '';
            document.getElementById('submitButton').textContent = 'Block Time';

            // Set default start date and time
            const now = new Date();
            const currentDate = now.toISOString().split('T')[0];
            document.getElementById('start_date').value = currentDate;

            // Round current time to the nearest hour for start time
            const currentHour = now.getHours();
            let defaultStartTime;

            if (currentHour < 10) {
                defaultStartTime = '10:00';
            } else if (currentHour >= 17) {
                // If after 5 PM, set to 10 AM next day
                const tomorrow = new Date();
                tomorrow.setDate(tomorrow.getDate() + 1);
                document.getElementById('start_date').value = tomorrow.toISOString().split('T')[0];
                defaultStartTime = '10:00';
            } else {
                // Round to the next hour
                defaultStartTime = `${currentHour + 1}:00`;
            }

            // Set the start time and update end time accordingly
            const startTimeSelect = document.getElementById('start_time');
            for (let i = 0; i < startTimeSelect.options.length; i++) {
                if (startTimeSelect.options[i].value === defaultStartTime) {
                    startTimeSelect.selectedIndex = i;
                    break;
                }
            }

            // Update end time automatically
            updateEndTime();

            // Open modal
            document.getElementById('blockTimeModal').showModal();
        }

        function updateDurationText() {
            const startDate = new Date(document.getElementById('start_date').value + 'T' + document.getElementById('start_time').value);
            const endDate = new Date(document.getElementById('end_date').value + 'T' + document.getElementById('end_time').value);

            // Calculate the difference in hours
            const diffMs = endDate - startDate;
            const diffHours = diffMs / (1000 * 60 * 60);

            // Format the duration text
            let durationText = '';
            if (diffHours < 0) {
                durationText = 'Invalid time range (end time is before start time)';
                document.getElementById('timeDuration').style.color = '#e74c3c';
            } else if (diffHours < 24) {
                durationText = `Duration: ${diffHours} hour${diffHours !== 1 ? 's' : ''}`;
                document.getElementById('timeDuration').style.color = '#7f8c8d';
            } else {
                const days = Math.floor(diffHours / 24);
                const remainingHours = diffHours % 24;
                durationText = `Duration: ${days} day${days !== 1 ? 's' : ''}`;
                if (remainingHours > 0) {
                    durationText += ` and ${remainingHours} hour${remainingHours !== 1 ? 's' : ''}`;
                }
                document.getElementById('timeDuration').style.color = '#7f8c8d';
            }

            document.getElementById('timeDuration').textContent = durationText;
        }

        function updateEndTime() {
            const startDate = document.getElementById('start_date').value;
            const startTime = document.getElementById('start_time').value;
            const startTimeIndex = parseInt(document.getElementById('start_time').selectedOptions[0].dataset.index);

            // Set end date equal to start date
            document.getElementById('end_date').value = startDate;
            document.getElementById('end_date').min = startDate;

            // Calculate end time (default to 1 hour later)
            const startHour = parseInt(startTime.split(':')[0]);
            let endHour = startHour + 1;

            // If we go past 5 PM, wrap to next day
            if (endHour > 17) {
                const endDate = new Date(startDate);
                endDate.setDate(endDate.getDate() + 1);
                document.getElementById('end_date').value = endDate.toISOString().split('T')[0];
                endHour = 10; // Reset to 10 AM next day
            }

            // Set the end time
            const endTimeSelect = document.getElementById('end_time');

            // First reset all options to be enabled
            for (let i = 0; i < endTimeSelect.options.length; i++) {
                endTimeSelect.options[i].disabled = false;
            }

            // If end date is the same as start date, disable time options before or equal to start time
            if (document.getElementById('end_date').value === startDate) {
                for (let i = 0; i < endTimeSelect.options.length; i++) {
                    const optionIndex = parseInt(endTimeSelect.options[i].dataset.index);
                    if (optionIndex <= startTimeIndex) {
                        endTimeSelect.options[i].disabled = true;
                    }
                }
            }

            // Set the end time to the first available option after start time
            let validOptionFound = false;
            for (let i = 0; i < endTimeSelect.options.length; i++) {
                if (endTimeSelect.options[i].value === `${endHour}:00` && !endTimeSelect.options[i].disabled) {
                    endTimeSelect.selectedIndex = i;
                    validOptionFound = true;
                    break;
                }
            }

            // If the target end time is disabled, select the first enabled option
            if (!validOptionFound) {
                for (let i = 0; i < endTimeSelect.options.length; i++) {
                    if (!endTimeSelect.options[i].disabled) {
                        endTimeSelect.selectedIndex = i;
                        break;
                    }
                }
            }

            updateDurationText();
        }

        function updateEndTimeOptions() {
            const startDate = document.getElementById('start_date').value;
            const endDate = document.getElementById('end_date').value;
            const startTimeIndex = parseInt(document.getElementById('start_time').selectedOptions[0].dataset.index);

            const endTimeSelect = document.getElementById('end_time');

            // Reset all options to be enabled
            for (let i = 0; i < endTimeSelect.options.length; i++) {
                endTimeSelect.options[i].disabled = false;
            }

            // If end date is the same as start date, disable time options before or equal to start time
            if (endDate === startDate) {
                for (let i = 0; i < endTimeSelect.options.length; i++) {
                    const optionIndex = parseInt(endTimeSelect.options[i].dataset.index);
                    if (optionIndex <= startTimeIndex) {
                        endTimeSelect.options[i].disabled = true;
                    }
                }

                // If current selection is disabled, select the first enabled option
                if (endTimeSelect.options[endTimeSelect.selectedIndex].disabled) {
                    for (let i = 0; i < endTimeSelect.options.length; i++) {
                        if (!endTimeSelect.options[i].disabled) {
                            endTimeSelect.selectedIndex = i;
                            break;
                        }
                    }
                }
            }

            updateDurationText();
        }

        // Update the DOMContentLoaded event handler to include the new listeners
        document.addEventListener('DOMContentLoaded', function () {
            const blockTimeForm = document.getElementById('blockTimeForm');
            const startDateInput = document.getElementById('start_date');
            const startTimeSelect = document.getElementById('start_time');
            const endDateInput = document.getElementById('end_date');
            const endTimeSelect = document.getElementById('end_time');

            // Add event listeners to update end time when start time/date changes
            startDateInput.addEventListener('change', updateEndTime);
            startDateInput.addEventListener('input', function(e) {
                const selectedDate = new Date(this.value);

                if (selectedDate.getDay() === 0) {
                    alert('Sorry, we are closed on Sundays. Please select another date.')
                    setTimeout(() => {
                        this.value = '';
                    }, 100);
                }
            });
            startTimeSelect.addEventListener('change', updateEndTime);

            // Add event listeners to update duration text when end time/date changes
            endDateInput.addEventListener('change', function() {
                updateEndTimeOptions();
            });
            endTimeSelect.addEventListener('change', updateDurationText);
            endDateInput.addEventListener('input', function(e) {
                const selectedDate = new Date(this.value);

                if (selectedDate.getDay() === 0) {
                    alert('Sorry, we are closed on Sundays. Please select another date.')
                    setTimeout(() => {
                        this.value = '';
                    }, 100);
                }
            });

            // Rest of your event listeners...

            blockTimeForm.addEventListener('submit', async function (e) {
                // Existing submit handler code...
            });
        });

        // Update the editTimeBlock function to handle disabled times properly
        function editTimeBlock(block) {
            // Set modal title and button text
            document.getElementById('modalTitle').textContent = 'Edit Date & Time Block';
            document.getElementById('submitButton').textContent = 'Update Date & Time Block';

            // Set the time block ID
            document.getElementById('timeBlockId').value = block.id;

            // Parse dates
            const startDateTime = new Date(block.start_datetime);
            const endDateTime = new Date(block.end_datetime);

            // Format dates and times for the form
            const startDate = startDateTime.toISOString().split('T')[0];
            const startHour = startDateTime.getHours();
            const startTime = `${startHour}:00`;

            const endDate = endDateTime.toISOString().split('T')[0];
            const endHour = endDateTime.getHours();
            const endTime = `${endHour}:00`;

            document.getElementById('start_date').value = startDate;
            document.getElementById('end_date').value = endDate;

            // Set select values
            const startTimeSelect = document.getElementById('start_time');
            const endTimeSelect = document.getElementById('end_time');

            for (let i = 0; i < startTimeSelect.options.length; i++) {
                if (startTimeSelect.options[i].value === startTime) {
                    startTimeSelect.selectedIndex = i;
                    break;
                }
            }

            // Reset disabled state before setting value
            for (let i = 0; i < endTimeSelect.options.length; i++) {
                endTimeSelect.options[i].disabled = false;
            }

            for (let i = 0; i < endTimeSelect.options.length; i++) {
                if (endTimeSelect.options[i].value === endTime) {
                    endTimeSelect.selectedIndex = i;
                    break;
                }
            }

            // Set category and remarks
            document.getElementById('category').value = block.category;
            document.getElementById('remarks').value = block.remarks || '';

            // Update time options based on dates
            if (startDate === endDate) {
                updateEndTimeOptions();
            }

            // Update duration text
            updateDurationText();

            // Open modal
            document.getElementById('blockTimeModal').showModal();
        }

        document.addEventListener('DOMContentLoaded', function () {
            const blockTimeForm = document.getElementById('blockTimeForm');
            const startDateInput = document.getElementById('start_date');
            const startTimeSelect = document.getElementById('start_time');
            const endDateInput = document.getElementById('end_date');
            const endTimeSelect = document.getElementById('end_time');

            // Add event listeners to update end time when start time/date changes
            startDateInput.addEventListener('change', updateEndTime);
            startDateInput.addEventListener('input', function(e) {
                const selectedDate = new Date(this.value);

                if (selectedDate.getDay() === 0) {
                    alert('Sorry, we are closed on Sundays. Please select another date.')
                    setTimeout(() => {
                        this.value = '';
                    }, 100);
                }
            });
            startTimeSelect.addEventListener('change', updateEndTime);

            // Add event listeners to update duration text when end time/date changes
            endDateInput.addEventListener('change', updateDurationText);
            endTimeSelect.addEventListener('change', updateDurationText);
            endDateInput.addEventListener('input', function(e) {
                const selectedDate = new Date(this.value);

                if (selectedDate.getDay() === 0) {
                    alert('Sorry, we are closed on Sundays. Please select another date.')
                    setTimeout(() => {
                        this.value = '';
                    }, 100);
                }
            });

            blockTimeForm.addEventListener('submit', async function (e) {
                e.preventDefault();

                try {
                    const formData = new FormData(blockTimeForm);
                    const timeBlockId = formData.get('timeBlockId');

                    // Combine date and time fields into datetime format (YYYY-MM-DDTHH:MM)
                    const startDate = formData.get('start_date');
                    const startTime = formData.get('start_time');
                    const endDate = formData.get('end_date');
                    const endTime = formData.get('end_time');

                    const startDateTime = `${startDate}T${startTime}`;
                    const endDateTime = `${endDate}T${endTime}`;

                    // Validate that end date/time is after start date/time
                    if (new Date(endDateTime) <= new Date(startDateTime)) {
                        alert('End time must be after start time');
                        return;
                    }

                    // Create JSON object with combined datetime values
                    const jsonObject = {
                        start_datetime: startDateTime,
                        end_datetime: endDateTime,
                        category: formData.get('category'),
                        remarks: formData.get('remarks'),
                    };

                    let url, method;

                    if (timeBlockId) {
                        // Update existing time block
                        url = `/admin/time-blocks/${timeBlockId}`;
                        method = 'PUT';
                    } else {
                        // Create new time block
                        url = '/admin/time-blocks';
                        method = 'POST';
                    }

                    const response = await fetch(url, {
                        method: method,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(jsonObject)
                    });

                    const result = await response.json();

                    if (response.ok) {
                        // Show success message with more details
                        const successMessage = timeBlockId ?
                            'Time block updated successfully' :
                            'Time blocked successfully';

                        // Create a more detailed success message with toast
                        const toast = document.createElement('div');
                        toast.style.position = 'fixed';
                        toast.style.top = '20px';
                        toast.style.right = '20px';
                        toast.style.backgroundColor = '#2ecc71';
                        toast.style.color = 'white';
                        toast.style.padding = '15px 25px';
                        toast.style.borderRadius = '4px';
                        toast.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                        toast.style.zIndex = '9999';
                        toast.style.transition = 'opacity 0.5s';
                        toast.textContent = successMessage;
                        document.body.appendChild(toast);

                        // Remove toast after 3 seconds
                        setTimeout(() => {
                            toast.style.opacity = '0';
                            setTimeout(() => {
                                document.body.removeChild(toast);
                            }, 500);
                        }, 3000);

                        // Reset form and close modal
                        blockTimeForm.reset();
                        document.getElementById('blockTimeModal').close();

                        // Reload page after a delay
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show error message with details if available
                        let errorMessage = 'Failed to save time block: ';

                        if (result.errors) {
                            // Format validation errors
                            const errors = Object.values(result.errors).flat();
                            errorMessage += errors.join('\n');
                        } else {
                            errorMessage += result.message || 'Unknown error';
                        }

                        alert(errorMessage);
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('An error occurred while saving the time block');
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function () {

            document.addEventListener('click', async (event) => {
                if (event.target.hasAttribute('data-action') && event.target.hasAttribute('data-appointment-id')) {
                    if (event.target.getAttribute('data-action') === 'approve') {
                        const appointmentId = event.target.dataset.appointmentId;

                        try {
                            showLoader()
                            const response = await fetch('/admin/booking/approve', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    booking_id: appointmentId
                                })
                            });

                            if (!response.ok) {
                                throw new Error('Network response was not ok.');
                            }

                            const jsonResponse = await response.json();
                            const successMessage = 'Appointment approved successfully.';
                            const errorMessage = 'An error occurred while approving the appointment.';
                            const message = jsonResponse.message || (jsonResponse.success ? successMessage : errorMessage);
                            alert(message);

                            if (jsonResponse.success) {
                                event.target.closest('.action-buttons').innerHTML = `<button class="btn btn-sm btn-success" title="Confirmed">Confirmed ✔️</button>`;
                            }

                            calendar.refetchEvents();
                        } catch (error) {
                            alert(error.message || 'An unexpected error occurred while approving the appointment.');
                        } finally {
                            hideLoader();
                        }
                    } else if (event.target.getAttribute('data-action') === 'cancel') {
                        const appointmentId = event.target.dataset.appointmentId;

                        if(!confirm("Are you sure you want to cancel this booking")){
                            return;
                        }

                        try {
                            showLoader();
                            const response = await fetch('/admin/booking/cancel', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({
                                    booking_id: appointmentId
                                })
                            });

                            if (!response.ok) {
                                throw new Error('Network response was not ok.');
                            }

                            const jsonResponse = await response.json();
                            const successMessage = 'Appointment cancelled successfully.';
                            const errorMessage = 'An error occurred while cancelling the appointment.';
                            const message = jsonResponse.message || (jsonResponse.success ? successMessage : errorMessage);
                            alert(message);

                            if (jsonResponse.success) {
                                // event.target.closest('.event-card').remove();
                                // event.target.closest( `.event-card[data-appointment-id="${appointmentId}"]`)?.remove();
                                event.target.closest('dialog')?.close();

                                calendar.refetchEvents();
                            }
                        } catch (error) {
                            alert(error.message || 'An unexpected error occurred while cancelling the appointment.');
                        } finally {
                            hideLoader();
                        }
                    }
                }
            });

            async function rescheduleTask(info, remark = null) {
                if (confirm("Are you sure about this change?")) {
                    try {
                        let response = await fetch('/appointment/reschedule', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                id: info.event.id,
                                start: info.event.start.toISOString(),
                                end: info.event.end?.toISOString() ?? null,
                                remark: remark ?? null
                            })
                        });

                        let data = await response.json();

                        if (data.success) {
                            const message = data.message || 'Event updated successfully';

                            const dataElement = info.el.querySelector('.date');
                            if (dataElement && data.data?.date) {
                                dataElement.textContent = data.data.date;
                            }else{
                                console.warn('No element.');
                            }

                            if(info.view.calendar){
                                info.view.calendar.refetchEvents();
                            }
                            alert(message);
                        } else {
                            const message = data.message || 'There was an error updating the event';
                            alert(message);
                            throw new Error(message);
                        }
                    } catch (error) {
                        throw new Error(error);
                    }
                } else {
                    throw new Error('User cancelled the operation');
                }
            }

            const calendarEl = document.getElementById('calendar');
            // Fetch closed days from schedule FIRST, then init calendar
            let closedDays = [];
            let calendar = null; // global scope so refetchEvents works everywhere

            fetch('/admin/schedules')
                .then(r => r.json())
                .then(data => {
                    closedDays = data
                        .filter(s => s.is_closed)
                        .map(s => s.day);
                })
                .catch(() => {})
                .finally(() => {
                    initCalendar();
                });

            function initCalendar() {
            calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                themeSystem: "bootstrap",
                expandRows: true,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                slotDuration: '00:30:00',
                snapDuration: '00:30:00',
                slotMinTime: '10:00:00',
                slotMaxTime: '18:00:00',
                events: '/appointments',
                height: "auto",
                contentHeight: "auto",
                slotEventOverlap: false,
                eventOverlap: true,
                eventDisplay: 'list-item',
                nowIndicator: true,
                eventOrder: "start,-duration,title",
                businessHours: {
                    daysOfWeek: [1, 2, 3, 4, 5, 6],
                    startTime: '10:00',
                    endTime: '17:00'
                },
                dayCellClassNames: function(arg) {
                    const dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                    const dayName = dayNames[arg.date.getDay()];
                    const classes = [];
                    if (closedDays.includes(dayName)) {
                        classes.push('fc-day-closed');
                    }
                    return classes;
                },
                editable: true,
                eventDrop: async function (info) {
                    try {
                        await rescheduleTask(info);
                    } catch (error) {
                        info.revert();
                    }
                },
                eventResize: async function (info) {
                    try {
                        await rescheduleTask(info);
                    } catch (error) {
                        info.revert();
                    }
                },
                selectable: true,
                selectAllow: function (selectInfo) {
                    return selectInfo.start.getDay() !== 0; // Allow selection on non-Sundays
                },
                dayCellDidMount: function (info) {
                    const dayNamesArr = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                    if (closedDays.includes(dayNamesArr[info.date.getDay()])) {
                        // Closed day styling handled by dayCellClassNames
                    }
                },
                eventContent: function (arg) {
                    const eventProps = arg.event.extendedProps;
                    const slotEndTime = eventProps.end_time || '';
                    const eventDate = arg.event.start
                        ? arg.event.start.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })
                        : (eventProps.date || eventProps.job_date || '');

                    if(eventProps.event_type === 'blocked'){
                        return {
                            html: `
                <div class="event-card ${eventProps.event_type}">
                     <div class="event-header">
                        <span>${eventProps.time}</span> <span class="end-time">- ${eventProps.end_time}</span>
                    </div>
                    <div class="event-content">
                        <div class="event-detail-desktop">
                            <span>Time Blocked <span class="event-category">- ${eventProps.name}</span></span>
                        </div>
                        <div class="event-detail-mobile">
                            <div class="event-mobile-id">Time Blocked</div>
                            <div class="event-mobile-date">${eventDate}</div>
                        </div>
                    </div>
                </div>
            `
                        };
                    }
                    if(eventProps.event_type === 'admin_booking'){
                        return {
                            html: `
                <div class="event-card" style="background:#fff7ed;border-color:#fed7aa;color:#7c2d12;cursor:pointer;">
                    <div class="event-header" style="background:#fed7aa;color:#7c2d12;padding:4px 6px;font-weight:600;font-size:11px;">
                        ${eventProps.job_time && eventProps.job_time !== '—' ? eventProps.job_time : 'Admin Booking'}
                    </div>
                    <div class="event-content" style="padding:4px 6px;font-size:11px;">
                        <div class="event-detail-desktop">
                            <span>${eventProps.name} <span class="event-category">- ${eventProps.item}</span></span>
                            <div style="font-size:10px;opacity:0.75;margin-top:2px;">${eventProps.job_status}</div>
                        </div>
                        <div class="event-detail-mobile">
                            <div class="event-mobile-id">Job #${eventProps.job_id || ''}</div>
                            <div class="event-mobile-date">${eventProps.job_date || eventDate}</div>
                        </div>
                    </div>
                </div>
            `
                        };
                    }
                    return {
                        html: `
                <div class="event-card ${eventProps.event_type}" data-appointment-id="${eventProps.id}">
                     <div class="event-header">
                        <span>${eventProps.time}</span> <span class="end-time">- ${slotEndTime}</span>
                    </div>
                    <div class="event-content">
                        <div class="event-detail-desktop">
                            <span>${eventProps.name} <span class="event-category">- ${eventProps.item}</span></span>
                            <div style="font-size:10px;opacity:0.75;margin-top:2px;">${eventProps.appointment_id || ''}</div>
                        </div>
                        <div class="event-detail-mobile">
                            <div class="event-mobile-id">${eventProps.appointment_id || ''}</div>
                            <div class="event-mobile-date">${eventDate}</div>
                        </div>
                    </div>
                </div>
            `
                    };
                },
                eventDidMount: function (info) {
                    info.el.style.width = "100%";

                    // If this is a blocked event, color the day cell dark red
                    if (info.event.extendedProps && info.event.extendedProps.event_type === 'blocked') {
                        const dateStr = info.event.startStr.slice(0, 10);
                        document.querySelectorAll('td.fc-day[data-date="' + dateStr + '"]').forEach(function(cell) {
                            cell.style.background = '#dc3545';
                            cell.style.opacity = '0.85';
                        });
                    }
                },
                eventClick: function (info) {
                    const eventProps = info.event.extendedProps;

                    if(eventProps.event_type === 'blocked'){
                        return;
                    }

                    if(eventProps.event_type === 'admin_booking'){
                        const eventDetailDialog = document.getElementById('event-detail');
                        eventDetailDialog.querySelector('.appointment_id').textContent = 'Admin Booking';
                        eventDetailDialog.querySelector('.modal-content').innerHTML = `
                            <div>
                                <ul class="list-group">
                                    <li class="list-group-item"><strong>Customer:</strong> ${eventProps.name}</li>
                                    <li class="list-group-item"><strong>Phone:</strong> ${eventProps.phone || '—'}</li>
                                    <li class="list-group-item"><strong>Email:</strong> ${eventProps.email || '—'}</li>
                                    <li class="list-group-item"><strong>Address:</strong> ${eventProps.address || '—'}</li>
                                    <li class="list-group-item"><strong>Item(s) / Service(s):</strong> ${eventProps.item || '—'}</li>
                                    <li class="list-group-item"><strong>Job Date:</strong> ${eventProps.job_date}</li>
                                    <li class="list-group-item"><strong>Job Time:</strong> ${eventProps.job_time || '—'}</li>
                                    <li class="list-group-item"><strong>Job Detail:</strong> ${eventProps.job_detail || '—'}</li>
                                    <li class="list-group-item"><strong>Remarks:</strong> ${eventProps.remarks || '—'}</li>
                                    <li class="list-group-item"><strong>Status:</strong> ${eventProps.job_status}</li>
                                </ul>
                            </div>
                            <div class="modal-footer mt-0">
                                <a href="${eventProps.edit_url}" class="btn btn-sm btn-warning">Edit Booking</a>
                            </div>
                        `;
                        eventDetailDialog.showModal();
                        return;
                    }

                    const price = info.event.extendedProps.price;
                    const displayPrice = price == 0 ? "Free" : `$${price}`;
                    const displayPaymentStatus = info.event.extendedProps.is_paid ? '<div class="badge badge-success">Paid</div>' :   '<div class="badge badge-warning">Pending</div>';

                    const eventDetailDialog = document.getElementById('event-detail');
                    const eventIDElement = eventDetailDialog.querySelector('.appointment_id');
                    if (eventIDElement) eventIDElement.textContent = eventProps.appointment_id || '';

                    let actionButtonHtml = '';
                    if (!eventProps.approved_at) {
                        actionButtonHtml = `<button class="btn btn-sm btn-success confirm-btn" title="Confirm" data-appointment-id="${eventProps.id}" data-action="approve">✔️</button>
                                            <button class="btn btn-sm btn-danger cancel-btn" title="Cancel" data-appointment-id="${eventProps.id}" data-action="cancel">✖️</button>`;
                    } else{
                        actionButtonHtml = `<button class="btn btn-sm btn-success" title="Confirmed">Confirmed ✔️</button>`;
                    }

                    actionButtonHtml =  `
                <div>
                    <ul class="list-group">
                        <li class="list-group-item"><strong>Date: </strong>${eventProps.date || 'NA'}</li>
                        <li class="list-group-item">
                            <strong>Time: </strong> ${eventProps.time || 'NA'}</li>
                        <li class="list-group-item"><strong>Name: </strong>${eventProps.name}</li>
                        <li class="list-group-item"><strong>Email: </strong> ${eventProps.email || 'NA'}</li>
                        <li class="list-group-item"><strong>Phone: </strong> ${eventProps.phone || 'NA'}</li>
                        <li class="list-group-item"><strong>Item: </strong>${eventProps.item}</li>
                        ${(eventProps.custom_form_entries || []).map(field => `<li class="list-group-item"><strong>${field.label}:</strong> ${field.value}</li>`).join('')}
                    </ul>
                </div>
                <div class="modal-footer mt-0 d-flex justify-content-between">
                    <div class="action-buttons d-flex gap-2" style="margin-top: 5px;">
                      ${actionButtonHtml}
                    </div>
                </div>
            </div>`;

                    eventDetailDialog.querySelector('.modal-content').innerHTML = actionButtonHtml;

                    eventDetailDialog.showModal();
                    return;
                    eventDetailDialog.querySelector('.event-content').innerHTML = `
            <strong>Name:</strong> ${eventProps.name}<br>
            <strong>Appointment ID:</strong> ${eventProps.appointment_id || 'NA'}<br>
            <strong>Date:</strong> ${eventProps.date || 'NA'}<br>
            <strong>Time:</strong> ${eventProps.time || 'NA'}<br>
            <strong>Phone:</strong> ${eventProps.phone || 'NA'}<br>
            <strong>Price:</strong> ${eventProps.price == 0 ? "Free" : `$${eventProps.price}`}<br>
            <strong>Email:</strong> ${eventProps.email || 'NA'}<br>
            ${eventProps.event_type ? `<strong>Event Type:</strong> ${eventProps.event_type}<br>` : ''}
            ${eventProps.event_date ? `<strong>Event Date:</strong> ${new Date(eventProps.event_date).toLocaleDateString('en-US', {
                        day: '2-digit',
                        month: 'short',
                        year: '2-digit'
                    })}<br>` : ''}
        `;
                }
            });

            calendar.render();

            window.addEventListener('resize', function () {
                calendar.updateSize();
            });
            } // end initCalendar
        });
    </script>
@endpush