@extends('layouts.app')

@section('head')
<!-- FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.css" rel="stylesheet">
@endsection

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-calendar3 me-2 text-primary"></i>Booking Calendar
            </h1>
            <p class="text-muted mb-0">Manage bookings, availability, and scheduling</p>
        </div>
        <div class="btn-group">
            <a href="{{ route('booking.resources.index', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-grid-3x3-gap me-2"></i>Manage Resources
            </a>
            <a href="{{ route('booking.index', $website) }}" class="btn btn-outline-primary">
                <i class="bi bi-list-ul me-2"></i>All Bookings
            </a>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#quickBookingModal">
                <i class="bi bi-plus-circle me-2"></i>Quick Booking
            </button>
        </div>
    </div>

    <!-- Calendar Controls -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-funnel me-2"></i>Filter Resources
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Resource</label>
                        <select class="form-select" id="propertyFilter" onchange="filterCalendar()">
                            <option value="">All Resources</option>
                            @foreach($resources as $resource)
                            <option value="{{ $resource->id }}">{{ $resource->name }} ({{ ucfirst($resource->resource_type) }})</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" id="statusFilter" onchange="filterCalendar()">
                            <option value="">All Statuses</option>
                            <option value="pending">Pending</option>
                            <option value="confirmed">Confirmed</option>
                            <option value="cancelled">Cancelled</option>
                            <option value="completed">Completed</option>
                        </select>
                    </div>
                    
                    <div class="d-grid">
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
                            <i class="bi bi-x-circle me-1"></i>Clear Filters
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Upcoming Bookings -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-clock me-2"></i>Upcoming Bookings
                    </h6>
                </div>
                <div class="card-body p-0">
                    @if($upcomingBookings->count() > 0)
                    <div class="list-group list-group-flush">
                        @foreach($upcomingBookings as $booking)
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">{{ $booking->bookingResource->name ?? $booking->bookingProperty->name ?? 'Unknown' }}</h6>
                                    <p class="mb-1 small text-muted">{{ $booking->customer_name }}</p>
                                    <small class="text-muted">
                                        {{ $booking->start_datetime->format('M d, Y') }} - 
                                        {{ $booking->end_datetime->format('M d, Y') }}
                                    </small>
                                </div>
                                <span class="badge bg-{{ $booking->status_badge_class }}">
                                    {{ ucfirst($booking->status) }}
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-3">
                        <small class="text-muted">No upcoming bookings</small>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <!-- Calendar Legend -->
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-body py-2">
                    <div class="d-flex flex-wrap gap-3 align-items-center">
                        <small class="text-muted">Legend:</small>
                        <div class="d-flex align-items-center">
                            <div class="w-3 h-3 rounded me-1" style="width: 12px; height: 12px; background-color: #28a745;"></div>
                            <small>Confirmed</small>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="w-3 h-3 rounded me-1" style="width: 12px; height: 12px; background-color: #ffc107;"></div>
                            <small>Pending</small>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="w-3 h-3 rounded me-1" style="width: 12px; height: 12px; background-color: #dc3545;"></div>
                            <small>Cancelled</small>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="w-3 h-3 rounded me-1" style="width: 12px; height: 12px; background-color: #6c757d;"></div>
                            <small>Blocked</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Main Calendar -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Calendar View</h6>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-primary" onclick="calendar.changeView('dayGridMonth')">Month</button>
                            <button type="button" class="btn btn-outline-primary" onclick="calendar.changeView('timeGridWeek')">Week</button>
                            <button type="button" class="btn btn-outline-primary" onclick="calendar.changeView('timeGridDay')">Day</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="booking-calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Booking Modal -->
<div class="modal fade" id="quickBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Quick Booking</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="quickBookingForm">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="quick_property" class="form-label">Resource *</label>
                            <select class="form-select" id="quick_property" name="resource_id" required onchange="checkAvailability()">
                                <option value="">Select Resource</option>
                                @foreach($resources as $resource)
                                <option value="{{ $resource->id }}">{{ $resource->name }} ({{ ucfirst($resource->resource_type) }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="quick_guests" class="form-label">Number of Guests *</label>
                            <input type="number" class="form-control" id="quick_guests" name="participants" min="1" required placeholder="e.g. 2" onchange="checkAvailability()">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="quick_start" class="form-label">Start Date & Time *</label>
                            <input type="datetime-local" class="form-control" id="quick_start" name="start_datetime" required onchange="checkAvailability()">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="quick_end" class="form-label">End Date & Time *</label>
                            <input type="datetime-local" class="form-control" id="quick_end" name="end_datetime" required onchange="checkAvailability()">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Customer *</label>
                        <div class="d-flex gap-2">
                            <div class="flex-grow-1">
                                <select class="form-select" id="quick_customer_select" onchange="handleCustomerSelection()">
                                    <option value="">-- Select Existing Customer --</option>
                                    <option value="new">+ Create New Customer</option>
                                    @foreach($website->customers()->orderBy('name')->get() as $cust)
                                    <option value="{{ $cust->id }}"
                                            data-name="{{ $cust->name }}"
                                            data-email="{{ $cust->email }}"
                                            data-phone="{{ $cust->phone }}">
                                        {{ $cust->name }} ({{ $cust->email }})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div id="customer-fields">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="quick_customer_name" class="form-label">Customer Name *</label>
                                <input type="text" class="form-control" id="quick_customer_name" name="customer_name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="quick_customer_email" class="form-label">Customer Email *</label>
                                <input type="email" class="form-control" id="quick_customer_email" name="customer_email" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="quick_customer_phone" class="form-label">Customer Phone</label>
                                <input type="tel" class="form-control" id="quick_customer_phone" name="customer_phone">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="quick_payment_method" class="form-label">Payment Method *</label>
                                <select class="form-select" id="quick_payment_method" name="payment_method" required>
                                    <option value="walk_in">Walk-In Customer</option>
                                    <option value="cash">Cash Payment</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                    <option value="card">Card Payment</option>
                                    <option value="online_payment">Online Payment</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="quick_notes" class="form-label">Special Requests</label>
                        <textarea class="form-control" id="quick_notes" name="special_requests" rows="2"></textarea>
                    </div>

                    <!-- Availability Status Alert -->
                    <div class="alert alert-info" id="availability-checking" style="display: none;">
                        <i class="bi bi-hourglass-split me-2"></i>Checking availability...
                    </div>

                    <div class="alert alert-success" id="availability-success" style="display: none;">
                        <i class="bi bi-check-circle me-2"></i>
                        <span id="availability-success-message"></span>
                        <div class="mt-2">
                            <strong>Estimated Price:</strong> <span id="estimated-price">RM 0.00</span>
                        </div>
                    </div>

                    <div class="alert alert-danger" id="availability-error" style="display: none;">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <span id="availability-error-message"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="quick-booking-submit" disabled>
                        <i class="bi bi-check-circle me-2"></i>Create Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Booking Details Modal -->
<div class="modal fade" id="bookingDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Booking Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="booking-details-content">
                <!-- Content will be loaded dynamically -->
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.js"></script>

<script>
let calendar;
let allBookings = [];

// Wait for window load to ensure all scripts are loaded
window.addEventListener('load', function() {
    setTimeout(function() {
        initializeCalendar();
        loadBookings();
        setDefaultDates();
    }, 200);
});

function handleCustomerSelection() {
    const customerSelect = document.getElementById('quick_customer_select');
    const customerFields = document.getElementById('customer-fields');
    const nameInput = document.getElementById('quick_customer_name');
    const emailInput = document.getElementById('quick_customer_email');
    const phoneInput = document.getElementById('quick_customer_phone');

    const selectedValue = customerSelect.value;

    if (selectedValue === 'new' || selectedValue === '') {
        // Show fields for new customer entry
        customerFields.style.display = 'block';
        nameInput.value = '';
        emailInput.value = '';
        phoneInput.value = '';
        nameInput.readOnly = false;
        emailInput.readOnly = false;
        phoneInput.readOnly = false;
    } else {
        // Populate fields with selected customer data
        const selectedOption = customerSelect.options[customerSelect.selectedIndex];
        customerFields.style.display = 'block';
        nameInput.value = selectedOption.getAttribute('data-name');
        emailInput.value = selectedOption.getAttribute('data-email');
        phoneInput.value = selectedOption.getAttribute('data-phone') || '';
        nameInput.readOnly = true;
        emailInput.readOnly = true;
        phoneInput.readOnly = true;
    }
}

let availabilityCheckTimeout = null;

function checkAvailability() {
    const resourceId = document.getElementById('quick_property').value;
    const startDateTime = document.getElementById('quick_start').value;
    const endDateTime = document.getElementById('quick_end').value;
    const participants = document.getElementById('quick_guests').value;

    // Hide all alerts first
    document.getElementById('availability-checking').style.display = 'none';
    document.getElementById('availability-success').style.display = 'none';
    document.getElementById('availability-error').style.display = 'none';

    // Validate all fields are filled
    if (!resourceId || !startDateTime || !endDateTime || !participants) {
        return;
    }

    // Show checking status
    document.getElementById('availability-checking').style.display = 'block';

    // Clear previous timeout
    if (availabilityCheckTimeout) {
        clearTimeout(availabilityCheckTimeout);
    }

    // Debounce the API call
    availabilityCheckTimeout = setTimeout(() => {
        fetch('{{ route("booking.check-availability", $website) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                resource_id: resourceId,
                start_datetime: startDateTime,
                end_datetime: endDateTime,
                participants: parseInt(participants)
            })
        })
        .then(response => response.json())
        .then(data => {
            // Hide checking status
            document.getElementById('availability-checking').style.display = 'none';

            if (data.available) {
                // Show success message
                document.getElementById('availability-success').style.display = 'block';
                document.getElementById('availability-success-message').textContent = data.message;
                document.getElementById('estimated-price').textContent = 'RM ' + parseFloat(data.price).toFixed(2);

                // Enable submit button
                document.getElementById('quick-booking-submit').disabled = false;
            } else {
                // Show error message
                document.getElementById('availability-error').style.display = 'block';
                document.getElementById('availability-error-message').textContent = data.message;

                // Disable submit button
                document.getElementById('quick-booking-submit').disabled = true;
            }
        })
        .catch(error => {
            console.error('Error checking availability:', error);
            document.getElementById('availability-checking').style.display = 'none';
            document.getElementById('availability-error').style.display = 'block';
            document.getElementById('availability-error-message').textContent = 'Error checking availability. Please try again.';
            document.getElementById('quick-booking-submit').disabled = true;
        });
    }, 500); // 500ms debounce
}

function setDefaultDates() {
    // Set default datetime for quick booking
    const now = new Date();
    const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
    const dayAfter = new Date(now.getTime() + 48 * 60 * 60 * 1000);

    const quickStart = document.getElementById('quick_start');
    const quickEnd = document.getElementById('quick_end');

    if (quickStart && quickEnd) {
        quickStart.value = formatDateTimeLocal(tomorrow);
        quickEnd.value = formatDateTimeLocal(dayAfter);
    }
}

function initializeCalendar() {
    const calendarEl = document.getElementById('booking-calendar');
    
    if (!calendarEl) {
        console.error('Calendar element not found');
        return;
    }
    
    if (typeof FullCalendar === 'undefined') {
        console.error('FullCalendar is not loaded');
        return;
    }
    
    calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        events: [],
        eventClick: function(info) {
            if (info.event.extendedProps.type === 'blocked') {
                showBlockedDetails(info.event.extendedProps, info.event.title, info.event.start, info.event.end);
            } else {
                showBookingDetails(info.event.extendedProps);
            }
        },
        dateClick: function(info) {
            // Set quick booking date
            const clickedDate = new Date(info.dateStr + 'T10:00:00');
            const endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000);
            
            document.getElementById('quick_start').value = formatDateTimeLocal(clickedDate);
            document.getElementById('quick_end').value = formatDateTimeLocal(endDate);
            
            // Show quick booking modal
            new bootstrap.Modal(document.getElementById('quickBookingModal')).show();
        },
        height: 'auto',
        eventDisplay: 'block',
        dayMaxEventRows: 3,
    });
    
    calendar.render();
}

function loadBookings() {
    fetch('{{ route("booking.calendar.data", $website) }}')
        .then(response => response.json())
        .then(data => {
            allBookings = data;
            filterCalendar();
        })
        .catch(error => {
            console.error('Error loading bookings:', error);
            showAlert('error', 'Failed to load booking data');
        });
}

function filterCalendar() {
    const propertyFilter = document.getElementById('propertyFilter').value;
    const statusFilter = document.getElementById('statusFilter').value;

    let filteredBookings = allBookings;

    if (propertyFilter) {
        filteredBookings = filteredBookings.filter(event => {
            // For blocked events, check resource_id; for bookings, check property_id
            if (event.extendedProps.type === 'blocked') {
                return event.extendedProps.resource_id == propertyFilter;
            }
            return event.extendedProps.property_id == propertyFilter;
        });
    }

    if (statusFilter) {
        // Only apply status filter to bookings, not blocked events
        filteredBookings = filteredBookings.filter(event => {
            if (event.extendedProps.type === 'blocked') {
                return true; // Always show blocked events regardless of status filter
            }
            return event.extendedProps.status === statusFilter;
        });
    }

    calendar.removeAllEvents();
    calendar.addEventSource(filteredBookings);
}

function clearFilters() {
    document.getElementById('propertyFilter').value = '';
    document.getElementById('statusFilter').value = '';
    filterCalendar();
}

function showBookingDetails(booking) {
    const content = `
        <div class="row">
            <div class="col-md-6">
                <h6>Booking Information</h6>
                <table class="table table-sm">
                    <tr><td><strong>Reference:</strong></td><td>${booking.booking_reference}</td></tr>
                    <tr><td><strong>Customer:</strong></td><td>${booking.customer_name}</td></tr>
                    <tr><td><strong>Email:</strong></td><td>${booking.customer_email}</td></tr>
                    <tr><td><strong>Guests:</strong></td><td>${booking.guests}</td></tr>
                    <tr><td><strong>Status:</strong></td><td><span class="badge bg-${getStatusBadgeClass(booking.status)}">${booking.status}</span></td></tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6>Payment Information</h6>
                <table class="table table-sm">
                    <tr><td><strong>Amount:</strong></td><td>RM ${parseFloat(booking.total_price).toFixed(2)}</td></tr>
                    <tr><td><strong>Payment Status:</strong></td><td><span class="badge bg-${getPaymentStatusBadgeClass(booking.payment_status)}">${booking.payment_status}</span></td></tr>
                </table>

                <div class="mt-3">
                    <a href="/websites/${booking.website_id}/booking/bookings/${booking.id}" class="btn btn-primary btn-sm">
                        <i class="bi bi-eye me-1"></i>View Full Details
                    </a>
                </div>
            </div>
        </div>
    `;

    document.getElementById('booking-details-content').innerHTML = content;
    new bootstrap.Modal(document.getElementById('bookingDetailsModal')).show();
}

function showBlockedDetails(blocked, title, startDate, endDate) {
    const content = `
        <div class="alert alert-warning">
            <i class="bi bi-calendar-x me-2"></i>
            <strong>Blocked Time Period</strong>
        </div>
        <div class="mb-3">
            <table class="table table-sm">
                <tr><td><strong>Resource:</strong></td><td>${blocked.resource_name}</td></tr>
                <tr><td><strong>Reason:</strong></td><td>${blocked.reason || 'Not specified'}</td></tr>
                <tr><td><strong>Start:</strong></td><td>${startDate ? startDate.toLocaleString() : 'N/A'}</td></tr>
                <tr><td><strong>End:</strong></td><td>${endDate ? endDate.toLocaleString() : 'N/A'}</td></tr>
            </table>
        </div>
        <div class="mt-3">
            <a href="/websites/{{ $website->id }}/booking/resources/${blocked.resource_id}/availability" class="btn btn-primary btn-sm">
                <i class="bi bi-calendar me-1"></i>Manage Resource Availability
            </a>
        </div>
    `;

    document.getElementById('booking-details-content').innerHTML = content;
    new bootstrap.Modal(document.getElementById('bookingDetailsModal')).show();
}

function getStatusBadgeClass(status) {
    switch(status) {
        case 'confirmed': return 'success';
        case 'pending': return 'warning';
        case 'cancelled': return 'danger';
        case 'completed': return 'primary';
        default: return 'secondary';
    }
}

function getPaymentStatusBadgeClass(status) {
    switch(status) {
        case 'paid': return 'success';
        case 'pending': return 'warning';
        case 'failed': return 'danger';
        case 'refunded': return 'info';
        default: return 'secondary';
    }
}

function formatDateTimeLocal(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    return `${year}-${month}-${day}T${hours}:${minutes}`;
}

// Quick booking form submission
document.getElementById('quickBookingForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('{{ route("booking.resources.store", $website) }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', 'Booking created successfully!');
            bootstrap.Modal.getInstance(document.getElementById('quickBookingModal')).hide();
            loadBookings(); // Refresh calendar
            this.reset();
        } else {
            showAlert('error', data.message || 'Failed to create booking');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'An error occurred while creating the booking');
    });
});

// Calculate price when property or dates change
function calculatePrice() {
    const propertyId = document.getElementById('quick_property').value;
    const startDate = document.getElementById('quick_start').value;
    const endDate = document.getElementById('quick_end').value;
    
    if (propertyId && startDate && endDate) {
        // Make API call to calculate price
        fetch(`/api/calculate-booking-price?property=${propertyId}&start=${startDate}&end=${endDate}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('estimated-price').textContent = `RM ${data.price.toFixed(2)}`;
                document.getElementById('price-calculation').style.display = 'block';
            })
            .catch(error => {
                console.error('Error calculating price:', error);
            });
    }
}

// Add event listeners for price calculation
['quick_property', 'quick_start', 'quick_end'].forEach(id => {
    document.getElementById(id).addEventListener('change', calculatePrice);
});

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertAdjacentHTML('afterbegin', alertHtml);
    
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}
</script>

<style>
.fc-event {
    cursor: pointer;
}

.fc-daygrid-event {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-3 {
    width: 12px;
}

.h-3 {
    height: 12px;
}

/* Event type styles */
.booking-confirmed {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.booking-pending {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}

.booking-cancelled {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.blocked-slot {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    opacity: 0.8;
}
</style>
@endpush