<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Super Admin - Reports & Analytics | DELUXE SYSTEM</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <!-- Date Range Picker -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    
    <style>
        :root {
            --primary-color: #059669;
            --primary-dark: #047857;
            --primary-light: #10b981;
            --primary-soft: #d1fae5;
            --secondary-color: #6b7280;
            --success-color: #10b981;
            --info-color: #3b82f6;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
        }
        
        body {
            background-color: #f3f4f6;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        /* Top Navigation Bar */
        .top-nav {
            background: white;
            box-shadow: 0 2px 10px rgba(5, 150, 105, 0.1);
            padding: 0.75rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 2px solid var(--primary-soft);
        }
        
        .nav-brand {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-brand i {
            font-size: 1.5rem;
        }
        
        .back-to-dashboard {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
            border: none;
            box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
        }
        
        .back-to-dashboard:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
            color: white;
        }
        
        .main-content {
            padding: 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }
        
        .page-header {
            margin-bottom: 2rem;
            border-bottom: 2px solid var(--primary-soft);
            padding-bottom: 1rem;
        }
        
        .page-title {
            color: var(--primary-color);
            font-weight: 700;
            margin: 0;
            text-shadow: 0 2px 4px rgba(5, 150, 105, 0.1);
            font-size: 2rem;
        }
        
        .page-title i {
            color: var(--primary-color);
        }
        
        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
        }
        
        .breadcrumb-item a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .breadcrumb-item a:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }
        
        .filter-section {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid var(--primary-soft);
        }
        
        .filter-section h6 {
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: white;
            border-radius: 1rem;
            padding: 1.25rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid var(--primary-soft);
            transition: all 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(5, 150, 105, 0.2);
        }
        
        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        
        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        
        .icon-revenue { background: linear-gradient(135deg, #059669, #10b981); color: white; }
        .icon-hotels { background: linear-gradient(135deg, #047857, #059669); color: white; }
        .icon-users { background: linear-gradient(135deg, #065f46, #047857); color: white; }
        .icon-renewals { background: linear-gradient(135deg, #10b981, #34d399); color: white; }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.25rem;
        }
        
        .stat-label {
            color: var(--secondary-color);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }
        
        .trend {
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .trend-up { color: var(--success-color); }
        .trend-down { color: var(--danger-color); }
        
        .chart-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .chart-card {
            background: white;
            border-radius: 1rem;
            padding: 1.25rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid var(--primary-soft);
        }
        
        .chart-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .chart-title i {
            color: var(--primary-color);
        }
        
        .chart-container {
            position: relative;
            height: 250px;
            width: 100%;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .metric-card {
            background: white;
            border-radius: 1rem;
            padding: 1.25rem;
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border: 1px solid var(--primary-soft);
            text-align: center;
        }
        
        .metric-value {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.25rem;
        }
        
        .metric-label {
            color: var(--secondary-color);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .report-table {
            background: white;
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid var(--primary-soft);
            margin-bottom: 2rem;
        }
        
        .report-table .card-header {
            background: white;
            border-bottom: 2px solid var(--primary-soft);
            padding: 1rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .report-table .card-header h5 {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
            font-size: 1rem;
        }
        
        .report-table table {
            margin: 0;
        }
        
        .report-table thead th {
            background-color: #f0fdf4;
            border-bottom: 2px solid var(--primary-soft);
            color: var(--primary-dark);
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            padding: 0.75rem 1rem;
        }
        
        .report-table td {
            padding: 0.75rem 1rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--primary-soft);
            font-size: 0.9rem;
        }
        
        .progress {
            height: 4px;
            background-color: #f0fdf4;
            border-radius: 2px;
        }
        
        .progress-bar {
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
            border-radius: 2px;
        }
        
        .badge {
            padding: 0.35rem 0.65rem;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 0.375rem;
        }
        
        .badge-success {
            background-color: #d1fae5;
            color: #065f46;
        }
        
        .badge-warning {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .badge-danger {
            background-color: #fee2e2;
            color: #991b1b;
        }
        
        .badge-secondary {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        .badge-info {
            background-color: #cff3ff;
            color: #0369a1;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            border: none;
            box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(5, 150, 105, 0.3);
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-light);
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-dark);
            color: white;
        }
        
        .dropdown-menu {
            border: 1px solid var(--primary-soft);
            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.1);
            border-radius: 0.5rem;
            padding: 0.5rem 0;
        }
        
        .dropdown-item {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }
        
        .dropdown-item:hover {
            background-color: #f0fdf4;
        }
        
        .dropdown-item i {
            width: 1.25rem;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid var(--primary-soft);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Logout form styling */
        .logout-form {
            display: inline;
        }
        
        .logout-btn {
            background: none;
            border: none;
            color: #6b7280;
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logout-btn:hover {
            color: var(--danger-color);
        }
        
        /* Empty state styling */
        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #6b7280;
        }
        
        .empty-state i {
            font-size: 3rem;
            color: #d1fae5;
            margin-bottom: 1rem;
        }
        
        .empty-state h5 {
            color: #374151;
            margin-bottom: 0.5rem;
        }
        
        .empty-state p {
            margin-bottom: 0;
            font-size: 0.9rem;
        }
        
        /* Currency symbol styling */
        .currency {
            font-weight: 600;
            margin-right: 2px;
        }
        
        /* Hotel Detail Modal Styles */
        .modal-content {
            border: none;
            border-radius: 1rem;
            border: 2px solid var(--primary-soft);
        }
        
        .modal-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            border-radius: 1rem 1rem 0 0;
            padding: 1.25rem;
        }
        
        .modal-header .btn-close {
            filter: brightness(0) invert(1);
        }
        
        .modal-title {
            font-weight: 600;
        }
        
        .modal-body {
            padding: 1.5rem;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .detail-section {
            margin-bottom: 1.5rem;
        }
        
        .detail-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--primary-soft);
        }
        
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        
        .detail-item {
            margin-bottom: 0.75rem;
        }
        
        .detail-label {
            font-size: 0.85rem;
            color: var(--secondary-color);
            margin-bottom: 0.25rem;
        }
        
        .detail-value {
            font-weight: 600;
            color: #1f2937;
        }
        
        .info-box {
            background: #f0fdf4;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            border-left: 4px solid var(--primary-color);
        }
        
        @media (max-width: 1200px) {
            .stats-grid, .metrics-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .chart-row {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 1rem;
            }
            
            .stats-grid, .metrics-grid {
                grid-template-columns: 1fr;
            }
            
            .top-nav {
                padding: 0.75rem 1rem;
            }
            
            .nav-brand span {
                display: none;
            }
        }
        /* 2026 elegance refresh */
        body {
            background:
                radial-gradient(circle at 8% 4%, rgba(16, 185, 129, 0.1), transparent 35%),
                radial-gradient(circle at 96% 9%, rgba(5, 150, 105, 0.08), transparent 32%),
                #f4f8f5;
        }

        .top-nav {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            box-shadow: 0 10px 28px rgba(5, 150, 105, 0.18);
        }

        .page-header,
        .filters-card {
            border-radius: 16px !important;
            border: 1px solid rgba(5, 150, 105, 0.11) !important;
            box-shadow: 0 12px 26px rgba(5, 150, 105, 0.1) !important;
        }

        .report-card,
        .card {
            border-radius: 16px !important;
            border: 1px solid rgba(5, 150, 105, 0.1) !important;
            box-shadow: 0 12px 26px rgba(5, 150, 105, 0.1) !important;
        }

        .table thead th {
            background: #ecfdf5 !important;
            color: #065f46 !important;
        }

        .btn {
            border-radius: 999px;
            font-weight: 600;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('css/admin-elegant-theme.css') }}">
</head>
<body class="super-admin-elegant">
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>

    <!-- Top Navigation Bar (replaces sidebar) -->
    <nav class="top-nav d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center gap-3">
            <!-- Back to Dashboard Button -->
            <a href="{{ route('super.admin.dashboard') }}" class="back-to-dashboard">
                <i class="fas fa-arrow-left"></i>
                <span>Back to Dashboard</span>
            </a>
            
            <!-- Logout Button -->
            <form method="POST" action="{{ route('logout') }}" class="logout-form">
                @csrf
                <button type="submit" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </button>
            </form>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h2 class="page-title">
                    <i class="fas fa-chart-bar me-2"></i>
                    Reports & Analytics
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('super.admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Reports</li>
                    </ol>
                </nav>
            </div>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-2"></i>Export
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" onclick="exportReport('pdf')"><i class="fas fa-file-pdf me-2 text-danger"></i>PDF Report</a></li>
                    <li><a class="dropdown-item" href="#" onclick="exportReport('excel')"><i class="fas fa-file-excel me-2 text-success"></i>Excel Report</a></li>
                    <li><a class="dropdown-item" href="#" onclick="exportReport('csv')"><i class="fas fa-file-csv me-2 text-primary"></i>CSV Export</a></li>
                </ul>
            </div>
        </div>
        
        <!-- Filter Section -->
        <div class="filter-section">
            <form id="reportFilterForm" onsubmit="event.preventDefault(); generateReport();">
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <h6 class="mb-2"><i class="fas fa-calendar me-2"></i>Date Range</h6>
                        <input type="text" class="form-control" id="dateRange" name="dateRange" value="{{ request('date_range', now()->startOfMonth()->format('Y-m-d') . ' - ' . now()->format('Y-m-d')) }}">
                    </div>
                    <div class="col-md-3">
                        <h6 class="mb-2"><i class="fas fa-chart-line me-2"></i>Report Type</h6>
                        <select class="form-select" id="reportType" name="report_type">
                            <option value="summary" {{ request('report_type') == 'summary' ? 'selected' : '' }}>Executive Summary</option>
                            <option value="financial" {{ request('report_type') == 'financial' ? 'selected' : '' }}>Financial Report</option>
                            <option value="subscriptions" {{ request('report_type') == 'subscriptions' ? 'selected' : '' }}>Subscriptions Report</option>
                            <option value="hotels" {{ request('report_type') == 'hotels' ? 'selected' : '' }}>Hotels Performance</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <h6 class="mb-2"><i class="fas fa-filter me-2"></i>Comparison</h6>
                        <select class="form-select" id="comparison" name="comparison">
                            <option value="previous_period" {{ request('comparison') == 'previous_period' ? 'selected' : '' }}>Previous Period</option>
                            <option value="previous_year" {{ request('comparison') == 'previous_year' ? 'selected' : '' }}>Previous Year</option>
                            <option value="no_comparison" {{ request('comparison') == 'no_comparison' ? 'selected' : '' }}>No Comparison</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <h6 class="mb-2">&nbsp;</h6>
                        <button type="submit" class="btn btn-primary w-100" id="generateReportBtn">
                            <i class="fas fa-sync-alt me-2"></i>Generate
                        </button>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-header">
                    <span class="stat-label">Total Revenue</span>
                    <span class="stat-icon icon-revenue"><i class="fas fa-shilling-sign"></i></span>
                </div>
                <div class="stat-value"><span class="currency">UGX</span> {{ number_format($totalRevenue ?? 0) }}</div>
                @if(isset($revenueGrowth))
                <div class="trend {{ $revenueGrowth >= 0 ? 'trend-up' : 'trend-down' }}">
                    <i class="fas fa-arrow-{{ $revenueGrowth >= 0 ? 'up' : 'down' }}"></i>
                    {{ number_format(abs($revenueGrowth), 1) }}% from last period
                </div>
                @endif
            </div>
            
            <div class="stat-card">
                <div class="stat-header">
                    <span class="stat-label">Active Hotels</span>
                    <span class="stat-icon icon-hotels"><i class="fas fa-hotel"></i></span>
                </div>
                <div class="stat-value">{{ number_format($totalHotels ?? 0) }}</div>
                @if(isset($newHotelsCount))
                <div class="trend trend-up">
                    <i class="fas fa-arrow-up"></i> {{ $newHotelsCount }} new this period
                </div>
                @endif
            </div>
            
            <div class="stat-card">
                <div class="stat-header">
                    <span class="stat-label">Total Users</span>
                    <span class="stat-icon icon-users"><i class="fas fa-users"></i></span>
                </div>
                <div class="stat-value">{{ number_format($totalUsers ?? 0) }}</div>
                @if(isset($newUsersCount))
                <div class="trend trend-up">
                    <i class="fas fa-arrow-up"></i> {{ $newUsersCount }} new this period
                </div>
                @endif
            </div>
            
            <div class="stat-card">
                <div class="stat-header">
                    <span class="stat-label">Renewal Rate</span>
                    <span class="stat-icon icon-renewals"><i class="fas fa-sync-alt"></i></span>
                </div>
                <div class="stat-value">{{ number_format($renewalRate ?? 0, 1) }}%</div>
                @if(isset($renewalRateChange))
                <div class="trend {{ $renewalRateChange >= 0 ? 'trend-up' : 'trend-down' }}">
                    <i class="fas fa-arrow-{{ $renewalRateChange >= 0 ? 'up' : 'down' }}"></i>
                    {{ number_format(abs($renewalRateChange), 1) }}% change
                </div>
                @endif
            </div>
        </div>
        
        <!-- Charts Row -->
        <div class="chart-row">
            <!-- Revenue Chart -->
            <div class="chart-card">
                <div class="chart-title">
                    <i class="fas fa-chart-line"></i>
                    Revenue Trend (UGX)
                </div>
                <div class="chart-container">
                    <canvas id="revenueChart"></canvas>
                </div>
            </div>
            
            <!-- Distribution Chart -->
            <div class="chart-card">
                <div class="chart-title">
                    <i class="fas fa-chart-pie"></i>
                    Revenue by Plan Type (UGX)
                </div>
                <div class="chart-container">
                    <canvas id="distributionChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Metrics Cards -->
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-value"><span class="currency">UGX</span> {{ number_format($averageOrderValue ?? 0) }}</div>
                <div class="metric-label">Average Order Value</div>
                @if(isset($aovChange))
                <div class="trend {{ $aovChange >= 0 ? 'trend-up' : 'trend-down' }}">
                    <i class="fas fa-arrow-{{ $aovChange >= 0 ? 'up' : 'down' }}"></i>
                    {{ number_format(abs($aovChange), 1) }}%
                </div>
                @endif
            </div>
            
            <div class="metric-card">
                <div class="metric-value">{{ number_format($totalBookings ?? 0) }}</div>
                <div class="metric-label">Total Bookings</div>
                @if(isset($bookingsChange))
                <div class="trend {{ $bookingsChange >= 0 ? 'trend-up' : 'trend-down' }}">
                    <i class="fas fa-arrow-{{ $bookingsChange >= 0 ? 'up' : 'down' }}"></i>
                    {{ number_format(abs($bookingsChange), 1) }}%
                </div>
                @endif
            </div>
            
            <div class="metric-card">
                <div class="metric-value">{{ number_format($conversionRate ?? 0, 1) }}%</div>
                <div class="metric-label">Conversion Rate</div>
                @if(isset($conversionChange))
                <div class="trend {{ $conversionChange >= 0 ? 'trend-up' : 'trend-down' }}">
                    <i class="fas fa-arrow-{{ $conversionChange >= 0 ? 'up' : 'down' }}"></i>
                    {{ number_format(abs($conversionChange), 1) }}%
                </div>
                @endif
            </div>
            
            <div class="metric-card">
                <div class="metric-value">{{ number_format($churnRate ?? 0, 1) }}%</div>
                <div class="metric-label">Churn Rate</div>
                @if(isset($churnChange))
                <div class="trend {{ $churnChange <= 0 ? 'trend-up' : 'trend-down' }}">
                    <i class="fas fa-arrow-{{ $churnChange <= 0 ? 'down' : 'up' }}"></i>
                    {{ number_format(abs($churnChange), 1) }}%
                </div>
                @endif
            </div>
        </div>
        
        <!-- Subscription Distribution -->
        <div class="chart-card mb-4">
            <div class="chart-title">
                <i class="fas fa-credit-card"></i>
                Subscription Distribution
            </div>
            <div class="table-responsive">
                <table class="table table-hover" id="subscriptionTable">
                    <thead>
                        <tr>
                            <th>Plan Type</th>
                            <th>Subscribers</th>
                            <th>Revenue (UGX)</th>
                            <th>Percentage</th>
                            <th>Trend</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($subscriptionDistribution ?? [] as $plan)
                        <tr>
                            <td>
                                @php
                                    $planName = $plan->plan_name ?? $plan['plan_name'] ?? 'N/A';
                                    $planLower = strtolower($planName);
                                @endphp
                                @if(in_array($planLower, ['premium', 'platinum']))
                                <span class="badge badge-success">{{ $planName }}</span>
                                @elseif(in_array($planLower, ['standard', 'gold']))
                                <span class="badge badge-warning">{{ $planName }}</span>
                                @elseif(in_array($planLower, ['silver']))
                                <span class="badge badge-secondary">{{ $planName }}</span>
                                @else
                                <span class="badge badge-info">{{ $planName }}</span>
                                @endif
                            </td>
                            <td class="fw-bold">{{ number_format($plan->subscribers ?? $plan['subscribers'] ?? 0) }}</td>
                            <td class="fw-bold" style="color: var(--primary-color);">
                                UGX {{ number_format($plan->revenue ?? $plan['revenue'] ?? 0) }}
                            </td>
                            <td style="min-width: 150px;">
                                @php
                                    $percentage = $plan->percentage ?? $plan['percentage'] ?? 0;
                                @endphp
                                <div class="d-flex align-items-center gap-2">
                                    <span>{{ number_format($percentage, 1) }}%</span>
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar" style="width: {{ $percentage }}%"></div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @php
                                    $growth = $plan->growth ?? $plan['growth'] ?? 0;
                                @endphp
                                @if($growth > 0)
                                <span class="trend-up"><i class="fas fa-arrow-up"></i> {{ number_format($growth, 1) }}%</span>
                                @elseif($growth < 0)
                                <span class="trend-down"><i class="fas fa-arrow-down"></i> {{ number_format(abs($growth), 1) }}%</span>
                                @else
                                <span class="text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4">
                                <div class="empty-state">
                                    <i class="fas fa-chart-pie fa-3x mb-2"></i>
                                    <h5>No Subscription Data</h5>
                                    <p class="mb-0">No subscription data available for the selected period</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Top Hotels Table -->
        <div class="report-table">
            <div class="card-header">
                <h5><i class="fas fa-trophy me-2" style="color: #fbbf24;"></i>Top Performing Hotels</h5>
                <a href="{{ route('super.admin.hotels.index') }}" class="btn btn-sm btn-outline-primary">View All Hotels</a>
            </div>
            <div class="table-responsive">
                <table class="table" id="hotelsTable">
                    <thead>
                        <tr>
                            <th>Hotel Name</th>
                            <th>Location</th>
                            <th>Revenue (UGX)</th>
                            <th>Bookings</th>
                            <th>Occupancy</th>
                            <th>Plan</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($topHotels ?? [] as $hotel)
                        <tr>
                            <td>
                                <div class="fw-bold">{{ $hotel->name ?? 'N/A' }}</div>
                                <small class="text-muted">ID: {{ $hotel->id ?? 'N/A' }}</small>
                            </td>
                            <td>{{ $hotel->city ?? 'N/A' }}, {{ $hotel->country ?? 'N/A' }}</td>
                            <td class="fw-bold" style="color: var(--primary-color);">
                                UGX {{ number_format($hotel->total_revenue ?? $hotel->revenue ?? 0) }}
                            </td>
                            <td>{{ number_format($hotel->total_bookings ?? $hotel->bookings ?? 0) }}</td>
                            <td style="min-width: 100px;">
                                @php
                                    $occupancy = $hotel->occupancy_rate ?? $hotel->occupancy ?? 0;
                                @endphp
                                <div class="d-flex align-items-center gap-2">
                                    <span>{{ number_format($occupancy, 1) }}%</span>
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar" style="width: {{ $occupancy }}%"></div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @php
                                    $plan = strtolower($hotel->subscription_plan ?? $hotel->package ?? $hotel->plan_name ?? 'basic');
                                    $planDisplay = $hotel->subscription_plan ?? $hotel->package ?? $hotel->plan_name ?? 'Basic';
                                @endphp
                                @if(in_array($plan, ['premium', 'platinum']))
                                <span class="badge badge-success">{{ ucfirst($planDisplay) }}</span>
                                @elseif(in_array($plan, ['standard', 'gold']))
                                <span class="badge badge-warning">{{ ucfirst($planDisplay) }}</span>
                                @elseif(in_array($plan, ['silver']))
                                <span class="badge badge-secondary">{{ ucfirst($planDisplay) }}</span>
                                @else
                                <span class="badge badge-info">{{ ucfirst($planDisplay) }}</span>
                                @endif
                            </td>
                            <td>
                                @php
                                    $status = strtolower($hotel->status ?? 'inactive');
                                    $statusDisplay = $hotel->status ?? 'Inactive';
                                @endphp
                                @if($status == 'active')
                                <span class="badge badge-success">{{ ucfirst($statusDisplay) }}</span>
                                @elseif($status == 'trial')
                                <span class="badge badge-info">{{ ucfirst($statusDisplay) }}</span>
                                @elseif($status == 'suspended')
                                <span class="badge badge-warning">{{ ucfirst($statusDisplay) }}</span>
                                @else
                                <span class="badge badge-danger">{{ ucfirst($statusDisplay) }}</span>
                                @endif
                            </td>
                            <td>
                                @if(isset($hotel->id))
                                <button class="btn btn-sm btn-outline-primary" onclick="viewHotelDetails({{ $hotel->id }})">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @else
                                <button class="btn btn-sm btn-outline-secondary" disabled>
                                    <i class="fas fa-eye"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                <div class="empty-state">
                                    <i class="fas fa-hotel fa-3x mb-2"></i>
                                    <h5>No Hotel Data</h5>
                                    <p class="mb-0">No hotel data available for the selected period</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Recent Activity -->
        <div class="report-table">
            <div class="card-header">
                <h5><i class="fas fa-history me-2"></i>Recent Activity</h5>
            </div>
            <div class="table-responsive">
                <table class="table" id="activityTable">
                    <thead>
                        <tr>
                            <th>Date/Time</th>
                            <th>User</th>
                            <th>Action</th>
                            <th>Details</th>
                            <th>IP Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentActivities ?? [] as $activity)
                        <tr>
                            <td>{{ $activity->created_at ? $activity->created_at->format('Y-m-d H:i') : 'N/A' }}</td>
                            <td>{{ $activity->user->name ?? $activity->user->first_name ?? 'System' }}</td>
                            <td>
                                <span class="badge badge-success">{{ $activity->action ?? 'N/A' }}</span>
                            </td>
                            <td>{{ $activity->details ?? $activity->description ?? 'N/A' }}</td>
                            <td><code>{{ $activity->ip_address ?? 'N/A' }}</code></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4">
                                <div class="empty-state">
                                    <i class="fas fa-history fa-3x mb-2"></i>
                                    <h5>No Recent Activity</h5>
                                    <p class="mb-0">No activity logs available for the selected period</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Hotel Detail Modal -->
    <div class="modal fade" id="hotelDetailModal" tabindex="-1" aria-labelledby="hotelDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="hotelDetailModalLabel">
                        <i class="fas fa-hotel me-2"></i>
                        Hotel Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="hotelDetailContent">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3">Loading hotel details...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <a href="#" id="viewFullHotelBtn" class="btn btn-primary" target="_blank">
                        <i class="fas fa-external-link-alt me-2"></i>View Full Details
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <!-- Moment.js -->
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <!-- Date Range Picker -->
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        $(document).ready(function() {
            // Initialize Date Range Picker
            $('#dateRange').daterangepicker({
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                ranges: {
                   'Today': [moment(), moment()],
                   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                   'This Month': [moment().startOf('month'), moment().endOf('month')],
                   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            });
            
            // Safely initialize DataTables with error handling
            initializeDataTables();
            
            // Initialize Charts with real data
            initializeCharts();
        });
        
        function initializeDataTables() {
            try {
                // Check if hotels table exists and has data rows
                if ($('#hotelsTable').length) {
                    const hasDataRows = $('#hotelsTable tbody tr').length > 0 && 
                                       $('#hotelsTable tbody tr:first td').length > 1 && 
                                       !$('#hotelsTable tbody tr td[colspan]').length;
                    
                    if (hasDataRows) {
                        // Initialize DataTable with full features
                        $('#hotelsTable').DataTable({
                            pageLength: 10,
                            order: [[2, 'desc']], // Sort by revenue (index 2)
                            language: {
                                search: "_INPUT_",
                                searchPlaceholder: "Search hotels...",
                                emptyTable: "No hotel data available",
                                zeroRecords: "No matching hotels found",
                                info: "Showing _START_ to _END_ of _TOTAL_ hotels",
                                infoEmpty: "Showing 0 to 0 of 0 hotels",
                                infoFiltered: "(filtered from _MAX_ total hotels)",
                                lengthMenu: "Show _MENU_ hotels",
                                paginate: {
                                    first: "First",
                                    last: "Last",
                                    next: "Next",
                                    previous: "Previous"
                                }
                            },
                            columnDefs: [
                                { targets: [0,1,2,3,4,5,6,7], orderable: true },
                                { targets: 7, orderable: false, searchable: false } // Actions column not searchable
                            ],
                            responsive: true,
                            autoWidth: false,
                            destroy: true // Allow reinitialization
                        });
                    } else {
                        // If no data, add empty state row (already in HTML)
                        console.log('No hotel data available, using static empty state');
                    }
                }
                
                // Initialize Subscription Table if it has data
                if ($('#subscriptionTable').length) {
                    const hasSubData = $('#subscriptionTable tbody tr').length > 0 && 
                                      $('#subscriptionTable tbody tr:first td').length > 1 &&
                                      !$('#subscriptionTable tbody tr td[colspan]').length;
                    
                    if (hasSubData) {
                        $('#subscriptionTable').DataTable({
                            pageLength: 10,
                            searching: false,
                            ordering: true,
                            info: false,
                            paging: true,
                            lengthChange: false,
                            language: {
                                emptyTable: "No subscription data available",
                                zeroRecords: "No subscription data available"
                            },
                            destroy: true
                        });
                    }
                }
                
                // Initialize Activity Table if it has data
                if ($('#activityTable').length) {
                    const hasActivityData = $('#activityTable tbody tr').length > 0 && 
                                           $('#activityTable tbody tr:first td').length > 1 &&
                                           !$('#activityTable tbody tr td[colspan]').length;
                    
                    if (hasActivityData) {
                        $('#activityTable').DataTable({
                            pageLength: 10,
                            order: [[0, 'desc']], // Sort by date descending
                            language: {
                                search: "_INPUT_",
                                searchPlaceholder: "Search activities...",
                                emptyTable: "No recent activity",
                                zeroRecords: "No matching activities found"
                            },
                            destroy: true
                        });
                    }
                }
                
            } catch (error) {
                console.error('DataTables initialization error:', error);
                // Fallback: just show the tables without DataTables features
                $('.table').each(function() {
                    $(this).removeClass('dataTable').css('width', '100%');
                });
            }
        }
        
        function initializeCharts() {
            try {
                // Get chart data from PHP
                const chartData = @json($chartData ?? null);
                
                if (chartData && chartData.revenueLabels && chartData.revenueData) {
                    initRevenueChart(chartData.revenueLabels, chartData.revenueData);
                } else {
                    // Use default data for demonstration
                    initRevenueChart(
                        ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                        [6500000, 7200000, 8500000, 7800000, 9200000, 10500000]
                    );
                }
                
                if (chartData && chartData.distributionLabels && chartData.distributionData) {
                    initDistributionChart(chartData.distributionLabels, chartData.distributionData);
                } else {
                    // Use default data for demonstration
                    initDistributionChart(
                        ['Premium', 'Standard', 'Basic'],
                        [4500000, 3000000, 1500000]
                    );
                }
            } catch (error) {
                console.error('Chart initialization error:', error);
            }
        }
        
        function initRevenueChart(labels, data) {
            const ctx = document.getElementById('revenueChart').getContext('2d');
            
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Revenue (UGX)',
                        data: data,
                        borderColor: '#059669',
                        backgroundColor: 'rgba(5, 150, 105, 0.1)',
                        borderWidth: 2,
                        pointBackgroundColor: '#059669',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'UGX ' + context.raw.toLocaleString();
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: '#f0fdf4'
                            },
                            ticks: {
                                callback: function(value) {
                                    return 'UGX ' + (value / 1000).toFixed(0) + 'k';
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }
        
        function initDistributionChart(labels, data) {
            const ctx = document.getElementById('distributionChart').getContext('2d');
            
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: [
                            '#059669',
                            '#10b981',
                            '#34d399',
                            '#6ee7b7',
                            '#a7f3d0'
                        ],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 12,
                                padding: 15,
                                font: {
                                    size: 11
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': UGX ' + context.raw.toLocaleString();
                                }
                            }
                        }
                    },
                    cutout: '65%'
                }
            });
        }
        
        function generateReport() {
            const dateRange = $('#dateRange').val();
            const reportType = $('#reportType').val();
            const comparison = $('#comparison').val();
            
            // Show loading overlay
            $('#loadingOverlay').fadeIn();
            
            // Make AJAX request to get real data
            $.ajax({
                url: '{{ route("super.admin.reports.generate") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    date_range: dateRange,
                    report_type: reportType,
                    comparison: comparison
                },
                success: function(response) {
                    // Update page with new data
                    Swal.fire({
                        icon: 'success',
                        title: 'Report Generated',
                        text: 'The report has been generated successfully. Refreshing page...',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    $('#loadingOverlay').fadeOut();
                    
                    let errorMessage = 'Failed to generate report. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: errorMessage
                    });
                }
            });
        }
        
        function exportReport(format) {
            const dateRange = $('#dateRange').val();
            const reportType = $('#reportType').val();
            
            // Show loading overlay
            $('#loadingOverlay').fadeIn();
            
            // Create download link
            const url = '{{ route("super.admin.reports.export") }}' + 
                '?format=' + format + 
                '&date_range=' + encodeURIComponent(dateRange) + 
                '&report_type=' + reportType;
            
            // Redirect to download URL
            window.location.href = url;
            
            // Hide loading after a short delay
            setTimeout(function() {
                $('#loadingOverlay').fadeOut();
            }, 3000);
        }
        
        function viewHotelDetails(hotelId) {
            if (!hotelId) return;
            
            // Show modal
            $('#hotelDetailModal').modal('show');
            
            // Show loading in modal
            $('#hotelDetailContent').html(`
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3">Loading hotel details...</p>
                </div>
            `);
            
            // Update view full details button
            $('#viewFullHotelBtn').attr('href', '/super-admin/hotels/' + hotelId);
            
            // Fetch hotel details via AJAX
            $.ajax({
                url: '/super-admin/hotels/' + hotelId + '/data',
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        const hotel = response;
                        
                        let statusClass = 'badge-success';
                        if (hotel.status === 'trial') statusClass = 'badge-info';
                        else if (hotel.status === 'suspended') statusClass = 'badge-warning';
                        else if (hotel.status === 'cancelled') statusClass = 'badge-danger';
                        
                        let content = `
                            <div class="info-box mb-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0" style="color: var(--primary-color);">${hotel.name || 'N/A'}</h5>
                                    <span class="badge ${statusClass}">${ucfirst(hotel.status || 'N/A')}</span>
                                </div>
                                <p class="text-muted mb-0 mt-2">${hotel.email || 'N/A'} | ${hotel.phone || 'N/A'}</p>
                            </div>
                            
                            <div class="detail-section">
                                <h6 class="detail-title">Hotel Information</h6>
                                <div class="detail-grid">
                                    <div class="detail-item">
                                        <div class="detail-label">Address</div>
                                        <div class="detail-value">${hotel.address || 'N/A'}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">City/Country</div>
                                        <div class="detail-value">${hotel.city || 'N/A'}, ${hotel.country || 'N/A'}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Package</div>
                                        <div class="detail-value">${ucfirst(hotel.package || 'N/A')}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Billing Cycle</div>
                                        <div class="detail-value">${ucfirst(hotel.billing_cycle || 'N/A')}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Monthly Price</div>
                                        <div class="detail-value">UGX ${new Intl.NumberFormat().format(hotel.monthly_price || 0)}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Total Paid</div>
                                        <div class="detail-value">UGX ${new Intl.NumberFormat().format(hotel.total_paid || 0)}</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="detail-section">
                                <h6 class="detail-title">Usage Statistics</h6>
                                <div class="detail-grid">
                                    <div class="detail-item">
                                        <div class="detail-label">Max Rooms</div>
                                        <div class="detail-value">${hotel.max_rooms || 0}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Rooms Used</div>
                                        <div class="detail-value">${hotel.room_count || 0}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Max Users</div>
                                        <div class="detail-value">${hotel.max_users || 0}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Users Created</div>
                                        <div class="detail-value">${hotel.user_count || 0}</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="detail-section">
                                <h6 class="detail-title">Subscription Dates</h6>
                                <div class="detail-grid">
                                    <div class="detail-item">
                                        <div class="detail-label">Created</div>
                                        <div class="detail-value">${hotel.created_at || 'N/A'}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Trial Ends</div>
                                        <div class="detail-value">${hotel.trial_ends_at || 'N/A'}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Subscription Starts</div>
                                        <div class="detail-value">${hotel.subscription_starts_at || 'N/A'}</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">Subscription Ends</div>
                                        <div class="detail-value">${hotel.subscription_ends_at || 'N/A'}</div>
                                    </div>
                                </div>
                            </div>
                        `;
                        
                        if (hotel.subscription) {
                            content += `
                                <div class="detail-section">
                                    <h6 class="detail-title">Current Subscription</h6>
                                    <div class="detail-grid">
                                        <div class="detail-item">
                                            <div class="detail-label">Subscription #</div>
                                            <div class="detail-value">${hotel.subscription.subscription_number || 'N/A'}</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">Plan</div>
                                            <div class="detail-value">${ucfirst(hotel.subscription.plan_name || 'N/A')}</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">Price</div>
                                            <div class="detail-value">UGX ${new Intl.NumberFormat().format(hotel.subscription.plan_price || 0)}</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">Days Remaining</div>
                                            <div class="detail-value">${hotel.subscription.days_remaining !== null ? hotel.subscription.days_remaining + ' days' : 'N/A'}</div>
                                        </div>
                                    </div>
                                </div>
                            `;
                        }
                        
                        $('#hotelDetailContent').html(content);
                    } else {
                        $('#hotelDetailContent').html(`
                            <div class="text-center py-5">
                                <i class="fas fa-exclamation-circle fa-4x text-danger mb-3"></i>
                                <h5>Error Loading Details</h5>
                                <p class="text-muted">Could not load hotel details. Please try again.</p>
                            </div>
                        `);
                    }
                },
                error: function(xhr) {
                    console.error('Error loading hotel details:', xhr);
                    $('#hotelDetailContent').html(`
                        <div class="text-center py-5">
                            <i class="fas fa-exclamation-circle fa-4x text-danger mb-3"></i>
                            <h5>Error Loading Details</h5>
                            <p class="text-muted">Could not load hotel details. Please try again.</p>
                        </div>
                    `);
                }
            });
        }
        
        // Helper function to capitalize first letter
        function ucfirst(string) {
            if (!string) return '';
            return string.charAt(0).toUpperCase() + string.slice(1);
        }
    </script>
</body>
</html>