<!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>Hotels Management · Super Admin · WEPESI HOTEL MANAGEMENT SOULUTION</title>
    
    <!-- External fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Flatpickr for date picking -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    
    <style>
        :root {
            --primary-dark: #1e3f3f;
            --primary-medium: #2a5a5a;
            --primary-light: #3d7a7a;
            --primary-soft: #e8f3f3;
            --accent-gold: #d4a373;
            --sidebar-width: 260px;
            --sidebar-collapsed-width: 80px;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --info: #17a2b8;
            --secondary: #6c757d;
            --light: #f8f9fc;
            --dark: #343a40;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #f0f5f5;
            overflow-x: hidden;
        }

        /* Top Navigation Bar */
        .top-nav {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--primary-soft);
        }

        .nav-brand {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-brand i {
            color: var(--primary-medium);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .back-to-dashboard {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
            color: white;
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
            border: none;
            box-shadow: 0 2px 10px rgba(42, 90, 90, 0.2);
            cursor: pointer;
        }

        .back-to-dashboard:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(42, 90, 90, 0.3);
            color: white;
        }

        .logout-btn {
            background: none;
            border: none;
            color: #6c757d;
            font-size: 0.95rem;
            padding: 0.6rem 1rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-radius: 50px;
        }

        .logout-btn:hover {
            background: #f8f9fa;
            color: var(--danger);
        }

        .main-content {
            padding: 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .page-header h1 {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin: 0;
        }

        .page-header h1 small {
            font-size: 0.9rem;
            font-weight: 400;
            color: #6c757d;
            display: block;
            margin-top: 5px;
        }

        .header-actions {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .btn-sm {
            padding: 8px 16px;
            font-size: 0.85rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
            color: white;
            box-shadow: 0 4px 15px rgba(42, 90, 90, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(42, 90, 90, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #1cc88a, #169b6b);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(28, 200, 138, 0.3);
        }

        .btn-danger {
            background: linear-gradient(135deg, #e74a3b, #c82333);
            color: white;
        }

        .btn-outline-primary {
            background: transparent;
            border: 2px solid var(--primary-medium);
            color: var(--primary-dark);
        }

        .btn-outline-primary:hover {
            background: var(--primary-medium);
            color: white;
        }

        .btn-outline-danger {
            background: transparent;
            border: 2px solid var(--danger);
            color: var(--danger);
        }

        .btn-outline-danger:hover {
            background: var(--danger);
            color: white;
        }

        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            border-left: 4px solid var(--primary-medium);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .stat-card-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary-dark);
            line-height: 1.2;
        }

        .stat-icon {
            font-size: 3rem;
            color: rgba(42, 90, 90, 0.1);
        }

        .filter-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .filter-group {
            margin-bottom: 15px;
        }

        .filter-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--primary-dark);
            font-size: 0.9rem;
        }

        .filter-group select,
        .filter-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            font-size: 0.95rem;
            transition: all 0.3s;
            background: #f8f9fa;
        }

        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: var(--primary-medium);
            box-shadow: 0 0 0 3px rgba(42, 90, 90, 0.1);
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }

        .table-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }

        .table-responsive {
            overflow-x: auto;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            text-align: left;
            padding: 15px;
            background: var(--primary-soft);
            color: var(--primary-dark);
            font-weight: 600;
            font-size: 0.9rem;
            border-bottom: 2px solid #d0e0e0;
        }

        .table td {
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            color: #333;
        }

        .table tbody tr:hover {
            background: var(--primary-soft);
        }

        .hotel-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .hotel-logo {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--primary-soft), #d0e8e8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--primary-dark);
            font-size: 1rem;
            text-transform: uppercase;
        }

        .hotel-details {
            line-height: 1.4;
        }

        .hotel-name {
            font-weight: 600;
            color: #333;
            text-decoration: none;
            cursor: pointer;
        }

        .hotel-name:hover {
            color: var(--primary-medium);
        }

        .hotel-city {
            font-size: 0.85rem;
            color: #6c757d;
        }

        .badge {
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
        }

        .badge-silver { background: #6c757d; color: white; }
        .badge-gold { background: #ffc107; color: #333; }
        .badge-platinum { background: #0d6efd; color: white; }
        .badge-custom { background: #20c997; color: white; }
        .badge-active { background: #28a745; color: white; }
        .badge-trial { background: #ffc107; color: #333; }
        .badge-suspended { background: #dc3545; color: white; }
        .badge-cancelled { background: #6c757d; color: white; }
        .badge-warning { background: #fd7e14; color: white; }
        .badge-info { background: #17a2b8; color: white; }
        .badge-expired { background: #6c757d; color: white; }

        .action-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .btn-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }

        .btn-icon:hover {
            transform: translateY(-2px);
        }

        .btn-icon.view { background: var(--info); }
        .btn-icon.edit { background: var(--primary-medium); }
        .btn-icon.subscription { background: var(--warning); color: #333; }
        .btn-icon.users { background: var(--success); }
        .btn-icon.delete { background: var(--danger); }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .modal.show {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 24px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalSlideIn 0.3s ease;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        }

        .modal-content.large {
            max-width: 800px;
        }

        .modal-content.small {
            max-width: 400px;
        }

        @keyframes modalSlideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            padding: 25px 30px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            background: white;
            border-radius: 24px 24px 0 0;
            z-index: 10;
        }

        .modal-header h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin: 0;
        }

        .modal-header h2 small {
            font-size: 0.9rem;
            font-weight: 400;
            color: #6c757d;
            display: block;
            margin-top: 5px;
        }

        .modal-close {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--primary-soft);
            border: none;
            color: var(--primary-dark);
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .modal-close:hover {
            background: var(--primary-medium);
            color: white;
            transform: rotate(90deg);
        }

        .modal-body {
            padding: 30px;
        }

        .modal-footer {
            padding: 20px 30px;
            border-top: 1px solid #e9ecef;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            position: sticky;
            bottom: 0;
            background: white;
            border-radius: 0 0 24px 24px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group.full-width {
            grid-column: span 2;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--primary-dark);
            font-size: 0.9rem;
        }

        .form-group label i {
            margin-right: 5px;
            color: var(--primary-medium);
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            font-size: 0.95rem;
            transition: all 0.3s;
            background: #f8f9fa;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-medium);
            box-shadow: 0 0 0 3px rgba(42, 90, 90, 0.1);
            background: white;
        }

        .form-check {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .form-check-input {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .form-check-label {
            font-weight: 400 !important;
            margin-bottom: 0 !important;
            cursor: pointer;
        }

        .alert {
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }

        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }

        .alert-warning {
            background: #fff3cd;
            color: #856404;
            border-left: 4px solid #ffc107;
        }

        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border-left: 4px solid #17a2b8;
        }

        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.8);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

        .loading-overlay.show {
            display: flex;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-medium);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state i {
            font-size: 4rem;
            color: var(--primary-soft);
            margin-bottom: 20px;
        }

        .empty-state h3 {
            font-size: 1.5rem;
            color: var(--primary-dark);
            margin-bottom: 10px;
        }

        .empty-state p {
            color: #6c757d;
            margin-bottom: 20px;
        }

        .package-info-card {
            background: linear-gradient(135deg, var(--primary-soft), white);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 25px;
            border: 2px solid var(--primary-medium);
        }

        .package-info-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .package-info-title i {
            color: var(--accent-gold);
        }

        .package-limits {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 15px;
        }

        .package-limit-item {
            text-align: center;
            padding: 10px;
            background: white;
            border-radius: 12px;
        }

        .package-limit-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-dark);
        }

        .package-limit-label {
            font-size: 0.85rem;
            color: #6c757d;
        }

        .package-modules {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .package-module-badge {
            background: white;
            padding: 5px 15px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid var(--primary-medium);
            color: var(--primary-dark);
        }

        .package-module-badge i {
            color: var(--success);
            margin-right: 5px;
        }

        .package-features {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed var(--primary-medium);
        }

        .package-feature-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--accent-gold);
            color: var(--primary-dark);
            padding: 5px 15px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .package-feature-tag i {
            color: var(--success);
        }

        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .pagination .page-link {
            padding: 8px 12px;
            margin: 0 3px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            color: var(--primary-dark);
            text-decoration: none;
        }

        .pagination .active .page-link {
            background: var(--primary-medium);
            color: white;
            border-color: var(--primary-medium);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
        }

        .stat-item .value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-dark);
        }

        .stat-item .label {
            font-size: 0.85rem;
            color: #6c757d;
        }

        @media (max-width: 1200px) {
            .stats-row {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .filter-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .main-content {
                padding: 1rem;
            }
            
            .stats-row {
                grid-template-columns: 1fr;
            }
            
            .filter-grid {
                grid-template-columns: 1fr;
            }
            
            .page-header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }
            
            .top-nav {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem;
            }
            
            .nav-actions {
                width: 100%;
                justify-content: space-between;
            }
        }
        /* 2026 elegance refresh */
        body {
            background:
                radial-gradient(circle at 10% 3%, rgba(16, 185, 129, 0.09), transparent 35%),
                radial-gradient(circle at 93% 8%, rgba(5, 150, 105, 0.08), transparent 32%),
                #f4f8f5;
        }

        .navbar,
        .top-nav {
            box-shadow: 0 10px 28px rgba(5, 150, 105, 0.2);
        }

        .page-header {
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(5, 150, 105, 0.11);
            border-radius: 16px;
            padding: 1.1rem 1.3rem;
            backdrop-filter: blur(6px);
        }

        .card,
        .stat-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">
    <!-- Top Navigation Bar -->
    <nav class="top-nav">
        <div class="nav-actions">
            <!-- 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') }}" style="margin: 0;">
                @csrf
                <button type="submit" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </button>
            </form>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Page Header -->
        <div class="page-header">
            <div>
                <h1>
                    Hotels Management
                    <small>Manage all hotels in the system</small>
                </h1>
            </div>
            <div class="header-actions">
                <a href="{{ route('super.admin.website-assignments.index') }}" class="btn btn-outline-primary" style="text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;">
                    <i class="fas fa-globe"></i>
                    Guest websites
                </a>
                <button onclick="openCreateModal()" class="btn btn-success">
                    <i class="fas fa-plus"></i>
                    Add New Hotel
                </button>
                <button onclick="exportHotels()" class="btn btn-outline-primary">
                    <i class="fas fa-download"></i>
                    Export
                </button>
            </div>
        </div>

        <!-- Alerts Container -->
        <div id="alertContainer"></div>

        <!-- Statistics Cards -->
        <div class="stats-row">
            <div class="stat-card" onclick="filterByStatus('all')">
                <div class="stat-label">Total Hotels</div>
                <div class="stat-card-content">
                    <span class="stat-value" id="totalHotels">{{ $totalHotels ?? 0 }}</span>
                    <i class="fas fa-hotel stat-icon"></i>
                </div>
            </div>
            <div class="stat-card" onclick="filterByStatus('active')">
                <div class="stat-label">Active</div>
                <div class="stat-card-content">
                    <span class="stat-value" id="activeHotels">{{ $activeHotels ?? 0 }}</span>
                    <i class="fas fa-check-circle stat-icon"></i>
                </div>
            </div>
            <div class="stat-card" onclick="filterByStatus('trial')">
                <div class="stat-label">Trial</div>
                <div class="stat-card-content">
                    <span class="stat-value" id="trialHotels">{{ $trialHotels ?? 0 }}</span>
                    <i class="fas fa-clock stat-icon"></i>
                </div>
            </div>
            <div class="stat-card" onclick="filterByStatus('suspended')">
                <div class="stat-label">Suspended</div>
                <div class="stat-card-content">
                    <span class="stat-value" id="suspendedHotels">{{ $suspendedHotels ?? 0 }}</span>
                    <i class="fas fa-ban stat-icon"></i>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="filter-card">
            <form id="filterForm" onsubmit="event.preventDefault(); applyFilters();">
                <div class="filter-grid">
                    <div class="filter-group">
                        <label>Status</label>
                        <select name="status" id="filterStatus">
                            <option value="all">All Status</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="trial" {{ request('status') == 'trial' ? 'selected' : '' }}>Trial</option>
                            <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                            <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Package</label>
                        <select name="package" id="filterPackage">
                            <option value="all">All Packages</option>
                            <option value="silver" {{ request('package') == 'silver' ? 'selected' : '' }}>Silver</option>
                            <option value="gold" {{ request('package') == 'gold' ? 'selected' : '' }}>Gold</option>
                            <option value="platinum" {{ request('package') == 'platinum' ? 'selected' : '' }}>Platinum</option>
                            <option value="custom" {{ request('package') == 'custom' ? 'selected' : '' }}>Custom</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Search</label>
                        <input type="text" name="search" id="filterSearch" placeholder="Name, Email, Phone..." value="{{ request('search') }}">
                    </div>
                    <div class="filter-group">
                        <label>Per Page</label>
                        <select name="per_page" id="filterPerPage">
                            <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15</option>
                            <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                        </select>
                    </div>
                </div>
                <div class="filter-actions">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i>
                        Apply Filters
                    </button>
                    <button type="button" onclick="clearFilters()" class="btn btn-outline-danger">
                        <i class="fas fa-times"></i>
                        Clear
                    </button>
                </div>
            </form>
        </div>

        <!-- Hotels Table -->
        <div class="table-card">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Hotel</th>
                            <th>Contact</th>
                            <th>Package</th>
                            <th>Limits</th>
                            <th>Subscription</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="hotelsTableBody">
                        @forelse($hotels ?? [] as $hotel)
                        <tr id="hotel-row-{{ $hotel->id }}">
                            <td>
                                <div class="hotel-info">
                                    <div class="hotel-logo">
                                        {{ substr($hotel->name, 0, 2) }}
                                    </div>
                                    <div class="hotel-details">
                                        <a href="#" onclick="openViewModal({{ $hotel->id }}); return false;" class="hotel-name">
                                            {{ $hotel->name }}
                                        </a>
                                        <div class="hotel-city">{{ $hotel->city ?? 'N/A' }}, {{ $hotel->country ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                {{ $hotel->email }}<br>
                                <small>{{ $hotel->phone ?? 'N/A' }}</small>
                            </td>
                            <td>
                                <span class="badge badge-{{ $hotel->package ?? 'silver' }}">
                                    {{ ucfirst($hotel->package ?? 'silver') }}
                                </span>
                                <br>
                                <small>{{ number_format($hotel->monthly_price ?? 150000) }} UGX</small>
                            </td>
                            <td>
                                <small>Rooms: {{ $hotel->max_rooms ?? 20 }}</small><br>
                                <small>Users: {{ $hotel->max_users ?? 2 }}</small>
                            </td>
                            <td>
                                @php
                                    $now = \Carbon\Carbon::now();
                                @endphp
                                @if($hotel->trial_ends_at && $now->lt($hotel->trial_ends_at))
                                    <span class="badge badge-warning">Trial</span>
                                    <br>
                                    <small>{{ $now->diffInDays($hotel->trial_ends_at) }} days left</small>
                                @elseif($hotel->subscription_ends_at && $now->lt($hotel->subscription_ends_at))
                                    <span class="badge badge-success">Active</span>
                                    <br>
                                    <small>Until {{ \Carbon\Carbon::parse($hotel->subscription_ends_at)->format('d M Y') }}</small>
                                    @if($now->diffInDays($hotel->subscription_ends_at) <= 7)
                                        <br><span class="badge badge-warning">{{ $now->diffInDays($hotel->subscription_ends_at) }} days left</span>
                                    @endif
                                @else
                                    <span class="badge badge-expired">Expired</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-{{ $hotel->status ?? 'active' }}">
                                    {{ ucfirst($hotel->status ?? 'active') }}
                                </span>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <button onclick="openViewModal({{ $hotel->id }})" class="btn-icon view" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button onclick="openEditModal({{ $hotel->id }})" class="btn-icon edit" title="Edit Hotel">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button onclick="confirmDelete({{ $hotel->id }})" class="btn-icon delete" title="Delete Hotel">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr id="emptyStateRow">
                            <td colspan="7">
                                <div class="empty-state">
                                    <i class="fas fa-hotel"></i>
                                    <h3>No Hotels Found</h3>
                                    <p>Get started by adding your first hotel.</p>
                                    <button onclick="openCreateModal()" class="btn btn-primary">
                                        <i class="fas fa-plus"></i>
                                        Add Hotel
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(($hotels ?? collect()) instanceof \Illuminate\Pagination\LengthAwarePaginator && $hotels->hasPages())
            <div class="pagination">
                {{ $hotels->links() }}
            </div>
            @endif
        </div>
    </main>

    <!-- Logout Form -->
    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner"></div>
    </div>

    <!-- CREATE HOTEL MODAL -->
    <div class="modal" id="createHotelModal">
        <div class="modal-content large">
            <div class="modal-header">
                <h2>
                    Add New Hotel
                    <small>Create a new hotel in the system</small>
                </h2>
                <button class="modal-close" onclick="closeCreateModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="createHotelForm" onsubmit="event.preventDefault(); createHotel();" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <!-- Package Info Card (dynamic) -->
                    <div id="packageInfoCard" class="package-info-card" style="display: none;">
                        <div class="package-info-title">
                            <i class="fas" id="packageIcon"></i>
                            <span id="selectedPackageName">Silver Package</span>
                        </div>
                        <div class="package-limits">
                            <div class="package-limit-item">
                                <div class="package-limit-value" id="packageRooms">20</div>
                                <div class="package-limit-label">Max Rooms</div>
                            </div>
                            <div class="package-limit-item">
                                <div class="package-limit-value" id="packageUsers">2</div>
                                <div class="package-limit-label">Max Users</div>
                            </div>
                            <div class="package-limit-item">
                                <div class="package-limit-value" id="packagePrice">150,000</div>
                                <div class="package-limit-label">Price (UGX)</div>
                            </div>
                        </div>
                        <div class="package-modules" id="packageModules">
                            <!-- Modules will be populated here -->
                        </div>
                        <div class="package-features" id="packageFeatures">
                            <!-- Additional features will be populated here -->
                        </div>
                    </div>

                    <div class="form-grid">
                        <div class="form-group full-width">
                            <label><i class="fas fa-hotel"></i> Hotel Name *</label>
                            <input type="text" name="name" id="hotel_name" class="form-control" required placeholder="e.g., Grand Imperial Hotel">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-envelope"></i> Email *</label>
                            <input type="email" name="email" id="hotel_email" class="form-control" required placeholder="info@hotel.com">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Phone *</label>
                            <input type="text" name="phone" id="hotel_phone" class="form-control" required placeholder="+256 XXX XXX XXX">
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-map-marker-alt"></i> Address *</label>
                            <input type="text" name="address" id="hotel_address" class="form-control" required placeholder="Street address">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-city"></i> City *</label>
                            <input type="text" name="city" id="hotel_city" class="form-control" required placeholder="e.g., Kampala">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-globe"></i> Country</label>
                            <input type="text" name="country" id="hotel_country" class="form-control" value="Uganda" placeholder="Country">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-id-card"></i> License Number</label>
                            <input type="text" name="license_number" class="form-control" placeholder="Business license">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-building"></i> Tax ID</label>
                            <input type="text" name="tax_id" class="form-control" placeholder="VAT/TIN number">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-globe"></i> Website</label>
                            <input type="url" name="website" class="form-control" placeholder="https://...">
                        </div>

                        <div class="form-group full-width">
                            <label><i class="fas fa-paint-brush"></i> Public booking page template *</label>
                            <select name="public_booking_template" class="form-control">
                                <option value="1" selected>1 — Classic luxury</option>
                                <option value="2">2 — Modern minimal</option>
                                <option value="3">3 — Resort / family</option>
                                <option value="4">4 — Boutique / local</option>
                                <option value="5">5 — Lifestyle (yellow + pill booking)</option>
                                <option value="6">6 — Diamond (sidebar layout)</option>
                            </select>
                            <small class="text-muted">Controls which theme guests see when the booking pages are live (same app URL, different layout).</small>
                        </div>
                        
                        <!-- Logo and Check-in/out -->
                        <div class="form-group full-width">
                            <label><i class="fas fa-image"></i> Hotel Logo</label>
                            <input type="file" name="logo" class="form-control" accept="image/*">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-clock"></i> Check-in Time</label>
                            <input type="time" name="check_in_time" class="form-control" value="14:00">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-clock"></i> Check-out Time</label>
                            <input type="time" name="check_out_time" class="form-control" value="12:00">
                        </div>

                        <!-- Package Selection -->
                        <div class="form-group">
                            <label><i class="fas fa-tag"></i> Package *</label>
                            <select name="package" id="create_package" class="form-control" required onchange="updatePackageFields('create')">
                                <option value="silver">Silver (1-20 rooms, 2 users, 150,000 UGX)</option>
                                <option value="gold">Gold (21-40 rooms, 3-5 users, 350,000 UGX)</option>
                                <option value="platinum">Platinum (41-60 rooms, 6-10 users, 500,000 UGX)</option>
                                <option value="custom">Custom (61+ rooms, 11+ users, Custom pricing)</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-door-open"></i> Max Rooms *</label>
                            <input type="number" name="max_rooms" id="create_max_rooms" class="form-control" value="20" required min="1">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-users"></i> Max Users *</label>
                            <input type="number" name="max_users" id="create_max_users" class="form-control" value="2" required min="1">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-money-bill"></i> Monthly Price (UGX) *</label>
                            <input type="number" name="monthly_price" id="create_monthly_price" class="form-control" value="150000" required min="0">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-sync-alt"></i> Billing Cycle *</label>
                            <select name="billing_cycle" class="form-control">
                                <option value="monthly">Monthly</option>
                                <option value="quarterly">Quarterly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-calendar-alt"></i> Trial Ends At</label>
                            <input type="text" name="trial_ends_at" class="form-control datepicker" placeholder="Select date">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-calendar-check"></i> Subscription Ends At</label>
                            <input type="text" name="subscription_ends_at" class="form-control datepicker" placeholder="Select date">
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-toggle-on"></i> Status *</label>
                            <select name="status" class="form-control">
                                <option value="trial">Trial</option>
                                <option value="active">Active</option>
                                <option value="suspended">Suspended</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-puzzle-piece"></i> Enabled Modules</label>
                            <div class="modules-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="rooms" class="form-check-input" id="create_mod_rooms">
                                    <label class="form-check-label" for="create_mod_rooms">Room Management</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="reservations" class="form-check-input" id="create_mod_reservations">
                                    <label class="form-check-label" for="create_mod_reservations">Reservations</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="accounting" class="form-check-input" id="create_mod_accounting">
                                    <label class="form-check-label" for="create_mod_accounting">Accounting</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="front_desk" class="form-check-input" id="create_mod_front_desk">
                                    <label class="form-check-label" for="create_mod_front_desk">Front Desk</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="guests" class="form-check-input" id="create_mod_guests">
                                    <label class="form-check-label" for="create_mod_guests">Guests</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="housekeeping" class="form-check-input" id="create_mod_housekeeping">
                                    <label class="form-check-label" for="create_mod_housekeeping">Housekeeping</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="maintenance" class="form-check-input" id="create_mod_maintenance">
                                    <label class="form-check-label" for="create_mod_maintenance">Maintenance</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="survey" class="form-check-input" id="create_mod_survey">
                                    <label class="form-check-label" for="create_mod_survey">Survey</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="documents" class="form-check-input" id="create_mod_documents">
                                    <label class="form-check-label" for="create_mod_documents">Documents</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="hotel_services" class="form-check-input" id="create_mod_hotel_services">
                                    <label class="form-check-label" for="create_mod_hotel_services">Hotel Services</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="inventory" class="form-check-input" id="create_mod_inventory">
                                    <label class="form-check-label" for="create_mod_inventory">Inventory</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="hr" class="form-check-input" id="create_mod_hr">
                                    <label class="form-check-label" for="create_mod_hr">Human Resource</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="reporting" class="form-check-input" id="create_mod_reporting">
                                    <label class="form-check-label" for="create_mod_reporting">Reporting</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="food_beverage" class="form-check-input" id="create_mod_food_beverage">
                                    <label class="form-check-label" for="create_mod_food_beverage">Food & Beverage</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="modules[]" value="settings" class="form-check-input" id="create_mod_settings" checked disabled>
                                    <label class="form-check-label" for="create_mod_settings">Settings (Always Enabled)</label>
                                </div>
                            </div>
                            <small class="text-muted">Settings module is always enabled for all packages.</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" onclick="closeCreateModal()">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i>
                        Create Hotel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- VIEW HOTEL MODAL -->
    <div class="modal" id="viewHotelModal">
        <div class="modal-content large">
            <div class="modal-header">
                <h2>
                    Hotel Details
                    <small id="viewHotelName"></small>
                </h2>
                <button class="modal-close" onclick="closeViewModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="viewHotelContent">
                <!-- Content will be loaded dynamically -->
                <div class="loading-spinner" style="margin: 40px auto;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" onclick="closeViewModal()">Close</button>
                <button type="button" class="btn btn-primary" onclick="editFromView()">
                    <i class="fas fa-edit"></i>
                    Edit Hotel
                </button>
            </div>
        </div>
    </div>

    <!-- EDIT HOTEL MODAL -->
    <div class="modal" id="editHotelModal">
        <div class="modal-content large">
            <div class="modal-header">
                <h2>
                    Edit Hotel
                    <small id="editHotelName"></small>
                </h2>
                <button class="modal-close" onclick="closeEditModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="editHotelForm" onsubmit="event.preventDefault(); updateHotel();" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="hidden" name="hotel_id" id="editHotelId">
                <div class="modal-body">
                    <div class="form-grid">
                        <div class="form-group full-width">
                            <label><i class="fas fa-hotel"></i> Hotel Name *</label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-envelope"></i> Email *</label>
                            <input type="email" name="email" id="edit_email" class="form-control" required>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Phone *</label>
                            <input type="text" name="phone" id="edit_phone" class="form-control" required>
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-map-marker-alt"></i> Address *</label>
                            <input type="text" name="address" id="edit_address" class="form-control" required>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-city"></i> City *</label>
                            <input type="text" name="city" id="edit_city" class="form-control" required>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-globe"></i> Country</label>
                            <input type="text" name="country" id="edit_country" class="form-control">
                        </div>
                        
                        <!-- Logo and Check-in/out -->
                        <div class="form-group full-width">
                            <label><i class="fas fa-image"></i> Hotel Logo</label>
                            <input type="file" name="logo" class="form-control" accept="image/*">
                            <small class="text-muted">Leave blank to keep existing logo</small>
                            <div id="edit_logo_preview" class="mt-2" style="display: none;">
                                <img src="" alt="Current Logo" style="height: 50px; border-radius: 4px;">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-clock"></i> Check-in Time</label>
                            <input type="time" name="check_in_time" id="edit_check_in_time" class="form-control">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-clock"></i> Check-out Time</label>
                            <input type="time" name="check_out_time" id="edit_check_out_time" class="form-control">
                        </div>

                        <div class="form-group">
                            <label><i class="fas fa-tag"></i> Package *</label>
                            <select name="package" id="edit_package" class="form-control" onchange="updatePackageFields('edit')">
                                <option value="silver">Silver</option>
                                <option value="gold">Gold</option>
                                <option value="platinum">Platinum</option>
                                <option value="custom">Custom</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-door-open"></i> Max Rooms *</label>
                            <input type="number" name="max_rooms" id="edit_max_rooms" class="form-control" required min="1">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-users"></i> Max Users *</label>
                            <input type="number" name="max_users" id="edit_max_users" class="form-control" required min="1">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-money-bill"></i> Monthly Price (UGX) *</label>
                            <input type="number" name="monthly_price" id="edit_monthly_price" class="form-control" required min="0">
                        </div>
                        
                        <div class="form-group">
                            <label><i class="fas fa-sync-alt"></i> Billing Cycle *</label>
                            <select name="billing_cycle" id="edit_billing_cycle" class="form-control">
                                <option value="monthly">Monthly</option>
                                <option value="quarterly">Quarterly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-toggle-on"></i> Status *</label>
                            <select name="status" id="edit_status" class="form-control">
                                <option value="trial">Trial</option>
                                <option value="active">Active</option>
                                <option value="suspended">Suspended</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-puzzle-piece"></i> Enabled Modules</label>
                            <div id="edit_modules_container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
                                <!-- Modules will be loaded dynamically -->
                            </div>
                            <small class="text-muted">Settings module is always enabled.</small>
                        </div>

                        <div class="form-group full-width">
                            <label><i class="fas fa-paint-brush"></i> Public booking page template *</label>
                            <select name="public_booking_template" id="edit_public_booking_template" class="form-control">
                                <option value="1">1 — Classic luxury</option>
                                <option value="2">2 — Modern minimal</option>
                                <option value="3">3 — Resort / family</option>
                                <option value="4">4 — Boutique / local</option>
                                <option value="5">5 — Lifestyle (yellow + pill booking)</option>
                                <option value="6">6 — Diamond (sidebar layout)</option>
                            </select>
                            <p id="edit_public_booking_url_hint" style="margin-top:8px; font-size:0.85rem; color:#495057; word-break:break-all;">
                                <strong>Planned guest URL</strong> (after you add <code>/book/…</code> routes on the server):
                                <span id="edit_public_booking_url_text"></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" onclick="closeEditModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        Update Hotel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Store the base URLs for API calls
        const API_BASE = '/super-admin';
        
        // Initialize datepickers
        flatpickr(".datepicker", {
            dateFormat: "Y-m-d",
            allowInput: true
        });

        // Package definitions based on your images
        const PACKAGES = {
            silver: {
                name: 'Silver',
                icon: 'fa-tag',
                rooms: 20,
                users: 2,
                price: 150000,
                modules: [
                    'rooms', 'reservations', 'accounting', 'front_desk', 'settings'
                ],
                hasOnlineTraining: false,
                hasRoundTable: false,
                description: 'Essential hotel management features for small hotels (1-20 rooms)',
                features: []
            },
            gold: {
                name: 'Gold',
                icon: 'fa-star',
                rooms: 40,
                users: 5,
                price: 350000,
                modules: [
                    'rooms', 'reservations', 'accounting', 'front_desk',
                    'guests', 'housekeeping', 'maintenance', 'survey',
                    'documents', 'hotel_services', 'settings'
                ],
                hasOnlineTraining: false,
                hasRoundTable: false,
                description: 'Comprehensive features for growing hotels (21-40 rooms)',
                features: []
            },
            platinum: {
                name: 'Platinum',
                icon: 'fa-crown',
                rooms: 60,
                users: 10,
                price: 500000,
                modules: [
                    'rooms', 'reservations', 'accounting', 'front_desk',
                    'guests', 'housekeeping', 'maintenance', 'survey',
                    'documents', 'hotel_services', 'inventory', 'hr',
                    'reporting', 'food_beverage', 'settings'
                ],
                hasOnlineTraining: true,
                hasRoundTable: true,
                description: 'Full-featured solution with all modules and training (41-60 rooms)',
                features: ['Online Training', 'Round Table Meetings']
            },
            custom: {
                name: 'Custom',
                icon: 'fa-gem',
                rooms: 100,
                users: 20,
                price: 0,
                modules: [
                    'rooms', 'reservations', 'accounting', 'front_desk',
                    'guests', 'housekeeping', 'maintenance', 'survey',
                    'documents', 'hotel_services', 'inventory', 'hr',
                    'reporting', 'food_beverage', 'settings'
                ],
                hasOnlineTraining: true,
                hasRoundTable: true,
                description: 'Enterprise solution with custom configuration (61+ rooms)',
                features: ['Online Training', 'Round Table Meetings', 'Custom Pricing']
            }
        };

        // Module display names mapping
        const MODULE_NAMES = {
            rooms: 'Room Management',
            reservations: 'Reservations',
            accounting: 'Accounting',
            front_desk: 'Front Desk',
            guests: 'Guests',
            housekeeping: 'Housekeeping',
            maintenance: 'Maintenance',
            survey: 'Survey',
            documents: 'Documents',
            hotel_services: 'Hotel Services',
            inventory: 'Inventory',
            hr: 'Human Resource',
            reporting: 'Reporting',
            food_beverage: 'Food & Beverage',
            settings: 'Settings'
        };

        // Update package fields based on selected package
        function updatePackageFields(context) {
            const packageSelect = document.getElementById(context + '_package');
            if (!packageSelect) return;
            
            const packageName = packageSelect.value;
            
            const maxRooms = document.getElementById(context + '_max_rooms');
            const maxUsers = document.getElementById(context + '_max_users');
            const monthlyPrice = document.getElementById(context + '_monthly_price');
            
            if (packageName !== 'custom' && PACKAGES[packageName]) {
                const pkg = PACKAGES[packageName];
                maxRooms.value = pkg.rooms;
                maxUsers.value = pkg.users;
                monthlyPrice.value = pkg.price;
                
                // Auto-check modules based on package
                if (context === 'create') {
                    // Uncheck all first (except settings which is always checked and disabled)
                    const moduleChecks = document.querySelectorAll('#createHotelModal input[type="checkbox"]:not([value="settings"])');
                    moduleChecks.forEach(cb => cb.checked = false);
                    
                    // Check modules based on package
                    pkg.modules.forEach(module => {
                        const checkbox = document.getElementById(`create_mod_${module}`);
                        if (checkbox && module !== 'settings') {
                            checkbox.checked = true;
                        }
                    });
                }
                
                // Show package info card
                showPackageInfo(packageName, context);
            } else if (packageName === 'custom') {
                // For custom, enable manual input
                maxRooms.value = 100;
                maxUsers.value = 20;
                monthlyPrice.value = 0;
                
                // Show package info card for custom
                showPackageInfo(packageName, context);
            }
        }

        // Show package information card
        function showPackageInfo(packageName, context) {
            if (context !== 'create') return;
            
            const pkg = PACKAGES[packageName];
            if (!pkg) return;
            
            // Set package icon
            document.getElementById('packageIcon').className = `fas ${pkg.icon}`;
            
            document.getElementById('selectedPackageName').textContent = pkg.name + ' Package';
            document.getElementById('packageRooms').textContent = pkg.rooms;
            document.getElementById('packageUsers').textContent = pkg.users;
            document.getElementById('packagePrice').textContent = pkg.price.toLocaleString();
            
            // Build modules HTML
            const modulesContainer = document.getElementById('packageModules');
            let modulesHtml = '';
            pkg.modules.forEach(module => {
                if (MODULE_NAMES[module]) {
                    modulesHtml += `<span class="package-module-badge"><i class="fas fa-check-circle"></i>${MODULE_NAMES[module]}</span>`;
                }
            });
            modulesContainer.innerHTML = modulesHtml;
            
            // Build features HTML
            const featuresContainer = document.getElementById('packageFeatures');
            let featuresHtml = '';
            if (pkg.features && pkg.features.length > 0) {
                pkg.features.forEach(feature => {
                    featuresHtml += `<span class="package-feature-tag"><i class="fas fa-graduation-cap"></i>${feature}</span>`;
                });
            }
            if (pkg.hasOnlineTraining) {
                featuresHtml += `<span class="package-feature-tag"><i class="fas fa-chalkboard-teacher"></i>Online Training</span>`;
            }
            if (pkg.hasRoundTable) {
                featuresHtml += `<span class="package-feature-tag"><i class="fas fa-users"></i>Round Table Meetings</span>`;
            }
            featuresContainer.innerHTML = featuresHtml;
            
            document.getElementById('packageInfoCard').style.display = 'block';
        }

        // Show Alert
        function showAlert(message, type = 'success') {
            const alertContainer = document.getElementById('alertContainer');
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type}`;
            alertDiv.innerHTML = `
                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-circle' : 'info-circle'}"></i>
                ${message}
            `;
            alertContainer.appendChild(alertDiv);
            
            setTimeout(() => {
                alertDiv.remove();
            }, 5000);
        }

        // Show Loading
        function showLoading() {
            document.getElementById('loadingOverlay').classList.add('show');
        }

        // Hide Loading
        function hideLoading() {
            document.getElementById('loadingOverlay').classList.remove('show');
        }

        // Modal Functions
        function openCreateModal() {
            document.getElementById('createHotelModal').classList.add('show');
            document.body.style.overflow = 'hidden';
            
            // Set default package (Silver)
            setTimeout(() => {
                updatePackageFields('create');
            }, 100);
        }

        function closeCreateModal() {
            document.getElementById('createHotelModal').classList.remove('show');
            document.getElementById('createHotelForm').reset();
            document.getElementById('packageInfoCard').style.display = 'none';
            document.body.style.overflow = '';
        }

        // Generate slug from name
        function generateSlug(name) {
            return name.toString().toLowerCase()
                .replace(/\s+/g, '-')           // Replace spaces with -
                .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
                .replace(/\-\-+/g, '-')         // Replace multiple - with single -
                .replace(/^-+/, '')              // Trim - from start of text
                .replace(/-+$/, '');              // Trim - from end of text
        }

        // Create Hotel
        async function createHotel() {
            const form = document.getElementById('createHotelForm');
            const formData = new FormData(form);
            
            // Get the hotel name and generate slug
            const hotelName = formData.get('name');
            const slug = generateSlug(hotelName) + '-' + Math.random().toString(36).substring(2, 8);
            
            // Add slug field
            formData.append('slug', slug);
            
            // Ensure settings is always in modules
            if (!formData.getAll('modules[]').includes('settings')) {
                formData.append('modules[]', 'settings');
            }
            
            showLoading();
            
            try {
                const response = await fetch('{{ route("super.admin.hotels.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showAlert('Hotel created successfully!', 'success');
                    closeCreateModal();
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    let errorMessage = 'Error creating hotel';
                    if (data.errors) {
                        errorMessage = Object.values(data.errors).flat().join('\n');
                        console.error('Validation errors:', data.errors);
                    } else if (data.message) {
                        errorMessage = data.message;
                        console.error('Error message:', data.message);
                    }
                    showAlert(errorMessage, 'danger');
                }
            } catch (error) {
                showAlert('Network error. Please try again.', 'danger');
                console.error('Network error:', error);
            } finally {
                hideLoading();
            }
        }

        // View Hotel
        async function openViewModal(hotelId) {
            showLoading();
            
            try {
                // Use the correct route - either show or a dedicated data endpoint
                const response = await fetch(`/super-admin/hotels/${hotelId}/data`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const hotel = await response.json();
                
                document.getElementById('viewHotelName').textContent = hotel.name || 'Hotel Details';
                document.getElementById('editHotelId').value = hotel.id;
                
                let modulesHtml = '';
                if (hotel.enabled_modules) {
                    const modules = Array.isArray(hotel.enabled_modules) ? hotel.enabled_modules : 
                                   (typeof hotel.enabled_modules === 'string' ? JSON.parse(hotel.enabled_modules || '[]') : []);
                    modulesHtml = modules.map(m => `<span class="badge badge-info">${MODULE_NAMES[m] || m}</span>`).join(' ');
                }
                
                const usersCount = hotel.user_count || 0;
                
                const content = `
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px;">
                        <div style="background: linear-gradient(135deg, var(--primary-soft), white); border-radius: 16px; padding: 15px; text-align: center;">
                            <div style="font-size: 1.8rem; font-weight: 800; color: var(--primary-dark);">${hotel.max_rooms || 20}</div>
                            <div style="font-size: 0.85rem; color: #6c757d;">Max Rooms</div>
                        </div>
                        <div style="background: linear-gradient(135deg, var(--primary-soft), white); border-radius: 16px; padding: 15px; text-align: center;">
                            <div style="font-size: 1.8rem; font-weight: 800; color: var(--primary-dark);">${hotel.max_users || 2}</div>
                            <div style="font-size: 0.85rem; color: #6c757d;">Max Users</div>
                        </div>
                        <div style="background: linear-gradient(135deg, var(--primary-soft), white); border-radius: 16px; padding: 15px; text-align: center;">
                            <div style="font-size: 1.8rem; font-weight: 800; color: var(--primary-dark);">${usersCount}</div>
                            <div style="font-size: 0.85rem; color: #6c757d;">Current Users</div>
                        </div>
                    </div>

                    <h3 style="font-size: 1.2rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-soft);">Basic Information</h3>
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px;">
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d; margin-bottom: 5px;">Hotel Name</div>
                            <div style="font-size: 1.1rem; font-weight: 600; color: #333;">${hotel.name || 'N/A'}</div>
                        </div>
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d; margin-bottom: 5px;">Email</div>
                            <div style="font-size: 1.1rem; font-weight: 600; color: #333;">${hotel.email || 'N/A'}</div>
                        </div>
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d; margin-bottom: 5px;">Phone</div>
                            <div style="font-size: 1.1rem; font-weight: 600; color: #333;">${hotel.phone || 'N/A'}</div>
                        </div>
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d; margin-bottom: 5px;">Website</div>
                            <div style="font-size: 1.1rem; font-weight: 600; color: #333;">${hotel.website || 'N/A'}</div>
                        </div>
                        <div style="grid-column: span 2; padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d; margin-bottom: 5px;">Address</div>
                            <div style="font-size: 1.1rem; font-weight: 600; color: #333;">${hotel.address || ''}, ${hotel.city || ''}, ${hotel.country || ''}</div>
                        </div>
                    </div>

                    <h3 style="font-size: 1.2rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-soft);">Subscription Details</h3>
                    <div style="background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium)); color: white; border-radius: 20px; padding: 25px; margin-bottom: 20px;">
                        <div style="font-size: 1.5rem; font-weight: 800; margin-bottom: 10px;">${hotel.package ? hotel.package.toUpperCase() : 'SILVER'} Package</div>
                        <div style="font-size: 2rem; font-weight: 800; margin-bottom: 20px;">${Number(hotel.monthly_price || 150000).toLocaleString()} UGX <small style="font-size: 1rem; font-weight: 400; opacity: 0.8;">/ month</small></div>
                        <ul style="list-style: none; padding: 0;">
                            <li style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"><i class="fas fa-check" style="color: var(--accent-gold);"></i> Up to ${hotel.max_rooms || 20} rooms</li>
                            <li style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"><i class="fas fa-check" style="color: var(--accent-gold);"></i> Up to ${hotel.max_users || 2} users</li>
                            <li style="display: flex; align-items: center; gap: 10px;"><i class="fas fa-check" style="color: var(--accent-gold);"></i> Billing cycle: ${hotel.billing_cycle || 'monthly'}</li>
                        </ul>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px;">
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d;">Status</div>
                            <div><span class="badge badge-${hotel.status || 'active'}">${hotel.status || 'active'}</span></div>
                        </div>
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d;">Trial Ends</div>
                            <div>${hotel.trial_ends_at ? new Date(hotel.trial_ends_at).toLocaleDateString() : 'N/A'}</div>
                        </div>
                        <div style="padding: 12px 15px; background: #f8f9fa; border-radius: 12px;">
                            <div style="font-size: 0.85rem; color: #6c757d;">Subscription Ends</div>
                            <div>${hotel.subscription_ends_at ? new Date(hotel.subscription_ends_at).toLocaleDateString() : 'N/A'}</div>
                        </div>
                    </div>

                    <h3 style="font-size: 1.2rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-soft);">Enabled Modules</h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                        ${modulesHtml || 'No modules enabled'}
                    </div>
                `;
                
                document.getElementById('viewHotelContent').innerHTML = content;
                document.getElementById('viewHotelModal').classList.add('show');
                document.body.style.overflow = 'hidden';
                
            } catch (error) {
                showAlert('Error loading hotel details. Please try again.', 'danger');
                console.error('Error loading hotel:', error);
                
                // Show fallback content
                document.getElementById('viewHotelContent').innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i>
                        <h3>Error Loading Details</h3>
                        <p>Unable to load hotel details. Please try again later.</p>
                    </div>
                `;
            } finally {
                hideLoading();
            }
        }

        function closeViewModal() {
            document.getElementById('viewHotelModal').classList.remove('show');
            document.body.style.overflow = '';
        }

        function editFromView() {
            const hotelId = document.getElementById('editHotelId').value;
            closeViewModal();
            openEditModal(hotelId);
        }

        // Edit Hotel
        async function openEditModal(hotelId) {
            showLoading();
            
            try {
                const response = await fetch(`/super-admin/hotels/${hotelId}/data`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const hotel = await response.json();
                
                document.getElementById('editHotelId').value = hotel.id;
                document.getElementById('editHotelName').textContent = hotel.name;
                document.getElementById('edit_name').value = hotel.name || '';
                document.getElementById('edit_email').value = hotel.email || '';
                document.getElementById('edit_phone').value = hotel.phone || '';
                document.getElementById('edit_address').value = hotel.address || '';
                document.getElementById('edit_city').value = hotel.city || '';
                document.getElementById('edit_country').value = hotel.country || 'Uganda';
                document.getElementById('edit_package').value = hotel.package || 'silver';
                document.getElementById('edit_max_rooms').value = hotel.max_rooms || 20;
                document.getElementById('edit_max_users').value = hotel.max_users || 2;
                document.getElementById('edit_monthly_price').value = hotel.monthly_price || 150000;
                document.getElementById('edit_billing_cycle').value = hotel.billing_cycle || 'monthly';
                document.getElementById('edit_status').value = hotel.status || 'active';
                document.getElementById('edit_public_booking_template').value = hotel.public_booking_template || '1';
                const urlText = document.getElementById('edit_public_booking_url_text');
                if (urlText) {
                    urlText.textContent = hotel.public_booking_url || (window.location.origin + (hotel.public_booking_path || '/book/' + (hotel.slug || 'your-hotel-slug')));
                }
                
                document.getElementById('edit_check_in_time').value = hotel.check_in_time || '14:00';
                document.getElementById('edit_check_out_time').value = hotel.check_out_time || '12:00';
                
                const logoPreview = document.getElementById('edit_logo_preview');
                if (hotel.logo_url) {
                    logoPreview.style.display = 'block';
                    logoPreview.querySelector('img').src = hotel.logo_url;
                } else {
                    logoPreview.style.display = 'none';
                    logoPreview.querySelector('img').src = '';
                }
                
                // Load modules
                const modules = hotel.enabled_modules ? 
                    (Array.isArray(hotel.enabled_modules) ? hotel.enabled_modules : 
                     (typeof hotel.enabled_modules === 'string' ? JSON.parse(hotel.enabled_modules || '[]') : [])) : [];
                
                const moduleOptions = [
                    'rooms', 'reservations', 'accounting', 'front_desk',
                    'guests', 'housekeeping', 'maintenance', 'survey',
                    'documents', 'hotel_services', 'inventory', 'hr',
                    'reporting', 'food_beverage', 'settings'
                ];
                
                let modulesHtml = '';
                moduleOptions.forEach(module => {
                    const checked = modules.includes(module) ? 'checked' : '';
                    const disabled = module === 'settings' ? 'disabled' : '';
                    modulesHtml += `
                        <div class="form-check">
                            <input type="checkbox" name="modules[]" value="${module}" class="form-check-input" id="edit_mod_${module}" ${checked} ${disabled}>
                            <label class="form-check-label" for="edit_mod_${module}">${MODULE_NAMES[module]}</label>
                        </div>
                    `;
                });
                
                document.getElementById('edit_modules_container').innerHTML = modulesHtml;
                
                document.getElementById('editHotelModal').classList.add('show');
                document.body.style.overflow = 'hidden';
                
            } catch (error) {
                showAlert('Error loading hotel data. Please try again.', 'danger');
                console.error('Error loading hotel for edit:', error);
            } finally {
                hideLoading();
            }
        }

        function closeEditModal() {
            document.getElementById('editHotelModal').classList.remove('show');
            document.body.style.overflow = '';
        }

        async function updateHotel() {
            const hotelId = document.getElementById('editHotelId').value;
            const form = document.getElementById('editHotelForm');
            const formData = new FormData(form);
            
            // Ensure settings is always in modules
            const modules = formData.getAll('modules[]');
            if (!modules.includes('settings')) {
                formData.append('modules[]', 'settings');
            }
            
            showLoading();
            
            try {
                const response = await fetch(`/super-admin/hotels/${hotelId}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-HTTP-Method-Override': 'PUT',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showAlert('Hotel updated successfully!', 'success');
                    closeEditModal();
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    let errorMessage = 'Error updating hotel';
                    if (data.errors) {
                        errorMessage = Object.values(data.errors).flat().join('\n');
                    } else if (data.message) {
                        errorMessage = data.message;
                    }
                    showAlert(errorMessage, 'danger');
                }
            } catch (error) {
                showAlert('Network error. Please try again.', 'danger');
                console.error('Update error:', error);
            } finally {
                hideLoading();
            }
        }

        // Filter Functions
        function applyFilters() {
            const form = document.getElementById('filterForm');
            const formData = new FormData(form);
            const params = new URLSearchParams(formData).toString();
            window.location.href = `${window.location.pathname}?${params}`;
        }

        function clearFilters() {
            window.location.href = window.location.pathname;
        }

        function filterByStatus(status) {
            document.getElementById('filterStatus').value = status;
            applyFilters();
        }

        // Export
        function exportHotels() {
            const params = new URLSearchParams(window.location.search).toString();
            window.location.href = `/super-admin/export/hotels?${params}`;
        }

        // Subscription and User modals (placeholder implementations)
        function openSubscriptionModal(hotelId) {
            showAlert('Subscription management is being implemented. Please check back soon.', 'info');
        }

        function openUserModal(hotelId) {
            showAlert('User management is being implemented. Please check back soon.', 'info');
        }

        function confirmDelete(hotelId) {
            if (confirm('Are you sure you want to delete this hotel? This action cannot be undone.')) {
                showLoading();
                fetch(`/super-admin/hotels/${hotelId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Hotel deleted successfully', 'success');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        showAlert(data.message || 'Error deleting hotel', 'danger');
                    }
                })
                .catch(error => {
                    showAlert('Network error. Please try again.', 'danger');
                    console.error('Delete error:', error);
                })
                .finally(() => {
                    hideLoading();
                });
            }
        }

        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            // Escape key closes all modals
            if (e.key === 'Escape') {
                closeCreateModal();
                closeViewModal();
                closeEditModal();
            }
            
            // Ctrl+N for new hotel
            if (e.ctrlKey && e.key === 'n') {
                e.preventDefault();
                openCreateModal();
            }
        });

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Make sure settings checkbox is always checked and disabled in create modal
            const settingsCheckbox = document.getElementById('create_mod_settings');
            if (settingsCheckbox) {
                settingsCheckbox.checked = true;
                settingsCheckbox.disabled = true;
            }
            
            // Initialize any tooltips or other UI elements
            console.log('Hotels management page loaded');
        });
    </script>
</body>
</html>