<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    @hotelSettings
    <title>Reservation Management - {{ hotelName() }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-green: #1a936f;
            --secondary-green: #88d498;
            --light-green: #c6dabf;
            --dark-green: #114b5f;
            --accent: #f3e9d2;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        
        .main-content {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .btn-primary {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-primary:hover {
            background-color: var(--dark-green);
            border-color: var(--dark-green);
        }
        
        .btn-outline-primary {
            color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-green);
            color: white;
        }
        
        .btn-outline-secondary {
            color: #6c757d;
            border-color: #6c757d;
        }
        
        .btn-outline-secondary:hover {
            background-color: #6c757d;
            border-color: #6c757d;
            color: white;
        }
        
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            background: linear-gradient(90deg, var(--primary-green) 0%, var(--secondary-green) 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
        }
        
        .table th {
            background-color: var(--light-green);
            color: white;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .table td {
            vertical-align: middle;
        }
        
        .badge-confirmed { background-color: #28a745; color: white; }
        .badge-pending { background-color: #ffc107; color: #212529; }
        .badge-checked_in { background-color: #17a2b8; color: white; }
        .badge-checked_out { background-color: #6c757d; color: white; }
        .badge-cancelled { background-color: #dc3545; color: white; }
        .badge-walkin { background-color: #6f42c1; color: white; }
        .badge-reserved { background-color: #20c997; color: white; }
        
        .walkin-tag {
            background-color: #6f42c1;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 5px;
            display: inline-block;
        }
        
        .reserved-tag {
            background-color: #20c997;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 5px;
            display: inline-block;
        }
        
        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1a2b3c;
            text-align: left;
            margin: 0 0 20px 0;
            font-family: 'Inter', sans-serif;
            letter-spacing: -0.5px;
            padding: 0 0 15px 0;
            border-bottom: 3px solid var(--primary-green);
            display: inline-block;
        }
        
        .page-title i {
            color: var(--primary-green);
            margin-right: 15px;
            font-size: 2.5rem;
        }
        
        /* Modal Styles */
        .modal-content {
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }
        
        .modal-header {
            background: linear-gradient(90deg, var(--primary-green) 0%, var(--secondary-green) 100%);
            color: white;
            border-bottom: none;
            padding: 20px 25px;
        }
        
        .modal-header .btn-close {
            filter: brightness(0) invert(1);
        }
        
        .modal-body {
            padding: 25px;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .modal-footer {
            border-top: 1px solid #e9ecef;
            padding: 15px 25px;
        }
        
        .detail-label {
            font-weight: 600;
            color: var(--dark-green);
            margin-bottom: 5px;
            font-size: 0.9rem;
        }
        
        .detail-value {
            color: #2d3748;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 3px solid var(--primary-green);
        }
        
        .guest-info-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .room-info-card {
            background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .payment-info {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #e9ecef;
        }
        
        .status-badge-lg {
            padding: 8px 15px;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 600;
        }
        
        /* Pagination Styles */
        .pagination {
            gap: 5px;
        }
        
        .page-item .page-link {
            border-radius: 8px;
            color: var(--dark-green);
            border: 1px solid #dee2e6;
            padding: 8px 14px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .page-item .page-link:hover {
            background-color: var(--light-green);
            border-color: var(--primary-green);
            color: var(--dark-green);
        }
        
        .page-item.active .page-link {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
            color: white;
        }
        
        .page-item.disabled .page-link {
            color: #6c757d;
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }
        
        .pagination-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding: 15px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .pagination-stats {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .pagination-stats strong {
            color: var(--dark-green);
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 10px;
            }
            
            .page-title {
                font-size: 2rem;
                display: block;
                text-align: center;
            }
            
            .page-title i {
                display: block;
                margin: 0 auto 10px auto;
            }
            
            .pagination-info {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
            
            .table {
                font-size: 0.85rem;
            }
            
            .btn-group .btn {
                padding: 0.25rem 0.4rem;
            }
        }
    </style>
</head>
<body>
    <!-- Main Content -->
    <div class="main-content">
        <!-- Page Title and Actions -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="page-title">
                <i class="fas fa-calendar-alt"></i>
                Reservations
            </h1>
            <div>
                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-tachometer-alt me-2"></i>Back to Dashboard
                </a>
                <a href="{{ route('reservations.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>New Reservation
                </a>
            </div>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-filter me-2"></i>Filters
                </h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('reservations.index') }}" id="filterForm">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="">All Statuses</option>
                                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                    <option value="checked_in" {{ request('status') == 'checked_in' ? 'selected' : '' }}>Checked In</option>
                                    <option value="checked_out" {{ request('status') == 'checked_out' ? 'selected' : '' }}>Checked Out</option>
                                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="type" class="form-label">Reservation Type</label>
                                <select class="form-select" id="type" name="type">
                                    <option value="">All Types</option>
                                    <option value="walkin" {{ request('type') == 'walkin' ? 'selected' : '' }}>Walk-in</option>
                                    <option value="reserved" {{ request('type') == 'reserved' ? 'selected' : '' }}>Reserved</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="check_in_date" class="form-label">Check-in Date</label>
                                <input type="date" class="form-control" id="check_in_date" name="check_in_date" value="{{ request('check_in_date') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="check_out_date" class="form-label">Check-out Date</label>
                                <input type="date" class="form-control" id="check_out_date" name="check_out_date" value="{{ request('check_out_date') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="search" class="form-label">Search</label>
                                <input type="text" class="form-control" id="search" name="search" value="{{ request('search') }}" placeholder="Search by guest name, reservation number, or room...">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="per_page" class="form-label">Show</label>
                                <select class="form-select" id="per_page" name="per_page" style="width: auto; display: inline-block; margin-left: 10px;">
                                    <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                                    <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                                </select>
                                <span class="ms-2">entries per page</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-filter me-1"></i>Apply Filters
                        </button>
                        <a href="{{ route('reservations.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>Clear
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Reservations Table -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>Reservations List
                </h5>
                <div class="d-flex">
                    <form id="bulk-action-form" method="POST" action="{{ route('reservations.bulk-action') }}">
                        @csrf
                        <input type="hidden" name="selected" id="selected-items">
                        <input type="hidden" name="action" id="bulk-action">
                        
                        <div class="input-group">
                            <select class="form-select" id="bulk-action-select" style="width: 180px;">
                                <option value="">Bulk Actions</option>
                                <option value="confirmed">Mark as Confirmed</option>
                                <option value="pending">Mark as Pending</option>
                                <option value="checked_in">Mark as Checked In</option>
                                <option value="checked_out">Mark as Checked Out</option>
                                <option value="cancelled">Mark as Cancelled</option>
                                <option value="walkin">Mark as Walk-in</option>
                                <option value="reserved">Mark as Reserved</option>
                            </select>
                            <button class="btn btn-outline-primary" type="button" id="apply-bulk-action">
                                <i class="fas fa-check"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col" width="40">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="select-all">
                                    </div>
                                </th>
                                <th scope="col">Reservation #</th>
                                <th scope="col">Guest</th>
                                <th scope="col">Room</th>
                                <th scope="col">Check-in</th>
                                <th scope="col">Check-out</th>
                                <th scope="col">Total Amount</th>
                                <th scope="col">Status</th>
                                <th scope="col" width="100">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reservations as $reservation)
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input row-checkbox" type="checkbox" value="{{ $reservation->id }}">
                                        </div>
                                    </td>
                                    <td>
                                        <strong>
                                            @if($reservation->is_walk_in && $reservation->walk_in_number)
                                                {{ $reservation->walk_in_number }}
                                            @else
                                                {{ $reservation->reservation_number }}
                                            @endif
                                        </strong>
                                        @if($reservation->is_walk_in)
                                            <span class="walkin-tag">Walk-in</span>
                                        @else
                                            <span class="reserved-tag">Reserved</span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $reservation->guest->first_name }} {{ $reservation->guest->last_name }}
                                    </td>
                                    <td>
                                        {{ $reservation->room->room_number }}
                                        <small class="text-muted d-block">{{ $reservation->room->roomType->name ?? 'N/A' }}</small>
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($reservation->check_in)->format('M d, Y') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($reservation->check_out)->format('M d, Y') }}</td>
                                    <td>
                                        <strong>UGX {{ number_format($reservation->total_amount, 2) }}</strong>
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ $reservation->status }} p-2">
                                            {{ ucfirst(str_replace('_', ' ', $reservation->status)) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            @if($reservation->status === 'pending' || $reservation->status === 'confirmed')
                                                <!-- Action buttons removed, redirecting focus to Front Desk -->
                                            @endif
                                            <button type="button" class="btn btn-sm btn-outline-info" title="View Details" 
                                                    onclick="showReservationDetails(this, {{ $reservation->id }})" 
                                                    data-guest-email="{{ htmlspecialchars($reservation->guest->email ?? 'N/A') }}"
                                                    data-guest-phone="{{ htmlspecialchars($reservation->guest->phone ?? 'N/A') }}"
                                                    data-guest-address="{{ htmlspecialchars($reservation->guest->address ?? 'N/A') }}"
                                                    data-room-floor="{{ htmlspecialchars($reservation->room->floor ?? 'N/A') }}"
                                                    data-room-capacity="{{ htmlspecialchars($reservation->room->roomType->capacity ?? 'N/A') }}"
                                                    data-bs-toggle="modal" data-bs-target="#reservationModal">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <a href="{{ route('reservations.edit', $reservation->id) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-5">
                                        <i class="fas fa-calendar-times fa-4x text-muted mb-3"></i>
                                        <h5 class="text-muted">No reservations found</h5>
                                        <p class="text-muted mb-3">Try adjusting your filters or create a new reservation</p>
                                        <a href="{{ route('reservations.create') }}" class="btn btn-primary">
                                            <i class="fas fa-plus me-2"></i>Create New Reservation
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($reservations->hasPages() || $reservations->total() > 0)
                    <div class="pagination-info">
                        <div class="pagination-stats">
                            Showing <strong>{{ $reservations->firstItem() }}</strong> to <strong>{{ $reservations->lastItem() }}</strong> 
                            of <strong>{{ $reservations->total() }}</strong> results
                        </div>
                        
                        <nav aria-label="Reservation pagination">
                            <ul class="pagination mb-0">
                                {{-- Previous Page Link --}}
                                @if($reservations->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link">
                                            <i class="fas fa-chevron-left"></i>
                                        </span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $reservations->previousPageUrl() }}" rel="prev">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    </li>
                                @endif

                                {{-- Pagination Elements --}}
                                @foreach($reservations->getUrlRange(1, $reservations->lastPage()) as $page => $url)
                                    @if($page == $reservations->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link">{{ $page }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                {{-- Next Page Link --}}
                                @if($reservations->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $reservations->nextPageUrl() }}" rel="next">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Reservation Details Modal -->
    <div class="modal fade" id="reservationModal" tabindex="-1" aria-labelledby="reservationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reservationModalLabel">
                        <i class="fas fa-calendar-check me-2"></i>Reservation Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="reservationDetails">
                    <!-- Content will be loaded dynamically -->
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 text-muted">Loading reservation details...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Close
                    </button>
                    <a href="#" id="editReservationBtn" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>Edit Reservation
                    </a>
                </div>
            </div>
        </div>
    </div>

    

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Select all functionality
            const selectAll = document.getElementById('select-all');
            const rowCheckboxes = document.querySelectorAll('.row-checkbox');
            
            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    rowCheckboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                });
            }

            // Bulk action functionality
            const bulkActionForm = document.getElementById('bulk-action-form');
            const bulkActionSelect = document.getElementById('bulk-action-select');
            const applyBulkAction = document.getElementById('apply-bulk-action');
            const selectedItemsInput = document.getElementById('selected-items');
            const bulkActionInput = document.getElementById('bulk-action');

            if (applyBulkAction) {
                applyBulkAction.addEventListener('click', function() {
                    const selectedItems = Array.from(rowCheckboxes)
                        .filter(checkbox => checkbox.checked)
                        .map(checkbox => checkbox.value);

                    if (selectedItems.length === 0) {
                        alert('Please select at least one reservation.');
                        return;
                    }

                    if (!bulkActionSelect.value) {
                        alert('Please select a bulk action.');
                        return;
                    }

                    if (confirm(`Are you sure you want to ${bulkActionSelect.options[bulkActionSelect.selectedIndex].text.toLowerCase()} for ${selectedItems.length} reservation(s)?`)) {
                        selectedItemsInput.value = JSON.stringify(selectedItems);
                        bulkActionInput.value = bulkActionSelect.value;
                        bulkActionForm.submit();
                    }
                });
            }

            // Auto-submit when per_page changes
            const perPageSelect = document.getElementById('per_page');
            if (perPageSelect) {
                perPageSelect.addEventListener('change', function() {
                    document.getElementById('filterForm').submit();
                });
            }
        });

        

        // Function to show reservation details
        function showReservationDetails(btn, reservationId) {
            const modalBody = document.getElementById('reservationDetails');
            const editBtn = document.getElementById('editReservationBtn');
            
            // Extract rich data from the button's data attributes
            const guestEmail = btn.dataset.guestEmail || 'N/A';
            const guestPhone = btn.dataset.guestPhone || 'N/A';
            const guestAddress = btn.dataset.guestAddress || 'N/A';
            const roomFloor = btn.dataset.roomFloor || 'N/A';
            const roomCapacity = btn.dataset.roomCapacity || 'N/A';
            
            // Show loading state
            modalBody.innerHTML = `
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3 text-muted">Loading reservation details...</p>
                </div>
            `;

            // Update edit button link
            editBtn.href = `/reservations/${reservationId}/edit`;

            // Get data from the table row
            const row = document.querySelector(`input[value="${reservationId}"]`).closest('tr');
            if (!row) return;

            const cells = row.cells;
            const reservationCell = cells[1];
            const guestCell = cells[2];
            const roomCell = cells[3];
            const checkInCell = cells[4];
            const checkOutCell = cells[5];
            const amountCell = cells[6];
            const statusCell = cells[7];

            // Extract data
            const reservationNumber = reservationCell?.textContent?.trim() || 'N/A';
            const isWalkIn = reservationCell?.querySelector('.walkin-tag') !== null;
            const guestName = guestCell?.textContent?.trim() || 'N/A';
            const roomText = roomCell?.textContent?.trim() || 'N/A';
            const checkIn = checkInCell?.textContent?.trim() || 'N/A';
            const checkOut = checkOutCell?.textContent?.trim() || 'N/A';
            const amountText = amountCell?.textContent?.trim() || 'UGX 0';
            const status = statusCell?.querySelector('.badge')?.textContent?.trim().toLowerCase() || 'pending';

            // Parse room info
            const roomMatch = roomText.match(/(\d+)\s*\(([^)]+)\)/);
            const roomNumber = roomMatch ? roomMatch[1] : roomText;
            const roomType = roomMatch ? roomMatch[2] : 'N/A';

            // Parse amount
            const totalAmount = parseFloat(amountText.replace(/[^0-9.-]+/g, '')) || 0;

            // Calculate nights
            const nights = calculateNights(checkIn, checkOut);
            const pricePerNight = nights > 0 ? Math.round(totalAmount / nights) : 0;

            // Display the details
            modalBody.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <div class="guest-info-card">
                            <h6><i class="fas fa-user me-2"></i>Guest Information</h6>
                            <p class="mb-1"><strong>Name:</strong> ${guestName}</p>
                            <p class="mb-1"><strong>Email:</strong> <span class="text-white-50">${guestEmail}</span></p>
                            <p class="mb-1"><strong>Phone:</strong> <span class="text-white-50">${guestPhone}</span></p>
                            <p class="mb-0"><strong>Address:</strong> <span class="text-white">${guestAddress}</span></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="room-info-card">
                            <h6><i class="fas fa-bed me-2"></i>Room Information</h6>
                            <p class="mb-1"><strong>Room Number:</strong> ${roomNumber}</p>
                            <p class="mb-1"><strong>Room Type:</strong> ${roomType}</p>
                            <p class="mb-1"><strong>Floor:</strong> <span class="text-white-50">${roomFloor}</span></p>
                            <p class="mb-0"><strong>Capacity:</strong> <span class="text-white-50">${roomCapacity}</span> guests</p>
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-12">
                        <div class="detail-label">
                            <i class="fas fa-hashtag me-2"></i>Reservation Number
                        </div>
                        <div class="detail-value">
                            ${reservationNumber}
                            ${isWalkIn ? '<span class="walkin-tag ms-2">Walk-in</span>' : '<span class="reserved-tag ms-2">Reserved</span>'}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="detail-label">
                            <i class="fas fa-calendar-check me-2"></i>Check-in Date
                        </div>
                        <div class="detail-value">
                            ${checkIn}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-label">
                            <i class="fas fa-calendar-times me-2"></i>Check-out Date
                        </div>
                        <div class="detail-value">
                            ${checkOut}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="detail-label">
                            <i class="fas fa-clock me-2"></i>Duration
                        </div>
                        <div class="detail-value">
                            ${nights} night(s)
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-label">
                            <i class="fas fa-tag me-2"></i>Status
                        </div>
                        <div class="detail-value">
                            <span class="badge badge-${status} status-badge-lg">${status.toUpperCase()}</span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="payment-info">
                            <h6 class="mb-3"><i class="fas fa-credit-card me-2"></i>Payment Details</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-2"><strong>Price per Night:</strong> UGX ${pricePerNight.toLocaleString()}</p>
                                    <p class="mb-2"><strong>Number of Nights:</strong> ${nights}</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-2"><strong>Subtotal:</strong> UGX ${(pricePerNight * nights).toLocaleString()}</p>
                                    <p class="mb-0"><strong>Taxes & Fees:</strong> UGX 0</p>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between">
                                <h5 class="mb-0">Total Amount:</h5>
                                <h5 class="mb-0 text-success">UGX ${totalAmount.toLocaleString()}</h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <p class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Additional guest and room details will be available when you implement the show page.
                    </p>
                </div>
            `;
        }

        // Calculate nights between dates
        function calculateNights(checkIn, checkOut) {
            try {
                // Parse dates (format: "Mmm dd, YYYY" e.g., "Feb 18, 2026")
                const months = {
                    'Jan': 0, 'Feb': 1, 'Mar': 2, 'Apr': 3, 'May': 4, 'Jun': 5,
                    'Jul': 6, 'Aug': 7, 'Sep': 8, 'Oct': 9, 'Nov': 10, 'Dec': 11
                };
                
                const [month, day, year] = checkIn.replace(',', '').split(' ');
                const checkInDate = new Date(parseInt(year), months[month], parseInt(day));
                
                const [monthOut, dayOut, yearOut] = checkOut.replace(',', '').split(' ');
                const checkOutDate = new Date(parseInt(yearOut), months[monthOut], parseInt(dayOut));
                
                const diffTime = Math.abs(checkOutDate - checkInDate);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                return diffDays || 1;
            } catch (e) {
                return 1;
            }
        }
    </script>
    
<script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>

