@extends('layouts.admin')

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

@section('content')
<div class="admin-page-header">
    <div>
        <h1 class="admin-page-title">Billing Management</h1>
        <p class="admin-page-subtitle">Manage all billing records</p>
    </div>
    {{-- <a href="{{ route('admin.billings.create') }}" class="admin-btn admin-btn-primary">
        <i class="fas fa-plus mr-2"></i>Add New Billing
    </a> --}}
</div>

<!-- Search and Filter Form -->
<div class="admin-card" style="margin-bottom: 1.5rem;">
    <form method="GET" action="{{ route('admin.billings.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="Booking ID, Customer Name, Email, or Reference Number">
            </div>
            
            <!-- Date Range -->
            <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>
            
            <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>
            
            <!-- Payment Method Filter -->
            <div class="admin-form-group" style="margin-bottom: 0;">
                <label for="payment_method" class="admin-form-label">
                    <i class="fas fa-credit-card mr-1"></i>Payment Method
                </label>
                <select name="payment_method" id="payment_method" class="admin-form-input">
                    <option value="">All Methods</option>
                    <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="bank" {{ request('payment_method') == 'bank' ? 'selected' : '' }}>Bank</option>
                    <option value="mobile" {{ request('payment_method') == 'mobile' ? 'selected' : '' }}>Mobile</option>
                </select>
            </div>

            <div style="display: flex; gap: 1rem; margin-bottom: 0;">
                <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', 'payment_method', 'date_from', 'date_to']))
                <a href="{{ route('admin.billings.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>

<div class="admin-card">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Room</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount to Pay</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount Paid</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Remaining</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reference</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($billings as $billing)
                <tr>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">{{ $billing->booking->full_name }}</div>
                        <div class="text-sm text-gray-500">{{ $billing->booking->email }}</div>
                    </td>
                    <td class="px-6 py-4">
                        @if($billing->booking->room->room_number)
                        <div class="text-sm font-medium text-gray-900">Room #{{ $billing->booking->room->room_number }}</div>
                        @else
                        <div class="text-sm text-gray-500">N/A</div>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">${{ number_format($billing->amount_to_pay ?? 0, 2) }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">${{ number_format($billing->amount_paid ?? 0, 2) }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $remaining = ($billing->amount_to_pay ?? 0) - ($billing->amount_paid ?? 0);
                        @endphp
                        <div class="text-sm font-medium {{ $remaining > 0 ? 'text-yellow-600' : ($remaining < 0 ? 'text-red-600' : 'text-green-600') }}">
                            ${{ number_format($remaining, 2) }}
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm text-gray-900">{{ $billing->reference_number ?? '-' }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
                            <button type="button" 
                                    onclick="viewBilling({{ $billing->id }})"
                                    class="admin-action-btn admin-action-view" 
                                    title="View Billing"
                                    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>
                            <button type="button" 
                                    onclick="editBilling({{ $billing->id }})"
                                    class="admin-action-btn admin-action-edit" 
                                    title="Edit Billing"
                                    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>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center">
                        <div style="text-align: center;">
                            <i class="fas fa-money-bill-wave" style="font-size: 48px; color: #d1d5db; margin-bottom: 1rem;"></i>
                            <p class="text-gray-500 text-lg">No billing records found</p>
                            <p class="text-gray-400 text-sm mt-2">Create a billing record to get started</p>
                        </div>
                    </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 ($billings->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="{{ $billings->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 {{ $billings->firstItem() ?? 0 }}-{{ $billings->lastItem() ?? 0 }} of {{ $billings->total() }} {{ $billings->total() == 1 ? 'billing' : 'billings' }}
        </span>

        {{-- Next Page Link --}}
        @if ($billings->hasMorePages())
            <a href="{{ $billings->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>

@include('admin.billings.modals')

<script>
    // Pass Blade values to JavaScript
    window.billingConfig = {
        logoUrl: '{{ asset("assets/logo.png") }}',
        billingIndexRoute: '{{ route("admin.billings.index") }}'
    };

    let currentBillingData = null;
    let billingItemIndex = 0;

    // Notification function
    function showNotification(message, type = 'success') {
        const existing = document.getElementById('billingNotification');
        if (existing) existing.remove();

        const notification = document.createElement('div');
        notification.id = 'billingNotification';
        notification.style.cssText = `
            position: fixed; top: 20px; right: 20px; z-index: 10000;
            background: ${type === 'warning' ? '#fef3c7' : type === 'error' ? '#fee2e2' : '#d1fae5'};
            color: ${type === 'warning' ? '#92400e' : type === 'error' ? '#991b1b' : '#065f46'};
            padding: 16px 20px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 400px;
            border-left: 4px solid ${type === 'warning' ? '#f59e0b' : type === 'error' ? '#ef4444' : '#10b981'};
        `;

        const icon = type === 'warning' ? 'fa-exclamation-triangle' : type === 'error' ? 'fa-times-circle' : 'fa-check-circle';
        notification.innerHTML = `
            <i class="fas ${icon}" style="font-size: 20px;"></i>
            <div style="flex: 1; font-size: 14px; font-weight: 500;">${message}</div>
            <button onclick="this.parentElement.remove()" style="background: none; border: none; color: inherit; cursor: pointer; padding: 4px;">
                <i class="fas fa-times"></i>
            </button>
        `;

        document.body.appendChild(notification);
        setTimeout(() => {
            notification.style.animation = 'slideOutRight 0.3s ease-out';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    }

    // View Billing Modal
    window.viewBilling = function(billingId) {
        const modal = document.getElementById('viewBillingModal');
        const content = document.getElementById('viewBillingContent');
        const footer = document.getElementById('viewBillingFooter');
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        content.innerHTML = '<div style="text-align: center; padding: 2rem;"><i class="fas fa-spinner fa-spin" style="font-size: 32px;"></i><p>Loading...</p></div>';
        
        fetch(`/admin/billings/${billingId}`, {
            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.billing) {
                currentBillingData = data.billing;
                const billing = data.billing;
                const booking = billing.booking;
                const room = booking.room;
                
                const checkIn = booking.check_in ? new Date(booking.check_in) : null;
                const checkOut = booking.check_out ? new Date(booking.check_out) : null;
                const nights = checkIn && checkOut ? Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24)) : 1;
                const roomCost = parseFloat(room.price || 0) * nights;
                const itemsTotal = billing.items ? billing.items.reduce((sum, item) => sum + (parseFloat(item.amount) * parseInt(item.quantity)), 0) : 0;
                const totalAmount = roomCost + itemsTotal;
                const remaining = parseFloat(billing.amount_to_pay || totalAmount) - parseFloat(billing.amount_paid || 0);
                
                let itemsHtml = '';
                if (billing.items && billing.items.length > 0) {
                    itemsHtml = billing.items.map(item => {
                        const itemDate = item.item_date ? new Date(item.item_date).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '-';
                        return `
                        <tr>
                            <td class="px-4 py-2">${item.description}</td>
                            <td class="px-4 py-2 text-center" style="font-size: 0.875rem; color: #6b7280;">
                                <i class="fas fa-calendar-alt"></i> ${itemDate}
                            </td>
                            <td class="px-4 py-2 text-center">${item.quantity}</td>
                            <td class="px-4 py-2 text-right">$${parseFloat(item.amount).toFixed(2)}</td>
                            <td class="px-4 py-2 text-right">$${(parseFloat(item.amount) * parseInt(item.quantity)).toFixed(2)}</td>
                        </tr>
                    `;
                    }).join('');
                }

                let paymentsHtml = '';
                if (billing.payments && billing.payments.length > 0) {
                    paymentsHtml = `
                        <div style="background: #f9fafb; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; border: 1px solid #e5e7eb;">
                            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #10b981;">
                                <i class="fas fa-history mr-2"></i>Payment History
                            </h3>
                            <table style="width: 100%; border-collapse: collapse;">
                                <thead>
                                    <tr style="border-bottom: 2px solid #e5e7eb;">
                                        <th class="px-4 py-2 text-left" style="font-weight: 600; color: #6b7280; font-size: 0.875rem;">Date</th>
                                        <th class="px-4 py-2 text-left" style="font-weight: 600; color: #6b7280; font-size: 0.875rem;">Method</th>
                                        <th class="px-4 py-2 text-left" style="font-weight: 600; color: #6b7280; font-size: 0.875rem;">Reference</th>
                                        <th class="px-4 py-2 text-right" style="font-weight: 600; color: #6b7280; font-size: 0.875rem;">Amount</th>
                                        <th class="px-4 py-2 text-center" style="font-weight: 600; color: #6b7280; font-size: 0.875rem;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${billing.payments.map(payment => `
                                        <tr style="border-bottom: 1px solid #e5e7eb;">
                                            <td class="px-4 py-2 text-sm">${new Date(payment.payment_date).toLocaleDateString()}</td>
                                            <td class="px-4 py-2 text-sm">${payment.payment_method.toUpperCase()} ${payment.bank_name ? `(${payment.bank_name})` : ''} ${payment.mobile_operator ? `(${payment.mobile_operator})` : ''}</td>
                                            <td class="px-4 py-2 text-sm" style="font-family: monospace;">${payment.reference_number || '-'}</td>
                                            <td class="px-4 py-2 text-right text-sm font-semibold text-green-600">$${parseFloat(payment.amount).toFixed(2)}</td>
                                            <td class="px-4 py-2 text-center">
                                                <a href="/admin/billings/payments/${payment.id}/receipt" class="admin-btn admin-btn-secondary" style="padding: 4px 8px; font-size: 11px;" target="_blank">
                                                    <i class="fas fa-file-pdf mr-1"></i>Receipt
                                                </a>
                                            </td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    `;
                }
                
                content.innerHTML = `
                    <div style="padding: 1rem;">
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
                            <div>
                                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--admin-primary);">Customer Information</h3>
                                <div style="margin-bottom: 0.75rem;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem;">Name</label>
                                    <div style="font-size: 1rem; color: #111827;">${booking.full_name}</div>
                                </div>
                                <div style="margin-bottom: 0.75rem;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem;">Email</label>
                                    <div style="font-size: 1rem; color: #111827;">${booking.email}</div>
                                </div>
                                <div style="margin-bottom: 0.75rem;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem;">Phone</label>
                                    <div style="font-size: 1rem; color: #111827;">${booking.phone}</div>
                                </div>
                            </div>
                            <div>
                                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--admin-primary);">Booking Information</h3>
                                <div style="margin-bottom: 0.75rem;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem;">Booking ID</label>
                                    <div style="font-size: 1rem; color: #111827; font-weight: 600;">#${booking.id}</div>
                                </div>
                                <div style="margin-bottom: 0.75rem;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem;">Room</label>
                                    <div style="font-size: 1rem; color: #111827;">${room.name}${room.room_number ? ' (Room #' + room.room_number + ')' : ''}</div>
                                </div>
                                <div style="margin-bottom: 0.75rem;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem;">Check In / Check Out</label>
                                    <div style="font-size: 1rem; color: #111827;">
                                        ${checkIn ? checkIn.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '-'} / 
                                        ${checkOut ? checkOut.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '-'}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div style="background: #f9fafb; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem;">
                            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--admin-primary);">Billing Breakdown</h3>
                            <table style="width: 100%; border-collapse: collapse;">
                                <thead>
                                    <tr style="border-bottom: 2px solid #e5e7eb;">
                                        <th class="px-4 py-2 text-left" style="font-weight: 600; color: #6b7280;">Description</th>
                                        <th class="px-4 py-2 text-center" style="font-weight: 600; color: #6b7280;">Date & Time</th>
                                        <th class="px-4 py-2 text-center" style="font-weight: 600; color: #6b7280;">Qty</th>
                                        <th class="px-4 py-2 text-right" style="font-weight: 600; color: #6b7280;">Unit Price</th>
                                        <th class="px-4 py-2 text-right" style="font-weight: 600; color: #6b7280;">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr style="border-bottom: 1px solid #e5e7eb;">
                                        <td class="px-4 py-2">Room (${nights} night${nights > 1 ? 's' : ''})</td>
                                        <td class="px-4 py-2 text-center" style="color: #6b7280;">-</td>
                                        <td class="px-4 py-2 text-center">${nights}</td>
                                        <td class="px-4 py-2 text-right">$${parseFloat(room.price || 0).toFixed(2)}</td>
                                        <td class="px-4 py-2 text-right">$${roomCost.toFixed(2)}</td>
                                    </tr>
                                    ${itemsHtml}
                                </tbody>
                                <tfoot>
                                    <tr style="border-top: 2px solid #e5e7eb;">
                                        <td colspan="4" class="px-4 py-2 text-right" style="font-weight: 600;">Total Amount:</td>
                                        <td class="px-4 py-2 text-right" style="font-weight: 700; font-size: 1.125rem; color: var(--admin-primary);">$${totalAmount.toFixed(2)}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="px-4 py-2 text-right" style="font-weight: 600;">Amount Paid:</td>
                                        <td class="px-4 py-2 text-right" style="font-weight: 600; color: #10b981;">$${parseFloat(billing.amount_paid || 0).toFixed(2)}</td>
                                    </tr>
                                    <tr style="border-top: 2px solid #e5e7eb;">
                                        <td colspan="4" class="px-4 py-2 text-right" style="font-weight: 700; font-size: 1.125rem;">Remaining Balance:</td>
                                        <td class="px-4 py-2 text-right" style="font-weight: 700; font-size: 1.125rem; color: ${remaining > 0 ? '#f59e0b' : remaining < 0 ? '#ef4444' : '#10b981'};">$${remaining.toFixed(2)}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        ${paymentsHtml}
                        
                        ${!billing.payments || billing.payments.length === 0 ? `
                        ${billing.payment_method ? `
                        <div style="background: #f9fafb; padding: 1.5rem; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 1rem;">
                            <h4 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; color: var(--admin-primary);">
                                <i class="fas fa-credit-card mr-2"></i>Payment Information
                            </h4>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
                                <div>
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">
                                        <i class="fas fa-money-bill-wave mr-1"></i>Payment Method
                                    </label>
                                    <div style="font-size: 1rem; font-weight: 600; color: #111827; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;">
                                        ${billing.payment_method.charAt(0).toUpperCase() + billing.payment_method.slice(1)}
                                    </div>
                                </div>
                                ${billing.bank_name ? `
                                <div>
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">
                                        <i class="fas fa-university mr-1"></i>Bank Name
                                    </label>
                                    <div style="font-size: 1rem; font-weight: 600; color: #111827; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;">
                                        ${billing.bank_name}
                                    </div>
                                </div>
                                ` : ''}
                                ${billing.mobile_operator ? `
                                <div>
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">
                                        <i class="fas fa-mobile-alt mr-1"></i>Mobile Operator
                                    </label>
                                    <div style="font-size: 1rem; font-weight: 600; color: #111827; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb;">
                                        ${billing.mobile_operator}
                                    </div>
                                </div>
                                ` : ''}
                                ${billing.reference_number ? `
                                <div style="grid-column: span 2;">
                                    <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #6b7280; margin-bottom: 0.5rem;">
                                        <i class="fas fa-hashtag mr-1"></i>Reference Number
                                    </label>
                                    <div style="font-size: 1rem; font-weight: 600; color: #111827; padding: 0.5rem; background: white; border-radius: 6px; border: 1px solid #e5e7eb; font-family: monospace;">
                                        ${billing.reference_number}
                                    </div>
                                </div>
                                ` : ''}
                            </div>
                        </div>
                        ` : ''}
                        ` : ''}
                    </div>
                `;
                
                footer.style.display = 'flex';
                const invoiceBtn = document.getElementById('invoiceBtn');
                const receiptBtn = document.getElementById('receiptBtn');
                const payBtn = document.getElementById('recordPaymentBtn');
                const addChargeBtn = document.getElementById('viewAddChargeBtn');
                
                // Update button actions
                if (payBtn) {
                    payBtn.onclick = () => openRecordPaymentModal(billing.id, remaining);
                    payBtn.style.display = remaining > 0 ? 'inline-flex' : 'none';
                }
                
                if (addChargeBtn) {
                    addChargeBtn.onclick = () => openAddChargesModal(billing.id);
                    addChargeBtn.style.display = 'inline-flex';
                }
                
                if (invoiceBtn) {
                    invoiceBtn.style.display = remaining > 0 ? 'inline-flex' : 'none';
                }
                
                if (receiptBtn) {
                    receiptBtn.style.display = parseFloat(billing.amount_paid || 0) > 0 ? 'inline-flex' : 'none';
                }
            }
        })
        .catch(error => {
            console.error('Error:', 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 billing details</p>
                </div>
            `;
        });
    };

    window.closeViewBillingModal = function() {
        const modal = document.getElementById('viewBillingModal');
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
        currentBillingData = null;
        window.location.reload();
    };

    // Edit Billing Modal
    window.editBilling = function(billingId) {
        const modal = document.getElementById('editBillingModal');
        const formContent = document.getElementById('editBillingFormContent');
        const form = document.getElementById('editBillingForm');
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        formContent.innerHTML = '<div style="text-align: center; padding: 2rem;"><i class="fas fa-spinner fa-spin" style="font-size: 32px;"></i><p>Loading...</p></div>';
        
        fetch(`/admin/billings/${billingId}/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.billing) {
                const billing = data.billing;
                const booking = billing.booking;
                const room = booking.room;
                
                const checkIn = booking.check_in ? new Date(booking.check_in) : null;
                const checkOut = booking.check_out ? new Date(booking.check_out) : null;
                const nights = checkIn && checkOut ? Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24)) : 1;
                const roomCost = parseFloat(room.price || 0) * nights;
                
                billingItemIndex = billing.items ? billing.items.length : 0;
                
                let itemsHtml = '';
                if (billing.items && billing.items.length > 0) {
                    itemsHtml = billing.items.map((item, index) => {
                        const itemDateValue = item.item_date ? new Date(item.item_date).toISOString().slice(0, 16) : new Date().toISOString().slice(0, 16);
                        return `
                        <tr data-item-index="${index}" data-item-id="${item.id || ''}">
                            <td class="px-4 py-2">
                                <input type="text" name="items[${index}][description]" value="${item.description}" class="admin-form-input" required readonly style="background-color: #f3f4f6; cursor: not-allowed;">
                            </td>
                            <td class="px-4 py-2">
                                <input type="datetime-local" name="items[${index}][item_date]" value="${itemDateValue}" class="admin-form-input" required readonly style="background-color: #f3f4f6; cursor: not-allowed; width: 180px;">
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" name="items[${index}][quantity]" value="${item.quantity}" class="admin-form-input" min="1" required readonly style="background-color: #f3f4f6; cursor: not-allowed; width: 80px;">
                            </td>
                            <td class="px-4 py-2">
                                <input type="number" name="items[${index}][amount]" value="${item.amount}" class="admin-form-input" step="0.01" min="0" required readonly style="background-color: #f3f4f6; cursor: not-allowed; width: 120px;">
                            </td>
                            <td class="px-4 py-2 text-right item-total">$${(parseFloat(item.amount) * parseInt(item.quantity)).toFixed(2)}</td>
                            <td class="px-4 py-2">
                                <span style="color: #6b7280; font-size: 0.875rem;">
                                    <i class="fas fa-lock" title="Item is read-only"></i>
                                </span>
                            </td>
                        </tr>
                    `;
                    }).join('');
                }
                
                const itemsTotal = billing.items ? billing.items.reduce((sum, item) => sum + (parseFloat(item.amount) * parseInt(item.quantity)), 0) : 0;
                
                formContent.innerHTML = `
                    <div style="margin-bottom: 1.5rem; padding: 1rem; background: #f9fafb; border-radius: 8px;">
                        <h4 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--admin-primary);">
                            <i class="fas fa-file-invoice-dollar mr-2"></i>Billing Summary
                        </h4>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                            <div>
                                <label style="display: block; font-size: 0.875rem; color: #6b7280;">Total Amount to Pay</label>
                                <div style="font-size: 1.25rem; font-weight: 700; color: #111827;">$${(roomCost + itemsTotal).toFixed(2)}</div>
                            </div>
                            <div>
                                <label style="display: block; font-size: 0.875rem; color: #6b7280;">Total Amount Paid</label>
                                <div style="font-size: 1.25rem; font-weight: 700; color: #10b981;">$${parseFloat(billing.amount_paid || 0).toFixed(2)}</div>
                            </div>
                        </div>
                        <p style="font-size: 12px; color: #6b7280; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;">
                            <i class="fas fa-info-circle mr-1"></i> To add new charges or record payments, please use the <strong>View</strong> menu.
                        </p>
                    </div>
                    
                    <div class="admin-form-group">
                        <label for="edit_billing_payment_method" class="admin-form-label">Default Payment Method <span class="required">*</span></label>
                        <select name="payment_method" id="edit_billing_payment_method" required class="admin-form-input">
                            <option value="cash" ${billing.payment_method === 'cash' ? 'selected' : ''}>Cash</option>
                            <option value="bank" ${billing.payment_method === 'bank' ? 'selected' : ''}>Bank</option>
                            <option value="mobile" ${billing.payment_method === 'mobile' ? 'selected' : ''}>Mobile</option>
                        </select>
                        <div id="error_payment_method" class="admin-form-error"></div>
                    </div>
                    
                    <div id="edit_billing_bank_name_section" class="admin-form-group" style="display: ${billing.payment_method === 'bank' ? 'block' : 'none'};">
                        <label for="edit_billing_bank_name" class="admin-form-label">Bank Name</label>
                        <select name="bank_name" id="edit_billing_bank_name" class="admin-form-input">
                            <option value="">-- Select Bank --</option>
                            <option value="NMB" ${billing.bank_name === 'NMB' ? 'selected' : ''}>NMB</option>
                            <option value="CRDB" ${billing.bank_name === 'CRDB' ? 'selected' : ''}>CRDB</option>
                            <option value="NBC" ${billing.bank_name === 'NBC' ? 'selected' : ''}>NBC</option>
                        </select>
                        <div id="error_bank_name" class="admin-form-error"></div>
                    </div>
                    
                    <div id="edit_billing_mobile_operator_section" class="admin-form-group" style="display: ${billing.payment_method === 'mobile' ? 'block' : 'none'};">
                        <label for="edit_billing_mobile_operator" class="admin-form-label">Mobile Operator</label>
                        <select name="mobile_operator" id="edit_billing_mobile_operator" class="admin-form-input">
                            <option value="">-- Select Operator --</option>
                            <option value="MPESA" ${billing.mobile_operator === 'MPESA' ? 'selected' : ''}>MPESA</option>
                            <option value="T-PESA" ${billing.mobile_operator === 'T-PESA' ? 'selected' : ''}>T-PESA</option>
                            <option value="HALOPESA" ${billing.mobile_operator === 'HALOPESA' ? 'selected' : ''}>HALOPESA</option>
                            <option value="YAS" ${billing.mobile_operator === 'YAS' ? 'selected' : ''}>YAS</option>
                        </select>
                        <div id="error_mobile_operator" class="admin-form-error"></div>
                    </div>
                    
                    <div class="admin-form-group">
                        <label for="edit_billing_reference_number" class="admin-form-label">Reference Number</label>
                        <input type="text" name="reference_number" id="edit_billing_reference_number" 
                               class="admin-form-input" value="${billing.reference_number || ''}" 
                               placeholder="Enter payment reference number">
                        <div id="error_reference_number" class="admin-form-error"></div>
                    </div>
                `;
                
                form.action = `/admin/billings/${billingId}`;
                
                // Setup payment method listener
                const paymentMethodSelect = document.getElementById('edit_billing_payment_method');
                const bankSection = document.getElementById('edit_billing_bank_name_section');
                const mobileSection = document.getElementById('edit_billing_mobile_operator_section');
                
                if (paymentMethodSelect) {
                    paymentMethodSelect.addEventListener('change', function() {
                        if (this.value === 'bank') {
                            if (bankSection) bankSection.style.display = 'block';
                            if (mobileSection) mobileSection.style.display = 'none';
                        } else if (this.value === 'mobile') {
                            if (bankSection) bankSection.style.display = 'none';
                            if (mobileSection) mobileSection.style.display = 'block';
                        } else {
                            if (bankSection) bankSection.style.display = 'none';
                            if (mobileSection) mobileSection.style.display = 'none';
                        }
                    });
                }
                
                // Setup form submission
                form.onsubmit = function(e) {
                    e.preventDefault();
                    handleEditBillingSubmit(form, billingId);
                };
            }
        })
        .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 billing data</p>
                </div>
            `;
        });
    };

    window.closeEditBillingModal = function() {
        const modal = document.getElementById('editBillingModal');
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
        billingItemIndex = 0;
    };

    function handleEditBillingSubmit(form, billingId) {
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        document.querySelectorAll('#editBillingModal .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(form);
        formData.append('_method', 'PUT');
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                         form.querySelector('input[name="_token"]')?.value;
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message || 'Billing updated successfully!', 'success');
                window.closeEditBillingModal();
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } 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 billing.', 'error');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('An error occurred while updating the billing. Please try again.', 'error');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    }

    function addBillingItem() {
        const table = document.getElementById('billingItemsTable');
        if (!table) return;
        
        const row = document.createElement('tr');
        row.setAttribute('data-item-index', billingItemIndex);
        const now = new Date();
        const dateTimeLocal = now.toISOString().slice(0, 16);
        row.innerHTML = `
            <td class="px-4 py-2">
                <input type="text" name="items[${billingItemIndex}][description]" class="admin-form-input" placeholder="e.g., Drinks, Food" required>
            </td>
            <td class="px-4 py-2">
                <input type="datetime-local" name="items[${billingItemIndex}][item_date]" value="${dateTimeLocal}" class="admin-form-input" required style="width: 180px;">
            </td>
            <td class="px-4 py-2">
                <input type="number" name="items[${billingItemIndex}][quantity]" value="1" class="admin-form-input" min="1" required style="width: 80px;">
            </td>
            <td class="px-4 py-2">
                <input type="number" name="items[${billingItemIndex}][amount]" class="admin-form-input" step="0.01" min="0" placeholder="0.00" required style="width: 120px;">
            </td>
            <td class="px-4 py-2 text-right item-total">$0.00</td>
            <td class="px-4 py-2">
                <button type="button" onclick="removeBillingItem(${billingItemIndex})" class="admin-btn admin-btn-danger" style="padding: 5px 10px;">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        table.appendChild(row);
        billingItemIndex++;
        setupBillingItemListeners();
    }

    function removeBillingItem(index) {
        const row = document.querySelector(`tr[data-item-index="${index}"]`);
        if (row) {
            row.remove();
            updateTotalAmount();
        }
    }

    function setupBillingItemListeners() {
        const table = document.getElementById('billingItemsTable');
        if (!table) return;
        
        table.querySelectorAll('input[name*="[quantity]"], input[name*="[amount]"]').forEach(input => {
            input.removeEventListener('input', updateItemTotal);
            input.addEventListener('input', updateItemTotal);
        });
    }

    function updateItemTotal(event) {
        const row = event.target.closest('tr');
        if (!row) return;
        
        const quantity = parseFloat(row.querySelector('input[name*="[quantity]"]')?.value || 0);
        const amount = parseFloat(row.querySelector('input[name*="[amount]"]')?.value || 0);
        const totalCell = row.querySelector('.item-total');
        
        if (totalCell) {
            totalCell.textContent = '$' + (quantity * amount).toFixed(2);
        }
        
        updateTotalAmount();
    }

    function updateTotalAmount() {
        const roomCostText = document.querySelector('div[style*="Room Cost"]')?.textContent;
        let roomCost = 0;
        if (roomCostText) {
            const match = roomCostText.match(/\$([\d,]+\.?\d*)/);
            if (match) {
                roomCost = parseFloat(match[1].replace(/,/g, ''));
            }
        }
        
        const itemsTotal = Array.from(document.querySelectorAll('.item-total')).reduce((sum, cell) => {
            const value = parseFloat(cell.textContent.replace('$', '').replace(/,/g, '') || 0);
            return sum + value;
        }, 0);
        
        const totalDisplay = document.getElementById('totalAmountDisplay');
        if (totalDisplay) {
            totalDisplay.textContent = '$' + (roomCost + itemsTotal).toFixed(2);
        }
    }

    // Generate Invoice
    function generateInvoice() {
        if (!currentBillingData) return;
        alert('Invoice generation will be implemented');
    }

    // Generate Receipt
    function generateReceipt() {
        if (!currentBillingData) return;
        alert('Receipt generation will be implemented');
    }

    // Record Payment Functions
    window.openRecordPaymentModal = function(billingId, balance) {
        const modal = document.getElementById('recordPaymentModal');
        const form = document.getElementById('recordPaymentForm');
        const balanceDisplay = document.getElementById('record_outstanding_balance');
        const amountInput = document.getElementById('record_payment_amount');
        
        form.action = `/admin/billings/${billingId}/payment`;
        if (balanceDisplay) balanceDisplay.textContent = '$' + parseFloat(balance).toFixed(2);
        if (amountInput) {
            amountInput.value = parseFloat(balance).toFixed(2);
            amountInput.max = balance;
        }
        
        modal.classList.add('active');
        
        // Setup payment method toggle
        const methodSelect = document.getElementById('record_payment_method');
        const bankSection = document.getElementById('record_bank_name_section');
        const mobileSection = document.getElementById('record_mobile_operator_section');
        
        if (methodSelect) {
            methodSelect.onchange = function() {
                if (this.value === 'bank') {
                    if (bankSection) bankSection.style.display = 'block';
                    if (mobileSection) mobileSection.style.display = 'none';
                } else if (this.value === 'mobile') {
                    if (bankSection) bankSection.style.display = 'none';
                    if (mobileSection) mobileSection.style.display = 'block';
                } else {
                    if (bankSection) bankSection.style.display = 'none';
                    if (mobileSection) mobileSection.style.display = 'none';
                }
            };
        }
        
        form.onsubmit = function(e) {
            e.preventDefault();
            handlePaymentSubmit(form);
        };
    };

    window.closeRecordPaymentModal = function() {
        const modal = document.getElementById('recordPaymentModal');
        modal.classList.remove('active');
    };

    function handlePaymentSubmit(form) {
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
        
        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"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                window.closeRecordPaymentModal();
                // Refresh billing details if view modal is open
                if (currentBillingData) {
                    viewBilling(currentBillingData.id);
                } else {
                    window.location.reload();
                }
            } else {
                showNotification(data.message || 'Payment failed', 'error');
                if (data.errors) {
                    Object.keys(data.errors).forEach(key => {
                        const errorEl = document.getElementById('error_' + key);
                        if (errorEl) errorEl.textContent = data.errors[key][0];
                    });
                }
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('An error occurred during payment', 'error');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    }

    // Add Additional Charges Functions
    window.openAddChargesModal = function(billingId) {
        const modal = document.getElementById('addChargesModal');
        const form = document.getElementById('addChargesForm');
        
        form.action = `/admin/billings/${billingId}/charges`;
        form.reset();
        
        // Reset date to current time
        document.getElementById('charge_date').value = new Date().toISOString().slice(0, 16);
        
        modal.classList.add('active');
        
        form.onsubmit = function(e) {
            e.preventDefault();
            handleAddChargesSubmit(form);
        };
    };

    window.closeAddChargesModal = function() {
        const modal = document.getElementById('addChargesModal');
        modal.classList.remove('active');
    };

    function handleAddChargesSubmit(form) {
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Adding...';
        
        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"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                window.closeAddChargesModal();
                // Refresh billing details if view modal is open
                if (currentBillingData) {
                    viewBilling(currentBillingData.id);
                } else {
                    window.location.reload();
                }
            } else {
                showNotification(data.message || 'Failed to add charge', 'error');
                if (data.errors) {
                    Object.keys(data.errors).forEach(key => {
                        const errorEl = document.getElementById('error_' + key);
                        if (errorEl) errorEl.textContent = data.errors[key][0];
                    });
                }
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('An error occurred while adding the charge', 'error');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    }

    // Close modals on overlay click
    document.addEventListener('DOMContentLoaded', function() {
        const viewModal = document.getElementById('viewBillingModal');
        const editModal = document.getElementById('editBillingModal');
        
        if (viewModal) {
            viewModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    window.closeViewBillingModal();
                }
            });
        }
        
        if (editModal) {
            editModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    window.closeEditBillingModal();
                }
            });
        }
        
        // Close modals on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                if (viewModal && viewModal.classList.contains('active')) {
                    window.closeViewBillingModal();
                }
                if (editModal && editModal.classList.contains('active')) {
                    window.closeEditBillingModal();
                }
            }
        });
    });
</script>
@endsection