<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css">

</head>
<body class="bg-light">

<nav class="navbar navbar-dark bg-dark position-relative px-3">

    <!-- 🟢 ZENTRIERTER TITEL -->
    <div class="position-absolute top-50 start-50 translate-middle
                d-flex align-items-center gap-2 text-white">
        <i class="bi bi-speedometer2 fs-4"></i>
        <span class="fw-semibold fs-5">Dashboard</span>
    </div>

    <!-- 🔴 RECHTS: LOGOUT -->
    <div class="ms-auto">
        <a href="/logout" class="btn btn-outline-light btn-sm">
            Logout
        </a>
    </div>

</nav>


<div class="container-fluid mt-4">

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

    <!-- =========================
         OBERER BEREICH
    ========================== -->
    <div class="mb-4">
        <h3>Willkommen, <%= user.username %></h3>

        <div class="d-flex flex-wrap gap-2 mt-3">
            <a href="/waiting-room" class="btn btn-outline-primary">
                🪑 Wartezimmer
            </a>

            <% if (user.role === 'arzt') { %>
                <a href="/admin/users" class="btn btn-outline-primary">
                    👥 Userverwaltung
                </a>
            <% } %>

            <a href="/patients" class="btn btn-primary">
                Patientenübersicht
            </a>

            <a href="/medications" class="btn btn-secondary">
                Medikamentenübersicht
            </a>

            <% if (user.role === 'arzt') { %>
                <a href="/services" class="btn btn-secondary">
                    🧾 Leistungen
                </a>
            <% } %>

            <a href="/services/open"
            class="btn btn-warning">
                🧾 Offene Leistungen
            </a>


            <% if (user.role === 'arzt') { %>
                <a href="/services/logs" class="btn btn-outline-secondary">
                    📜 Änderungsprotokoll (Services)
                </a>
            <% } %>

            <% if (user.role === 'arzt') { %>
                <a href="/admin/company-settings" class="btn btn-outline-dark">
                    🏢 Firmendaten
                </a>
            <% } %>
        </div>
    </div>

    <!-- =========================
         UNTERE HÄLFTE – MONITOR
    ========================== -->
    <div class="waiting-monitor">

        <h5 class="mb-3">🪑 Wartezimmer-Monitor</h5>

        <div class="waiting-grid">
            <%
                const maxSlots = 21; // 3 Reihen × 7 Plätze
                for (let i = 0; i < maxSlots; i++) {
                    const p = waitingPatients && waitingPatients[i];
            %>

                <div class="waiting-slot <%= p ? 'occupied' : 'empty' %>">
                    <% if (p) { %>
                        <div class="name">
                            <%= p.firstname %> <%= p.lastname %>
                        </div>
                        <div class="birthdate">
                            <%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
                        </div>
                    <% } else { %>
                        <div class="placeholder">
                            <img src="/images/stuhl.jpg"
                                alt="Freier Platz"
                                class="chair-icon">
                        </div>
                    <% } %>
                </div>

            <% } %>
        </div>

    </div>

</div>

</body>
</html>
