<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Patientenübersicht – <%= patient.firstname %> <%= patient.lastname %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/service-search.js"></script>

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

<nav class="navbar navbar-dark bg-dark px-3">
    <span class="navbar-brand">
        👨‍⚕️ Patient – <%= patient.firstname %> <%= patient.lastname %>
    </span>
    <a href="/waiting-room" class="btn btn-outline-light btn-sm">
        🪑 Zurück
    </a>
    <form method="POST"
        action="/patients/<%= patient.id %>/waiting-room"
        class="d-inline"
        onsubmit="return confirm('Patient ins Wartezimmer zurücksetzen?')">
    <button class="btn btn-warning">
        🪑 Ins Wartezimmer
    </button>
    </form>
</nav>

<div class="container mt-4">
    <%- include("partials/flash") %>

    <!-- =========================
         PATIENTENDATEN
    ========================== -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <h4>Patientendaten</h4>

            <table class="table table-sm">
                <tr>
                    <th>Vorname</th>
                    <td><%= patient.firstname %></td>
                </tr>
                <tr>
                    <th>Nachname</th>
                    <td><%= patient.lastname %></td>
                </tr>
                <tr>
                    <th>Geburtsdatum</th>
                    <td>
                        <%= patient.birthdate
                            ? new Date(patient.birthdate).toLocaleDateString("de-DE")
                            : "-" %>
                    </td>
                </tr>
                <tr>
                    <th>Geschlecht</th>
                    <td>
                        <% if (patient.gender === 'm') { %>Männlich
                        <% } else if (patient.gender === 'w') { %>Weiblich
                        <% } else if (patient.gender === 'd') { %>Divers
                        <% } else { %>–<% } %>
                    </td>
                </tr>
                <tr>
                    <th>E-Mail</th>
                    <td><%= patient.email || "-" %></td>
                </tr>
                <tr>
                    <th>Telefon</th>
                    <td><%= patient.phone || "-" %></td>
                </tr>
                <tr>
                    <th>Adresse</th>
                    <td>
                        <%= patient.street || "" %> <%= patient.house_number || "" %><br>
                        <%= patient.postal_code || "" %> <%= patient.city || "" %><br>
                        <%= patient.country || "" %>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- =========================
         AKTIONEN
    ========================== -->
    <div class="d-flex flex-wrap gap-2 align-items-center mb-4">

        <a href="/patients/<%= patient.id %>/medications?returnTo=overview"
           class="btn btn-primary">
            💊 Medikation
        </a>

        <a href="/patients/<%= patient.id %>/plan"
           class="btn btn-outline-secondary">
            📄 Medikationsplan
        </a>

        <a href="/patients/edit/<%= patient.id %>?returnTo=overview"
           class="btn btn-outline-info">
            ✏️ Patient bearbeiten
        </a>

        <form method="POST"
              action="/patients/<%= patient.id %>/discharge"
              class="d-inline"
              onsubmit="return confirm('Patient wirklich entlassen?')">
            <button class="btn btn-danger">
                🟥 Entlassen
            </button>
        </form>

    </div>

    <!-- =========================
         UNTERER BEREICH
    ========================== -->
    <div class="row">

        <!-- =========================
             LINKS: NOTIZEN
        ========================== -->
        <div class="col-md-7">

            <div class="card shadow">
                <div class="card-body">

                    <h5>Notizen</h5>

                    <form method="POST"
                          action="/patients/<%= patient.id %>/notes"
                          class="mb-3">

                        <textarea class="form-control mb-2"
                                  name="note"
                                  rows="3"
                                  placeholder="Neue Notiz hinzufügen..."></textarea>

                        <button class="btn btn-sm btn-primary">
                            ➕ Notiz speichern
                        </button>
                    </form>

                    <hr>

                    <% if (!notes || notes.length === 0) { %>
                        <p class="text-muted">Keine Notizen vorhanden</p>
                    <% } else { %>
                        <% notes.forEach(n => { %>
                            <div class="mb-3 p-2 border rounded bg-light">
                                <div class="small text-muted mb-1">
                                    <%= new Date(n.created_at).toLocaleString("de-DE") %>
                                </div>
                                <div><%= n.note %></div>
                            </div>
                        <% }) %>
                    <% } %>

                </div>
            </div>

        </div>

        <!-- =========================
             RECHTS: HEUTIGE LEISTUNGEN
        ========================== -->
        <div class="col-md-5">

            <div class="card shadow">
                <div class="card-body">

                    <h5>Heutige Leistungen</h5>

                    <!-- Leistung hinzufügen -->
                    <form method="POST"
                          action="/patients/<%= patient.id %>/services"
                          class="mb-3">

                        <div class="mb-2">
                            <label class="form-label">Leistung suchen</label>
                            <input type="text"
                                id="serviceSearch"
                                class="form-control mb-2"
                                placeholder="Leistung suchen…">
                        </div>

                        <div class="mb-2">
                            <label class="form-label">Leistung</label>
                            <select name="service_id"
                                    id="serviceSelect"
                                    class="form-select"
                                    size="8"
                                    required>
                                <% services.forEach(s => { %>
                                    <option value="<%= s.id %>">
                                        <%= s.name %> –
                                        <%= Number(s.price || 0).toFixed(2) %> €
                                    </option>
                                <% }) %>
                            </select>
                        </div>

                        <div class="mb-2">
                            <label class="form-label">Menge</label>
                            <input type="number"
                                   name="quantity"
                                   class="form-control"
                                   value="1"
                                   min="1"
                                   required>
                        </div>

                        <button class="btn btn-sm btn-success">
                            ➕ Leistung hinzufügen
                        </button>
                    </form>

                    <hr>

                    <!-- Heutige Leistungen anzeigen-->
                    <% if (!todayServices || todayServices.length === 0) { %>
                        <p class="text-muted">
                            Noch keine Leistungen für heute erfasst.
                        </p>
                    <% } else { %>

                        <% todayServices.forEach(ls => { %>
                            <div class="border rounded p-2 mb-2 bg-light">

                                <strong><%= ls.name %></strong><br>

                                Menge: <%= ls.quantity %><br>
                                Preis: <%= Number(ls.price).toFixed(2) %> €<br>
                                <small class="text-muted">
                                    Arzt: <%= ls.doctor || "—" %>
                                </small>
                                

                                <div class="mt-2 d-flex gap-2">

                                    <!-- Preis ändern -->
                                    <form method="POST"
                                          action="/patient-services/update/<%= ls.id %>">
                                        <input type="number"
                                               step="0.01"
                                               name="price"
                                               value="<%= ls.price %>"
                                               class="form-control form-control-sm mb-1"
                                               required>
                                        <button class="btn btn-sm btn-outline-warning">
                                            💰 Preis ändern
                                        </button>
                                    </form>

                                    <!-- Löschen -->
                                    <form method="POST"
                                          action="/patient-services/delete/<%= ls.id %>"
                                          onsubmit="return confirm('Leistung wirklich löschen?')">
                                        <button class="btn btn-sm btn-danger">
                                            🗑️ Löschen
                                        </button>
                                    </form>

                                </div>
                            </div>
                        <% }) %>

                    <% } %>

                </div>
            </div>

        </div>

    </div>

</div>

</body>
</html>
