@extends('layouts.admin')

@section('title', 'Booking Management')

@section('content')
<div class="admin-page-header">
    <div>
        <h1 class="admin-page-title">Booking Management</h1>
        <p class="admin-page-subtitle">Manage all bookings from visitors and manual entries</p>
    </div>
    <button type="button" class="admin-btn admin-btn-primary" onclick="window.openBookingModal()">
        <i class="fas fa-plus mr-2"></i>Add New Booking
    </button>
</div>

<!-- Search and Filter Form -->
<div class="admin-card" style="margin-bottom: 1.5rem;">
    <form method="GET" action="{{ route('admin.bookings.index') }}" id="searchFilterForm">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end;">
            <!-- Search Input -->
            <div class="admin-form-group" style="margin-bottom: 0; grid-column: span 2;">
                <label for="search" class="admin-form-label">
                    <i class="fas fa-search mr-1"></i>Search
                </label>
                <input type="text" name="search" id="search" 
                       class="admin-form-input" 
                       value="{{ request('search') }}" 
                       placeholder="Name, Email, Phone, or Booking ID">
            </div>
            
            <!-- Date From -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="date_from" class="admin-form-label">
                    <i class="fas fa-calendar-alt mr-1"></i>Date From
                </label>
                <input type="date" name="date_from" id="date_from" 
                       class="admin-form-input" 
                       value="{{ request('date_from') }}">
            </div>
            
            <!-- Date To -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="date_to" class="admin-form-label">
                    <i class="fas fa-calendar-alt mr-1"></i>Date To
                </label>
                <input type="date" name="date_to" id="date_to" 
                       class="admin-form-input" 
                       value="{{ request('date_to') }}">
            </div>
            
            <!-- Source Filter -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="source" class="admin-form-label">
                    <i class="fas fa-phone mr-1"></i>Source
                </label>
                <select name="source" id="source" class="admin-form-input">
                    <option value="">All Sources</option>
                    <option value="Call" {{ request('source') == 'Call' ? 'selected' : '' }}>Call</option>
                    <option value="SMS/WhatsApp" {{ request('source') == 'SMS/WhatsApp' ? 'selected' : '' }}>SMS/WhatsApp</option>
                    <option value="Email" {{ request('source') == 'Email' ? 'selected' : '' }}>Email</option>
                    <option value="Website" {{ request('source') == 'Website' ? 'selected' : '' }}>Website</option>
                </select>
            </div>
            
            <!-- Status Filter -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="status" class="admin-form-label">
                    <i class="fas fa-info-circle mr-1"></i>Status
                </label>
                <select name="status" id="status" class="admin-form-input">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            
            <!-- Action Buttons -->
            <div style="display: flex; gap: 0.5rem; align-items: end;">
                <button type="submit" class="admin-btn admin-btn-primary" style="flex: 1; white-space: nowrap;">
                    <i class="fas fa-search mr-2"></i>Search
                </button>
                @if(request()->hasAny(['search', 'date_from', 'date_to', 'source', 'status']))
                <a href="{{ route('admin.bookings.index') }}" class="admin-btn admin-btn-secondary" style="white-space: nowrap;">
                    <i class="fas fa-times mr-2"></i>Clear
                </a>
                @endif
            </div>
        </div>
    </form>
</div>

@if(session('success'))
    <div class="admin-alert admin-alert-success">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="admin-alert admin-alert-danger">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
    </div>
@endif

<div class="admin-card">
    <div class="admin-table">
        <table>
            <thead>
                <tr>
                    <th>Customer</th>
                    <th>Room</th>
                    <th>Contact</th>
                    <th>Check In</th>
                    <th>Check Out</th>
                    <th>Booking Date</th>
                    <th>Source</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bookings as $booking)
                <tr>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">{{ $booking->full_name }}</div>
                        <div class="text-xs text-gray-500">{{ $booking->location }}</div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">
                            {{ $booking->room->name }}
                            @if($booking->room->room_number)
                                <span style="color: var(--admin-primary);">(Room #{{ $booking->room->room_number }})</span>
                            @endif
                        </div>
                        <div class="text-xs text-gray-500">${{ number_format($booking->room->price, 2) }}/night</div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm text-gray-900">{{ $booking->email }}</div>
                        <div class="text-xs text-gray-500">{{ $booking->phone }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">
                            {{ $booking->check_in ? $booking->check_in->format('M d, Y') : '-' }}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">
                            {{ $booking->check_out ? $booking->check_out->format('M d, Y') : '-' }}
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm text-gray-900" style="margin-bottom: 0.5rem;">
                            {{ $booking->booking_date ? $booking->booking_date->format('M d, Y') : '-' }}
                        </div>
                        <div>
                            @if($booking->status === 'confirmed')
                                <span class="admin-badge admin-badge-success">Confirmed (Paid)</span>
                            @elseif($booking->status === 'confirmed_no_payment')
                                <span class="admin-badge admin-badge-info">Confirmed (Unpaid)</span>
                            @elseif($booking->status === 'pending')
                                <span class="admin-badge admin-badge-warning">Pending</span>
                            @else
                                <span class="admin-badge admin-badge-danger">Cancelled</span>
                            @endif
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="admin-badge" style="background: #e0e7ff; color: #4338ca;">
                            {{ $booking->booking_source ?? 'Website' }}
                        </span>
                    </td>
                    <td>
                        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
                            <button type="button" 
                                    onclick="viewBooking({{ $booking->id }})"
                                    class="admin-action-btn admin-action-view" 
                                    title="View Booking"
                                    style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer; background: var(--admin-info); color: white;">
                                <i class="fas fa-eye"></i>
                            </button>
                            @if($booking->status !== 'confirmed')
                            <button type="button" 
                                    onclick="editBooking({{ $booking->id }})"
                                    class="admin-action-btn admin-action-edit" 
                                    title="Edit Booking"
                                    style="padding: 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; border: none; cursor: pointer; background: #6b7280; color: white;">
                                <i class="fas fa-edit"></i>
                            </button>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" style="text-align: center; padding: 2rem; color: #6b7280;">
                        No bookings found. <a href="{{ route('admin.bookings.create') }}" style="color: var(--admin-primary);">Create one now</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div style="display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem;">
        {{-- Previous Page Link --}}
        @if ($bookings->onFirstPage())
            <button disabled style="padding: 10px 15px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #9ca3af; border-radius: 6px; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;">
                <i class="fas fa-chevron-left"></i>
            </button>
        @else
            <a href="{{ $bookings->previousPageUrl() }}" style="padding: 10px 15px; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: white; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                <i class="fas fa-chevron-left"></i>
            </a>
        @endif

        {{-- Page Info --}}
        <span style="color: #6b7280; font-size: 14px; padding: 0 1rem;">
            Showing {{ $bookings->firstItem() ?? 0 }}-{{ $bookings->lastItem() ?? 0 }} of {{ $bookings->total() }} {{ $bookings->total() == 1 ? 'booking' : 'bookings' }}
        </span>

        {{-- Next Page Link --}}
        @if ($bookings->hasMorePages())
            <a href="{{ $bookings->nextPageUrl() }}" style="padding: 10px 15px; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: white; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                <i class="fas fa-chevron-right"></i>
            </a>
        @else
            <button disabled style="padding: 10px 15px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #9ca3af; border-radius: 6px; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;">
                <i class="fas fa-chevron-right"></i>
            </button>
        @endif
    </div>
</div>

<!-- View Booking Modal -->
<div id="viewBookingModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 900px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Booking Details</h2>
            <button type="button" class="admin-modal-close" onclick="window.closeViewBookingModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="admin-modal-body" id="viewBookingContent">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading booking details...</p>
            </div>
        </div>
    </div>
</div>

<!-- Edit Booking Modal -->
<div id="editBookingModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 800px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Edit Booking</h2>
            <button type="button" class="admin-modal-close" onclick="window.closeEditBookingModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="editBookingForm" action="" method="POST">
            @csrf
            @method('PUT')
            <div class="admin-modal-body" id="editBookingFormContent">
                <div style="text-align: center; padding: 2rem;">
                    <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                    <p style="margin-top: 1rem; color: #6b7280;">Loading booking data...</p>
                </div>
            </div>
            <div class="admin-modal-footer">
                <button type="button" class="admin-btn admin-btn-secondary" onclick="window.closeEditBookingModal()">
                    Cancel
                </button>
                <button type="submit" class="admin-btn admin-btn-primary">
                    <i class="fas fa-save mr-2"></i>Update Booking
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Add Booking Modal -->
<div id="bookingModal" class="admin-modal">
    <div class="admin-modal-content" style="max-width: 800px;">
        <div class="admin-modal-header">
            <h2 class="admin-modal-title">Add New Booking</h2>
            <button type="button" class="admin-modal-close" onclick="window.closeBookingModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="bookingForm" action="{{ route('admin.bookings.store') }}" method="POST">
            @csrf
            <div class="admin-modal-body">
                <div class="admin-form-group">
                    <label for="modal_room_id" class="admin-form-label">Room <span class="required">*</span></label>
                    <select name="room_id" id="modal_room_id" required class="admin-form-input">
                        <option value="">-- Select Room --</option>
                        @foreach($rooms as $room)
                            <option value="{{ $room->id }}">
                                {{ $room->name }}@if($room->room_number) (Room #{{ $room->room_number }})@endif - ${{ number_format($room->price, 2) }}/night
                            </option>
                        @endforeach
                    </select>
                    <div id="error_room_id" class="admin-form-error"></div>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        <i class="fas fa-info-circle"></i> Only approved rooms are available for booking.
                    </p>
                </div>

                <div class="admin-form-group">
                    <label for="modal_full_name" class="admin-form-label">Full Name <span class="required">*</span></label>
                    <input type="text" name="full_name" id="modal_full_name" required 
                           class="admin-form-input" placeholder="Enter customer's full name">
                    <div id="error_full_name" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_email" class="admin-form-label">Email <span class="required">*</span></label>
                    <input type="email" name="email" id="modal_email" required 
                           class="admin-form-input" placeholder="customer@example.com">
                    <div id="error_email" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_phone" class="admin-form-label">Phone <span class="required">*</span></label>
                    <input type="text" name="phone" id="modal_phone" required 
                           class="admin-form-input" placeholder="+1234567890">
                    <div id="error_phone" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_location" class="admin-form-label">Location <span class="required">*</span></label>
                    <input type="text" name="location" id="modal_location" required 
                           class="admin-form-input" placeholder="Where they come from">
                    <div id="error_location" class="admin-form-error"></div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="admin-form-group">
                        <label for="modal_check_in" class="admin-form-label">Check In Date</label>
                        <input type="date" name="check_in" id="modal_check_in" 
                               class="admin-form-input" value="{{ date('Y-m-d') }}" 
                               min="{{ date('Y-m-d') }}">
                        <div id="error_check_in" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="modal_check_out" class="admin-form-label">Check Out Date</label>
                        <input type="date" name="check_out" id="modal_check_out" 
                               class="admin-form-input" 
                               min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        <div id="error_check_out" class="admin-form-error"></div>
                        <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                            <i class="fas fa-info-circle"></i> Must be at least one day after check-in date.
                        </p>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="admin-form-group">
                        <label for="modal_booking_date" class="admin-form-label">Booking Date</label>
                        <input type="date" name="booking_date" id="modal_booking_date" 
                               class="admin-form-input" value="{{ date('Y-m-d') }}" 
                               min="{{ date('Y-m-d') }}">
                        <div id="error_booking_date" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="modal_booking_source" class="admin-form-label">Booking Source <span class="required">*</span></label>
                        <select name="booking_source" id="modal_booking_source" required class="admin-form-input">
                            <option value="Call">Call</option>
                            <option value="SMS/WhatsApp">SMS/WhatsApp</option>
                            <option value="Email">Email</option>
                            <option value="Website" selected>Website</option>
                        </select>
                        <div id="error_booking_source" class="admin-form-error"></div>
                    </div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_special_requests" class="admin-form-label">Special Requests</label>
                    <textarea name="special_requests" id="modal_special_requests" rows="3" 
                              class="admin-form-input admin-form-textarea" 
                              placeholder="Any special requests or notes..."></textarea>
                    <div id="error_special_requests" class="admin-form-error"></div>
                </div>

                <div class="admin-form-group">
                    <label for="modal_status" class="admin-form-label">Status</label>
                    <select name="status" id="modal_status" class="admin-form-input">
                        <option value="pending" selected>Pending</option>
                        <option value="confirmed">Confirmed</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                    <div id="error_status" class="admin-form-error"></div>
                </div>
            </div>
            <div class="admin-modal-footer">
                <button type="button" class="admin-btn admin-btn-secondary" onclick="window.closeBookingModal()">
                    Cancel
                </button>
                <button type="submit" class="admin-btn admin-btn-primary">
                    <i class="fas fa-save mr-2"></i>Create Booking
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Initialize notification function if not exists
    if (typeof showNotification === 'undefined') {
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            notification.className = `admin-alert admin-alert-${type === 'error' ? 'danger' : type === 'warning' ? 'warning' : 'success'}`;
            notification.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 10000; min-width: 300px; max-width: 500px; animation: slideInRight 0.3s ease-out;';
            notification.innerHTML = `<i class="fas fa-${type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'check-circle'} mr-2"></i>${message}`;
            document.body.appendChild(notification);
            setTimeout(() => {
                notification.style.animation = 'slideOutRight 0.3s ease-out';
                setTimeout(() => notification.remove(), 300);
            }, 5000);
        }
    }

    // Booking Modal Functions - Make them global
    window.openBookingModal = function() {
        const modal = document.getElementById('bookingModal');
        if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        } else {
            console.error('Booking modal not found!');
        }
    };

    window.closeBookingModal = function() {
        const modal = document.getElementById('bookingModal');
        if (modal) {
            modal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
        // Reset form
        const form = document.getElementById('bookingForm');
        if (form) {
            form.reset();
        }
        // Clear errors
        document.querySelectorAll('#bookingModal .admin-form-error').forEach(el => el.textContent = '');
        // Reset date fields
        const today = new Date().toISOString().split('T')[0];
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        const tomorrowStr = tomorrow.toISOString().split('T')[0];
        
        const checkIn = document.getElementById('modal_check_in');
        const checkOut = document.getElementById('modal_check_out');
        const bookingDate = document.getElementById('modal_booking_date');
        if (checkIn) checkIn.value = today;
        if (checkOut) {
            checkOut.value = tomorrowStr;
            checkOut.min = tomorrowStr;
        }
        if (bookingDate) bookingDate.value = today;
    };

    // Close modal when clicking outside
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('bookingModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    window.closeBookingModal();
                }
            });
        }

        // Update Check Out Date minimum when Check In Date changes
        const checkInInput = document.getElementById('modal_check_in');
        const checkOutInput = document.getElementById('modal_check_out');
        if (checkInInput && checkOutInput) {
            checkInInput.addEventListener('change', function() {
                const checkInDate = new Date(this.value);
                if (checkInDate) {
                    // Set minimum to next day after check-in
                    const minDate = new Date(checkInDate);
                    minDate.setDate(minDate.getDate() + 1);
                    const minDateStr = minDate.toISOString().split('T')[0];
                    checkOutInput.min = minDateStr;
                    
                    // If current check-out is before the new minimum, update it
                    if (checkOutInput.value && checkOutInput.value <= this.value) {
                        checkOutInput.value = minDateStr;
                    }
                }
            });
        }

        // Handle form submission
        const bookingForm = document.getElementById('bookingForm');
        if (bookingForm) {
            bookingForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const form = this;
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                
                // Clear previous errors
                document.querySelectorAll('#bookingModal .admin-form-error').forEach(el => el.textContent = '');
                
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Creating...';
                
                const formData = new FormData(form);
                
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                    }
                })
                .then(response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }
                    return response.json().then(data => ({ data, isJson: true })).catch(() => {
                        return { data: { success: true }, isJson: false };
                    });
                })
                .then(({ data, isJson }) => {
                    if (data.success) {
                        // Success notification
                        showNotification(data.message || 'Booking created successfully!', 'success');
                        // Close modal and reload after a short delay
                        setTimeout(() => {
                            window.closeBookingModal();
                            window.location.reload();
                        }, 1500);
                    } else if (data.errors) {
                        // Display validation errors
                        Object.keys(data.errors).forEach(key => {
                            const errorKey = key.replace('.', '_');
                            const errorEl = document.getElementById('error_' + errorKey);
                            if (errorEl) {
                                errorEl.textContent = data.errors[key][0];
                            }
                        });
                        showNotification('Please fix the form errors before submitting.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    } else {
                        showNotification('An error occurred while creating the booking.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('An error occurred while creating the booking.', 'error');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                });
            });
        }
    });

    // View Booking Modal Functions
    window.viewBooking = function(bookingId) {
        const modal = document.getElementById('viewBookingModal');
        const content = document.getElementById('viewBookingContent');
        
        // Show loading state
        content.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading booking details...</p>
            </div>
        `;
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        // Fetch booking data
        fetch(`/admin/bookings/${bookingId}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.booking) {
                const booking = data.booking;
                const statusBadge = booking.status === 'confirmed' 
                    ? '<span class="admin-badge admin-badge-success">Confirmed (Paid)</span>'
                    : booking.status === 'confirmed_no_payment'
                    ? '<span class="admin-badge admin-badge-info">Confirmed (Unpaid)</span>'
                    : booking.status === 'pending'
                    ? '<span class="admin-badge admin-badge-warning">Pending</span>'
                    : '<span class="admin-badge admin-badge-danger">Cancelled</span>';
                
                content.innerHTML = `
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
                        <div>
                            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--admin-primary);">Customer Information</h3>
                            
                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Full Name</label>
                                <div style="font-size: 1rem; color: #111827;">${booking.full_name || '-'}</div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Email</label>
                                <div style="font-size: 1rem; color: #111827;">${booking.email || '-'}</div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Phone</label>
                                <div style="font-size: 1rem; color: #111827;">${booking.phone || '-'}</div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Location</label>
                                <div style="font-size: 1rem; color: #111827;">${booking.location || '-'}</div>
                            </div>
                        </div>

                        <div>
                            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--admin-primary);">Booking Information</h3>
                            
                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Booking ID</label>
                                <div style="font-size: 1rem; color: #111827; font-weight: 600;">#${booking.id}</div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Room</label>
                                <div style="font-size: 1rem; color: #111827;">
                                    ${booking.room ? booking.room.name : '-'}
                                    ${booking.room && booking.room.room_number ? `<span style="color: var(--admin-primary);">(Room #${booking.room.room_number})</span>` : ''}
                                </div>
                                ${booking.room ? `<div style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">$${parseFloat(booking.room.price || 0).toFixed(2)} per night</div>` : ''}
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Check In</label>
                                <div style="font-size: 1rem; color: #111827;">
                                    ${booking.check_in ? new Date(booking.check_in).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Not specified'}
                                </div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Check Out</label>
                                <div style="font-size: 1rem; color: #111827;">
                                    ${booking.check_out ? new Date(booking.check_out).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Not specified'}
                                </div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Booking Date</label>
                                <div style="font-size: 1rem; color: #111827;">
                                    ${booking.booking_date ? new Date(booking.booking_date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'Not specified'}
                                </div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Booking Source</label>
                                <div>
                                    <span class="admin-badge" style="background: #e0e7ff; color: #4338ca;">
                                        ${booking.booking_source || 'Website'}
                                    </span>
                                </div>
                            </div>

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Status</label>
                                <div>${statusBadge}</div>
                            </div>

                            ${booking.special_requests ? `
                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Special Requests</label>
                                <div style="font-size: 1rem; color: #111827; padding: 1rem; background: #f9fafb; border-radius: 6px;">
                                    ${booking.special_requests}
                                </div>
                            </div>
                            ` : ''}

                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">Created At</label>
                                <div style="font-size: 0.875rem; color: #6b7280;">
                                    ${new Date(booking.created_at).toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit' })}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                content.innerHTML = `
                    <div style="text-align: center; padding: 2rem;">
                        <i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i>
                        <p style="margin-top: 1rem; color: #6b7280;">Booking not found</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error loading booking:', error);
            content.innerHTML = `
                <div style="text-align: center; padding: 2rem;">
                    <i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i>
                    <p style="margin-top: 1rem; color: #6b7280;">Error loading booking details</p>
                    <p style="margin-top: 0.5rem; color: #9ca3af; font-size: 0.875rem;">${error.message || 'Please try again later'}</p>
                </div>
            `;
        });
    };

    window.closeViewBookingModal = function() {
        const modal = document.getElementById('viewBookingModal');
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
    };

    // Edit Booking Modal Functions
    window.editBooking = function(bookingId) {
        const modal = document.getElementById('editBookingModal');
        const formContent = document.getElementById('editBookingFormContent');
        const form = document.getElementById('editBookingForm');
        
        formContent.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 32px; color: var(--admin-primary);"></i>
                <p style="margin-top: 1rem; color: #6b7280;">Loading booking data...</p>
            </div>
        `;
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        fetch(`/admin/bookings/${bookingId}/edit`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.booking && data.rooms) {
                const booking = data.booking;
                const rooms = data.rooms;
                const billing = data.billing || {}; // Get billing data if exists
                
                const roomsOptions = rooms.map(room => {
                    const selected = booking.room_id == room.id ? 'selected' : '';
                    return `<option value="${room.id}" ${selected}>${room.name}${room.room_number ? ' (Room #' + room.room_number + ')' : ''} - $${parseFloat(room.price || 0).toFixed(2)}/night</option>`;
                }).join('');
                
                const formatDateForInput = (dateStr) => {
                    if (!dateStr) return '';
                    const date = new Date(dateStr);
                    if (isNaN(date.getTime())) return '';
                    return date.toISOString().split('T')[0];
                };

                const checkIn = formatDateForInput(booking.check_in);
                const checkOut = formatDateForInput(booking.check_out);
                const bookingDate = formatDateForInput(booking.booking_date);
                
                formContent.innerHTML = `
                    <div class="admin-form-group">
                        <label for="edit_modal_room_id" class="admin-form-label">Room <span class="required">*</span></label>
                        <select name="room_id" id="edit_modal_room_id" required class="admin-form-input">
                            <option value="">-- Select Room --</option>
                            ${roomsOptions}
                        </select>
                        <div id="error_edit_room_id" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="edit_modal_full_name" class="admin-form-label">Full Name <span class="required">*</span></label>
                        <input type="text" name="full_name" id="edit_modal_full_name" required 
                               class="admin-form-input" value="${booking.full_name || ''}" 
                               placeholder="Enter customer's full name">
                        <div id="error_edit_full_name" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="edit_modal_email" class="admin-form-label">Email <span class="required">*</span></label>
                        <input type="email" name="email" id="edit_modal_email" required 
                               class="admin-form-input" value="${booking.email || ''}" 
                               placeholder="customer@example.com">
                        <div id="error_edit_email" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="edit_modal_phone" class="admin-form-label">Phone <span class="required">*</span></label>
                        <input type="text" name="phone" id="edit_modal_phone" required 
                               class="admin-form-input" value="${booking.phone || ''}" 
                               placeholder="+1234567890">
                        <div id="error_edit_phone" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="edit_modal_location" class="admin-form-label">Location <span class="required">*</span></label>
                        <input type="text" name="location" id="edit_modal_location" required 
                               class="admin-form-input" value="${booking.location || ''}" 
                               placeholder="Where they come from">
                        <div id="error_edit_location" class="admin-form-error"></div>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                        <div class="admin-form-group">
                            <label for="edit_modal_check_in" class="admin-form-label">Check In Date</label>
                            <input type="date" name="check_in" id="edit_modal_check_in" 
                                   class="admin-form-input" value="${checkIn}" 
                                   min="${new Date().toISOString().split('T')[0]}">
                            <div id="error_edit_check_in" class="admin-form-error"></div>
                        </div>

                        <div class="admin-form-group">
                            <label for="edit_modal_check_out" class="admin-form-label">Check Out Date</label>
                            <input type="date" name="check_out" id="edit_modal_check_out" 
                                   class="admin-form-input" value="${checkOut}" 
                                   min="${new Date().toISOString().split('T')[0]}">
                            <div id="error_edit_check_out" class="admin-form-error"></div>
                        </div>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                        <div class="admin-form-group">
                            <label for="edit_modal_booking_date" class="admin-form-label">Booking Date</label>
                            <input type="date" name="booking_date" id="edit_modal_booking_date" 
                                   class="admin-form-input" value="${bookingDate}">
                            <div id="error_edit_booking_date" class="admin-form-error"></div>
                        </div>

                        <div class="admin-form-group">
                            <label for="edit_modal_booking_source" class="admin-form-label">Booking Source <span class="required">*</span></label>
                            <select name="booking_source" id="edit_modal_booking_source" required class="admin-form-input">
                                <option value="Call" ${booking.booking_source === 'Call' ? 'selected' : ''}>Call</option>
                                <option value="SMS/WhatsApp" ${booking.booking_source === 'SMS/WhatsApp' ? 'selected' : ''}>SMS/WhatsApp</option>
                                <option value="Email" ${booking.booking_source === 'Email' ? 'selected' : ''}>Email</option>
                                <option value="Website" ${booking.booking_source === 'Website' || !booking.booking_source ? 'selected' : ''}>Website</option>
                            </select>
                            <div id="error_edit_booking_source" class="admin-form-error"></div>
                        </div>
                    </div>

                    <div class="admin-form-group">
                        <label for="edit_modal_special_requests" class="admin-form-label">Special Requests</label>
                        <textarea name="special_requests" id="edit_modal_special_requests" rows="3" 
                                  class="admin-form-input admin-form-textarea" 
                                  placeholder="Any special requests or notes...">${booking.special_requests || ''}</textarea>
                        <div id="error_edit_special_requests" class="admin-form-error"></div>
                    </div>

                    <div class="admin-form-group">
                        <label for="edit_modal_status" class="admin-form-label">Status <span class="required">*</span></label>
                        <select name="status" id="edit_modal_status" required class="admin-form-input">
                            <option value="pending" ${booking.status === 'pending' ? 'selected' : ''}>Pending</option>
                            <option value="confirmed" ${booking.status === 'confirmed' ? 'selected' : ''}>Confirm with Payment</option>
                            <option value="confirmed_no_payment" ${booking.status === 'confirmed_no_payment' ? 'selected' : ''}>Confirm without Payment</option>
                            <option value="cancelled" ${booking.status === 'cancelled' ? 'selected' : ''}>Cancelled</option>
                        </select>
                        <div id="error_edit_status" class="admin-form-error"></div>
                    </div>

                    <!-- Billing Details Section (shown when status is Confirmed) -->
                    <div id="edit_billing_section" style="display: ${booking.status === 'confirmed' ? 'block' : 'none'}; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid #e5e7eb;">
                        <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; color: var(--admin-primary);">
                            <i class="fas fa-money-bill-wave mr-2"></i>Billing Details
                        </h3>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                            <div class="admin-form-group">
                                <label for="edit_modal_amount_to_pay" class="admin-form-label">Amount to Pay</label>
                                <input type="number" name="amount_to_pay" id="edit_modal_amount_to_pay" 
                                       class="admin-form-input" value="${booking.amount_to_pay || ''}" 
                                       step="0.01" min="0" placeholder="0.00" readonly
                                       style="background-color: #f3f4f6; cursor: not-allowed;">
                                <div id="error_edit_amount_to_pay" class="admin-form-error"></div>
                                <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                                    <i class="fas fa-info-circle"></i> Auto-calculated: (Check Out - Check In) days × Room Price
                                </p>
                            </div>

                            <div class="admin-form-group">
                                <label for="edit_modal_amount_paid" class="admin-form-label">Amount Paid</label>
                                <input type="number" name="amount_paid" id="edit_modal_amount_paid" 
                                       class="admin-form-input" value="${billing.amount_paid || booking.amount_paid || ''}" 
                                       step="0.01" min="0" placeholder="0.00">
                                <div id="error_edit_amount_paid" class="admin-form-error"></div>
                            </div>
                        </div>

                        <!-- Remaining Balance (read-only display) -->
                        <div class="admin-form-group" style="background: #f9fafb; padding: 1rem; border-radius: 6px; border: 1px solid #e5e7eb;">
                            <label class="admin-form-label" style="font-weight: 600; color: #111827;">Remaining Balance</label>
                            <div id="edit_remaining_balance_display" style="font-size: 1.5rem; font-weight: 700; color: var(--admin-primary);">
                                $0.00
                            </div>
                            <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                                <i class="fas fa-calculator"></i> Amount to Pay - Amount Paid
                            </p>
                        </div>

                        <div class="admin-form-group">
                            <label for="edit_modal_payment_method" class="admin-form-label">Payment Method</label>
                            <select name="payment_method" id="edit_modal_payment_method" class="admin-form-input">
                                <option value="">-- Select Payment Method --</option>
                                <option value="cash" ${(billing.payment_method || booking.payment_method) === 'cash' ? 'selected' : ''}>Cash</option>
                                <option value="bank" ${(billing.payment_method || booking.payment_method) === 'bank' ? 'selected' : ''}>Bank</option>
                                <option value="mobile" ${(billing.payment_method || booking.payment_method) === 'mobile' ? 'selected' : ''}>Mobile</option>
                            </select>
                            <div id="error_edit_payment_method" class="admin-form-error"></div>
                        </div>

                        <div class="admin-form-group">
                            <label for="edit_modal_reference_number" class="admin-form-label">Reference Number</label>
                            <input type="text" name="reference_number" id="edit_modal_reference_number" 
                                   class="admin-form-input" value="${billing.reference_number || booking.reference_number || ''}" 
                                   placeholder="Enter payment reference number">
                            <div id="error_edit_reference_number" class="admin-form-error"></div>
                            <p style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                                <i class="fas fa-info-circle"></i> Transaction reference number (e.g., receipt number, transaction ID)
                            </p>
                        </div>

                        <!-- Bank Name (shown when payment method is bank) -->
                        <div id="edit_bank_name_section" class="admin-form-group" style="display: ${(billing.payment_method || booking.payment_method) === 'bank' ? 'block' : 'none'};">
                            <label for="edit_modal_bank_name" class="admin-form-label">Bank Name</label>
                            <select name="bank_name" id="edit_modal_bank_name" class="admin-form-input">
                                <option value="">-- Select Bank --</option>
                                <option value="NMB" ${(billing.bank_name || booking.bank_name) === 'NMB' ? 'selected' : ''}>NMB</option>
                                <option value="CRDB" ${(billing.bank_name || booking.bank_name) === 'CRDB' ? 'selected' : ''}>CRDB</option>
                                <option value="NBC" ${(billing.bank_name || booking.bank_name) === 'NBC' ? 'selected' : ''}>NBC</option>
                            </select>
                            <div id="error_edit_bank_name" class="admin-form-error"></div>
                        </div>

                        <!-- Mobile Operator (shown when payment method is mobile) -->
                        <div id="edit_mobile_operator_section" class="admin-form-group" style="display: ${(billing.payment_method || booking.payment_method) === 'mobile' ? 'block' : 'none'};">
                            <label for="edit_modal_mobile_operator" class="admin-form-label">Mobile Operator</label>
                            <select name="mobile_operator" id="edit_modal_mobile_operator" class="admin-form-input">
                                <option value="">-- Select Operator --</option>
                                <option value="MPESA" ${(billing.mobile_operator || booking.mobile_operator) === 'MPESA' ? 'selected' : ''}>MPESA</option>
                                <option value="T-PESA" ${(billing.mobile_operator || booking.mobile_operator) === 'T-PESA' ? 'selected' : ''}>T-PESA</option>
                                <option value="HALOPESA" ${(billing.mobile_operator || booking.mobile_operator) === 'HALOPESA' ? 'selected' : ''}>HALOPESA</option>
                                <option value="YAS" ${(billing.mobile_operator || booking.mobile_operator) === 'YAS' ? 'selected' : ''}>YAS</option>
                            </select>
                            <div id="error_edit_mobile_operator" class="admin-form-error"></div>
                        </div>
                    </div>
                `;
                
                form.action = `/admin/bookings/${bookingId}`;
                
                // Add event listener for check-in date change to update check-out minimum
                const checkInInput = document.getElementById('edit_modal_check_in');
                const checkOutInput = document.getElementById('edit_modal_check_out');
                if (checkInInput && checkOutInput) {
                    checkInInput.addEventListener('change', function() {
                        const checkInDate = new Date(this.value);
                        if (checkInDate) {
                            const minDate = new Date(checkInDate);
                            minDate.setDate(minDate.getDate() + 1);
                            checkOutInput.min = minDate.toISOString().split('T')[0];
                            if (checkOutInput.value && checkOutInput.value <= this.value) {
                                checkOutInput.value = minDate.toISOString().split('T')[0];
                            }
                        }
                        // Recalculate amount to pay when dates change
                        calculateAmountToPay();
                    });
                    
                    checkOutInput.addEventListener('change', function() {
                        // Recalculate amount to pay when dates change
                        calculateAmountToPay();
                    });
                }

                // Function to calculate amount to pay based on room price and nights
                function calculateAmountToPay() {
                    const roomSelect = document.getElementById('edit_modal_room_id');
                    const checkInInput = document.getElementById('edit_modal_check_in');
                    const checkOutInput = document.getElementById('edit_modal_check_out');
                    const amountToPayInput = document.getElementById('edit_modal_amount_to_pay');
                    
                    if (roomSelect && checkInInput && checkOutInput && amountToPayInput) {
                        const selectedRoomId = roomSelect.value;
                        const checkIn = new Date(checkInInput.value);
                        const checkOut = new Date(checkOutInput.value);
                        
                        if (selectedRoomId && checkIn && checkOut && checkOut > checkIn) {
                            // Find the selected room's price
                            const selectedOption = roomSelect.options[roomSelect.selectedIndex];
                            if (!selectedOption) return;
                            
                            const roomText = selectedOption.text;
                            const priceMatch = roomText.match(/\$([\d,]+\.?\d*)/);
                            
                            if (priceMatch) {
                                const pricePerNight = parseFloat(priceMatch[1].replace(/,/g, ''));
                                // Calculate days: difference in days between check-in and check-out
                                const timeDiff = checkOut.getTime() - checkIn.getTime();
                                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
                                const totalAmount = pricePerNight * daysDiff;
                                
                                // Always update amount_to_pay (it's read-only, so always recalculate)
                                amountToPayInput.value = totalAmount.toFixed(2);
                                
                                // Update remaining balance
                                updateRemainingBalance();
                            }
                        } else {
                            amountToPayInput.value = '0.00';
                            updateRemainingBalance();
                        }
                    }
                }

                // Function to calculate and display remaining balance
                function updateRemainingBalance() {
                    const amountToPayInput = document.getElementById('edit_modal_amount_to_pay');
                    const amountPaidInput = document.getElementById('edit_modal_amount_paid');
                    const remainingBalanceDisplay = document.getElementById('edit_remaining_balance_display');
                    
                    if (amountToPayInput && amountPaidInput && remainingBalanceDisplay) {
                        const amountToPay = parseFloat(amountToPayInput.value) || 0;
                        const amountPaid = parseFloat(amountPaidInput.value) || 0;
                        const remaining = amountToPay - amountPaid;
                        
                        remainingBalanceDisplay.textContent = '$' + remaining.toFixed(2);
                        
                        // Change color based on remaining balance
                        if (remaining > 0) {
                            remainingBalanceDisplay.style.color = 'var(--admin-warning)';
                        } else if (remaining < 0) {
                            remainingBalanceDisplay.style.color = 'var(--admin-danger)';
                        } else {
                            remainingBalanceDisplay.style.color = 'var(--admin-success)';
                        }
                    }
                }
                
                // Initialize remaining balance on load
                if (billing && billing.amount_to_pay !== undefined) {
                    setTimeout(() => {
                        updateRemainingBalance();
                    }, 100);
                }

                // Add event listener for room change to recalculate amount
                const roomSelect = document.getElementById('edit_modal_room_id');
                if (roomSelect) {
                    roomSelect.addEventListener('change', function() {
                        calculateAmountToPay();
                    });
                }

                // Add event listener for amount paid to update remaining balance
                const amountPaidInput = document.getElementById('edit_modal_amount_paid');
                if (amountPaidInput) {
                    amountPaidInput.addEventListener('input', function() {
                        updateRemainingBalance();
                    });
                }

                // Calculate initial values
                calculateAmountToPay();

                // Show/hide billing section based on status
                const statusSelect = document.getElementById('edit_modal_status');
                const billingSection = document.getElementById('edit_billing_section');
                if (statusSelect && billingSection) {
                    statusSelect.addEventListener('change', function() {
                        // Only show billing details for "Confirm with Payment"
                        if (this.value === 'confirmed') {
                            billingSection.style.display = 'block';
                        } else {
                            billingSection.style.display = 'none';
                        }
                    });
                }

                // Show/hide bank name or mobile operator based on payment method
                const paymentMethodSelect = document.getElementById('edit_modal_payment_method');
                const bankNameSection = document.getElementById('edit_bank_name_section');
                const mobileOperatorSection = document.getElementById('edit_mobile_operator_section');
                
                if (paymentMethodSelect) {
                    paymentMethodSelect.addEventListener('change', function() {
                        if (this.value === 'bank') {
                            if (bankNameSection) bankNameSection.style.display = 'block';
                            if (mobileOperatorSection) mobileOperatorSection.style.display = 'none';
                        } else if (this.value === 'mobile') {
                            if (bankNameSection) bankNameSection.style.display = 'none';
                            if (mobileOperatorSection) mobileOperatorSection.style.display = 'block';
                        } else {
                            if (bankNameSection) bankNameSection.style.display = 'none';
                            if (mobileOperatorSection) mobileOperatorSection.style.display = 'none';
                        }
                    });
                }
            } else {
                formContent.innerHTML = `<div style="text-align: center; padding: 2rem;"><i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i><p style="margin-top: 1rem; color: #6b7280;">Booking not found</p></div>`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            formContent.innerHTML = `<div style="text-align: center; padding: 2rem;"><i class="fas fa-exclamation-circle" style="font-size: 32px; color: var(--admin-danger);"></i><p style="margin-top: 1rem; color: #6b7280;">Error loading booking data</p></div>`;
        });
    };

    window.closeEditBookingModal = function() {
        const modal = document.getElementById('editBookingModal');
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
    };

    // Handle edit booking form submission
    document.addEventListener('DOMContentLoaded', function() {
        const editForm = document.getElementById('editBookingForm');
        if (editForm) {
            editForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const form = this;
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                
                document.querySelectorAll('#editBookingModal .admin-form-error').forEach(el => el.textContent = '');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Updating...';
                
                const formData = new FormData();
                formData.append('_token', form.querySelector('input[name="_token"]').value);
                formData.append('_method', 'PUT');
                formData.append('room_id', form.querySelector('#edit_modal_room_id').value);
                formData.append('full_name', form.querySelector('#edit_modal_full_name').value);
                formData.append('email', form.querySelector('#edit_modal_email').value);
                formData.append('phone', form.querySelector('#edit_modal_phone').value);
                formData.append('location', form.querySelector('#edit_modal_location').value);
                formData.append('check_in', form.querySelector('#edit_modal_check_in').value);
                formData.append('check_out', form.querySelector('#edit_modal_check_out').value);
                formData.append('booking_date', form.querySelector('#edit_modal_booking_date').value);
                formData.append('booking_source', form.querySelector('#edit_modal_booking_source').value);
                formData.append('special_requests', form.querySelector('#edit_modal_special_requests').value);
                formData.append('status', form.querySelector('#edit_modal_status').value);
                
                // Add billing fields if status is confirmed
                const statusValue = form.querySelector('#edit_modal_status').value;
                if (statusValue === 'confirmed') {
                    const amountToPay = form.querySelector('#edit_modal_amount_to_pay');
                    const amountPaid = form.querySelector('#edit_modal_amount_paid');
                    const paymentMethod = form.querySelector('#edit_modal_payment_method');
                    const bankName = form.querySelector('#edit_modal_bank_name');
                    const mobileOperator = form.querySelector('#edit_modal_mobile_operator');
                    
                    const referenceNumber = form.querySelector('#edit_modal_reference_number');
                    
                    if (amountToPay) formData.append('amount_to_pay', amountToPay.value || '');
                    if (amountPaid) formData.append('amount_paid', amountPaid.value || '');
                    if (paymentMethod) formData.append('payment_method', paymentMethod.value || '');
                    if (bankName) formData.append('bank_name', bankName.value || '');
                    if (mobileOperator) formData.append('mobile_operator', mobileOperator.value || '');
                    if (referenceNumber) formData.append('reference_number', referenceNumber.value || '');
                }
                
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                    }
                })
                .then(response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data) {
                        window.location.reload();
                        return;
                    }
                    if (data.success) {
                        showNotification(data.message || 'Booking updated successfully!', 'success');
                        setTimeout(() => {
                            window.closeEditBookingModal();
                            window.location.reload();
                        }, 1500);
                    } else if (data.errors) {
                        Object.keys(data.errors).forEach(key => {
                            const errorEl = document.getElementById('error_edit_' + key.replace('.', '_'));
                            if (errorEl) {
                                errorEl.textContent = data.errors[key][0];
                            }
                        });
                        showNotification('Please fix the form errors before submitting.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    } else {
                        showNotification('An error occurred while updating the booking.', 'error');
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('An error occurred while updating the booking.', 'error');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                });
            });
        }
    });

    // Close modals on overlay click
    document.addEventListener('DOMContentLoaded', function() {
        const viewModal = document.getElementById('viewBookingModal');
        const editModal = document.getElementById('editBookingModal');
        
        if (viewModal) {
            viewModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    window.closeViewBookingModal();
                }
            });
        }
        
        if (editModal) {
            editModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    window.closeEditBookingModal();
                }
            });
        }
    });

    // Close modals on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const viewModal = document.getElementById('viewBookingModal');
            const editModal = document.getElementById('editBookingModal');
            if (viewModal && viewModal.classList.contains('active')) {
                window.closeViewBookingModal();
            }
            if (editModal && editModal.classList.contains('active')) {
                window.closeEditBookingModal();
            }
        }
    });
</script>
@endsection