<?php 
// SERVER-SIDE: Layout includes
include('dripend/statpages/header.php');

// Simulate grabbing the logged-in user's name from your session
$userName = isset($_SESSION['user_full_name']) ? $_SESSION['user_full_name'] : 'Dr. Admin';
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>eRHAMS | Drip Dental Clinic Dashboard</title>
  
  <link rel="stylesheet" href="/rimax/application/dripend/assets/css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

  <style>
    :root {
      /* Core Brand Colors */
      --erhams-dark: #0f172a;      
      --facility-green: #059669;
      --facility-green-light: #ecfdf5;
      --facility-green-border: #a7f3d0;
      --facility-gold: #fbbf24;

      /* UI Colors */
      --bg-app: #f8fafc;
      --surface: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-light: #e2e8f0;
      
      /* Elevations */
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
      --shadow-hover: 0 20px 25px -5px rgba(5, 150, 105, 0.1), 0 8px 10px -6px rgba(5, 150, 105, 0.1);
      
      /* Sidebar Sync Width */
      --sidebar-width: 300px;
      --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background-color: var(--bg-app);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* --- LAYOUT WRAPPER --- */
    .app-wrapper {
      display: flex;
      min-height: 100vh;
      width: 100%;
    }

    /* The Main Content dynamically shifts to make room for the fixed sidebar */
    .main-content {
      flex: 1;
      margin-left: var(--sidebar-width);
      transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      justify-content: center;
      width: calc(100% - var(--sidebar-width));
    }

    /* Class applied via JS when sidebar vanishes */
    .main-content.expanded {
      margin-left: 0;
      width: 100%;
    }

    /* Inner Layout: Core Dashboard on Left, Utility on Right */
    .dashboard-layout {
      width: 100%;
      max-width: 1600px;
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 32px;
      padding: 32px 40px;
      box-sizing: border-box;
    }

    .dashboard-core {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    /* --- HERO BANNER --- */
    .hero-banner {
      background: radial-gradient(circle at 100% 0%, #1e293b 0%, var(--erhams-dark) 100%);
      border-radius: 24px;
      padding: 40px;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.5);
    }

    /* Soft Mesh Gradient Overlay */
    .hero-banner::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: 
        radial-gradient(circle at 80% 20%, rgba(5, 150, 105, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.15) 0%, transparent 40%);
      pointer-events: none;
    }

    .hero-content {
      z-index: 2;
    }

    .hero-content h1 {
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 800;
      margin: 0 0 12px 0;
      letter-spacing: -1px;
      line-height: 1.1;
    }

    .hero-content p {
      font-size: 15px;
      color: #94a3b8;
      margin: 0;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .facility-badge {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--facility-gold);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .system-branding {
      z-index: 2;
      text-align: right;
    }

    .system-branding .powered-by {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #64748b;
      margin-bottom: 4px;
      display: block;
      font-weight: 600;
    }

    .system-branding .erhams-logo {
      font-size: 28px;
      font-weight: 900;
      background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -1px;
    }

    /* --- BENTO TILES GRID --- */
    .tiles-grid {
      display: grid;
      /* Modern fluid column logic */
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
      gap: 20px;
    }

    .tile {
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 24px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      gap: 20px;
      box-shadow: var(--shadow-sm);
      transition: var(--transition-smooth);
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    /* Subtle internal border for a premium glassy feel */
    .tile::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
      pointer-events: none;
    }

    .tile:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: var(--shadow-hover);
      border-color: var(--facility-green-border);
    }

    .tile-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .icon-box {
      width: 56px;
      height: 56px;
      background: var(--facility-green-light);
      border: 1px solid var(--facility-green-border);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition-smooth);
    }

    .tile:hover .icon-box {
      background: var(--facility-green);
      border-color: var(--facility-green);
      transform: scale(1.05) rotate(-3deg);
    }

    .tile img.icon {
      width: 28px;
      height: 28px;
      object-fit: contain;
      transition: var(--transition-smooth);
    }

    .tile:hover img.icon {
      filter: brightness(0) invert(1);
    }

    .action-arrow {
      color: #cbd5e1;
      font-size: 20px;
      transition: var(--transition-smooth);
      opacity: 0;
      transform: translate(-10px, 10px);
    }

    .tile:hover .action-arrow {
      color: var(--facility-green);
      opacity: 1;
      transform: translate(0, 0);
    }

    .tile-bottom .label {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
      margin: 0;
    }

    .tile-bottom .sub-label {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 6px;
      line-height: 1.4;
    }

    /* --- UTILITY RIGHT SIDEBAR --- */
    .utility-panel {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .utility-widget {
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }

    .utility-widget h3 {
      font-size: 13px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin: 0 0 20px 0;
      font-weight: 700;
    }

    .search-box {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .search-box input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--border-light);
      background: var(--bg-app);
      border-radius: 12px;
      outline: none;
      font-family: inherit;
      font-size: 14px;
      color: var(--text-main);
      transition: var(--transition-smooth);
      box-sizing: border-box;
    }

    .search-box input:focus {
      border-color: var(--facility-green);
      background: var(--surface);
      box-shadow: 0 0 0 4px var(--facility-green-light);
    }

    .btn-search {
      background: var(--erhams-dark);
      color: #fff;
      padding: 16px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: var(--transition-smooth);
      margin-top: 8px;
    }

    .btn-search:hover {
      background: var(--facility-green);
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(5, 150, 105, 0.2);
    }

    .btn-search:active {
      transform: translateY(0);
    }

    .status-widget {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }

    .status-header {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 14px;
      color: var(--text-main);
      margin-bottom: 12px;
    }

    .pulse-dot {
      width: 10px;
      height: 10px;
      background-color: #10b981;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
      100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    .status-text {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* --- MOBILE RESPONSIVENESS --- */
    @media (max-width: 1024px) {
      .main-content {
        margin-left: 0;
        width: 100%;
      }
      .dashboard-layout {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 24px;
      }
      /* Floating toggle button from sidebar creates need for top padding on mobile */
      .dashboard-core {
        padding-top: 50px; 
      }
      .hero-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px;
      }
      .hero-content p {
        flex-wrap: wrap;
      }
      .system-branding {
        text-align: left;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 20px;
        width: 100%;
      }
      .tile:active {
        transform: scale(0.98);
      }
    }
    
    @media (max-width: 480px) {
      .dashboard-layout {
        padding: 16px 12px;
      }
      .hero-banner {
        border-radius: 20px;
      }
      .tiles-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <div class="app-wrapper">
    <!-- Include the highly polished left Sidebar here -->
    <?php include('dripend/statpages/sidebar.php'); ?>

    <!-- Main Content Dynamic Wrapper -->
    <main class="main-content" id="dashboardMain">
      <div class="dashboard-layout">
        
        <!-- Core Left Area -->
        <div class="dashboard-core">
          
          <!-- Premium Hero Welcome Banner -->
          <div class="hero-banner">
            <div class="hero-content">
              <h1>Welcome back, <?php echo htmlspecialchars($userName); ?></h1>
              <p>
                You are securely connected to 
                <span class="facility-badge">Drip Dental Clinic</span>
              </p>
            </div>
            <div class="system-branding">
              <span class="powered-by">Powered by</span>
              <div class="erhams-logo">eRHAMS</div>
            </div>
          </div>

          <!-- Module Grid -->
          <div class="tiles-grid">
            <a class="tile" href="/rimax/application/views/appointment/appointment_calendar.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/calendar.png" alt="Calendar">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Appointments</div>
                <div class="sub-label">Manage daily schedules and bookings</div>
              </div>
            </a>

            <a class="tile" href="/rimax/application/views/consultation/consultationQueue.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/drconsult.png" alt="Records">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Consulting Room</div>
                <div class="sub-label"> Meet patient with compassionate care</div>
              </div>
            </a>
            
            
            <a class="tile" href="/rimax/application/views/patient/patient_management_dashboard.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/records.png" alt="Records">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Patient EMR</div>
                <div class="sub-label">Comprehensive health records & history</div>
              </div>
            </a>
            

            <a class="tile" href="/rimax/application/views/accounts/billingDashboard.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/accounts.png" alt="Accounts">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Billing & Accounts</div>
                <div class="sub-label">Manage invoices, ledgers, and payments</div>
              </div>
            </a>

            <a class="tile" href="/rimax/application/views/laboratory/labPanel.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/investigation.png" alt="Lab">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Laboratory</div>
                <div class="sub-label">Process tests and clinical investigations</div>
              </div>
            </a>

            <a class="tile" href="/rimax/application/views/dispensary/dispensaryDashboard.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/pharmacy.png" alt="Pharmacy">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Pharmacy</div>
                <div class="sub-label">Inventory, prescriptions & dispensary</div>
              </div>
            </a>

            <a class="tile" href="/rimax/application/views/insurance/insurance_claims_dashboard.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/insurance-claims.png" alt="Insurance">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Insurance Claims</div>
                <div class="sub-label">Process, verify, and track claim payouts</div>
              </div>
            </a>

            <a class="tile" href="#">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/report.png" alt="Reports">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Analytics & Reports</div>
                <div class="sub-label">Financial and operational insights</div>
              </div>
            </a>

            <a class="tile" href="/rimax/application/views/ipd/ipdDashboard.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/ipd.png" alt="IPD">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">IPD Management</div>
                <div class="sub-label">Inpatient department and ward tracking</div>
              </div>
            </a>

            <a class="tile" href="#">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/rimax/application/dripend/assets/icons/dashboard/hrm.png" alt="HRM">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">Human Resources</div>
                <div class="sub-label">Staff directories, payroll, and rotas</div>
              </div>
            </a>

            <a class="tile" href="/rimax/application/views/system_setup/systemSetup.php">
              <div class="tile-top">
                <div class="icon-box">
                  <img class="icon" src="/application/dripend/assets/icons/dashboard/logo.png" alt="Setup">
                </div>
                <div class="action-arrow">↗</div>
              </div>
              <div class="tile-bottom">
                <div class="label">System Setup</div>
                <div class="sub-label">eRHAMS core settings and configurations</div>
              </div>
            </a>
          </div>
        </div>

        <!-- Utility Right Sidebar -->
        <aside class="utility-panel">
          <div class="utility-widget">
            <h3>Quick Locate</h3>
            <div class="search-box">
              <input type="text" placeholder="Search Patient Name...">
              <input type="text" placeholder="Patient ID / Record No...">
              <button class="btn-search">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                Search eRHAMS
              </button>
            </div>
          </div>

          <div class="utility-widget status-widget">
            <div class="status-header">
              <div class="pulse-dot"></div>
              Server Status
            </div>
            <div class="status-text">
              System is fully operational. Connected to Drip Dental Clinic local node securely with active sync to main server.
            </div>
          </div>
        </aside>

      </div>
    </main>
  </div>

  <script src="/rimax/application/dripend/assets/js/js.js"></script>
  
  <script>
    // This script ensures the Dashboard smoothly expands to fill the space
    // when the left sidebar vanishes (syncs with your sidebar logic).
    document.addEventListener('DOMContentLoaded', function () {
      const sidebar = document.getElementById('sidebar');
      const mainContent = document.getElementById('dashboardMain');

      if (sidebar && mainContent) {
        // Create an observer to watch for the 'vanished' class on the sidebar
        const observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.attributeName === "class") {
              if (sidebar.classList.contains('vanished')) {
                mainContent.classList.add('expanded');
              } else {
                mainContent.classList.remove('expanded');
              }
            }
          });
        });

        // Start observing the sidebar's class attribute
        observer.observe(sidebar, { attributes: true });

        // Initial check on page load
        if (sidebar.classList.contains('vanished')) {
          mainContent.classList.add('expanded');
        }
      }
    });
  </script>

  <?php include('dripend/statpages/footer.php'); ?>
</body>
</html>