<%- include('partials/header') %>

<h2>Vertragsarten verwalten</h2>

<hr>

<!-- ========================= -->
<!-- NEUE VERTRAGSART ANLEGEN -->
<!-- ========================= -->

<h4>Neue Vertragsart anlegen</h4>

<form method="POST" action="/contracts/create" class="row g-3 mb-4">

    <div class="col-md-3">
        <input
            name="name"
            class="form-control"
            placeholder="Name des Vertrages"
            required>
    </div>

    <div class="col-md-2">
        <input
            type="number"
            name="laufzeit"
            class="form-control"
            placeholder="Laufzeit (Monate)"
            required>
    </div>

    <div class="col-md-2">
        <input
            type="number"
            step="0.01"
            name="betrag"
            class="form-control"
            placeholder="Betrag €"
            required>
    </div>

    <div class="col-md-3">
        <textarea
            name="beschreibung"
            class="form-control"
            rows="1"
            placeholder="Freitext / Beschreibung (optional)">
        </textarea>
    </div>

    <div class="col-md-1 form-check mt-2">
        <input
            type="checkbox"
            name="aktiv"
            class="form-check-input"
            checked>
        <label class="form-check-label">Aktiv</label>
    </div>

    <div class="col-md-1">
        <button class="btn btn-primary w-100">
            ➕
        </button>
    </div>
</form>

<hr>

<!-- ========================= -->
<!-- VERTRAGSARTEN ÜBERSICHT -->
<!-- ========================= -->

<h4>Bestehende Vertragsarten</h4>

<%
    const aktiveVertraege = vertragsarten.filter(v => v.aktiv);
%>

<table class="table table-bordered table-striped align-middle">

    <thead class="table-light">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Laufzeit</th>
            <th>Betrag</th>
            <th>Beschreibung</th>
            <th>Status / Aktion</th>
        </tr>
    </thead>

    <tbody>
    <% if (vertragsarten.length === 0) { %>
        <tr>
            <td colspan="6" class="text-center text-muted">
                Keine Vertragsarten vorhanden
            </td>
        </tr>
    <% } %>

    <% vertragsarten.forEach(v => { %>
        <tr class="<%= v.aktiv ? '' : 'table-danger' %>">

            <td><%= v.id %></td>
            <td><%= v.name %></td>
            <td><%= v.laufzeit %> Monate</td>
            <td><%= v.betrag.toFixed(2) %> €</td>
            <td class="<%= v.beschreibung ? '' : 'text-muted' %>">
                <%= v.beschreibung || '—' %>
            </td>

            <!-- STATUS / AKTION -->
            <td>

            <% if (v.aktiv) { %>

                <!-- DEAKTIVIEREN MIT ERSATZ -->
                <form
                    method="POST"
                    action="/contracts/deactivate/<%= v.id %>">

                    <select
                        name="newContractId"
                        class="form-select form-select-sm mb-1"
                        required>

                        <option value="">
                            Ersatz-Vertrag wählen
                        </option>

                        <% aktiveVertraege.forEach(nv => { %>
                            <% if (nv.id !== v.id) { %>
                                <option value="<%= nv.id %>">
                                    <%= nv.name %>
                                </option>
                            <% } %>
                        <% }) %>

                    </select>

                    <button
                        class="btn btn-sm btn-danger w-100"
                        onclick="return confirm(
                            'Alle User mit diesem Vertrag werden auf den neuen Vertrag umgestellt. Fortfahren?'
                        )">
                        🔴 Deaktivieren
                    </button>

                </form>

            <% } else { %>

                <span class="text-muted">
                    🔒 Inaktiv
                </span>

            <% } %>

            </td>
        </tr>
    <% }) %>

    </tbody>
</table>

<a href="/users/dashboard" class="btn btn-link mt-3">
    ⬅ Zurück zum Dashboard
</a>

<%- include('partials/footer') %>
