@extends('layouts.app', ['title' => $invoice->type_labal . ' bearbeiten'])
@section('content')

@push('styles')
<style>
    body { background: #f4f6fb !important; }

    /* ── Positions-Karten – identisch Order ──────────────────── */
    .pos-card { margin-bottom: 6px; border-radius: 8px; }
    .pos-group > div { background: #e5e7eb; border-radius: 8px 8px 0 0; }
    .pos-group:hover > div { background: #dde0e6; }
    .pos-card:not(:has(.pos-item)) .pos-group > div { border-radius: 8px; }
    .pos-card > *:last-child > div:first-child,
    .pos-card > .pos-edit-row:last-child { border-radius: 0 0 8px 8px; }
    .pos-card > .pos-item:last-child > div { border-radius: 0 0 8px 8px; }
    .pos-group .pos-nr-badge {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; border-radius: 50%;
        background: #dbeafe; color: #1d4ed8;
        font-size: 11px; font-weight: 700; line-height: 1;
    }
    .pos-item { border-top: 1px solid #f3f4f6; }
    .pos-item > div { background: #fff; }
    .pos-item:hover > div { background: #fafbff; }
    .pos-nr-sub { font-size: 11.5px; color: #c4c9d4; }
    .pos-sec-nums { font-size: 12.5px; color: #374151; }
    .pos-num-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; color: #c4c9d4; }
    .pos-gprice-col  { min-width: 90px; border-left: 1px solid #f0f0f0; padding-left: 14px; }
    .pos-gprice      { font-size: 15px; font-weight: 700; line-height: 1.2; }
    .pos-gprice-group { color: #111827; }
    .pos-gprice-item  { color: #2563eb; }
    .pos-gprice-optional { opacity: .3; }
    .pos-desc { font-size: 12px; color: #9ca3af; white-space: pre-line; line-height: 1.5; margin-top: 2px; }
    .pos-badge-optional {
        display: inline-block; font-size: 10px; background: #fef3c7; color: #92400e;
        font-weight: 500; padding: 1px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px;
    }
    .pos-edit-row { border-top: 1px solid #fde68a; background: #fffbeb; }

    /* ── Pfeile – identisch Order ────────────────────────────── */
    .pos-arrow-btn {
        display: flex; align-items: center; justify-content: center;
        width: 18px; height: 18px;
        border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 50%;
        padding: 0; color: #64748b; font-size: 9px; line-height: 1;
        cursor: pointer; transition: border-color .12s, color .12s, background .12s;
    }
    .pos-arrow-btn:hover  { border-color: #64748b; background: #f1f5f9; color: #1e293b; }
    .pos-arrow-btn:disabled { opacity: .25; cursor: default; }

    /* ── 3 Icon-Buttons – identisch Order ───────────────────── */
    .pos-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 50%;
        font-size: 12px; cursor: pointer;
        transition: filter .12s, transform .1s;
    }
    .pos-icon-btn:hover { filter: brightness(.92); transform: scale(1.08); }
    .pos-icon-btn:active { transform: scale(.96); }
    .pos-icon-btn-add    { border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; }
    .pos-icon-btn-edit   { border: 1px solid #ddd6fe; background: #f5f3ff; color: #7c3aed; }
    .pos-icon-btn-danger { border: 1px solid #fecaca; background: #fef2f2; color: #ef4444; }

    .pos-row .pos-actions,
    .pos-row .pos-arrows { opacity: 0; transition: opacity .15s; }
    .pos-row:hover .pos-actions,
    .pos-row:hover .pos-arrows,
    .pos-row .pos-actions:has(.dropdown-menu.show),
    #inline-position-row .pos-actions,
    .pos-edit-row .pos-actions { opacity: 1; }

    .pos-actions .dropdown-menu {
        border-radius: 8px; padding: 4px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
        font-size: 13px; min-width: 185px;
    }
    .pos-actions .dropdown-item {
        border-radius: 5px; display: flex; align-items: center; padding: 7px 10px;
    }
    .pos-actions .dropdown-item:hover { background: #f3f4f6; }

    /* ── Tab-Leiste anthrazit – identisch Order ─────────────── */
    #inv-pos-tabs .nav-link {
        color: rgba(255,255,255,.6); border: none;
        border-radius: 6px 6px 0 0;
        transition: color .15s, background .15s;
    }
    #inv-pos-tabs .nav-link:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); }
    #inv-pos-tabs .nav-link.active { color: #212529; background: #fff; font-weight: 600; }

    /* ── Sidebar ──────────────────────────────────────────────── */
    .inv-sidebar { position: sticky; top: 1rem; }
    .inv-total-card { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); }
    .inv-festschreiben-card { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
</style>
@endpush

<div class="container-fluid py-4" style="max-width:1280px;">

    {{-- ── Page Header ──────────────────────────────────────────── --}}
    <div class="mb-4">
        <nav class="d-flex align-items-center gap-2 mb-2" style="font-size:12px; color:#94a3b8;">
            <a href="{{ route('pms.orders.show', $order->id) }}"
               class="text-decoration-none" style="color:#94a3b8;">{{ $order->order_nr }}</a>
            <i class="bi bi-chevron-right" style="font-size:9px;"></i>
            <span style="color:#475569;">{{ $invoice->type_labal }}</span>
        </nav>

        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ route('pms.orders.show', $order->id) }}"
                   class="btn btn-white border bg-white rounded-3 btn-sm px-3 shadow-sm"
                   style="color:#64748b;">
                    <i class="bi bi-arrow-left me-1"></i>Zurück
                </a>
                <div>
                    <h4 class="fw-bold mb-0" style="color:#0f172a; font-size:20px;">
                        {{ $invoice->type_labal }}
                        <span class="fw-normal text-muted ms-1" style="font-size:16px;">bearbeiten</span>
                    </h4>
                    <div class="text-muted mt-1" style="font-size:13px;">{{ $order->title }}</div>
                </div>
            </div>
            <span class="rounded-pill px-3 py-2 fw-semibold d-flex align-items-center gap-1"
                  style="background:#fef9c3; color:#854d0e; font-size:12px;">
                <i class="bi bi-pencil-square"></i> Entwurf
            </span>
        </div>
    </div>

    @if(session('success'))
        <div class="alert border-0 rounded-3 shadow-sm py-2 mb-4 d-flex align-items-center gap-2"
             style="background:#f0fdf4; color:#166534;">
            <i class="bi bi-check-circle-fill"></i>{{ session('success') }}
        </div>
    @endif

    <div class="row g-4">

        {{-- ── Positions-Spalte ─────────────────────────────────── --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">

                {{-- Dunkler Header – identisch Order --}}
                <div class="card-header border-0 pt-3 pb-0 px-4" style="background:#2d3340;">
                    <ul class="nav nav-tabs border-0" id="inv-pos-tabs" role="tablist">
                        <li class="nav-item">
                            <span class="nav-link active px-3 py-2"
                                  style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-list-nested me-1"></i>POSITIONEN
                                @if($invoice->all_positions->count())
                                    <span class="badge rounded-pill bg-secondary ms-1"
                                          style="font-size:9px;">{{ $invoice->all_positions->count() }}</span>
                                @endif
                            </span>
                        </li>
                    </ul>
                </div>

                {{-- Aktions-Buttons – identisch Order --}}
                <div class="d-flex gap-1 px-3 pt-3 pb-1">
                    <button class="btn btn-sm btn-primary" onclick="showInlinePosition()" id="btn-add-position">
                        <i class="bi bi-plus me-1"></i>Position
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-collection me-1"></i>Aus Katalog
                        </button>
                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item small" onclick="showInlinePosition()"><i class="bi bi-book me-2 text-secondary"></i>Leistung</button></li>
                            <li><button class="dropdown-item small" onclick="showInlinePosition()"><i class="bi bi-box-seam me-2 text-secondary"></i>Material</button></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><button class="dropdown-item small" onclick="showInlinePosition()"><i class="bi bi-clock me-2 text-secondary"></i>Lohn</button></li>
                            <li><button class="dropdown-item small" onclick="showInlinePosition()"><i class="bi bi-tools me-2 text-secondary"></i>Geräte</button></li>
                            <li><button class="dropdown-item small" onclick="showInlinePosition()"><i class="bi bi-truck me-2 text-secondary"></i>Fremdleistung</button></li>
                            <li><button class="dropdown-item small" onclick="showInlinePosition()"><i class="bi bi-three-dots me-2 text-secondary"></i>Sonstige</button></li>
                        </ul>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div id="positions-empty" class="{{ $invoice->positions->count() ? 'd-none' : '' }} text-center text-muted py-5">
                        <i class="bi bi-inbox d-block fs-3 mb-2 opacity-25"></i>
                        Noch keine Positionen angelegt.
                    </div>
                    <div id="positions-table" class="{{ $invoice->positions->count() ? '' : 'd-none' }}">
                        <div id="positions-tbody">
                            @foreach($invoice->positions as $i => $pos)
                                @include('pms.invoices._position_row', [
                                    'pos'   => $pos,
                                    'depth' => 0,
                                    'nr'    => ($i + 1),
                                    'units' => $units,
                                ])
                            @endforeach
                            {{-- Inline-Eingabezeile --}}
                            <div id="inline-position-row" style="display:none; border-bottom:1px solid #c8dcff; background:#eef4ff;">
                                <div class="d-flex align-items-start gap-2 px-3 py-2">
                                    <div class="text-muted small flex-shrink-0 pt-1" style="min-width:42px;">neu</div>
                                    <div class="flex-grow-1">
                                        <input type="text" id="inline-title"
                                               class="form-control form-control-sm mb-1"
                                               placeholder="Titel *">
                                        <textarea id="inline-desc" rows="2"
                                                  class="form-control form-control-sm mb-2"
                                                  placeholder="Beschreibung (optional)"></textarea>
                                        <div class="d-flex gap-2 justify-content-end align-items-end flex-wrap">
                                            <div>
                                                <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.03em;">MENGE</div>
                                                <input type="number" name="quantity" step="0.01" value="0"
                                                       class="form-control form-control-sm text-end" style="width:75px;">
                                            </div>
                                            <div>
                                                <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.03em;">ME</div>
                                                <select name="fk_unit_id" class="form-select form-select-sm" style="width:78px;">
                                                    <option value="">—</option>
                                                    @foreach($units as $u)
                                                    <option value="{{ $u->id }}">{{ $u->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div>
                                                <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.03em;">E-PREIS €</div>
                                                <input type="number" id="inline-unit-price" step="0.01" value="0"
                                                       class="form-control form-control-sm text-end" style="width:95px;">
                                            </div>
                                            <div>
                                                <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.03em;">G-PREIS €</div>
                                                <div id="inline-gpreis" class="fw-semibold text-end pt-1" style="width:105px; font-size:13px;">—</div>
                                            </div>
                                            <div class="d-flex align-items-end pb-1">
                                                <div class="form-check form-switch mb-0">
                                                    <input class="form-check-input" type="checkbox"
                                                           id="inline-is-optional" value="1">
                                                    <label class="form-check-label small" for="inline-is-optional" style="font-size:11px;">Optional</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 pt-1" style="white-space:nowrap;">
                                        <button type="button" onclick="invSaveNewPos()"
                                                class="btn btn-sm btn-primary rounded-pill px-2 py-1" title="Speichern">
                                            <i class="bi bi-check-lg"></i>
                                        </button>
                                        <button type="button" onclick="cancelInlinePosition()"
                                                class="btn btn-sm btn-outline-secondary rounded-pill px-2 py-1 ms-1" title="Abbrechen">
                                            <i class="bi bi-x-lg"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="inline-parent-id" value="">
                            <input type="hidden" id="inline-level" value="1">
                        </div>

                        @php $rowStyle = 'd-flex align-items-center gap-2 px-4'; @endphp
                        <div class="border-top">
                            <div class="{{ $rowStyle }} py-2 small border-bottom">
                                <div class="flex-grow-1 d-flex justify-content-end gap-3 align-items-center">
                                    <span class="fw-bold text-muted" style="font-size:10px; letter-spacing:.04em;">NETTOSUMME</span>
                                    <span class="fw-bold" id="inv-subtotal-bottom" style="min-width:110px; text-align:right;">{{ number_format($invoice->subtotal, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                            <div class="{{ $rowStyle }} py-2 small border-bottom">
                                <div class="flex-grow-1 d-flex justify-content-end gap-3 align-items-center">
                                    <span class="text-muted" style="font-size:10px; letter-spacing:.04em;">UMSATZSTEUER {{ number_format((float)$invoice->vat_rate, 0) }} %</span>
                                    <span class="text-muted" id="inv-vat-bottom" style="min-width:110px; text-align:right;">{{ number_format($invoice->vat_amount, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                            <div class="{{ $rowStyle }} py-2 fw-bold" style="background:#f8f9fa;">
                                <div class="flex-grow-1 d-flex justify-content-end gap-3 align-items-center">
                                    <span style="font-size:10px; letter-spacing:.04em;">GESAMTSUMME</span>
                                    <span id="inv-total-bottom-val" style="min-width:110px; text-align:right;">{{ number_format($invoice->total, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- ── Sticky Sidebar ───────────────────────────────────── --}}
        <div class="col-lg-4">
            <div class="inv-sidebar">

                {{-- Gesamtbetrag --}}
                <div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">
                    <div class="inv-total-card px-4 pt-4 pb-3">
                        <div class="text-white mb-1" style="font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.06em;">
                            Gesamtbetrag brutto
                        </div>
                        <div class="text-white fw-bold" id="inv-total"
                             style="font-size:30px; letter-spacing:-.5px; line-height:1;">
                            {{ number_format($invoice->total, 2, ',', '.') }} €
                        </div>
                    </div>
                    <div class="px-4 py-3" style="background:#f8faff;">
                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2"
                             style="border-bottom:1px solid #e2e8f0;">
                            <span class="text-muted" style="font-size:13px;">Nettobetrag</span>
                            <span class="fw-semibold" style="font-size:13px;" id="inv-subtotal">
                                {{ number_format($invoice->subtotal, 2, ',', '.') }} €
                            </span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted" style="font-size:13px;">
                                MwSt. {{ $invoice->vat_rate }} %
                            </span>
                            <span class="text-muted" style="font-size:13px;" id="inv-vat">
                                {{ number_format($invoice->vat_amount, 2, ',', '.') }} €
                            </span>
                        </div>
                    </div>
                </div>

                {{-- Rechnungsdaten --}}
                <div class="card border-0 shadow-sm rounded-4 mb-3">
                    <div class="card-body px-4 pt-4 pb-3">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <i class="bi bi-sliders2 text-primary" style="font-size:16px;"></i>
                            <span class="fw-semibold" style="font-size:14px;color:#0f172a;">Rechnungsdaten</span>
                        </div>
                        <form action="{{ route('pms.invoices.update', $invoice->id) }}" method="POST">
                            @csrf
                            {{-- Datum-Zeile --}}
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <label class="form-label d-flex align-items-center gap-1 mb-1"
                                           style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;">
                                        <i class="bi bi-calendar3"></i> Datum
                                    </label>
                                    <input type="date" name="invoice_date" class="form-control form-control-sm"
                                           value="{{ $invoice->invoice_date }}">
                                </div>
                                <div class="col-6">
                                    <label class="form-label d-flex align-items-center gap-1 mb-1"
                                           style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;">
                                        <i class="bi bi-calendar-check"></i> Fällig am
                                    </label>
                                    <input type="date" name="due_date" class="form-control form-control-sm"
                                           value="{{ $invoice->due_date }}">
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label d-flex align-items-center gap-1 mb-1"
                                       style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;">
                                    <i class="bi bi-calendar-range"></i> Leistungszeitraum
                                </label>
                                <div class="d-flex gap-1 align-items-center">
                                    <input type="date" name="performance_from" class="form-control form-control-sm"
                                           value="{{ $invoice->performance_from }}" placeholder="von">
                                    <span class="text-muted small">–</span>
                                    <input type="date" name="performance_to" class="form-control form-control-sm"
                                           value="{{ $invoice->performance_to }}" placeholder="bis">
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label d-flex align-items-center gap-1 mb-1"
                                       style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;">
                                    <i class="bi bi-file-text"></i> AGB
                                </label>
                                <select name="fk_terms_template_id" class="form-select form-select-sm">
                                    <option value="">— keine AGB —</option>
                                    @foreach($terms_templates as $t)
                                        <option value="{{ $t->id }}"
                                            {{ $invoice->fk_terms_template_id == $t->id ? 'selected' : '' }}>
                                            {{ $t->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label d-flex align-items-center gap-1 mb-1"
                                       style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;">
                                    <i class="bi bi-bank"></i> Bankkonto
                                </label>
                                <select name="fk_bank_account_id" class="form-select form-select-sm">
                                    <option value="">— kein Konto —</option>
                                    @foreach($bank_accounts as $ba)
                                        <option value="{{ $ba->id }}"
                                            {{ $invoice->fk_bank_account_id == $ba->id ? 'selected' : '' }}>
                                            {{ $ba->bank_name }} – {{ $ba->iban }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <button type="submit"
                                    class="btn btn-sm w-100 rounded-3 fw-semibold"
                                    style="background:#f1f5f9; color:#475569; border:none; font-size:13px;">
                                <i class="bi bi-floppy me-1"></i>Speichern
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Auftrag-Übersicht --}}
                @php
                    $orderNetto     = (float) \DB::table('pms_order_positions')
                        ->where('fk_order_id', $order->id)
                        ->where('is_deleted', 0)
                        ->selectRaw('COALESCE(SUM(quantity * unit_price), 0) as t')
                        ->value('t');
                    $orderBrutto    = round($orderNetto * (1 + ($order->vat_rate ?? 19) / 100), 2);
                    $gestelltNetto  = \App\Models\PmsInvoice::where('fk_order_id', $order->id)
                        ->where('status', 'festgeschrieben')
                        ->where('is_deleted', 0)
                        ->sum('subtotal');
                    $gestelltBrutto = \App\Models\PmsInvoice::where('fk_order_id', $order->id)
                        ->where('status', 'festgeschrieben')
                        ->where('is_deleted', 0)
                        ->sum('total');
                    $offenNetto     = max(0, $orderNetto - $gestelltNetto);
                    $offenBrutto    = max(0, $orderBrutto - $gestelltBrutto);
                    $progressPct    = $orderBrutto > 0
                        ? min(100, round($gestelltBrutto / $orderBrutto * 100))
                        : 0;
                @endphp
                <div class="card border-0 shadow-sm rounded-4 mb-3">
                    <div class="card-body px-4 pt-4 pb-3">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <i class="bi bi-bar-chart-line text-primary" style="font-size:15px;"></i>
                            <span class="fw-semibold" style="font-size:14px;color:#0f172a;">Auftragsstand</span>
                        </div>
                        <div class="progress mb-3" style="height:8px; border-radius:6px;">
                            <div class="progress-bar bg-success" role="progressbar"
                                 style="width:{{ $progressPct }}%; border-radius:6px;"
                                 aria-valuenow="{{ $progressPct }}" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                        <div class="d-flex flex-column gap-2" style="font-size:13px;">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted">Auftragssumme</span>
                                <div class="text-end">
                                    <div class="fw-semibold">{{ number_format($orderBrutto, 2, ',', '.') }} €</div>
                                    <div class="text-muted" style="font-size:11px;">{{ number_format($orderNetto, 2, ',', '.') }} € netto</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted">Bereits gestellt</span>
                                <div class="text-end">
                                    <div class="fw-semibold text-success">{{ number_format($gestelltBrutto, 2, ',', '.') }} €</div>
                                    <div class="text-muted" style="font-size:11px;">{{ number_format($gestelltNetto, 2, ',', '.') }} € netto</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center pt-2"
                                 style="border-top:1px solid #e2e8f0;">
                                <span class="fw-semibold">Noch offen</span>
                                <div class="text-end">
                                    <div class="fw-bold {{ $offenBrutto > 0 ? 'text-danger' : 'text-success' }}"
                                         style="font-size:15px;">
                                        {{ number_format($offenBrutto, 2, ',', '.') }} €
                                    </div>
                                    <div class="{{ $offenNetto > 0 ? 'text-danger' : 'text-success' }}" style="font-size:11px;">
                                        {{ number_format($offenNetto, 2, ',', '.') }} € netto
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Festschreiben --}}
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                    <div class="inv-festschreiben-card px-4 pt-4 pb-3">
                        <div class="d-flex gap-3 align-items-start">
                            <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:40px;height:40px;background:#16a34a;margin-top:2px;">
                                <i class="bi bi-lock-fill text-white" style="font-size:16px;"></i>
                            </div>
                            <div>
                                <div class="fw-bold mb-1" style="font-size:14px;color:#14532d;">
                                    Rechnung festschreiben
                                </div>
                                <div style="font-size:12px;color:#166534;line-height:1.55;">
                                    Vergabe der Rechnungsnummer und PDF-Erstellung.
                                    Danach nicht mehr bearbeitbar.
                                    @if($invoice->type === 'schluss')
                                        <br><strong>Abschläge werden automatisch abgezogen.</strong>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="px-4 py-3" style="background:#fff;">
                        <button type="button"
                                class="btn btn-success w-100 rounded-3 fw-semibold py-2"
                                data-bs-toggle="modal" data-bs-target="#modal-festschreiben">
                            <i class="bi bi-lock me-2"></i>Festschreiben + PDF erstellen
                        </button>
                    </div>
                </div>

            </div>{{-- /inv-sidebar --}}
        </div>
    </div>
</div>

{{-- ── Modal: Festschreiben ─────────────────────────────────────── --}}
<div class="modal fade" id="modal-festschreiben" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 px-4 pt-4 pb-2">
                <h5 class="modal-title fw-bold" style="color:#0f172a;">
                    <i class="bi bi-lock-fill text-success me-2"></i>Rechnung festschreiben?
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body px-4 pb-2">
                <p class="mb-3" style="font-size:14px;color:#374151;">
                    Die <strong>{{ $invoice->type_labal }}</strong> wird festgeschrieben und erhält
                    ihre endgültige Rechnungsnummer.
                </p>
                <div class="rounded-3 px-3 py-2" style="background:#fff7ed; border-left:3px solid #f97316; font-size:13px; color:#9a3412;">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    <strong>Danach nicht mehr bearbeitbar.</strong>
                    Positionen, Beträge und Stammdaten sind endgültig gesperrt.
                    @if($invoice->type === 'schluss')
                        <br>Alle festgeschriebenen Abschläge werden automatisch abgezogen.
                    @endif
                </div>
            </div>
            <div class="modal-footer border-0 px-4 pb-4 pt-2 gap-2">
                <button type="button" class="btn btn-light rounded-3 px-4 border"
                        data-bs-dismiss="modal">Abbrechen</button>
                <form method="POST" action="{{ route('pms.invoices.finalize', $invoice->id) }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-success rounded-3 px-4 fw-semibold">
                        <i class="bi bi-lock me-1"></i>Ja, festschreiben
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
var INV_ID = {{ $invoice->id }};
var CSRF   = '{{ csrf_token() }}';

// ── Inline-Eingabezeile öffnen ─────────────────────────────────
var _subCtx = { parentId: null, level: 1 };
function setSubContext(pid, lvl) { _subCtx.parentId = pid || null; _subCtx.level = lvl || 1; }

function showInlinePosition() { _openInlineRow(null, 1); }
function showSubPosition(parentId, level) { _openInlineRow(parentId, level); }

function _openInlineRow(parentId, level) {
    document.getElementById('inline-parent-id').value = parentId || '';
    document.getElementById('inline-level').value = level || 1;

    document.getElementById('positions-empty').classList.add('d-none');
    document.getElementById('positions-table').classList.remove('d-none');

    var row = document.getElementById('inline-position-row');

    if (parentId) {
        var parentCard = document.getElementById('pos-card-' + parentId);
        if (parentCard) {
            parentCard.appendChild(row);
        } else {
            var parentPosRow = document.getElementById('pos-row-' + parentId);
            var container = parentPosRow ? parentPosRow.closest('.pos-card') : null;
            (container || document.getElementById('positions-tbody')).appendChild(row);
        }
    } else {
        document.getElementById('positions-tbody').appendChild(row);
    }

    row.style.display = '';
    var titleInput = document.getElementById('inline-title');
    titleInput.value = '';
    titleInput.focus();
    row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function updateInlineGpreis() {
    var qty   = parseFloat(document.querySelector('#inline-position-row input[name="quantity"]')?.value || 0);
    var price = parseFloat(document.getElementById('inline-unit-price')?.value || 0);
    var el    = document.getElementById('inline-gpreis');
    if (!el) return;
    var total = qty * price;
    el.textContent = total > 0
        ? total.toLocaleString('de-DE', { minimumFractionDigits:2, maximumFractionDigits:2 }) + ' €'
        : '—';
}

document.addEventListener('DOMContentLoaded', function () {
    var qtyInput   = document.querySelector('#inline-position-row input[name="quantity"]');
    var priceInput = document.getElementById('inline-unit-price');
    if (qtyInput)   qtyInput.addEventListener('input', updateInlineGpreis);
    if (priceInput) priceInput.addEventListener('input', updateInlineGpreis);
});

function cancelInlinePosition() {
    var row = document.getElementById('inline-position-row');
    row.style.display = 'none';
    document.getElementById('inline-title').value = '';
    document.getElementById('inline-desc').value  = '';
    var qtyInput = document.querySelector('#inline-position-row input[name="quantity"]');
    if (qtyInput) qtyInput.value = '0';
    document.getElementById('inline-unit-price').value = '0';
    var unitSel = document.querySelector('#inline-position-row select[name="fk_unit_id"]');
    if (unitSel) unitSel.value = '';
    document.getElementById('inline-is-optional').checked = false;
    document.getElementById('inline-gpreis').textContent = '—';
    @if(!$invoice->positions->count())
    document.getElementById('positions-empty').classList.remove('d-none');
    document.getElementById('positions-table').classList.add('d-none');
    @endif
}

function invSaveNewPos() {
    var title    = document.getElementById('inline-title').value.trim();
    var desc     = document.getElementById('inline-desc').value.trim();
    var qty      = parseFloat(document.querySelector('#inline-position-row input[name="quantity"]')?.value) || 0;
    var price    = parseFloat(document.getElementById('inline-unit-price')?.value) || 0;
    var unitId   = document.querySelector('#inline-position-row select[name="fk_unit_id"]')?.value || null;
    var optional = document.getElementById('inline-is-optional').checked ? 1 : 0;
    var parentId = document.getElementById('inline-parent-id').value || null;
    if (!title) { document.getElementById('inline-title').focus(); return; }
    fetch('/pms/rechnungen/' + INV_ID + '/positionen', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ title: title, description: desc, quantity: qty, unit_price: price,
                               fk_unit_id: unitId, is_optional: optional,
                               parent_id: parentId, line_total: qty * price }),
    }).then(function(r) { return r.json(); }).then(function(d) { if (d.success) window.location.reload(); });
}

// ── Inline-Edit ein-/ausblenden ─────────────────────────────────
function toggleEditRow(posId) {
    var row = document.getElementById('edit-row-' + posId);
    row.style.display = (row.style.display === 'none') ? '' : 'none';
}

// ── Inline-Edit speichern ───────────────────────────────────────
function invSavePosEdit(posId) {
    var title    = document.getElementById('inv-edit-title-'+ posId)?.value.trim() || '';
    var desc     = document.getElementById('inv-edit-desc-' + posId)?.value.trim() || '';
    var qty      = parseFloat(document.getElementById('inv-edit-qty-'  + posId)?.value) || 0;
    var price    = parseFloat(document.getElementById('inv-edit-price-'+ posId)?.value) || 0;
    var unitId   = document.getElementById('inv-edit-unit-' + posId)?.value || null;
    var optional = document.getElementById('inv-edit-opt-'  + posId)?.checked ? 1 : 0;
    if (!title) { document.getElementById('inv-edit-title-' + posId)?.focus(); return; }
    fetch('/pms/rechnungen/' + INV_ID + '/positionen/' + posId + '/update', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ title: title, description: desc, quantity: qty, unit_price: price,
                               fk_unit_id: unitId, is_optional: optional, line_total: qty * price }),
    }).then(function(r) { return r.json(); })
      .then(function() { window.location.reload(); })
      .catch(function() { alert('Fehler beim Speichern'); });
}

// ── Position löschen ────────────────────────────────────────────
function invDeletePos(posId, posTitle) {
    if (!confirm('Position "' + posTitle + '" löschen?\nAlle Unterpositionen werden ebenfalls gelöscht.')) return;
    fetch('/pms/rechnungen/' + INV_ID + '/positionen/' + posId + '/loeschen', {
        method: 'POST', headers: { 'X-CSRF-TOKEN': CSRF },
    }).then(function(r) { return r.json(); }).then(function() {
        var card = document.getElementById('pos-card-' + posId);
        if (card) card.remove();
        else {
            document.getElementById('pos-row-'  + posId)?.remove();
            document.getElementById('edit-row-' + posId)?.remove();
        }
        invRefreshTotals(); checkEmpty();
    });
}

// ── Summen aktualisieren ────────────────────────────────────────
function invRefreshTotals() {
    fetch('/pms/rechnungen/' + INV_ID + '/update', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({ _totals_only: 1 }),
    }).then(function(r) { return r.json(); }).then(function(d) {
        if (d.subtotal !== undefined) {
            document.getElementById('inv-subtotal').textContent         = fmtEur(d.subtotal);
            document.getElementById('inv-vat').textContent              = fmtEur(d.vat_amount);
            document.getElementById('inv-total').textContent            = fmtEur(d.total);
            document.getElementById('inv-subtotal-bottom').textContent  = fmtEur(d.subtotal);
            document.getElementById('inv-vat-bottom').textContent       = fmtEur(d.vat_amount);
            document.getElementById('inv-total-bottom-val').textContent = fmtEur(d.total);
        }
    }).catch(function() {});
}

function checkEmpty() {
    var has = document.querySelectorAll('#positions-tbody .pos-card, #positions-tbody .pos-row').length > 0;
    document.getElementById('positions-empty').classList.toggle('d-none', has);
    document.getElementById('positions-table').classList.toggle('d-none', !has);
}

function fmtEur(n) {
    return parseFloat(n).toLocaleString('de-DE', { minimumFractionDigits:2, maximumFractionDigits:2 }) + ' €';
}


// ── Positionen verschieben ──────────────────────────────────────
var _invSortUrl = '{{ route('pms.invoices.position.sort', $invoice->id) }}';

function movePosition(posId, direction) {
    var card  = document.getElementById('pos-card-' + posId);
    var tbody = document.getElementById('positions-tbody');
    var cards = Array.from(tbody.querySelectorAll(':scope > .pos-card'));
    var idx   = cards.indexOf(card);

    if (direction === 'up'   && idx === 0)               return;
    if (direction === 'down' && idx === cards.length - 1) return;

    if (direction === 'up') {
        tbody.insertBefore(card, cards[idx - 1]);
    } else {
        tbody.insertBefore(cards[idx + 1], card);
    }

    var newOrder = Array.from(tbody.querySelectorAll(':scope > .pos-card'))
                       .map(function(c) { return c.dataset.posId; });

    fetch(_invSortUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify({ order: newOrder }),
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.numbers) {
            Object.keys(data.numbers).forEach(function(id) {
                var el = document.getElementById('pos-nr-' + id);
                if (el) el.textContent = data.numbers[id];
            });
        }
    });
}
</script>

@endsection