@php @endphp
@extends('admin.layouts.dashboard')
@section('title')
    Manage Block Date & Time
@endsection

@push('head')
    <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; }
        }

        /* Table styling enhancements */
        .table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .table th {
            font-weight: 600;
            padding: 12px 15px;
        }

        .admin-data-table thead.table-dark th {
            background-color: #212529 !important;
            color: #fff !important;
            border-color: #373b3e;
            text-transform: none;
            letter-spacing: normal;
            font-size: 0.875rem;
        }

        .table thead:not(.table-dark) th {
            background-color: #f8f9fa;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
        }

        .table td {
            padding: 12px 15px;
            vertical-align: middle;
        }

        .table tbody tr:hover {
            background-color: #f1f9ff;
        }

        /* Mobile responsive fixes */
        @media (max-width: 576px) {
            .container.mt-4 {
                padding-left: 10px;
                padding-right: 10px;
            }
            .nav-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .nav-tabs .nav-link {
                white-space: nowrap;
                font-size: 13px;
                padding: 6px 10px;
            }
            .tab-content {
                padding: 10px !important;
            }
            .d-flex.justify-content-between {
                flex-direction: column;
                gap: 8px;
            }
            .d-flex.justify-content-between .btn {
                width: 100%;
            }
            .table th, .table td {
                font-size: 12px;
                padding: 8px 8px;
                white-space: nowrap;
            }
        }
    </style>
@endpush
@section('content')
    <div class="container mt-4">
        <h3>Manage Date &amp; Time</h3>

        <!-- Tabs -->
        <ul class="nav nav-tabs mt-3 mb-0" id="manageTabs">
            <li class="nav-item">
                <a class="nav-link active" id="schedule-tab" data-bs-toggle="tab" href="#scheduleTab">Schedule Date &amp; Time</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="blocked-tab" data-bs-toggle="tab" href="#blockedTab">Blocked Date &amp; Time</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="appt-schedule-tab" data-bs-toggle="tab" href="#apptScheduleTab">Manage Appointment Schedule</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="appt-form-fields-tab" data-bs-toggle="tab" href="#apptFormFieldsTab">Appointment Form Fields</a>
            </li>
        </ul>

        <div class="tab-content border border-top-0 p-3 bg-white">

            <!-- ===== SCHEDULE TAB ===== -->
            <div class="tab-pane fade show active" id="scheduleTab">
                <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
                    <h5 class="mb-0">Schedule Date &amp; Time</h5>
                    <button class="btn btn-dark btn-sm" onclick="saveAllSchedules()">Save All Changes</button>
                </div>
                
                <div id="schedulesContainer"></div>
                
                <style>
                .schedule-card {
                    border: 1px solid #dee2e6;
                    border-radius: 8px;
                    margin-bottom: 1rem;
                    background: white;
                }
                .schedule-header {
                    background: #f8f9fa;
                    padding: 1rem;
                    border-bottom: 1px solid #dee2e6;
                    border-radius: 8px 8px 0 0;
                }
                .schedule-body {
                    padding: 1rem;
                }
                .custom-slot-row {
                    background: #f8f9fa;
                    padding: 0.5rem;
                    border-radius: 4px;
                    margin-bottom: 0.5rem;
                }
                .badge-slot {
                    display: inline-block;
                    padding: 0.25rem 0.5rem;
                    margin: 0.25rem;
                    background: #6c757d;
                    color: white;
                    border-radius: 4px;
                    font-size: 0.875rem;
                }
                </style>
            </div>

            <!-- ===== BLOCKED TAB ===== -->
            <div class="tab-pane fade" id="blockedTab">
                <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
                    <h5 class="mb-0">Blocked Date &amp; Time</h5>
                    <button class="btn btn-dark btn-sm" id="addBlockedBtn">+ Add Blocked Date &amp; Time</button>
                </div>
                <div class="card">
                    <div class="card-body p-0">
                <div class="table-responsive">
                <table class="table table-striped table-hover mb-0 admin-data-table">
                    <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Blocked Slots</th>
                        <th>Category</th>
                        <th>Remarks</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @php
                        // Group blocks by date
                        $grouped = $timeBlocks->getCollection()->groupBy(fn($b) => $b->start_datetime->format('Y-m-d'));
                        $rowNum = 1;
                    @endphp
                    @forelse($grouped as $date => $blocks)
                        @php
                            $firstBlock = $blocks->first();
                            $hasFuture  = $blocks->contains(fn($b) => $b->start_datetime->isFuture());
                            // Build slot badges
                            $slotBadges = $blocks->map(fn($b) =>
                                $b->start_datetime->format('h:i A') . ' – ' . $b->end_datetime->format('h:i A')
                            )->implode(', ');
                            // Collect all IDs for this date group
                            $groupIds = $blocks->pluck('id')->toArray();
                        @endphp
                        <tr>
                            <td>{{ $rowNum++ }}</td>
                            <td>{{ $firstBlock->start_datetime->format('M d, Y') }}</td>
                            <td>
                                @foreach($blocks as $b)
                                    <span class="badge bg-danger me-1">
                                        {{ $b->start_datetime->format('h:i A') }} – {{ $b->end_datetime->format('h:i A') }}
                                    </span>
                                @endforeach
                            </td>
                            <td>{{ $firstBlock->category }}</td>
                            <td>{{ $firstBlock->remarks ?? 'N/A' }}</td>
                            <td>
                                <div class="admin-table-actions">
                                @if($hasFuture)
                                    <button type="button" class="btn btn-sm btn-warning action-btn"
                                            onclick="editDateGroup({{ json_encode([
                                                'date'     => $firstBlock->start_datetime->format('Y-m-d'),
                                                'ids'      => $groupIds,
                                                'category' => $firstBlock->category,
                                                'remarks'  => $firstBlock->remarks,
                                                'blocks'   => $blocks->map(fn($b) => [
                                                    'id'    => $b->id,
                                                    'start' => $b->start_datetime->format('H:i'),
                                                    'end'   => $b->end_datetime->format('H:i'),
                                                ])->values()->toArray(),
                                            ]) }})">
                                        Edit
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger action-btn"
                                            onclick="deleteDateGroup({{ json_encode($groupIds) }})">
                                        Delete
                                    </button>
                                @else
                                    <span class="badge bg-secondary">Expired</span>
                                @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="text-muted">
                                    <p>No Time Blocks Found</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
                </div>{{-- end table-responsive --}}
                    </div>
                </div>
                <div class="admin-pagination">
                    {{ $timeBlocks->onEachSide(1)->links() }}
                </div>
            </div>{{-- end blocked tab --}}

            <!-- ===== MANAGE APPOINTMENT SCHEDULE TAB ===== -->
            <div class="tab-pane fade" id="apptScheduleTab">
                <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
                    <h5 class="mb-0">Manage Appointment Schedule</h5>
                </div>

                @if(session('success') && request()->get('tab') === 'appt-schedule')
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="card shadow-sm" style="max-width:720px;">
                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('admin.app-settings.update') }}?from_appt_settings=1">
                            @csrf @method('PUT')

                            <h6 class="fw-bold text-muted mb-3">Booking Type</h6>

                            <div class="mb-3">
                                <p class="text-muted" style="font-size:13px;">
                                    Choose whether customers need to pay at the time of booking or can book for free.
                                </p>

                                <div class="d-flex gap-3 mt-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="appointment_type"
                                               id="tb_type_paid" value="paid"
                                               {{ $appSetting->appointment_type === 'paid' ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold" for="tb_type_paid">
                                            <i class="fas fa-credit-card me-1 text-warning"></i> Paid
                                            <div style="font-size:11px; color:#6b7280; font-weight:normal;">
                                                Customer must pay to complete booking
                                            </div>
                                        </label>
                                    </div>

                                    <div class="form-check form-check-inline ms-4">
                                        <input class="form-check-input" type="radio" name="appointment_type"
                                               id="tb_type_free" value="free"
                                               {{ $appSetting->appointment_type === 'free' ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold" for="tb_type_free">
                                            <i class="fas fa-gift me-1 text-success"></i> Free
                                            <div style="font-size:11px; color:#6b7280; font-weight:normal;">
                                                Booking is confirmed without payment
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div id="tb_bookingFeeSection" style="{{ $appSetting->appointment_type === 'paid' ? '' : 'display:none;' }} margin-bottom:16px;">
                                <label class="fw-bold" style="font-size:13px;">Booking Fee Amount</label>
                                <div class="input-group mt-1" style="max-width:180px;">
                                    <span class="input-group-text">$</span>
                                    <input type="number" name="booking_fee" id="tb_bookingFee"
                                           class="form-control" min="0" step="0.01"
                                           value="{{ old('booking_fee', $appSetting->booking_fee ?? 50) }}"
                                           placeholder="50">
                                </div>
                                <small class="text-muted">This amount will be charged to customers at booking time.</small>
                            </div>

                            <div id="tb_paymentGatewaySection" style="{{ $appSetting->appointment_type === 'paid' ? '' : 'display:none;' }}">
                                @include('admin.partials._payment-gateway-settings', ['appSetting' => $appSetting, 'idPrefix' => 'tb_'])
                            </div>

                            <div class="alert mt-3 {{ $appSetting->appointment_type === 'paid' ? 'alert-warning' : 'alert-success' }}" id="tb_alertBox" style="font-size:13px;">
                                @if($appSetting->appointment_type === 'paid')
                                    <i class="fas fa-info-circle me-1"></i>
                                    <strong>Paid mode:</strong> Customers will be redirected to payment page after filling the booking form. Booking is only confirmed after successful payment.
                                @else
                                    <i class="fas fa-info-circle me-1"></i>
                                    <strong>Free mode:</strong> Customers can book directly without any payment. Booking is confirmed immediately.
                                @endif
                            </div>

                            <input type="hidden" name="settings_section" value="booking">
                            <button type="submit" class="btn btn-dark px-4 mt-2">Save Settings</button>
                        </form>
                    </div>
                </div>
            </div>{{-- end appt schedule tab --}}

            <!-- ===== APPOINTMENT FORM FIELDS TAB ===== -->
            <div class="tab-pane fade" id="apptFormFieldsTab">
                <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
                    <h5 class="mb-0">Appointment Form Fields</h5>
                </div>

                @if(session('success') && request()->get('tab') === 'appt-form-fields')
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="card shadow-sm" style="max-width:720px;">
                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('admin.app-settings.update') }}?from_appt_settings=1">
                            @csrf @method('PUT')
                            <input type="hidden" name="settings_section" value="form-fields">

                            @include('admin.partials._appointment-form-fields-settings')

                            <button type="submit" class="btn btn-dark px-4 mt-2">Save Form Fields</button>
                        </form>
                    </div>
                </div>
            </div>{{-- end appt form fields tab --}}

        </div>{{-- end tab-content --}}
    </div>{{-- end container --}}

    <!-- Toast Notification -->
    <div id="toastContainer" style="position:fixed;top:20px;right:20px;z-index:99999;min-width:280px;"></div>

    <!-- Add/Edit Time Block 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">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
                                   onchange="loadBlockSlots(this.value)">
                            <span class="tooltip-text">Select the date to block</span>
                        </div>
                    </div>
                </div>

                <!-- Dynamic slots from schedule -->
                <div class="form-group mt-2" id="slotPickerSection">
                    <label>Select Slots to Block</label>
                    <div id="blockSlotOptions" class="d-flex flex-wrap gap-2 mt-1">
                        <small class="text-muted">Select a date to see available slots</small>
                    </div>
                    <input type="hidden" id="start_time" name="start_time" required>
                    <input type="hidden" id="end_time" name="end_time" required>
                    <input type="hidden" id="end_date" name="end_date" value="{{ now()->addDay()->format('Y-m-d') }}">
                </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($categories as $cat)
                                <option value="{{ $cat->name }}">{{ $cat->name }}</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="d-flex flex-wrap gap-2">
                    <button type="button" class="btn-sm btn btn-secondary px-2 py-1 px-md-4 py-md-2" onclick="this.closest('dialog').close();">
                        <small>Cancel</small>
                    </button>
                    <button type="submit" class="btn-sm btn px-2 py-1 px-md-4 py-md-2 btn-dark" id="submitButton">
                        <span id="submitBtnText"><small>Block Time</small></span>
                        <span id="submitBtnSpinner" style="display:none;">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            <small> Processing...</small>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </dialog>

    <script>
        window.openBlockTimeModal = 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('submitBtnText').innerHTML = '<small>Block Time</small>';

            // Set default start date to tomorrow
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            const tomorrowStr = tomorrow.toISOString().split('T')[0];
            document.getElementById('start_date').value = tomorrowStr;
            document.getElementById('end_date').value = tomorrowStr;

            // Load slots for tomorrow
            loadBlockSlots(tomorrowStr);

            document.getElementById('blockTimeModal').showModal();
        }

        function loadBlockSlots(dateStr, existingStart = null, existingEnd = null) {
            if (!dateStr) return;

            document.getElementById('end_date').value = dateStr;

            const container = document.getElementById('blockSlotOptions');
            container.innerHTML = '<small class="text-muted">Loading slots...</small>';

            document.getElementById('start_time').value = '';
            document.getElementById('end_time').value = '';

            fetch(`/appointments/available-times?date=${dateStr}&category=Others`)
                .then(r => r.json())
                .then(data => {
                    window._lastSlotData = data; // store for use in form submit
                    // Use allSlots (all schedule slots) not just available
                    const allSlots = (data.allSlots || data.availableSlots || []).map(s => s.trim());
                    const availableSlots = (data.availableSlots || []).map(s => s.trim());

                    if (!allSlots.length) {
                        container.innerHTML = '<small class="text-danger">No slots available for this day (day may be closed).</small>';
                        return;
                    }

                    // Add "Block Full Day" option
                    const fullDayBtn = `<button type="button" class="btn btn-sm btn-outline-danger block-slot-btn" data-start="${allSlots[0]}" data-end="fullday">
                        🚫 Block Full Day
                    </button>`;

                    const slotBtns = allSlots.map(slot => {
                        // Check if this slot falls within existing block range
                        let isBlocked = false;
                        if (existingStart && existingEnd) {
                            const slotTime = new Date(`${dateStr}T${convertTo24(slot)}`);
                            isBlocked = slotTime >= existingStart && slotTime < existingEnd;
                        }
                        // Also mark as unavailable (already booked by customer) if not in availableSlots
                        const isBooked = !availableSlots.includes(slot) && !isBlocked;
                        const btnClass = isBlocked ? 'btn-danger active' : (isBooked ? 'btn-secondary' : 'btn-outline-secondary');
                        const disabled = isBooked ? 'disabled title="Already booked by customer"' : '';
                        return `<button type="button" class="btn btn-sm ${btnClass} block-slot-btn" data-start="${slot}" data-end="${slot}" ${disabled}>
                            ${slot}
                        </button>`;
                    }).join('');

                    container.innerHTML = fullDayBtn + slotBtns;

                    // Pre-set hidden inputs if editing
                    if (existingStart && existingEnd) {
                        const selectedBtns = [...container.querySelectorAll('.block-slot-btn.active')];
                        if (selectedBtns.length) {
                            const selectedSlots = selectedBtns.map(b => b.dataset.start);
                            const sortedSlots = allSlots.filter(s => selectedSlots.includes(s));
                            document.getElementById('start_time').value = convertTo24(sortedSlots[0]);
                            document.getElementById('end_time').value = convertTo24(sortedSlots[sortedSlots.length - 1], true, data);
                        }
                    }

                    // Click handler - allow multiple selection
                    container.querySelectorAll('.block-slot-btn:not([disabled])').forEach(btn => {
                        btn.addEventListener('click', function() {
                            // Toggle selection
                            if (this.dataset.end === 'fullday') {
                                // Full day — deselect all others, select only this
                                container.querySelectorAll('.block-slot-btn').forEach(b => {
                                    b.classList.remove('btn-danger', 'active');
                                    b.classList.add(b.dataset.end === 'fullday' ? 'btn-outline-danger' : 'btn-outline-secondary');
                                });
                                this.classList.add('btn-danger', 'active');
                                this.classList.remove('btn-outline-danger');
                            } else {
                                // Deselect full day if any
                                container.querySelectorAll('.block-slot-btn[data-end="fullday"]').forEach(b => {
                                    b.classList.remove('btn-danger', 'active');
                                    b.classList.add('btn-outline-danger');
                                });
                                // Toggle this slot
                                if (this.classList.contains('active')) {
                                    this.classList.remove('btn-danger', 'active');
                                    this.classList.add('btn-outline-secondary');
                                } else {
                                    this.classList.add('btn-danger', 'active');
                                    this.classList.remove('btn-outline-secondary');
                                }
                            }

                            // Update hidden inputs based on selected slots
                            const selectedBtns = [...container.querySelectorAll('.block-slot-btn.active')];

                            if (!selectedBtns.length) {
                                document.getElementById('start_time').value = '';
                                document.getElementById('end_time').value = '';
                                return;
                            }

                            const isFullDay = selectedBtns.some(b => b.dataset.end === 'fullday');

                            if (isFullDay) {
                                document.getElementById('start_time').value = convertTo24(allSlots[0]);
                                document.getElementById('end_time').value = convertTo24(allSlots[allSlots.length - 1], true, data);
                            } else {
                                // Sort selected slots and use first start → last end
                                const selectedSlots = selectedBtns.map(b => b.dataset.start);
                                const sortedSlots = allSlots.filter(s => selectedSlots.includes(s));
                                document.getElementById('start_time').value = convertTo24(sortedSlots[0]);
                                document.getElementById('end_time').value = convertTo24(sortedSlots[sortedSlots.length - 1], true, data);
                            }
                        });
                    });
                })
                .catch(() => {
                    container.innerHTML = '<small class="text-danger">Error loading slots.</small>';
                });
        }

        function convertTo24(timeStr, isEnd = false, data = null) {
            // Convert "09:00 AM" to "09:00"
            if (!timeStr) return '';
            const [time, ampm] = timeStr.split(' ');
            let [h, m] = time.split(':').map(Number);
            if (ampm === 'PM' && h !== 12) h += 12;
            if (ampm === 'AM' && h === 12) h = 0;

            if (isEnd && data) {
                // Use slot-specific duration if available, fallback to interval
                const slotDurations = data.slotDurations || {};
                const duration = slotDurations[timeStr] ?? (data.interval || 60);
                const totalMins = h * 60 + m + duration;
                const eh = Math.floor(totalMins / 60);
                const em = totalMins % 60;
                return `${String(eh).padStart(2,'0')}:${String(em).padStart(2,'0')}`;
            }
            return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;
        }
        // End of block time functions

        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 editTimeBlock function to handle disabled times properly
        function editTimeBlock(block) {
            document.getElementById('modalTitle').textContent = 'Edit Date & Time Block';
            document.getElementById('submitBtnText').innerHTML = '<small>Update Date & Time Block</small>';
            document.getElementById('timeBlockId').value = block.id;

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

            // Format date as YYYY-MM-DD for the date input
            const startDate = startDateTime.getFullYear() + '-' +
                String(startDateTime.getMonth() + 1).padStart(2, '0') + '-' +
                String(startDateTime.getDate()).padStart(2, '0');

            document.getElementById('start_date').value = startDate;
            document.getElementById('end_date').value = startDate;
            document.getElementById('category').value = block.category;
            document.getElementById('remarks').value = block.remarks || '';

            // Load slots, then pre-select already blocked ones
            loadBlockSlots(startDate, startDateTime, endDateTime);

            document.getElementById('blockTimeModal').showModal();
        }

        // Edit a date group — show all slots for that date, pre-select blocked ones
        function editDateGroup(group) {
            document.getElementById('modalTitle').textContent = 'Edit Date & Time Block';
            document.getElementById('submitBtnText').innerHTML = '<small>Update Date & Time Block</small>';
            window._editGroupIds  = group.ids;
            window._editGroupDate = group.date;
            document.getElementById('timeBlockId').value = 'group';
            document.getElementById('start_date').value  = group.date;
            document.getElementById('end_date').value    = group.date;
            document.getElementById('category').value    = group.category;
            document.getElementById('remarks').value     = group.remarks || '';

            const blockedRanges = group.blocks.map(b => ({
                start: new Date(`${group.date}T${b.start}`),
                end:   new Date(`${group.date}T${b.end}`)
            }));
            loadBlockSlotsForGroup(group.date, blockedRanges);
            document.getElementById('blockTimeModal').showModal();
        }

        function loadBlockSlotsForGroup(dateStr, blockedRanges) {
            const container = document.getElementById('blockSlotOptions');
            container.innerHTML = '<small class="text-muted">Loading slots...</small>';
            document.getElementById('start_time').value = '';
            document.getElementById('end_time').value   = '';

            fetch(`/appointments/available-times?date=${dateStr}&category=Others`)
                .then(r => r.json())
                .then(data => {
                    window._lastSlotData = data;
                    const allSlots      = (data.allSlots || []).map(s => s.trim());
                    const availableSlots = (data.availableSlots || []).map(s => s.trim());

                    if (!allSlots.length) {
                        container.innerHTML = '<small class="text-danger">No slots available for this day.</small>';
                        return;
                    }

                    const fullDayBtn = `<button type="button" class="btn btn-sm btn-outline-danger block-slot-btn" data-start="${allSlots[0]}" data-end="fullday">🚫 Block Full Day</button>`;

                    const slotBtns = allSlots.map(slot => {
                        const slotTime  = new Date(`${dateStr}T${convertTo24(slot)}`);
                        const isBlocked = blockedRanges.some(r => slotTime >= r.start && slotTime < r.end);
                        const isBooked  = !availableSlots.includes(slot) && !isBlocked;
                        const btnClass  = isBlocked ? 'btn-danger active' : (isBooked ? 'btn-secondary' : 'btn-outline-secondary');
                        const disabled  = isBooked ? 'disabled' : '';
                        return `<button type="button" class="btn btn-sm ${btnClass} block-slot-btn" data-start="${slot}" data-end="${slot}" ${disabled}>${slot}</button>`;
                    }).join('');

                    container.innerHTML = fullDayBtn + slotBtns;

                    // Attach click handlers
                    container.querySelectorAll('.block-slot-btn:not([disabled])').forEach(btn => {
                        btn.addEventListener('click', function() {
                            if (this.dataset.end === 'fullday') {
                                container.querySelectorAll('.block-slot-btn').forEach(b => {
                                    b.classList.remove('btn-danger','active');
                                    b.classList.add(b.dataset.end === 'fullday' ? 'btn-outline-danger' : 'btn-outline-secondary');
                                });
                                this.classList.add('btn-danger','active');
                                this.classList.remove('btn-outline-danger');
                            } else {
                                container.querySelectorAll('.block-slot-btn[data-end="fullday"]').forEach(b => {
                                    b.classList.remove('btn-danger','active');
                                    b.classList.add('btn-outline-danger');
                                });
                                const active = this.classList.toggle('active');
                                this.classList.toggle('btn-danger', active);
                                this.classList.toggle('btn-outline-secondary', !active);
                            }
                        });
                    });
                });
        }

        async function deleteDateGroup(ids) {
            if (!confirm('Are you sure you want to delete all blocked slots for this date?')) return;
            const headers = {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            };
            for (const id of ids) {
                await fetch(`/admin/time-blocks/${id}`, { method: 'DELETE', headers });
            }
            showToast('Time block deleted.');
            setTimeout(() => { window.location.href = window.location.pathname + '?tab=blocked'; }, 800);
        }

        document.addEventListener('DOMContentLoaded', function () {
            // Auto-activate tab from URL param
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('tab') === 'blocked') {
                const blockedTab = document.getElementById('blocked-tab');
                if (blockedTab) {
                    blockedTab.click();
                    // Clean URL without reload
                    history.replaceState(null, '', window.location.pathname);
                }
            }

            // Auto-open categories tab from sidebar link (#categories hash)
            if (window.location.hash === '#categories') {
                const catTab = document.getElementById('categories-tab');
                if (catTab) {
                    catTab.click();
                    history.replaceState(null, '', window.location.pathname);
                }
            }
            const addBlockedBtn = document.getElementById('addBlockedBtn');
            if (addBlockedBtn) {
                addBlockedBtn.addEventListener('click', window.openBlockTimeModal);
            }
            const blockTimeForm = document.getElementById('blockTimeForm');
            if (blockTimeForm) {
                blockTimeForm.addEventListener('submit', async function(e) {
                    e.preventDefault();

                    // Show loading state
                    const submitBtn = document.getElementById('submitButton');
                    const btnText   = document.getElementById('submitBtnText');
                    const btnSpinner = document.getElementById('submitBtnSpinner');
                    submitBtn.disabled = true;
                    btnText.style.display = 'none';
                    btnSpinner.style.display = 'inline';

                    try {
                        const formData = new FormData(blockTimeForm);
                        const timeBlockId = formData.get('timeBlockId');
                        const startDate = formData.get('start_date');
                        const endDate = formData.get('end_date');
                        const category = formData.get('category');
                        const remarks = formData.get('remarks');

                        // Collect all selected slot buttons
                        const selectedBtns = [...document.querySelectorAll('.block-slot-btn.active')];
                        const isFullDay = selectedBtns.some(b => b.dataset.end === 'fullday');

                        if (!selectedBtns.length) {
                            alert('Please select a slot to block.');
                            return;
                        }

                        // Build list of blocks to save
                        let blocksToSave = [];

                        if (isFullDay) {
                            // Single block for full day
                            const startTime = formData.get('start_time');
                            const endTime = formData.get('end_time');
                            blocksToSave.push({ start_datetime: `${startDate}T${startTime}`, end_datetime: `${endDate}T${endTime}` });
                        } else {
                            // Get all slots in order from the DOM
                            const allSlotBtns = [...document.querySelectorAll('.block-slot-btn:not([data-end="fullday"])')];
                            const allSlotTimes = allSlotBtns.map(b => b.dataset.start);
                            const selectedTimes = selectedBtns.map(b => b.dataset.start);

                            // Sort selected by their position in allSlots
                            const sortedSelected = allSlotTimes.filter(s => selectedTimes.includes(s));

                            // Split into consecutive groups
                            const groups = [];
                            let currentGroup = [sortedSelected[0]];

                            for (let i = 1; i < sortedSelected.length; i++) {
                                const prevIdx = allSlotTimes.indexOf(sortedSelected[i - 1]);
                                const currIdx = allSlotTimes.indexOf(sortedSelected[i]);
                                if (currIdx === prevIdx + 1) {
                                    // Consecutive — same group
                                    currentGroup.push(sortedSelected[i]);
                                } else {
                                    // Gap — new group
                                    groups.push(currentGroup);
                                    currentGroup = [sortedSelected[i]];
                                }
                            }
                            groups.push(currentGroup);

                            // Build a block per group
                            for (const group of groups) {
                                const firstSlot = group[0];
                                const lastSlot = group[group.length - 1];
                                blocksToSave.push({
                                    start_datetime: `${startDate}T${convertTo24(firstSlot)}`,
                                    end_datetime: `${endDate}T${convertTo24(lastSlot, true, window._lastSlotData)}`
                                });
                            }
                        }

                        const url = timeBlockId ? `/admin/time-blocks/${timeBlockId}` : '/admin/time-blocks';
                        const method = timeBlockId ? 'PUT' : 'POST';
                        const headers = {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        };

                        // If editing (PUT), update only the first block; otherwise save all
                        if (timeBlockId && timeBlockId !== 'group') {
                            const block = blocksToSave[0];
                            const response = await fetch(`/admin/time-blocks/${timeBlockId}`, {
                                method: 'PUT', headers,
                                body: JSON.stringify({ ...block, category, remarks })
                            });
                            const result = await response.json();
                            if (response.ok) {
                                document.getElementById('blockTimeModal').close();
                                showToast('Time block updated!');
                                setTimeout(() => { window.location.href = window.location.pathname + '?tab=blocked'; }, 1000);
                            } else {
                                showToast('Error: ' + (result.errors ? Object.values(result.errors).flat().join('\n') : result.message), 'error');
                                submitBtn.disabled = false;
                                btnText.style.display = 'inline';
                                btnSpinner.style.display = 'none';
                            }
                        } else if (timeBlockId === 'group') {
                            // Group edit: delete old blocks, save new ones
                            const oldIds = window._editGroupIds || [];
                            for (const id of oldIds) {
                                await fetch(`/admin/time-blocks/${id}`, { method: 'DELETE', headers });
                            }
                            for (const block of blocksToSave) {
                                const response = await fetch('/admin/time-blocks', {
                                    method: 'POST', headers,
                                    body: JSON.stringify({ ...block, category, remarks })
                                });
                                if (!response.ok) {
                                    const result = await response.json();
                                    showToast('Error: ' + (result.errors ? Object.values(result.errors).flat().join('\n') : result.message), 'error');
                                    submitBtn.disabled = false;
                                    btnText.style.display = 'inline';
                                    btnSpinner.style.display = 'none';
                                    return;
                                }
                            }
                            document.getElementById('blockTimeModal').close();
                            showToast('Time block updated!');
                            setTimeout(() => { window.location.href = window.location.pathname + '?tab=blocked'; }, 1000);
                        } else {
                            // Save all blocks (one per consecutive group)
                            for (const block of blocksToSave) {
                                const response = await fetch('/admin/time-blocks', {
                                    method: 'POST', headers,
                                    body: JSON.stringify({ ...block, category, remarks })
                                });
                                if (!response.ok) {
                                    const result = await response.json();
                                    showToast('Error: ' + (result.errors ? Object.values(result.errors).flat().join('\n') : result.message), 'error');
                                    submitBtn.disabled = false;
                                    btnText.style.display = 'inline';
                                    btnSpinner.style.display = 'none';
                                    return;
                                }
                            }
                            document.getElementById('blockTimeModal').close();
                            showToast('Time blocked successfully!');
                            setTimeout(() => { window.location.href = window.location.pathname + '?tab=blocked'; }, 1000);
                        }

                    } catch (error) {
                        console.error('Error:', error);
                        showToast('An error occurred while saving the time block', 'error');
                    } finally {
                        // Only reset if we are NOT redirecting (error case)
                        if (submitBtn.disabled && btnSpinner.style.display !== 'none') {
                            // Will be reset by error handlers above if needed
                        }
                    }
                });
            }
        });

        // ── Toast helper ─────────────────────────────────────────────────────
        function showToast(message, type = 'success') {
            const container = document.getElementById('toastContainer');
            const id = 'toast-' + Date.now();
            const bg = type === 'success' ? '#198754' : '#dc3545';
            const icon = type === 'success' ? '✓' : '✕';
            const toast = document.createElement('div');
            toast.id = id;
            toast.style.cssText = `
                background:${bg};color:#fff;padding:12px 18px;border-radius:8px;
                margin-bottom:10px;box-shadow:0 4px 12px rgba(0,0,0,0.2);
                display:flex;align-items:center;gap:10px;font-size:14px;
                animation:slideIn .3s ease;
            `;
            toast.innerHTML = `<span style="font-size:18px;font-weight:bold;">${icon}</span><span>${message}</span>`;
            container.appendChild(toast);
            setTimeout(() => { toast.style.opacity='0'; toast.style.transition='opacity .4s'; setTimeout(() => toast.remove(), 400); }, 3000);
        }

        // ── Toast CSS ────────────────────────────────────────────────────────
        document.head.insertAdjacentHTML('beforeend',
            '<style>@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}</style>'
        );
    </script>

<!-- Schedule Modal -->
<dialog id="scheduleModal" style="border:none;border-radius:8px;padding:0;width:700px;max-width:98vw;box-shadow:0 4px 20px rgba(0,0,0,0.2);">
    <div style="padding:24px;">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="mb-0 fw-bold">Schedule Date &amp; Time</h5>
            <button onclick="document.getElementById('scheduleModal').close()" style="border:none;background:none;font-size:22px;line-height:1;">&times;</button>
        </div>

        <div id="scheduleRows">
            <div class="text-center text-muted py-3">Loading...</div>
        </div>

        <div class="d-flex justify-content-end gap-2 mt-4">
            <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('scheduleModal').close()">Cancel</button>
            <button type="button" class="btn btn-dark btn-sm" onclick="saveSchedule()">Save Schedule</button>
        </div>
    </div>
</dialog>

<script>
const DAYS = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
let scheduleData = [];

function openScheduleModal() {
    const btn = document.getElementById('scheduleActionBtn');
    const isUpdate = btn && btn.textContent.includes('Update');
    document.querySelector('#scheduleModal h5').textContent = isUpdate ? 'Update Schedule' : 'Add Schedule';
    document.getElementById('scheduleModal').showModal();
    loadScheduleModal();
}

function loadScheduleModal() {
    fetch('{{ route("admin.schedules.data") }}')
        .then(r => r.json())
        .then(data => {
            scheduleData = data;
            renderScheduleRows(data);
            renderScheduleTable(data);
        });
}

function renderScheduleRows(data) {
    const container = document.getElementById('scheduleRows');
    container.innerHTML = data.map((s, i) => `
        <div class="schedule-row d-flex align-items-center gap-3 py-2 border-bottom" data-index="${i}">
            <!-- Day name -->
            <div style="width:110px;font-weight:600;">${s.day}</div>

            <!-- Closed checkbox -->
            <div class="form-check mb-0" style="width:80px;">
                <input class="form-check-input" type="checkbox" id="closed_${i}"
                    ${s.is_closed ? 'checked' : ''}
                    onchange="toggleClosedOld(${i})">
                <label class="form-check-label small" for="closed_${i}">Closed</label>
            </div>

            <!-- Opens at -->
            <div id="hours_${i}" class="${s.is_closed ? 'd-none' : 'd-flex'} align-items-center gap-2 flex-wrap">
                <div>
                    <small class="text-muted d-block">From</small>
                    <input type="time" class="form-control form-control-sm sched-opens" id="opens_${i}"
                        value="${s.saved && s.opens_at ? s.opens_at : ''}" style="width:110px;"
                        onchange="applyToAll(${i}, 'opens'); updatePreview(${i})">
                </div>
                <div>
                    <small class="text-muted d-block">To</small>
                    <input type="time" class="form-control form-control-sm sched-closes" id="closes_${i}"
                        value="${s.saved && s.closes_at ? s.closes_at : ''}" style="width:110px;"
                        onchange="applyToAll(${i}, 'closes'); updatePreview(${i})">
                </div>
                <div>
                    <small class="text-muted d-block">Slot (mins)</small>
                    <select class="form-select form-select-sm sched-duration" id="duration_${i}" style="width:100px;"
                        onchange="applyToAll(${i}, 'duration'); updatePreview(${i})">
                        <option value="" ${!s.saved?'selected':''} disabled>Select</option>
                        <option value="30" ${s.saved&&s.slot_duration==30?'selected':''}>30 min</option>
                        <option value="60" ${s.saved&&s.slot_duration==60?'selected':''}>1 hour</option>
                        <option value="90" ${s.saved&&s.slot_duration==90?'selected':''}>1.5 hrs</option>
                        <option value="120" ${s.saved&&s.slot_duration==120?'selected':''}>2 hours</option>
                        <option value="180" ${s.saved&&s.slot_duration==180?'selected':''}>3 hours</option>
                    </select>
                </div>
                <div>
                    <small class="text-muted d-block">Max/slot</small>
                    <input type="number" class="form-control form-control-sm sched-max" id="max_${i}"
                        value="${s.saved ? s.max_bookings : ''}" min="1" max="10" style="width:70px;"
                        placeholder="-"
                        onchange="applyToAll(${i}, 'max'); updatePreview(${i})">
                </div>
            </div>
        </div>
    `).join('');
}

// Apply first changed value to all blank rows
function applyToAll(changedIndex, field) {
    const rows = document.querySelectorAll('.schedule-row');
    const totalRows = rows.length;

    let sourceVal;
    if (field === 'opens')    sourceVal = document.getElementById(`opens_${changedIndex}`)?.value;
    if (field === 'closes')   sourceVal = document.getElementById(`closes_${changedIndex}`)?.value;
    if (field === 'duration') sourceVal = document.getElementById(`duration_${changedIndex}`)?.value;
    if (field === 'max')      sourceVal = document.getElementById(`max_${changedIndex}`)?.value;

    if (!sourceVal) return;

    for (let i = 0; i < totalRows; i++) {
        if (i === changedIndex) continue;
        const isClosed = document.getElementById(`closed_${i}`)?.checked;
        if (isClosed) continue;

        if (field === 'opens') {
            const el = document.getElementById(`opens_${i}`);
            if (el && !el.value) el.value = sourceVal;
        }
        if (field === 'closes') {
            const el = document.getElementById(`closes_${i}`);
            if (el && !el.value) el.value = sourceVal;
        }
        if (field === 'duration') {
            const el = document.getElementById(`duration_${i}`);
            if (el && !el.value) el.value = sourceVal;
        }
        if (field === 'max') {
            const el = document.getElementById(`max_${i}`);
            if (el && !el.value) el.value = sourceVal;
        }
    }
}

function generateSlotBadges(opens, closes, duration) {
    if (!opens || !closes || !duration) return '<span class="text-muted small">-</span>';
    // Strip seconds if present (HH:MM:SS -> HH:MM)
    opens = opens.substring(0, 5);
    closes = closes.substring(0, 5);
    const slots = [];
    let [oh, om] = opens.split(':').map(Number);
    let [ch, cm] = closes.split(':').map(Number);
    let cur = oh * 60 + om;
    const end = ch * 60 + cm;
    duration = parseInt(duration);
    while (cur + duration <= end) {
        const h = Math.floor(cur / 60);
        const m = cur % 60;
        const ampm = h >= 12 ? 'PM' : 'AM';
        const h12 = h > 12 ? h - 12 : (h === 0 ? 12 : h);
        slots.push(`<span class="badge bg-primary">${String(h12).padStart(2,'0')}:${String(m).padStart(2,'0')} ${ampm}</span>`);
        cur += duration;
    }
    return slots.length ? slots.join('') : '<span class="text-muted small">No slots</span>';
}

function toggleClosedOld(i) {
    const closed = document.getElementById(`closed_${i}`).checked;
    const hours = document.getElementById(`hours_${i}`);
    if (closed) {
        hours.classList.add('d-none');
        hours.classList.remove('d-flex');
    } else {
        hours.classList.remove('d-none');
        hours.classList.add('d-flex');
    }
}

function updatePreview(i) {
    const opens    = document.getElementById(`opens_${i}`)?.value;
    const closes   = document.getElementById(`closes_${i}`)?.value;
    const duration = document.getElementById(`duration_${i}`)?.value;
    const preview  = document.getElementById(`preview_${i}`);
    if (preview) preview.innerHTML = generateSlotBadges(opens, closes, duration);
}

function saveSchedule() {
    const rows = document.querySelectorAll('.schedule-row');
    const schedules = [];

    rows.forEach((row) => {
        const i       = parseInt(row.dataset.index);
        const day     = DAYS[i];
        const isClosed = document.getElementById(`closed_${i}`).checked;
        const opensVal  = document.getElementById(`opens_${i}`)?.value || null;
        const closesVal = document.getElementById(`closes_${i}`)?.value || null;
        const durVal    = parseInt(document.getElementById(`duration_${i}`)?.value) || 180;
        const maxVal    = parseInt(document.getElementById(`max_${i}`)?.value) || 2;

        // Skip rows that are not closed and have no time set
        if (!isClosed && (!opensVal || !closesVal)) return;

        schedules.push({
            day,
            is_closed:     isClosed,
            opens_at:      isClosed ? null : opensVal,
            closes_at:     isClosed ? null : closesVal,
            slot_duration: isClosed ? 180  : durVal,
            max_bookings:  isClosed ? 2    : maxVal,
        });
    });

    fetch('{{ route("admin.schedules.save") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ schedules })
    })
    .then(async r => {
        const data = await r.json();
        if (!r.ok) {
            console.error('Save error:', data);
            alert('Error saving: ' + (data.message || JSON.stringify(data)));
            return;
        }
        if (data.success) {
            alert('Schedule saved successfully!');
            document.getElementById('scheduleModal').close();
            loadSchedules();
        } else {
            alert('Error: ' + (data.message || JSON.stringify(data)));
        }
    })
    .catch(err => {
        console.error(err);
        alert('Save failed: ' + err);
    });
}

function loadSchedules() {
    fetch('{{ route("admin.schedules.data") }}')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('scheduleTableBody');
            const rows = data.filter(s => s.saved);
            const btn = document.getElementById('scheduleActionBtn');

            if (!rows.length) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No schedule saved yet. Click "+ Add Schedule" to set up.</td></tr>';
                if (btn) {
                    btn.textContent = '+ Add Schedule';
                    btn.className = 'btn btn-dark btn-sm';
                }
                return;
            }

            // Records exist — show Update button
            if (btn) {
                btn.textContent = '✏️ Update Schedule';
                btn.className = 'btn btn-warning btn-sm';
            }
            tbody.innerHTML = data.map((s, i) => {
                if (!s.saved) return ''; // skip unsaved rows
                return `
                <tr>
                    <td>${i + 1}</td>
                    <td>${s.day}</td>
                    <td>${s.is_closed ? '<span class="badge bg-secondary">Closed</span>' : (s.opens_at || '-')}</td>
                    <td>${s.is_closed ? '-' : (s.closes_at || '-')}</td>
                    <td>${s.is_closed ? '-' : generateSlotBadges(s.opens_at, s.closes_at, s.slot_duration)}</td>
                    <td>${s.is_closed ? '-' : (s.max_bookings + ' per slot')}</td>
                </tr>
            `}).join('');
        });
}

document.addEventListener('DOMContentLoaded', loadSchedules);
</script>

@endsection

@push('scripts')
<script>
// Schedule Management JavaScript
let schedules = [];

try {
    schedules = @json($schedulesData ?? []);
    
    // Ensure boolean values are properly converted
    schedules = schedules.map(s => ({
        ...s,
        is_closed: s.is_closed === true || s.is_closed === 'true' || s.is_closed === 1,
        use_custom_slots: s.use_custom_slots === true || s.use_custom_slots === 'true' || s.use_custom_slots === 1
    }));
    
    console.log('Schedules loaded:', schedules);
} catch(e) {
    console.error('Error loading schedules:', e);
}

// Render schedules on page load
document.addEventListener('DOMContentLoaded', function() {
    if (schedules && schedules.length > 0) {
        renderSchedules();
    }
});

function renderSchedules() {
    const container = document.getElementById('schedulesContainer');
    if (!container) return;
    
    container.innerHTML = '';
    
    schedules.forEach((schedule, index) => {
        const card = document.createElement('div');
        card.className = 'schedule-card';
        card.innerHTML = `
            <div class="schedule-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><strong>${schedule.day}</strong></h6>
                    <div class="form-check form-switch">
                        <input 
                            class="form-check-input" 
                            type="checkbox" 
                            id="closed-${index}"
                            ${schedule.is_closed === true || schedule.is_closed === 'true' || schedule.is_closed === 1 ? 'checked' : ''}
                            onchange="toggleClosed(${index})"
                        >
                        <label class="form-check-label" for="closed-${index}">Closed</label>
                    </div>
                </div>
            </div>
            
            <div class="schedule-body" id="schedule-body-${index}" style="${schedule.is_closed === true || schedule.is_closed === 'true' || schedule.is_closed === 1 ? 'display:none' : 'display:block'}">
                
                <!-- Mode Toggle -->
                <div class="mb-3 p-2 bg-light border rounded">
                    <label class="form-label mb-2"><small><strong>Schedule Mode:</strong></small></label>
                    <div class="d-flex gap-3">
                        <div class="form-check">
                            <input 
                                class="form-check-input" 
                                type="radio" 
                                name="mode-${index}" 
                                id="mode-default-${index}"
                                ${!schedule.use_custom_slots ? 'checked' : ''}
                                onchange="toggleMode(${index}, false)"
                            >
                            <label class="form-check-label" for="mode-default-${index}">
                                <small>📅 Auto-Generate Slots</small>
                            </label>
                        </div>
                        <div class="form-check">
                            <input 
                                class="form-check-input" 
                                type="radio" 
                                name="mode-${index}" 
                                id="mode-custom-${index}"
                                ${schedule.use_custom_slots ? 'checked' : ''}
                                onchange="toggleMode(${index}, true)"
                            >
                            <label class="form-check-label" for="mode-custom-${index}">
                                <small>✏️ Custom Slots</small>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Default Settings -->
                <div id="default-settings-${index}" style="${schedule.use_custom_slots === true ? 'display:none' : 'display:block'}">
                    <div class="row mb-3">
                        <div class="col-md-3 mb-2">
                            <label class="form-label"><small>Opens At</small></label>
                            <input 
                                type="time" 
                                class="form-control form-control-sm" 
                                value="${schedule.opens_at || '09:00'}"
                                onchange="updateField(${index}, 'opens_at', this.value)"
                            >
                        </div>
                        <div class="col-md-3 mb-2">
                            <label class="form-label"><small>Closes At</small></label>
                            <input 
                                type="time" 
                                class="form-control form-control-sm" 
                                value="${schedule.closes_at || '17:00'}"
                                onchange="updateField(${index}, 'closes_at', this.value)"
                            >
                        </div>
                        <div class="col-md-3 mb-2">
                            <label class="form-label"><small>Slot Duration (min)</small></label>
                            <input 
                                type="number" 
                                class="form-control form-control-sm" 
                                value="${schedule.slot_duration || 180}"
                                min="15" step="15"
                                onchange="updateField(${index}, 'slot_duration', parseInt(this.value))"
                            >
                        </div>
                        <div class="col-md-3 mb-2">
                            <label class="form-label"><small>Max Bookings</small></label>
                            <input 
                                type="number" 
                                class="form-control form-control-sm" 
                                value="${schedule.max_bookings || 2}"
                                min="1"
                                onchange="updateField(${index}, 'max_bookings', parseInt(this.value))"
                            >
                        </div>
                    </div>
                </div>
                
                <!-- Custom Slots -->
                <div id="custom-settings-${index}" style="${schedule.use_custom_slots === true ? 'display:block' : 'display:none'}">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label mb-0"><small><strong>Custom Slots</strong></small></label>
                            <button onclick="addSlot(${index})" class="btn btn-sm btn-dark">+ Add Slot</button>
                        </div>
                        <div id="custom-slots-${index}">
                            ${renderCustomSlots(schedule, index)}
                        </div>
                    </div>
                </div>
                
                <!-- Preview — only show in auto-generate mode -->
                ${!schedule.use_custom_slots && schedule.slots && schedule.slots.length > 0 ? `
                <div>
                    <label class="form-label"><small><strong>Preview:</strong></small></label>
                    <div>
                        ${schedule.slots.map(s => `<span class="badge-slot">${s}</span>`).join('')}
                    </div>
                </div>
                ` : ''}
            </div>
        `;
        container.appendChild(card);
    });
}

function renderCustomSlots(schedule, scheduleIndex) {
    if (!schedule.custom_slots || schedule.custom_slots.length === 0) {
        return '<small class="text-muted">No custom slots. Default schedule will be used.</small>';
    }
    
    return schedule.custom_slots.map((slot, slotIndex) => `
        <div class="custom-slot-row">
            <div class="row align-items-center">
                <div class="col-md-3 mb-2">
                    <input 
                        type="time" 
                        class="form-control form-control-sm" 
                        value="${slot.start_time || '09:00'}"
                        onchange="updateSlot(${scheduleIndex}, ${slotIndex}, 'start_time', this.value)"
                    >
                </div>
                <div class="col-md-3 mb-2">
                    <input 
                        type="number" 
                        class="form-control form-control-sm" 
                        value="${slot.duration_minutes || 180}"
                        placeholder="Duration (min)"
                        min="15" step="15"
                        onchange="updateSlot(${scheduleIndex}, ${slotIndex}, 'duration_minutes', parseInt(this.value))"
                    >
                </div>
                <div class="col-md-2 mb-2">
                    <input 
                        type="number" 
                        class="form-control form-control-sm" 
                        value="${slot.max_bookings || 1}"
                        placeholder="Max"
                        min="1"
                        onchange="updateSlot(${scheduleIndex}, ${slotIndex}, 'max_bookings', parseInt(this.value))"
                    >
                </div>
                <div class="col-md-3 mb-2">
                    <small class="text-muted">End: ${calculateEnd(slot.start_time, slot.duration_minutes)}</small>
                </div>
                <div class="col-md-1 mb-2 text-end">
                    <button onclick="removeSlot(${scheduleIndex}, ${slotIndex})" class="btn btn-sm btn-link text-danger p-0">
                        ✕
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

function toggleClosed(index) {
    // Toggle the closed state
    schedules[index].is_closed = !schedules[index].is_closed;
    
    console.log(`${schedules[index].day} closed:`, schedules[index].is_closed);
    
    // Re-render to update UI
    renderSchedules();
}

function toggleMode(index, useCustom) {
    schedules[index].use_custom_slots = useCustom;
    
    // Show/hide appropriate sections
    const defaultSection = document.getElementById('default-settings-' + index);
    const customSection = document.getElementById('custom-settings-' + index);
    
    if (defaultSection && customSection) {
        if (useCustom) {
            defaultSection.style.display = 'none';
            customSection.style.display = 'block';
            // Initialize with one slot if empty
            if (!schedules[index].custom_slots || schedules[index].custom_slots.length === 0) {
                schedules[index].custom_slots = [{
                    start_time: '09:00',
                    duration_minutes: 180,
                    max_bookings: 1
                }];
                renderSchedules();
            }
        } else {
            defaultSection.style.display = 'block';
            customSection.style.display = 'none';
        }
    }
}

function updateField(index, field, value) {
    schedules[index][field] = value;
}

function addSlot(scheduleIndex) {
    if (!schedules[scheduleIndex].custom_slots) {
        schedules[scheduleIndex].custom_slots = [];
    }
    
    // Calculate smart default start time based on last slot
    let defaultStartTime = '09:00';
    let defaultDuration = 180;
    
    const existingSlots = schedules[scheduleIndex].custom_slots;
    if (existingSlots.length > 0) {
        const lastSlot = existingSlots[existingSlots.length - 1];
        // Calculate end time of last slot
        const [h, m] = lastSlot.start_time.split(':').map(Number);
        const totalMinutes = h * 60 + m + parseInt(lastSlot.duration_minutes);
        const newH = Math.floor(totalMinutes / 60) % 24;
        const newM = totalMinutes % 60;
        defaultStartTime = `${String(newH).padStart(2,'0')}:${String(newM).padStart(2,'0')}`;
        defaultDuration = lastSlot.duration_minutes; // Use same duration as last slot
    }
    
    schedules[scheduleIndex].custom_slots.push({
        start_time: defaultStartTime,
        duration_minutes: defaultDuration,
        max_bookings: 1
    });
    renderSchedules();
}

function removeSlot(scheduleIndex, slotIndex) {
    schedules[scheduleIndex].custom_slots.splice(slotIndex, 1);
    renderSchedules();
}

function updateSlot(scheduleIndex, slotIndex, field, value) {
    const slots = schedules[scheduleIndex].custom_slots;

    if (field === 'duration_minutes') {
        const oldVal = parseInt(slots[slotIndex].duration_minutes) || 0;
        const newVal = parseInt(value) || 0;
        slots[slotIndex].duration_minutes = newVal;

        console.log('=== updateSlot duration_minutes ===');
        console.log('slotIndex:', slotIndex, '| oldVal:', oldVal, '| newVal:', newVal);
        console.log('Slot start_time:', slots[slotIndex].start_time);

        if (newVal > oldVal) {
            // Duration increased — cascade only if next slot overlaps
            console.log('Duration INCREASED → checking cascade...');
            cascadeUpdateSlots(scheduleIndex, slotIndex);
        } else {
            // Duration decreased — no cascade, next slots keep their times
            console.log('Duration DECREASED → no cascade, next slots unchanged');
        }

        renderSchedules();
        return;
    }

    slots[slotIndex][field] = value;

    if (field === 'start_time') {
        cascadeUpdateSlots(scheduleIndex, slotIndex);
    }

    renderSchedules();
}

function cascadeUpdateSlots(scheduleIndex, fromSlotIndex) {
    const slots = schedules[scheduleIndex].custom_slots;

    for (let i = fromSlotIndex + 1; i < slots.length; i++) {
        const prev = slots[i - 1];
        const curr = slots[i];

        const [ph, pm] = prev.start_time.split(':').map(Number);
        const prevEnd = ph * 60 + pm + parseInt(prev.duration_minutes || 0);

        const [ch, cm] = curr.start_time.split(':').map(Number);
        const currStart = ch * 60 + cm;

        console.log(`  Slot[${i-1}] end=${prevEnd}min | Slot[${i}] start=${currStart}min`);

        if (currStart < prevEnd) {
            // Overlap — push this slot forward
            const newH = Math.floor(prevEnd / 60) % 24;
            const newM = prevEnd % 60;
            const newTime = `${String(newH).padStart(2,'0')}:${String(newM).padStart(2,'0')}`;
            console.log(`  OVERLAP! Pushing slot[${i}] from ${curr.start_time} → ${newTime}`);
            curr.start_time = newTime;
        } else {
            // No overlap — stop cascading
            console.log(`  No overlap → STOP cascade`);
            break;
        }
    }
}

function calculateEnd(start, duration) {
    if (!start || !duration) return '--:--';
    const [h, m] = start.split(':').map(Number);
    const total = h * 60 + m + parseInt(duration);
    const eh = Math.floor(total / 60) % 24;
    const em = total % 60;
    return `${String(eh).padStart(2,'0')}:${String(em).padStart(2,'0')}`;
}

async function saveAllSchedules() {
    // Validate before saving
    const validationErrors = [];
    
    schedules.forEach((schedule, index) => {
        if (schedule.is_closed) return; // Skip closed days
        
        if (schedule.use_custom_slots && schedule.custom_slots && schedule.custom_slots.length > 0) {
            // Check for duplicate start times
            const startTimes = schedule.custom_slots.map(s => s.start_time);
            const duplicates = startTimes.filter((time, idx) => startTimes.indexOf(time) !== idx);
            
            if (duplicates.length > 0) {
                validationErrors.push(`${schedule.day}: Duplicate slot times found (${duplicates.join(', ')}). Each slot must have a unique start time.`);
            }
            
            // Check for overlapping slots
            const sortedSlots = [...schedule.custom_slots].sort((a, b) => {
                const timeA = a.start_time.split(':').map(Number);
                const timeB = b.start_time.split(':').map(Number);
                return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
            });
            
            for (let i = 0; i < sortedSlots.length - 1; i++) {
                const current = sortedSlots[i];
                const next = sortedSlots[i + 1];
                
                // Calculate end time of current slot
                const [h, m] = current.start_time.split(':').map(Number);
                const endMinutes = h * 60 + m + parseInt(current.duration_minutes);
                
                // Get start time of next slot
                const [nextH, nextM] = next.start_time.split(':').map(Number);
                const nextStartMinutes = nextH * 60 + nextM;
                
                if (endMinutes > nextStartMinutes) {
                    validationErrors.push(`${schedule.day}: Slot ${current.start_time} overlaps with ${next.start_time}. Please adjust times or durations.`);
                }
            }
            
            // Check for empty values
            schedule.custom_slots.forEach((slot, slotIdx) => {
                if (!slot.start_time || !slot.duration_minutes || !slot.max_bookings) {
                    validationErrors.push(`${schedule.day}: Slot ${slotIdx + 1} has empty fields. Please fill all fields or remove the slot.`);
                }
            });
        }
    });
    
    if (validationErrors.length > 0) {
        alert('⚠️ Validation Errors:\n\n' + validationErrors.join('\n\n'));
        return;
    }
    
    try {
        const response = await fetch('{{ route("admin.schedules.save") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ schedules: schedules })
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert('✓ Schedule saved successfully!');
            window.location.reload();
        } else {
            alert('Failed to save schedule');
        }
    } catch (error) {
        console.error('Save error:', error);
        showToast('Error saving schedule: ' + error.message, 'error');
    }
}
</script>

<script>
// Manage Appointment Schedule tab — paid/free toggle
(function(){
    const feeSection = document.getElementById('tb_bookingFeeSection');
    const gatewaySection = document.getElementById('tb_paymentGatewaySection');
    const alertBox   = document.getElementById('tb_alertBox');

    function toggleGatewayPanels(prefix) {
        const selected = document.querySelector('input[name="payment_gateway"]:checked');
        const gateway = selected ? selected.value : 'clover';
        const cloverPanel = document.getElementById(prefix + 'cloverCredentials');
        const stripePanel = document.getElementById(prefix + 'stripeCredentials');
        if (cloverPanel) cloverPanel.style.display = gateway === 'clover' ? '' : 'none';
        if (stripePanel) stripePanel.style.display = gateway === 'stripe' ? '' : 'none';
    }

    document.querySelectorAll('input[name="payment_gateway"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            toggleGatewayPanels('tb_');
        });
    });

    document.querySelectorAll('input[name="appointment_type"]').forEach(function(radio){
        radio.addEventListener('change', function(){
            if (this.value === 'paid') {
                if (feeSection) feeSection.style.display = '';
                if (gatewaySection) gatewaySection.style.display = '';
                if (alertBox) {
                    alertBox.className = 'alert mt-3 alert-warning';
                    alertBox.innerHTML = '<i class="fas fa-info-circle me-1"></i><strong>Paid mode:</strong> Customers will be redirected to payment page after filling the booking form. Booking is only confirmed after successful payment.';
                }
            } else {
                if (feeSection) feeSection.style.display = 'none';
                if (gatewaySection) gatewaySection.style.display = 'none';
                if (alertBox) {
                    alertBox.className = 'alert mt-3 alert-success';
                    alertBox.innerHTML = '<i class="fas fa-info-circle me-1"></i><strong>Free mode:</strong> Customers can book directly without any payment. Booking is confirmed immediately.';
                }
            }
        });
    });

    // Auto-open tab if redirected after save
    const urlParams = new URLSearchParams(window.location.search);
    const tabParam = urlParams.get('tab');
    if (tabParam === 'appt-schedule' || (urlParams.get('from_appt_settings') && tabParam !== 'appt-form-fields')) {
        document.getElementById('appt-schedule-tab')?.click();
        history.replaceState(null, '', window.location.pathname + '?tab=appt-schedule');
    } else if (tabParam === 'appt-form-fields') {
        document.getElementById('appt-form-fields-tab')?.click();
    }
})();
</script>
@endpush