<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Praxis System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css" />

    <style>
      body {
        margin: 0;
        background: #f4f6f9;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Ubuntu;
      }

      .layout {
        display: flex;
        min-height: 100vh;
      }

      /* Sidebar */
      .sidebar {
        width: 240px;
        background: #111827;
        color: white;
        padding: 20px;
        display: flex;
        flex-direction: column;
      }

      .logo {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 15px;
        border-radius: 8px;
        color: #cbd5e1;
        text-decoration: none;
        margin-bottom: 6px;
        font-size: 14px;
      }

      .nav-item:hover {
        background: #1f2937;
        color: white;
      }

      .nav-item.active {
        background: #2563eb;
        color: white;
      }

      .sidebar .spacer {
        flex: 1;
      }

      /* Main */
      .main {
        flex: 1;
        padding: 25px 30px;
      }

      .topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
      }

      .topbar h3 {
        margin: 0;
      }

      .main {
        flex: 1;
        padding: 24px;
        background: #f4f6f9;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .waiting-monitor {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
      }

      .waiting-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(3, 80px);
        gap: 12px;
        width: 100%;
      }

      .waiting-slot {
        border: 2px dashed #cbd5e1;
        border-radius: 10px;
        background: #f8fafc;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden; /* 🔥 DAS fehlt */
      }

      .waiting-slot.occupied {
        border-style: solid;
        background: #eefdf5;
      }

      .waiting-grid {
        grid-auto-flow: row dense;
      }

      .chair-icon {
        width: 40px;
        height: 40px;
        object-fit: contain;
        opacity: 0.25;
      }

      .patient-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px; /* 🔥 Abstand zwischen Name und Datum */
      }

      .waiting-slot.clickable {
        cursor: pointer;
        transition: 0.15s ease;
      }

      .waiting-slot.clickable:hover {
        transform: scale(1.03);
        box-shadow: 0 0 0 2px #2563eb;
      }

    </style>
  </head>

  <body>
    <div class="layout">
      <!-- SIDEBAR -->
      <div class="sidebar">
        <div class="logo">🩺 Praxis System</div>

        <a href="/patients" class="nav-item active">
          <i class="bi bi-people"></i> Patienten
        </a>

        <a href="/waiting-room" class="nav-item">
          <i class="bi bi-chair"></i> Wartezimmer
        </a>

        <a href="/medications" class="nav-item">
          <i class="bi bi-capsule"></i> Medikamente
        </a>

        <a href="/services/open" class="nav-item">
          <i class="bi bi-receipt"></i> Offene Leistungen
        </a>

        <% if (user.role === 'arzt') { %>
        <a href="/admin/invoices" class="nav-item">
          <i class="bi bi-cash-coin"></i> Abrechnung
        </a>

        <a href="/admin/users" class="nav-item">
          <i class="bi bi-gear"></i> Verwaltung
        </a>
        <% } %>

        <div class="spacer"></div>

        <a href="/logout" class="nav-item">
          <i class="bi bi-box-arrow-right"></i> Logout
        </a>
      </div>

      <!-- MAIN CONTENT -->
      <div class="main">
        <div class="topbar">
          <h3>Willkommen, <%= user.username %></h3>
        </div>

        <!-- Flash Messages -->
        <%- include("partials/flash") %>

        <!-- =========================
         WARTEZIMMER MONITOR (dein Original)
    ========================== -->
        <div class="waiting-monitor">
          <h5 class="mb-3">🪑 Wartezimmer-Monitor</h5>

          <div class="waiting-grid">
            <% const maxSlots = 21; 
              for (let i = 0; i < maxSlots; i++) { 
                const p = waitingPatients && waitingPatients[i]; 
            %>

              <% if (p) { %>
                <% if (user.role === 'arzt') { %>
                  <a href="/patients/<%= p.id %>/overview" class="waiting-slot occupied clickable">
                    <div class="patient-text">
                      <div class="name"><%= p.firstname %> <%= p.lastname %></div>
                      <div class="birthdate">
                        <%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
                      </div>
                    </div>
                  </a>
                <% } else { %>
                  <div class="waiting-slot occupied">
                    <div class="patient-text">
                      <div class="name"><%= p.firstname %> <%= p.lastname %></div>
                      <div class="birthdate">
                        <%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
                      </div>
                    </div>
                  </div>
                <% } %>
              <% } %>

            <% } %>
          </div>
        </div>
        </div>
      </div>
    </div>
  </body>
</html>
