<?php
if(session_status() === PHP_SESSION_NONE) session_start();
if(!defined("APPURL"))   define("APPURL",   "http://localhost/hotel-booking/");
if(!defined("ADMINURL")) define("ADMINURL", "http://localhost/hotel-booking/admin/");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShiaStay Admin — Hotel Management</title>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      *, *::before, *::after { box-sizing: border-box; }
      :root {
        --navy:      #232323;
        --navy-mid:  #302B27;
        --navy-light:#685D54;
        --gold:      #A39382;
        --gold-light:#E5DED2;
        --gold-dark: #685D54;
        --pearl:     #E5DED2;
        --slate:     #232323;
        --white:     #E8E2D8;
        --mocha:     #685D54;
        --mocha-dark:#494039;
        --sidebar-w: 264px;
      }
      * { font-family: 'DM Sans', sans-serif; }
      body { background: var(--pearl); min-height: 100vh; color: var(--slate); }

      /* ─── Sidebar ─── */
      .sidebar {
        width: var(--sidebar-w);
        height: 100vh;
        position: fixed; top: 0; left: 0;
        background: var(--navy);
        z-index: 1000;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
        border-right: 1px solid rgba(201,168,76,0.12);
      }
      /* Gold top line */
      .sidebar::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
      }

      .sidebar-brand {
        padding: 30px 24px 24px;
        border-bottom: 1px solid rgba(201,168,76,0.12);
      }
      .sidebar-brand .brand-inner {
        display: flex; align-items: center; gap: 12px;
      }
      .sidebar-brand .brand-icon {
        width: 42px; height: 42px;
        background: var(--gold);
        border-radius: 3px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
      }
      .sidebar-brand .brand-icon i { color: var(--navy); font-size: 18px; }
      .sidebar-brand h2 {
        font-family: 'Cormorant Garamond', serif;
        color: var(--white);
        font-size: 20px;
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
      }
      .sidebar-brand h2 span { color: var(--gold); }
      .sidebar-brand p {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba(255,255,255,0.35);
        margin: 3px 0 0;
      }

      .sidebar-nav { padding: 20px 0; }
      .sidebar-nav .nav-section {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: rgba(255,255,255,0.25);
        padding: 18px 24px 8px;
        font-weight: 700;
      }
      .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 24px;
        color: rgba(255,255,255,0.55);
        text-decoration: none;
        font-size: 13.5px;
        font-weight: 500;
        border-left: 3px solid transparent;
        transition: all 0.2s ease;
        position: relative;
      }
      .sidebar-nav a i {
        width: 18px;
        font-size: 15px;
        color: rgba(255,255,255,0.35);
        transition: color 0.2s;
      }
      .sidebar-nav a:hover,
      .sidebar-nav a.active {
        background: rgba(201,168,76,0.08);
        color: var(--white);
        border-left-color: var(--gold);
      }
      .sidebar-nav a:hover i,
      .sidebar-nav a.active i { color: var(--gold); }

      /* ─── Topbar ─── */
      .topbar {
        margin-left: var(--sidebar-w);
        background: var(--white);
        padding: 0 32px;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 2px 16px rgba(11,29,58,0.07);
        position: sticky; top: 0; z-index: 900;
        border-bottom: 2px solid rgba(201,168,76,0.12);
      }
      .topbar .page-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--navy);
        margin: 0;
        display: flex; align-items: center; gap: 10px;
      }
      .topbar .page-title i { color: var(--gold); font-size: 20px; }
      .topbar .admin-info {
        display: flex; align-items: center; gap: 10px;
      }
      .topbar .admin-avatar {
        width: 36px; height: 36px;
        background: linear-gradient(135deg, var(--gold), var(--navy));
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: var(--white);
        font-weight: 700; font-size: 14px;
        font-family: 'Cormorant Garamond', serif;
      }
      .topbar .admin-name {
        font-size: 14px; font-weight: 600; color: var(--navy);
      }
      .topbar .admin-role {
        font-size: 11px; color: var(--gold); font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px;
      }
      .topbar .logout-btn {
        background: rgba(11,29,58,0.06);
        border: 1px solid rgba(11,29,58,0.1);
        color: var(--navy);
        padding: 6px 14px;
        border-radius: 4px;
        font-size: 12px; font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
        margin-left: 4px;
      }
      .topbar .logout-btn:hover {
        background: var(--navy);
        color: var(--gold);
        border-color: var(--navy);
      }

      /* ─── Main content ─── */
      .main-content {
        margin-left: var(--sidebar-w);
        padding: 32px;
        min-height: calc(100vh - 68px);
      }

      /* ─── Stat Cards ─── */
      .stat-card {
        border-radius: 6px;
        padding: 24px 20px;
        color: #ffffff;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        border: none; position: relative; overflow: hidden;
      }
      .stat-card::after {
        content: '';
        position: absolute; top: -20px; right: -20px;
        width: 100px; height: 100px; border-radius: 50%;
        background: rgba(255,255,255,0.08);
      }
      .stat-card .icon { font-size: 28px; opacity: 0.85; margin-bottom: 12px; color: #ffffff; }
      .stat-card h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 38px; font-weight: 700; margin: 0; color: #ffffff;
        line-height: 1.1;
      }
      .stat-card p { font-size: 12px; opacity: 0.85; margin: 6px 0 0; color: #ffffff; }
      .stat-card .stat-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.8;
        font-weight: 700; color: #ffffff; margin-bottom: 4px;
      }
      .card-navy  { background: linear-gradient(135deg, #1C2B40 0%, #2C3E55 100%); }
      .card-green { background: linear-gradient(135deg, #1a6b44 0%, #2d8a59 100%); }
      .card-slate { background: linear-gradient(135deg, #3B4758 0%, #252F3C 100%); }
      .card-gold  { background: linear-gradient(135deg, #A8862B 0%, #7E631B 100%); }
      .card-navy *, .card-green *, .card-slate *, .card-gold * { color: #ffffff !important; }

      /* ─── Admin Table ─── */
      .admin-table {
        background: var(--white);
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 2px 16px rgba(11,29,58,0.06);
        border: 1px solid rgba(11,29,58,0.06);
      }
      .admin-table .table { margin: 0; }
      .admin-table .table thead th {
        background: var(--navy);
        color: rgba(255,255,255,0.8);
        border: none;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 16px 20px;
      }
      .admin-table .table thead th:first-child {
        color: var(--gold);
      }
      .admin-table .table tbody td {
        vertical-align: middle;
        padding: 14px 20px;
        border-color: rgba(11,29,58,0.05);
        font-size: 14px;
        color: var(--slate);
      }
      .admin-table .table tbody tr:hover { background: rgba(201,168,76,0.04); }
      .admin-table .table-section-header {
        background: var(--pearl);
        padding: 20px 24px;
        display: flex; justify-content: space-between; align-items: center;
        border-bottom: 1px solid rgba(11,29,58,0.06);
      }
      .admin-table .table-section-header h5 {
        margin: 0;
        font-family: 'Cormorant Garamond', serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--navy);
        display: flex; align-items: center; gap: 8px;
      }
      .admin-table .table-section-header h5 i { color: var(--gold); }

      /* ─── Badges ─── */
      .badge-active   { background: #d4edda; color: #155724; padding: 5px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; }
      .badge-inactive { background: #f8d7da; color: #721c24; padding: 5px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; }
      .badge-paid     { background: #d4edda; color: #155724; padding: 5px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; }
      .badge-pending  { background: rgba(201,168,76,0.15); color: var(--gold-dark); padding: 5px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; border: 1px solid rgba(201,168,76,0.3); }

      /* ─── Admin Forms ─── */
      .admin-form-card {
        background: var(--white);
        border-radius: 4px;
        padding: 36px;
        box-shadow: 0 2px 16px rgba(11,29,58,0.06);
        border: 1px solid rgba(11,29,58,0.06);
      }
      .admin-form-card .form-section-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 24px;
        padding-bottom: 14px;
        border-bottom: 2px solid rgba(201,168,76,0.2);
        display: flex; align-items: center; gap: 10px;
      }
      .admin-form-card .form-section-title i { color: var(--gold); }
      .admin-form-card label {
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--navy);
        margin-bottom: 8px;
      }
      .admin-form-card .form-control {
        border-radius: 3px;
        border: 2px solid #D4C9B5;
        padding: 12px 16px;
        font-size: 14px;
        color: var(--navy);
        transition: border-color 0.2s, box-shadow 0.2s;
      }
      .admin-form-card .form-control:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
        outline: none;
      }
      .btn-admin-primary {
        background: var(--navy);
        color: var(--gold);
        border: 2px solid var(--navy);
        border-radius: 3px;
        padding: 11px 28px;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: all 0.2s;
      }
      .btn-admin-primary:hover {
        background: var(--gold);
        color: var(--navy);
        border-color: var(--gold);
        color: var(--navy);
      }
      .btn-action { border-radius: 3px; padding: 5px 12px; font-size: 11px; font-weight: 700; }

      /* ─── Alert messages ─── */
      .admin-alert {
        padding: 14px 18px;
        border-radius: 3px;
        margin-bottom: 24px;
        font-size: 14px;
        display: flex; align-items: center; gap: 10px;
      }
      .admin-alert.success {
        background: rgba(56,161,105,0.08);
        border: 1px solid rgba(56,161,105,0.25);
        border-left: 3px solid #38a169;
        color: #1a6b44;
      }
      .admin-alert.error {
        background: rgba(220,53,69,0.07);
        border: 1px solid rgba(220,53,69,0.2);
        border-left: 3px solid #dc3545;
        color: #7a1a1a;
      }
    </style>
</head>
<body>

<!-- ─── Sidebar ─── -->
<div class="sidebar">
  <div class="sidebar-brand">
    <div class="brand-inner">
      <div class="brand-icon"><i class="fa fa-hotel"></i></div>
      <div>
        <h2>ShiaStay<span> Admin</span></h2>
        <p>Hotel Management</p>
      </div>
    </div>
  </div>

  <nav class="sidebar-nav">
    <div class="nav-section">Overview</div>
    <a href="<?php echo ADMINURL; ?>index.php"
       <?php if(basename($_SERVER['PHP_SELF']) == 'index.php' && strpos($_SERVER['PHP_SELF'],'admin') !== false && !strpos($_SERVER['PHP_SELF'],'hotels') && !strpos($_SERVER['PHP_SELF'],'rooms') && !strpos($_SERVER['PHP_SELF'],'bookings') && !strpos($_SERVER['PHP_SELF'],'admins')) echo 'class="active"'; ?>>
      <i class="fa fa-tachometer"></i> Dashboard
    </a>

    <div class="nav-section">Properties</div>
    <a href="<?php echo ADMINURL; ?>hotels/index.php"
       <?php if(strpos($_SERVER['PHP_SELF'],'hotels') !== false) echo 'class="active"'; ?>>
      <i class="fa fa-building"></i> Hotels
    </a>
    <a href="<?php echo ADMINURL; ?>rooms/index.php"
       <?php if(strpos($_SERVER['PHP_SELF'],'rooms') !== false) echo 'class="active"'; ?>>
      <i class="fa fa-bed"></i> Guest Rooms
    </a>

    <div class="nav-section">Operations</div>
    <a href="<?php echo ADMINURL; ?>bookings/index.php"
       <?php if(strpos($_SERVER['PHP_SELF'],'bookings') !== false) echo 'class="active"'; ?>>
      <i class="fa fa-calendar-check-o"></i> Reservations
    </a>

    <div class="nav-section">Access</div>
    <a href="<?php echo ADMINURL; ?>admins/index.php"
       <?php if(strpos($_SERVER['PHP_SELF'],'admins') !== false) echo 'class="active"'; ?>>
      <i class="fa fa-users"></i> Administrators
    </a>

    <div class="nav-section">System</div>
    <a href="<?php echo APPURL; ?>home.php" target="_blank">
      <i class="fa fa-external-link"></i> View Hotel Site
    </a>
    <a href="<?php echo ADMINURL; ?>logout.php" style="margin-top:8px;">
      <i class="fa fa-sign-out"></i> Sign Out
    </a>
  </nav>
</div>
