<?php
require_once __DIR__ . '/config/session.php';
require_once __DIR__ . '/config/database.php';
require_once __DIR__ . '/config/helpers.php';

// Check if user is logged in and is admin/staff
if (!isLoggedIn()) {
    header("Location: admin-login.php");
    exit();
}

$currentUser = getCurrentUser();
if (!isset($currentUser['user_type']) || !in_array($currentUser['user_type'], ['admin', 'staff'])) {
    header("Location: login.php");
    exit();
}

$userId = getCurrentUserId();
$dbHelper = new DBHelper($conn);

// Get dashboard statistics
$dashboardStats = [
    'total_guests' => 0,
    'total_reservations' => 0,
    'active_reservations' => 0,
    'total_revenue' => 0,
    'total_rooms' => 0,
    'available_rooms' => 0,
    'staff_count' => 0
];

try {
    // Total guests
    $result = $conn->query("SELECT COUNT(*) as count FROM users WHERE user_type = 'guest' AND is_active = 1");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['total_guests'] = $row['count'] ?? 0;
    }

    // Total reservations
    $result = $conn->query("SELECT COUNT(*) as count FROM reservations");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['total_reservations'] = $row['count'] ?? 0;
    }

    // Active reservations
    $result = $conn->query("SELECT COUNT(*) as count FROM reservations WHERE status IN ('pending', 'confirmed', 'checked_in')");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['active_reservations'] = $row['count'] ?? 0;
    }

    // Total revenue
    $result = $conn->query("SELECT SUM(total_price) as total FROM reservations WHERE status != 'cancelled'");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['total_revenue'] = $row['total'] ?? 0;
    }

    // Total rooms
    $result = $conn->query("SELECT COUNT(*) as count FROM rooms");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['total_rooms'] = $row['count'] ?? 0;
    }

    // Available rooms
    $result = $conn->query("SELECT COUNT(*) as count FROM rooms WHERE status = 'available'");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['available_rooms'] = $row['count'] ?? 0;
    }

    // Staff count
    $result = $conn->query("SELECT COUNT(*) as count FROM users WHERE user_type IN ('admin', 'staff') AND is_active = 1");
    if ($result) {
        $row = $result->fetch_assoc();
        $dashboardStats['staff_count'] = $row['count'] ?? 0;
    }
} catch (Exception $e) {
    error_log("Error fetching dashboard stats: " . $e->getMessage());
}

// Get recent reservations
$recentReservations = [];
try {
    $sql = "SELECT rr.*, u.first_name, u.last_name, u.email, r.room_number, r.room_type
            FROM reservations rr
            LEFT JOIN users u ON rr.user_id = u.id
            LEFT JOIN rooms r ON rr.room_id = r.id
            ORDER BY rr.created_at DESC
            LIMIT 10";
    $result = $conn->query($sql);
    if ($result) {
        $recentReservations = $result->fetch_all(MYSQLI_ASSOC) ?? [];
    }
} catch (Exception $e) {
    error_log("Error fetching recent reservations: " . $e->getMessage());
}

$activeSection = isset($_GET['section']) ? htmlspecialchars($_GET['section']) : 'overview';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Admin Dashboard | Zemaraim Hotel Management</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Admin dashboard for Zemaraim hotel management system.">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/coloring.css" rel="stylesheet" type="text/css">
    <link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">
    <link href="css/admin.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="wrapper">
        <a href="#" id="back-to-top"></a>

        <!-- Admin Dashboard Container -->
        <div class="admin-dashboard-container">
            <!-- Sidebar Navigation -->
            <aside class="admin-sidebar" id="adminSidebar">
                <div class="admin-sidebar-header">
                    <a href="admin-dashboard.php" class="admin-logo">
                        <i class="fa fa-shield"></i>
                        <span class="logo-text">Admin Panel</span>
                    </a>
                    <button class="sidebar-toggle" id="sidebarToggle">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <nav class="admin-sidebar-nav">
                    <ul class="admin-nav-list">
                        <li class="nav-item <?php echo $activeSection === 'overview' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=overview" class="nav-link">
                                <i class="fa fa-dashboard"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'guests' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=guests" class="nav-link">
                                <i class="fa fa-users"></i>
                                <span>Guests</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'reservations' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=reservations" class="nav-link">
                                <i class="fa fa-calendar"></i>
                                <span>Reservations</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'service-reservations' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=service-reservations" class="nav-link">
                                <i class="fa fa-clipboard-list"></i>
                                <span>Service Reservations</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'rooms' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=rooms" class="nav-link">
                                <i class="fa fa-building"></i>
                                <span>Rooms</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'services' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=services" class="nav-link">
                                <i class="fa fa-concierge-bell"></i>
                                <span>Services</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'gallery' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=gallery" class="nav-link">
                                <i class="fa fa-image"></i>
                                <span>Gallery</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'hero-slider' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=hero-slider" class="nav-link">
                                <i class="fa fa-sliders"></i>
                                <span>Hero Slider</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'news' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=news" class="nav-link">
                                <i class="fa fa-newspaper"></i>
                                <span>News</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'offers' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=offers" class="nav-link">
                                <i class="fa fa-tags"></i>
                                <span>Offers</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'staff' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=staff" class="nav-link">
                                <i class="fa fa-user-tie"></i>
                                <span>Staff</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'reports' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=reports" class="nav-link">
                                <i class="fa fa-chart-line"></i>
                                <span>Reports</span>
                            </a>
                        </li>
                        <li class="nav-item <?php echo $activeSection === 'settings' ? 'active' : ''; ?>">
                            <a href="admin-dashboard.php?section=settings" class="nav-link">
                                <i class="fa fa-cog"></i>
                                <span>Settings</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="logout.php" class="nav-link">
                                 <i class="fa fa-sign-out"></i>
                                <span>Logout</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </aside>

            <!-- Main Content Area -->
            <main class="admin-main-content">
                <!-- Top Header Bar -->
                <header class="admin-header">
                    <button class="sidebar-toggle-mobile" id="sidebarToggleMobile">
                        <i class="fa fa-bars"></i>
                    </button>
                    
                    <h1 class="page-title">Hotel Management System</h1>
                    
                    <div class="admin-header-right">
                        <div class="header-search">
                            <input type="text" class="search-input" placeholder="Search...">
                            <i class="fa fa-search"></i>
                        </div>
                        
                        <div class="admin-user-profile">
                            <div class="user-avatar">
                                <?php 
                                $firstName = $currentUser['first_name'] ?? '';
                                $lastName = $currentUser['last_name'] ?? '';
                                $initials = strtoupper(substr($firstName, 0, 1) . substr($lastName, 0, 1));
                                echo htmlspecialchars($initials, ENT_QUOTES, 'UTF-8');
                                ?>
                            </div>
                            <div class="user-info">
                                <p class="user-name">
                                    <?php echo htmlspecialchars($firstName . ' ' . $lastName, ENT_QUOTES, 'UTF-8'); ?>
                                </p>
                                <p class="user-role">
                                    <?php echo htmlspecialchars(ucfirst($currentUser['user_type'] ?? 'user'), ENT_QUOTES, 'UTF-8'); ?>
                                </p>
                            </div>
                        </div>
                    </div>
                </header>

                <!-- Page Content -->
                <div class="admin-content" data-active-section="<?php echo htmlspecialchars($activeSection, ENT_QUOTES, 'UTF-8'); ?>">
                    <?php if ($activeSection === 'overview'): ?>
                        <!-- Dashboard Overview -->
                        <div class="section-header">
                            <h2>Dashboard Overview</h2>
                            <p>Welcome back, <?php echo htmlspecialchars($firstName, ENT_QUOTES, 'UTF-8'); ?>!</p>
                        </div>

                        <!-- Statistics Grid -->
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon total-guests">
                                    <i class="fa fa-users"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-value"><?php echo $dashboardStats['total_guests']; ?></h3>
                                    <p class="stat-label">Total Guests</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon total-reservations">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-value"><?php echo $dashboardStats['total_reservations']; ?></h3>
                                    <p class="stat-label">Total Reservations</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon active-reservations">
                                    <i class="fa fa-check-circle"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-value"><?php echo $dashboardStats['active_reservations']; ?></h3>
                                    <p class="stat-label">Active Reservations</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon total-revenue">
                                    <i class="fa fa-dollar"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-value">$<?php echo number_format($dashboardStats['total_revenue'], 2); ?></h3>
                                    <p class="stat-label">Total Revenue</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon total-rooms">
                                    <i class="fa fa-building"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-value"><?php echo $dashboardStats['total_rooms']; ?></h3>
                                    <p class="stat-label">Total Rooms</p>
                                </div>
                            </div>

                            <div class="stat-card">
                                <div class="stat-icon available-rooms">
                                    <i class="fa fa-key"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-value"><?php echo $dashboardStats['available_rooms']; ?></h3>
                                    <p class="stat-label">Available Rooms</p>
                                </div>
                            </div>
                        </div>

                        <!-- Recent Reservations Table -->
                        <div class="content-section">
                            <div class="section-header">
                                <h3>Recent Reservations</h3>
                                <a href="admin-dashboard.php?section=reservations" class="view-all-link">View All</a>
                            </div>

                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th>Reservation ID</th>
                                            <th>Guest Name</th>
                                            <th>Room</th>
                                            <th>Check-in</th>
                                            <th>Check-out</th>
                                            <th>Total Price</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php if (!empty($recentReservations)): ?>
                                            <?php foreach ($recentReservations as $reservation): ?>
                                                <tr>
                                                    <td>#<?php echo htmlspecialchars($reservation['id'], ENT_QUOTES, 'UTF-8'); ?></td>
                                                    <td><?php echo htmlspecialchars($reservation['first_name'] . ' ' . $reservation['last_name'], ENT_QUOTES, 'UTF-8'); ?></td>
                                                    <td><?php echo htmlspecialchars($reservation['room_number'] . ' (' . strtoupper($reservation['room_type']) . ')', ENT_QUOTES, 'UTF-8'); ?></td>
                                                    <td><?php echo htmlspecialchars($reservation['check_in_date'], ENT_QUOTES, 'UTF-8'); ?></td>
                                                    <td><?php echo htmlspecialchars($reservation['check_out_date'], ENT_QUOTES, 'UTF-8'); ?></td>
                                                    <td>$<?php echo number_format($reservation['total_price'], 2); ?></td>
                                                    <td>
                                                        <span class="status-badge status-<?php echo htmlspecialchars($reservation['status'], ENT_QUOTES, 'UTF-8'); ?>">
                                                            <?php echo htmlspecialchars(ucfirst($reservation['status']), ENT_QUOTES, 'UTF-8'); ?>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <a href="#" class="action-link" title="View Details">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <tr>
                                                <td colspan="8" class="text-center">No reservations found</td>
                                            </tr>
                                        <?php endif; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'guests'): ?>
                        <!-- Guests Management -->
                        <div class="section-header">
                            <h2>Guest Management</h2>
                            <button class="btn-action btn-primary">
                                <i class="fa fa-plus"></i> Add Guest
                            </button>
                        </div>

                        <div class="content-section">
                            <div class="table-responsive">
                                <table class="admin-table" id="guestsTable">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Reservations</th>
                                            <th>Join Date</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="guestsTableBody">
                                        <tr>
                                            <td colspan="7" class="text-center">Loading guest data...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'reservations'): ?>
                        <!-- Reservations Management -->
                        <div class="section-header">
                            <h2>Reservation Management</h2>
                            <div class="filter-controls reservation-filter-grid">
                                <input
                                    type="text"
                                    class="filter-input"
                                    id="reservationGuestFilter"
                                    placeholder="Filter by guest name">
                                <input
                                    type="text"
                                    class="filter-input"
                                    id="reservationRoomFilter"
                                    placeholder="Filter by room number or type">
                                <select class="filter-select" id="reservationStatusFilter">
                                    <option value="">All Statuses</option>
                                    <option value="pending">Pending</option>
                                    <option value="confirmed">Confirmed</option>
                                    <option value="checked_in">Checked In</option>
                                    <option value="checked_out">Checked Out</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                                <button type="button" class="btn-action reservation-filter-clear" id="reservationFilterClear">
                                    Clear
                                </button>
                            </div>
                        </div>

                        <div class="content-section">
                            <div class="table-responsive">
                                <table class="admin-table" id="reservationsTable">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Guest</th>
                                            <th>Room</th>
                                            <th>Dates</th>
                                            <th>Amount</th>
                                            <th>Payment</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="reservationsTableBody">
                                        <tr>
                                            <td colspan="8" class="text-center">Loading reservation data...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'rooms'): ?>
                        <!-- Rooms Management -->
                        <div class="section-header">
                            <h2>Room Management</h2>
                            <button class="btn-action btn-primary toggle" id="addRoomBtn">
                                <i class="fa fa-plus"></i> Add Room
                            </button>
                        </div>

                        <div class="rooms-grid" id="roomsGrid">
                            <div class="room-card">
                                <div class="room-info">
                                    <h4>Loading rooms...</h4>
                                    <p class="room-number">Please wait</p>
                                </div>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'services'): ?>
                        <!-- Services Management -->
                        <div class="section-header">
                            <h2>Services & Facilities</h2>
                            <button class="btn-action btn-primary toggle" id="addServiceBtn">
                                <i class="fa fa-plus"></i> Add Service
                            </button>
                        </div>

                        <div class="content-section">
                            <div class="table-responsive">
                                <table class="admin-table" id="servicesTable">
                                    <thead>
                                        <tr>
                                            <th>Service Name</th>
                                            <th>Image</th>
                                            <th>Icon</th>
                                            <th>Description</th>
                                            <th>Availability</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="servicesTableBody">
                                        <tr>
                                            <td colspan="7" class="text-center">Loading services data...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'service-reservations'): ?>
                        <!-- Service Reservations Management -->
                        <div class="section-header">
                            <h2>Service Reservations</h2>
                            <div class="filter-controls service-filter-grid">
                                <input
                                    type="text"
                                    class="filter-input"
                                    id="serviceReservationGuestFilter"
                                    placeholder="Filter by guest name">
                                <input
                                    type="text"
                                    class="filter-input"
                                    id="serviceReservationServiceFilter"
                                    placeholder="Filter by service">
                                <input
                                    type="date"
                                    class="filter-input"
                                    id="serviceReservationDateFilter"
                                    placeholder="Filter by date">
                                <select class="filter-select" id="serviceReservationStatusFilter">
                                    <option value="">All Statuses</option>
                                    <option value="pending">Pending</option>
                                    <option value="confirmed">Confirmed</option>
                                    <option value="completed">Completed</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                                <button type="button" class="btn-action service-filter-clear" id="serviceReservationFilterClear">
                                    Clear
                                </button>
                            </div>
                        </div>

                        <div class="content-section">
                            <div class="table-responsive">
                                <table class="admin-table" id="serviceReservationsTable">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Guest</th>
                                            <th>Service</th>
                                            <th>Dates</th>
                                            <th>Guests</th>
                                            <th>Amount</th>
                                            <th>Payment</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="serviceReservationsTableBody">
                                        <tr>
                                            <td colspan="9" class="text-center">Loading service reservation data...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'gallery'): ?>
                        <!-- Gallery Management -->
                        <div class="section-header">
                            <h2>Gallery Management</h2>
                            <button class="btn-action btn-primary toggle" id="addGalleryBtn">
                                <i class="fa fa-plus"></i> Add Gallery Image
                            </button>
                        </div>

                        <div class="gallery-admin-grid" id="galleryGrid">
                            <div class="gallery-admin-card">
                                <div class="gallery-admin-body">
                                    <h4>Loading gallery...</h4>
                                    <p>Please wait</p>
                                </div>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'hero-slider'): ?>
                        <!-- Hero Slider Management -->
                        <div class="section-header">
                            <h2>Hero Slider Management</h2>
                            <button type="button" class="btn-action btn-primary toggle" id="heroSlideAddBtn">
                                <i class="fa fa-plus"></i> Add Slide
                            </button>
                            <p>Manage slider text, button, image, and per-slide text colors for the website hero.</p>
                        </div>

                        <div class="hero-slider-admin-layout form-collapsed" id="heroSliderAdminLayout">
                            <div class="hero-slider-form-card is-collapsed" id="heroSlideFormCard">
                                <div class="hero-slider-form-header">
                                    <h3 id="heroSlideEditorTitle">Slide Editor</h3>
                                    <button type="button" class="hero-slider-editor-close" id="heroSlideCancelBtn" aria-label="Close editor">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                                <form id="heroSlideForm" class="hero-slider-form">
                                    <input type="hidden" id="heroSlideId" value="">
                                    <div class="hero-slider-form-grid">
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideLabel">Label</label>
                                            <input type="text" id="heroSlideLabel" maxlength="120" placeholder="Luxury Accommodation">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideTitle">Title</label>
                                            <input type="text" id="heroSlideTitle" maxlength="255" required placeholder="Experience Premium Comfort">
                                        </div>
                                        <div class="hero-slider-form-field hero-slider-form-full">
                                            <label for="heroSlideDescription">Description</label>
                                            <textarea id="heroSlideDescription" rows="3" placeholder="Slide description"></textarea>
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideButtonText">Button Text</label>
                                            <input type="text" id="heroSlideButtonText" maxlength="120" placeholder="Explore Rooms">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideButtonUrl">Button URL</label>
                                            <input type="text" id="heroSlideButtonUrl" maxlength="255" placeholder="rooms.php">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideImageUrl">Image URL</label>
                                            <input type="text" id="heroSlideImageUrl" maxlength="255" required placeholder="images/background/1.webp">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideSortOrder">Sort Order</label>
                                            <input type="number" id="heroSlideSortOrder" min="0" step="1" value="1">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideStatus">Status</label>
                                            <select id="heroSlideStatus">
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="hero-slider-colors-grid">
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideLabelColor">Label Color</label>
                                            <input type="color" id="heroSlideLabelColor" value="#fcbf49">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideTitleColor">Title Color</label>
                                            <input type="color" id="heroSlideTitleColor" value="#ffffff">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideDescriptionColor">Description Color</label>
                                            <input type="color" id="heroSlideDescriptionColor" value="#e5e7eb">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideButtonTextColor">Button Text Color</label>
                                            <input type="color" id="heroSlideButtonTextColor" value="#10243d">
                                        </div>
                                        <div class="hero-slider-form-field">
                                            <label for="heroSlideButtonBgColor">Button Background</label>
                                            <input type="color" id="heroSlideButtonBgColor" value="#fcbf49">
                                        </div>
                                    </div>

                                    <div class="hero-slide-live-preview-wrap">
                                        <p class="hero-slide-live-preview-title">Live Preview</p>
                                        <div class="hero-slide-live-preview" id="heroSlideLivePreview">
                                            <div class="hero-slide-live-overlay"></div>
                                            <div class="hero-slide-live-content">
                                                <span class="hero-slide-live-label" id="heroPreviewLabel">Featured</span>
                                                <h4 class="hero-slide-live-heading" id="heroPreviewTitle">Your Slide Title</h4>
                                                <p class="hero-slide-live-description" id="heroPreviewDescription">Your slide description will appear here.</p>
                                                <span class="hero-slide-live-button" id="heroPreviewButton">Explore</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="hero-slider-form-actions">
                                        <button type="button" class="btn-action toggle" id="heroSlideResetBtn">Reset</button>
                                        <button type="button" class="btn-action toggle" id="heroSlideCloseBtn">Cancel</button>
                                        <button type="submit" class="btn-action btn-primary toggle" id="heroSlideSubmitBtn">Save Slide</button>
                                    </div>
                                </form>
                            </div>

                            <div class="hero-slider-list-card">
                                <h3>Current Slides</h3>
                                <div class="table-responsive">
                                    <table class="admin-table" id="heroSlidesTable">
                                        <thead>
                                            <tr>
                                                <th>Order</th>
                                                <th>Slide</th>
                                                <th>Colors</th>
                                                <th>Status</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="heroSlidesTableBody">
                                            <tr>
                                                <td colspan="5" class="text-center">Loading hero slides...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'news'): ?>
                        <!-- News Management -->
                        <div class="section-header">
                            <h2>News Management</h2>
                            <button class="btn-action btn-primary toggle" id="addNewsBtn">
                                <i class="fa fa-plus"></i> Add News
                            </button>
                        </div>

                        <div class="gallery-admin-grid news-admin-grid" id="newsGrid">
                            <div class="gallery-admin-card">
                                <div class="gallery-admin-body">
                                    <h4>Loading news...</h4>
                                    <p>Please wait</p>
                                </div>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'offers'): ?>
                        <!-- Offers Management -->
                        <div class="section-header">
                            <h2>Offers Management</h2>
                            <button class="btn-action btn-primary toggle" id="addOfferBtn">
                                <i class="fa fa-plus"></i> Add Offer
                            </button>
                        </div>

                        <div class="gallery-admin-grid offers-admin-grid" id="offersGrid">
                            <div class="gallery-admin-card">
                                <div class="gallery-admin-body">
                                    <h4>Loading offers...</h4>
                                    <p>Please wait</p>
                                </div>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'staff'): ?>
                        <!-- Staff Management -->
                        <div class="section-header">
                            <h2>Staff Management</h2>
                            <button class="btn-action btn-primary">
                                <i class="fa fa-plus"></i> Add Staff
                            </button>
                        </div>

                        <div class="content-section">
                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Position</th>
                                            <th>Department</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="6" class="text-center">Loading staff data...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'reports'): ?>
                        <!-- Reports -->
                        <div class="section-header">
                            <h2>Reports & Analytics</h2>
                        </div>

                        <div class="reports-grid">
                            <div class="report-card">
                                <h3>Revenue Report</h3>
                                <p class="report-info">Monthly revenue overview</p>
                                <div class="report-actions">
                                    <a href="api/print-revenue-invoices.php?type=revenue&invoice_type=all&autoprint=1" target="_blank" rel="noopener" class="report-link report-download-link"><i class="fa fa-file-pdf-o"></i> PDF Report</a>
                                    <a href="#" class="report-link report-view-link" id="revenueInvoiceViewBtn" title="View Invoice Details"><i class="fa fa-eye"></i> View Details</a>
                                </div>
                            </div>
                            <div class="report-card">
                                <h3>Occupancy Report</h3>
                                <p class="report-info">Room occupancy statistics</p>
                                <a href="#" class="report-link"><i class="fa fa-download"></i> Download</a>
                            </div>
                            <div class="report-card">
                                <h3>Guest Summary</h3>
                                <p class="report-info">Guest statistics and trends</p>
                                <a href="#" class="report-link"><i class="fa fa-download"></i> Download</a>
                            </div>
                        </div>

                    <?php elseif ($activeSection === 'settings'): ?>
                        <!-- Settings -->
                        <div class="section-header">
                            <h2>System Settings</h2>
                        </div>

                        <div class="settings-grid">
                            <div class="settings-card">
                                <h3><i class="fa fa-cog"></i> General Settings</h3>
                                <p>Hotel name, location, and basic information</p>
                                <a href="#" class="settings-link">Configure</a>
                            </div>
                            <div class="settings-card">
                                <h3><i class="fa fa-key"></i> Security</h3>
                                <p>Passwords, permissions, and access control</p>
                                <a href="#" class="settings-link">Configure</a>
                            </div>
                            <div class="settings-card">
                                <h3><i class="fa fa-envelope"></i> Notifications</h3>
                                <p>Email settings and notification preferences</p>
                                <a href="#" class="settings-link">Configure</a>
                            </div>
                            <div class="settings-card">
                                <h3><i class="fa fa-paint-brush"></i> Appearance</h3>
                                <p>Theme, colors, and layout customization</p>
                                <a href="#" class="settings-link">Configure</a>
                            </div>
                        </div>

                    <?php endif; ?>
                </div>
            </main>
        </div>
    </div>

    <script src="js/plugins.js"></script>
    <script src="js/designesia.js"></script>
    <div class="guest-modal-overlay" id="guestDetailsModal" aria-hidden="true">
        <div class="guest-modal-card" role="dialog" aria-modal="true" aria-labelledby="guestModalTitle">
            <div class="guest-modal-header">
                <h3 id="guestModalTitle">Guest Details</h3>
                <button type="button" class="guest-modal-close" id="guestModalClose" aria-label="Close guest details">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <div class="guest-modal-grid">
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Name</span>
                        <span class="guest-detail-value" id="guestDetailName">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Email</span>
                        <span class="guest-detail-value" id="guestDetailEmail">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Phone</span>
                        <span class="guest-detail-value" id="guestDetailPhone">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Reservations</span>
                        <span class="guest-detail-value" id="guestDetailReservations">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Join Date</span>
                        <span class="guest-detail-value" id="guestDetailJoinDate">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Status</span>
                        <span class="guest-detail-value" id="guestDetailStatus">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="serviceReservationDetailsModal" aria-hidden="true">
        <div class="guest-modal-card" role="dialog" aria-modal="true" aria-labelledby="serviceReservationModalTitle">
            <div class="guest-modal-header">
                <h3 id="serviceReservationModalTitle">Service Booking Details</h3>
                <button type="button" class="guest-modal-close" id="serviceReservationModalClose" aria-label="Close service booking details">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <div class="guest-modal-grid">
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Booking ID</span>
                        <span class="guest-detail-value" id="serviceDetailId">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Guest</span>
                        <span class="guest-detail-value" id="serviceDetailGuest">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Service</span>
                        <span class="guest-detail-value" id="serviceDetailService">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Dates</span>
                        <span class="guest-detail-value" id="serviceDetailDates">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Number of Guests</span>
                        <span class="guest-detail-value" id="serviceDetailGuests">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Amount</span>
                        <span class="guest-detail-value" id="serviceDetailAmount">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Payment</span>
                        <span class="guest-detail-value" id="serviceDetailPayment">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Status</span>
                        <span class="guest-detail-value" id="serviceDetailStatus">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="revenueInvoiceModal" aria-hidden="true">
        <div class="guest-modal-card revenue-invoice-modal" role="dialog" aria-modal="true" aria-labelledby="revenueInvoiceModalTitle">
            <div class="guest-modal-header">
                <h3 id="revenueInvoiceModalTitle">Revenue Invoices</h3>
                <button type="button" class="guest-modal-close" id="revenueInvoiceModalClose" aria-label="Close revenue invoices">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <div class="table-responsive">
                    <table class="admin-table" id="revenueInvoicesTable">
                        <thead>
                            <tr>
                                <th>Invoice #</th>
                                <th>Invoice Type</th>
                                <th>Guest</th>
                                <th>Item</th>
                                <th>Dates</th>
                                <th>Amount</th>
                                <th>Payment</th>
                                <th>Status</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody id="revenueInvoicesTableBody">
                            <tr>
                                <td colspan="9" class="text-center">Loading invoices...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="reservationDetailsModal" aria-hidden="true">
        <div class="guest-modal-card" role="dialog" aria-modal="true" aria-labelledby="reservationModalTitle">
            <div class="guest-modal-header">
                <h3 id="reservationModalTitle">Room Booking Details</h3>
                <button type="button" class="guest-modal-close" id="reservationModalClose" aria-label="Close room booking details">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <div class="guest-modal-grid">
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Booking ID</span>
                        <span class="guest-detail-value" id="reservationDetailId">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Guest</span>
                        <span class="guest-detail-value" id="reservationDetailGuest">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Room</span>
                        <span class="guest-detail-value" id="reservationDetailRoom">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Stay Dates</span>
                        <span class="guest-detail-value" id="reservationDetailDates">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Amount</span>
                        <span class="guest-detail-value" id="reservationDetailAmount">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Status</span>
                        <span class="guest-detail-value" id="reservationDetailStatus">-</span>
                    </div>
                    <div class="guest-detail-item">
                        <span class="guest-detail-label">Payment</span>
                        <span class="guest-detail-value" id="reservationDetailPayment">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="serviceCrudModal" aria-hidden="true">
        <div class="guest-modal-card service-crud-modal" role="dialog" aria-modal="true" aria-labelledby="serviceCrudModalTitle">
            <div class="guest-modal-header">
                <h3 id="serviceCrudModalTitle">Add Service</h3>
                <button type="button" class="guest-modal-close" id="serviceCrudModalClose" aria-label="Close service form">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <form id="serviceCrudForm" class="service-form-grid">
                    <input type="hidden" id="serviceFormId" value="">
                    <div class="service-form-field service-form-main">
                        <label for="serviceFormName">Service Name</label>
                        <input type="text" id="serviceFormName" required maxlength="100" placeholder="Enter service name">
                    </div>
                    <div class="service-form-field service-form-main">
                        <label for="serviceFormStatus">Availability</label>
                        <select id="serviceFormStatus">
                            <option value="1">Active / Available</option>
                            <option value="0">Inactive / Unavailable</option>
                        </select>
                    </div>
                    <div class="service-form-field service-form-main">
                        <label for="serviceFormDescription">Description</label>
                        <textarea id="serviceFormDescription" rows="4" placeholder="Describe the service"></textarea>
                    </div>
                    <div class="service-form-field service-form-main">
                        <label for="serviceFormIcon">Icon Class or URL (Optional)</label>
                        <input type="text" id="serviceFormIcon" placeholder="icofont-star or images/svg/icon.svg">
                    </div>
                    <div class="service-form-field service-form-main">
                        <label for="serviceFormImage">Image URL (Optional)</label>
                        <input type="text" id="serviceFormImage" placeholder="images/facilities/1.webp or full URL">
                    </div>
                    <div class="service-form-field service-form-media">
                        <label for="serviceFormImageFile">Upload Image</label>
                        <input type="file" id="serviceFormImageFile" accept="image/*">
                        <div class="service-image-preview-wrap">
                            <img id="serviceImagePreview" class="service-image-preview" src="images/facilities/1.webp" alt="Service preview">
                        </div>
                    </div>
                    <div class="service-form-actions service-form-full">
                        <button type="button" class="btn-action toggle" id="serviceFormCancel">Cancel</button>
                        <button type="submit" class="btn-action btn-primary toggle" id="serviceFormSubmit">Save Service</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="roomCrudModal" aria-hidden="true">
        <div class="guest-modal-card room-crud-modal" role="dialog" aria-modal="true" aria-labelledby="roomCrudModalTitle">
            <div class="guest-modal-header">
                <h3 id="roomCrudModalTitle">Add Room</h3>
                <button type="button" class="guest-modal-close" id="roomCrudModalClose" aria-label="Close room form">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <form id="roomCrudForm" class="room-form-grid">
                    <input type="hidden" id="roomFormId" value="">
                    <div class="room-form-field">
                        <label for="roomFormNumber">Room Number</label>
                        <input type="text" id="roomFormNumber" required maxlength="10" placeholder="e.g. 101">
                    </div>
                    <div class="room-form-field">
                        <label for="roomFormType">Room Type</label>
                        <input type="text" id="roomFormType" required maxlength="50" placeholder="e.g. Deluxe Room">
                    </div>
                    <div class="room-form-field">
                        <label for="roomFormGuests">Max Guests</label>
                        <input type="number" id="roomFormGuests" min="1" max="20" required placeholder="2">
                    </div>
                    <div class="room-form-field">
                        <label for="roomFormPrice">Price Per Night</label>
                        <input type="number" id="roomFormPrice" min="0" step="0.01" required placeholder="149.00">
                    </div>
                    <div class="room-form-field">
                        <label for="roomFormFloor">Floor Number</label>
                        <input type="number" id="roomFormFloor" min="0" max="200" placeholder="1">
                    </div>
                    <div class="room-form-field">
                        <label for="roomFormView">View Type</label>
                        <input type="text" id="roomFormView" maxlength="50" placeholder="City View">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="roomFormImage">Image URL</label>
                        <input type="text" id="roomFormImage" placeholder="images/room/1.webp">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="roomFormImageFile">Upload Image</label>
                        <input type="file" id="roomFormImageFile" accept="image/*">
                        <div class="room-image-preview-wrap">
                            <img id="roomImagePreview" class="room-image-preview" src="images/room/1.webp" alt="Room preview">
                        </div>
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="roomFormDescription">Description</label>
                        <textarea id="roomFormDescription" rows="4" placeholder="Room details..."></textarea>
                    </div>
                    <div class="room-form-field">
                        <label for="roomFormAvailable">Availability</label>
                        <select id="roomFormAvailable">
                            <option value="1">Available</option>
                            <option value="0">Unavailable</option>
                        </select>
                    </div>
                    <div class="room-form-actions room-form-full">
                        <button type="button" class="btn-action toggle" id="roomFormCancel">Cancel</button>
                        <button type="submit" class="btn-action btn-primary toggle" id="roomFormSubmit">Save Room</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="galleryCrudModal" aria-hidden="true">
        <div class="guest-modal-card room-crud-modal" role="dialog" aria-modal="true" aria-labelledby="galleryCrudModalTitle">
            <div class="guest-modal-header">
                <h3 id="galleryCrudModalTitle">Add Gallery Image</h3>
                <button type="button" class="guest-modal-close" id="galleryCrudModalClose" aria-label="Close gallery form">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <form id="galleryCrudForm" class="room-form-grid">
                    <input type="hidden" id="galleryFormId" value="">
                    <div class="room-form-field">
                        <label for="galleryFormTitle">Title</label>
                        <input type="text" id="galleryFormTitle" required maxlength="255" placeholder="Gallery title">
                    </div>
                    <div class="room-form-field">
                        <label for="galleryFormCategory">Category</label>
                        <input type="text" id="galleryFormCategory" maxlength="100" placeholder="Rooms / Facilities / Events">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="galleryFormDescription">Description</label>
                        <textarea id="galleryFormDescription" rows="3" placeholder="Short description..."></textarea>
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="galleryFormImage">Image URL</label>
                        <input type="text" id="galleryFormImage" placeholder="images/gallery/1.webp">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="galleryFormImageFile">Upload Image</label>
                        <input type="file" id="galleryFormImageFile" accept="image/*">
                        <div class="room-image-preview-wrap">
                            <img id="galleryImagePreview" class="room-image-preview" src="images/gallery/1.webp" alt="Gallery preview">
                        </div>
                    </div>
                    <div class="room-form-field">
                        <label for="galleryFormSortOrder">Sort Order</label>
                        <input type="number" id="galleryFormSortOrder" min="0" step="1" value="0">
                    </div>
                    <div class="room-form-field">
                        <label for="galleryFormFeatured">Featured</label>
                        <select id="galleryFormFeatured">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>
                    <div class="room-form-actions room-form-full">
                        <button type="button" class="btn-action toggle" id="galleryFormCancel">Cancel</button>
                        <button type="submit" class="btn-action btn-primary toggle" id="galleryFormSubmit">Save Image</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="newsCrudModal" aria-hidden="true">
        <div class="guest-modal-card room-crud-modal" role="dialog" aria-modal="true" aria-labelledby="newsCrudModalTitle">
            <div class="guest-modal-header">
                <h3 id="newsCrudModalTitle">Add News</h3>
                <button type="button" class="guest-modal-close" id="newsCrudModalClose" aria-label="Close news form">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <form id="newsCrudForm" class="room-form-grid">
                    <input type="hidden" id="newsFormId" value="">
                    <div class="room-form-field room-form-full">
                        <label for="newsFormTitle">Title</label>
                        <input type="text" id="newsFormTitle" required maxlength="255" placeholder="News title">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="newsFormSummary">Summary</label>
                        <textarea id="newsFormSummary" rows="3" maxlength="500" placeholder="Short summary..."></textarea>
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="newsFormContent">Content</label>
                        <textarea id="newsFormContent" rows="6" placeholder="Full news content..." required></textarea>
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="newsFormImage">Featured Image URL</label>
                        <input type="text" id="newsFormImage" placeholder="images/news/1.webp">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="newsFormImageFile">Upload Featured Image</label>
                        <input type="file" id="newsFormImageFile" accept="image/*">
                        <div class="room-image-preview-wrap">
                            <img id="newsImagePreview" class="room-image-preview" src="images/news/1.webp" alt="News preview">
                        </div>
                    </div>
                    <div class="room-form-field">
                        <label for="newsFormStatus">Status</label>
                        <select id="newsFormStatus">
                            <option value="draft">Draft</option>
                            <option value="published">Published</option>
                            <option value="archived">Archived</option>
                        </select>
                    </div>
                    <div class="room-form-actions room-form-full">
                        <button type="button" class="btn-action toggle" id="newsFormCancel">Cancel</button>
                        <button type="submit" class="btn-action btn-primary toggle" id="newsFormSubmit">Save News</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="guest-modal-overlay" id="offerCrudModal" aria-hidden="true">
        <div class="guest-modal-card room-crud-modal" role="dialog" aria-modal="true" aria-labelledby="offerCrudModalTitle">
            <div class="guest-modal-header">
                <h3 id="offerCrudModalTitle">Add Offer</h3>
                <button type="button" class="guest-modal-close" id="offerCrudModalClose" aria-label="Close offer form">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="guest-modal-body">
                <form id="offerCrudForm" class="room-form-grid">
                    <input type="hidden" id="offerFormId" value="">
                    <div class="room-form-field room-form-full">
                        <label for="offerFormTitle">Title</label>
                        <input type="text" id="offerFormTitle" required maxlength="255" placeholder="Offer title">
                    </div>
                    <div class="room-form-field room-form-full">
                        <label for="offerFormDescription">Description</label>
                        <textarea id="offerFormDescription" rows="4" placeholder="Offer details..."></textarea>
                    </div>
                    <div class="room-form-field">
                        <label for="offerFormDiscountType">Discount Type</label>
                        <select id="offerFormDiscountType">
                            <option value="percentage">Percentage (%)</option>
                            <option value="fixed_amount">Fixed Amount ($)</option>
                        </select>
                    </div>
                    <div class="room-form-field">
                        <label for="offerFormDiscountValue">Discount Value</label>
                        <input type="number" id="offerFormDiscountValue" min="0" step="0.01" required placeholder="10">
                    </div>
                    <div class="room-form-field">
                        <label for="offerFormStartDate">Start Date</label>
                        <input type="date" id="offerFormStartDate" required>
                    </div>
                    <div class="room-form-field">
                        <label for="offerFormEndDate">End Date</label>
                        <input type="date" id="offerFormEndDate" required>
                    </div>
                    <div class="room-form-field">
                        <label for="offerFormStatus">Status</label>
                        <select id="offerFormStatus">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                    <div class="room-form-field">
                        <label for="offerFormMaxRedemptions">Max Redemptions</label>
                        <input type="number" id="offerFormMaxRedemptions" min="0" step="1" placeholder="Optional">
                    </div>
                    <div class="room-form-actions room-form-full">
                        <button type="button" class="btn-action toggle" id="offerFormCancel">Cancel</button>
                        <button type="submit" class="btn-action btn-primary toggle" id="offerFormSubmit">Save Offer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="js/admin-dashboard.js"></script>
</body>

</html>
