@extends('layouts.app', ['title' => 'Auftrag ' . $order->order_nr])
@section('content')

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

    {{-- Header --}}
    <div class="d-flex align-items-start justify-content-between mb-4 gap-3 flex-wrap">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <a href="{{ $order->category ? route('pms.orders.category', $order->category->nr_prefix) : route('pms.orders.index') }}"
                   class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                    <i class="bi bi-arrow-left me-1"></i>Zurück
                </a>
                @if($order->category)
                    <span class="badge rounded-pill text-bg-light border fw-normal">
                        {{ $order->category->nr_prefix }} · {{ $order->category->name }}
                    </span>
                @endif
                @if($order->offer)
                    <span class="badge rounded-pill text-bg-light border fw-normal text-muted">
                        <i class="bi bi-file-earmark-text me-1"></i>aus Angebot
                        <a href="{{ route('pms.offers.show', $order->offer->id) }}" class="text-decoration-none">
                            <code>{{ $order->offer->offer_nr }}</code>
                        </a>
                    </span>
                @endif
            </div>
            <h4 class="fw-bold mb-0">{{ $order->title }}</h4>
            <code class="text-muted" style="font-size:13px;">{{ $order->order_nr }}</code>
        </div>

    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Workflow-Banner --}}
    @if($order->fk_workflow_id && $wfCurrentStation)
    <div class="card border-0 shadow-sm mb-3" style="border-left: 4px solid #0d6efd !important;">
        <div class="card-body py-2 px-4">
            <div class="d-flex align-items-center justify-content-between gap-3">

                {{-- Zurück --}}
                <div style="min-width:160px;">
                    @if($wfPrevStation)
                        <form action="{{ route('pms.orders.workflow.zuruck') }}" method="POST" class="m-0">
                            @csrf
                            <input type="hidden" name="id" value="{{ $order->id }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                <i class="bi bi-arrow-left-square me-1"></i>Zurück an
                                <strong>{{ $wfPrevStation->department->name ?? '—' }}</strong>
                            </button>
                        </form>
                    @endif
                </div>

                {{-- Phase / Abteilung (Mitte) --}}
                <div class="text-center">
                    <span class="badge bg-primary rounded-pill px-3 py-2" style="font-size:12px;">
                        <i class="bi bi-diagram-3 me-1"></i>
                        Phase {{ $order->current_phase }}: {{ $wfCurrentStation->department->name ?? '—' }}
                    </span>
                </div>

                {{-- Weiter --}}
                <div class="text-end" style="min-width:160px;">
                    @if($wfNextStation)
                        <form action="{{ route('pms.orders.workflow.weiter') }}" method="POST" class="m-0">
                            @csrf
                            <input type="hidden" name="id" value="{{ $order->id }}">
                            <button type="submit" class="btn btn-sm btn-primary rounded-pill px-3">
                                Weiter an <strong>{{ $wfNextStation->department->name ?? '—' }}</strong>
                                <i class="bi bi-arrow-right-square ms-1"></i>
                            </button>
                        </form>
                    @else
                        <span class="text-success fw-semibold small">
                            <i class="bi bi-check-circle me-1"></i>Workflow abgeschlossen
                        </span>
                    @endif
                </div>

            </div>

            @if($wfCurrentStation->aufgabe)
                <div class="text-center mt-2" style="font-size:12px; color:#6c757d;">
                    <i class="bi bi-info-circle me-1"></i>{{ $wfCurrentStation->aufgabe }}
                </div>
            @endif
        </div>
    </div>
    @endif

    {{-- Status-Leiste --}}
    @php
        $allOrderStatuses = \App\Models\PmsStatus::order()->where('is_deleted',0)->orderBy('sort')->get();
        $allDeptStatuses  = \App\Models\PmsStatus::dept()->where('is_deleted',0)->orderBy('sort')->get();
    @endphp
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2 px-4">
            <div class="d-flex align-items-center gap-2 py-1 flex-wrap border-bottom">
                <span class="text-muted fw-semibold" style="font-size:11px; min-width:90px; letter-spacing:.04em;">AUFTRAGSSTATUS</span>
                @foreach($allOrderStatuses as $s)
                    <form method="POST" action="{{ route('pms.orders.status.update', $order->id) }}" class="p-0 m-0">
                        @csrf
                        <input type="hidden" name="type" value="order">
                        <input type="hidden" name="status_id" value="{{ $s->id }}">
                        <button type="submit" class="btn btn-sm rounded-pill px-3 py-1"
                            style="font-size:12px;
                                   {{ $order->fk_status_id == $s->id
                                       ? 'background:rgba(var(--bs-'.$s->color.'-rgb),.15);color:var(--bs-'.$s->color.');border:1.5px solid var(--bs-'.$s->color.');font-weight:600;'
                                       : 'background:transparent;color:#6c757d;border:1px solid #dee2e6;' }}">
                            {{ $s->name }}
                        </button>
                    </form>
                @endforeach
            </div>
            <div class="d-flex align-items-center gap-2 pt-1 flex-wrap">
                <span class="text-muted fw-semibold" style="font-size:11px; min-width:90px; letter-spacing:.04em;">ABT.-STATUS</span>
                @foreach($allDeptStatuses as $s)
                    <form method="POST" action="{{ route('pms.orders.status.update', $order->id) }}" class="p-0 m-0">
                        @csrf
                        <input type="hidden" name="type" value="dept">
                        <input type="hidden" name="status_id" value="{{ $s->id }}">
                        <button type="submit" class="btn btn-sm rounded-pill px-3 py-1"
                            style="font-size:12px;
                                   {{ $order->fk_status_dept_id == $s->id
                                       ? 'background:rgba(var(--bs-'.$s->color.'-rgb),.15);color:var(--bs-'.$s->color.');border:1.5px solid var(--bs-'.$s->color.');font-weight:600;'
                                       : 'background:transparent;color:#6c757d;border:1px solid #dee2e6;' }}">
                            {{ $s->name }}
                        </button>
                    </form>
                @endforeach
            </div>
        </div>
    </div>

    <div class="row g-3">

        {{-- Links: Stammdaten + Positionen --}}
        <div class="col-lg-8">

            {{-- Stammdaten --}}
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-white border-0 pt-3 pb-2 px-4 d-flex justify-content-between align-items-center">
                    <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.04em;">
                        <i class="bi bi-info-circle me-1"></i>Stammdaten
                    </span>
                    <a href="{{ route('pms.orders.edit', $order->id) }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                        <i class="bi bi-pencil me-1"></i>Bearbeiten
                    </a>
                </div>
                <div class="card-body px-4 py-3">
                    <div class="row g-3" style="font-size:13px;">

                        {{-- Zeile 1: Datum · Standort · Projektart --}}
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Auftragsdatum</div>
                            <div class="fw-semibold">
                                {{ $order->order_date ? \Carbon\Carbon::parse($order->order_date)->format('d.m.Y') : '—' }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Standort / Bauvorhaben</div>
                            <div class="fw-semibold">{{ $order->project_location?->name ?? '—' }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Projektart</div>
                            <div class="fw-semibold">{{ $order->type?->name ?? '—' }}</div>
                        </div>

                        {{-- Trennlinie --}}
                        <div class="col-12"><hr class="my-0" style="border-color:#f0f0f0;"></div>

                        {{-- Zeile 2: Kunde · Ansprechpartner · Erstellt von --}}
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Kunde</div>
                            <div class="fw-semibold">{{ $order->customer?->name ?? '—' }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Ansprechpartner</div>
                            <div class="fw-semibold">
                                {{ $order->customer_contact
                                    ? $order->customer_contact->first_name . ' ' . $order->customer_contact->last_name
                                    : '—' }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Erstellt von</div>
                            <div class="fw-semibold">
                                {{ $order->created_by
                                    ? $order->created_by->first_name . ' ' . $order->created_by->last_name
                                    : '—' }}
                            </div>
                        </div>

                        {{-- Workflow + Auftragsbestätigung in einer Zeile --}}
                        @if($order->workflow || $abFile)
                        <div class="col-12"><hr class="my-0" style="border-color:#f0f0f0;"></div>
                        @if($order->workflow)
                        <div class="col-md-6">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Workflow</div>
                            <div class="fw-semibold">
                                <i class="bi bi-diagram-3 me-1 text-primary"></i>{{ $order->workflow->name }}
                                @if($order->current_phase)
                                    <span class="badge bg-primary rounded-pill ms-1" style="font-size:10px;">Phase {{ $order->current_phase }}</span>
                                @endif
                            </div>
                        </div>
                        @endif
                        @if($abFile)
                        <div class="col-md-6">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Auftragsbestätigung</div>
                            <a href="{{ route('pms.offers.ab.download', $abFile->id) }}"
                               class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                                <i class="bi bi-file-earmark-pdf me-1 text-danger"></i>{{ $abFile->original_name }}
                            </a>
                        </div>
                        @endif
                        @endif

                        {{-- Hinweis (wenn vorhanden) --}}
                        @if($order->notes)
                        <div class="col-12"><hr class="my-0" style="border-color:#f0f0f0;"></div>
                        <div class="col-12">
                            <div class="text-muted mb-1" style="font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;">Hinweis</div>
                            <div class="fw-semibold">{{ $order->notes }}</div>
                        </div>
                        @endif

                    </div>
                </div>
            </div>

            {{-- Positionen + PDF-Tab --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header border-0 pt-3 pb-0 px-4" style="background:#2d3340;">
                    <ul class="nav nav-tabs border-0" id="order-pos-tabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active px-3 py-2" id="tab-order-positionen-btn"
                                    data-bs-toggle="tab" data-bs-target="#tab-order-positionen" type="button"
                                    style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-list-nested me-1"></i>POSITIONEN
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link px-3 py-2" id="tab-order-dateien-btn"
                                    data-bs-toggle="tab" data-bs-target="#tab-order-dateien" type="button"
                                    style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-paperclip me-1"></i>DATEIEN
                                @if($attachments->count())
                                    <span class="badge rounded-pill bg-secondary ms-1" style="font-size:9px;">{{ $attachments->count() }}</span>
                                @endif
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link px-3 py-2" id="tab-rechnungen-btn"
                                    data-bs-toggle="tab" data-bs-target="#tab-rechnungen" type="button"
                                    style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-receipt me-1"></i>RECHNUNGEN
                                @if($invoices->count())
                                    <span class="badge rounded-pill bg-secondary ms-1" style="font-size:9px;">{{ $invoices->count() }}</span>
                                @endif
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-order-positionen" role="tabpanel">
                    {{-- Aktions-Buttons --}}
                    <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" id="btn-leistungsposition">
                            <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="setSubContext(null,1)" data-bs-toggle="modal" data-bs-target="#modal-leistungsbibliothek"><i class="bi bi-book me-2 text-secondary"></i>Leistung</button></li>
                                <li><button class="dropdown-item small" onclick="setSubContext(null,1)" data-bs-toggle="modal" data-bs-target="#modal-materialkatalog"><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="setSubContext(null,1)" data-bs-toggle="modal" data-bs-target="#modal-lohnkatalog"><i class="bi bi-clock me-2 text-secondary"></i>Lohn</button></li>
                                <li><button class="dropdown-item small" onclick="setSubContext(null,1)" data-bs-toggle="modal" data-bs-target="#modal-geraetekatalog"><i class="bi bi-tools me-2 text-secondary"></i>Geräte</button></li>
                                <li><button class="dropdown-item small" onclick="setSubContext(null,1)" data-bs-toggle="modal" data-bs-target="#modal-fremdleistung"><i class="bi bi-truck me-2 text-secondary"></i>Fremdleistung</button></li>
                                <li><button class="dropdown-item small" onclick="setSubContext(null,1)" data-bs-toggle="modal" data-bs-target="#modal-sonstiges"><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="{{ $order->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="{{ $order->positions->count() ? '' : 'd-none' }}">
                        <div id="positions-tbody">
                            @foreach($order->positions as $i => $pos)
                                @include('pms.orders._position_row', ['pos' => $pos, 'depth' => 0, 'nr' => ($i+1), 'readonly' => false])
                            @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" form="inline-pos-form" name="title"
                                               id="inline-title"
                                               class="form-control form-control-sm mb-1"
                                               placeholder="Titel *" required>
                                        <textarea form="inline-pos-form" name="description"
                                                  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 form="inline-pos-form" 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 form="inline-pos-form" 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 form="inline-pos-form" type="number" name="unit_price"
                                                       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 form="inline-pos-form" class="form-check-input" type="checkbox"
                                                           name="is_optional" 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="submit" form="inline-pos-form"
                                                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>
                        </div>
                        @if($order->positions->count())
                        @php
                            $netto     = $order->positions->where('is_optional', 0)->sum('calculated_total');
                            $vatRate   = (float)($order->vat_rate ?? 19);
                            $vatFactor = $vatRate / 100;
                            $mwst      = $netto * $vatFactor;
                            $brutto    = $netto + $mwst;
                            $rowStyle  = 'd-flex align-items-center gap-2 px-4';
                        @endphp
                        <div class="border-top">
                            {{-- Nettosumme --}}
                            <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" style="min-width:110px; text-align:right;">{{ number_format($netto, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                            {{-- MwSt --}}
                            <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;">
                                        @if($order->vat_hinweis)<span class="fst-italic pe-2">{{ $order->vat_hinweis }}</span> · @endif
                                        UMSATZSTEUER {{ number_format($vatRate, 0) }} %
                                    </span>
                                    <span class="text-muted" style="min-width:110px; text-align:right;">{{ number_format($mwst, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                            {{-- Gesamtsumme --}}
                            <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 style="min-width:110px; text-align:right;">{{ number_format($brutto, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                </div>{{-- end tab-pane positionen --}}

                    {{-- Tab: Dateien / Anhänge --}}
                    <div class="tab-pane fade" id="tab-order-dateien" role="tabpanel">

                        <div class="px-4 pt-3 pb-2 border-bottom d-flex justify-content-between align-items-center">
                            <span class="text-muted small">{{ $attachments->count() }} Datei(en) angehängt</span>
                            <button class="btn btn-sm btn-primary rounded-pill px-3"
                                    data-bs-toggle="modal" data-bs-target="#modal-upload">
                                <i class="bi bi-upload me-1"></i>Hochladen
                            </button>
                        </div>

                        @if($attachments->isEmpty())
                            <div class="text-center text-muted py-5">
                                <i class="bi bi-paperclip d-block fs-2 mb-2 opacity-25"></i>
                                Noch keine Dateien angehängt.
                            </div>
                        @else
                            <table class="table table-hover align-middle mb-0 small">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-4" style="width:36px;"></th>
                                        <th>Dateiname</th>
                                        <th>Größe</th>
                                        <th>Hochgeladen</th>
                                        <th class="pe-4 text-end">Aktionen</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($attachments as $att)
                                    @php
                                        $ext  = strtolower(pathinfo($att->filename, PATHINFO_EXTENSION));
                                        $icon = match(true) {
                                            in_array($ext, ['pdf'])                                      => ['bi-file-earmark-pdf',    'text-danger'],
                                            in_array($ext, ['jpg','jpeg','png','gif','webp','svg'])      => ['bi-file-earmark-image',   'text-success'],
                                            in_array($ext, ['doc','docx'])                               => ['bi-file-earmark-word',    'text-primary'],
                                            in_array($ext, ['xls','xlsx','csv'])                         => ['bi-file-earmark-excel',   'text-success'],
                                            in_array($ext, ['zip','rar','7z'])                           => ['bi-file-earmark-zip',     'text-warning'],
                                            default                                                      => ['bi-file-earmark',         'text-muted'],
                                        };
                                    @endphp
                                    <tr>
                                        <td class="ps-4">
                                            <i class="bi {{ $icon[0] }} {{ $icon[1] }}" style="font-size:20px;"></i>
                                        </td>
                                        <td>
                                            <div class="fw-semibold">{{ $att->original_name ?? $att->filename }}</div>
                                        </td>
                                        <td class="text-muted">
                                            @if($att->filesize)
                                                {{ $att->filesize >= 1048576
                                                    ? number_format($att->filesize / 1048576, 1) . ' MB'
                                                    : number_format($att->filesize / 1024, 0) . ' KB' }}
                                            @else — @endif
                                        </td>
                                        <td class="text-muted">
                                            {{ $att->created_at ? \Carbon\Carbon::parse($att->created_at)->format('d.m.Y H:i') : '—' }}
                                        </td>
                                        <td class="pe-4 text-end">
                                            <a href="{{ route('pms.orders.attachment.download', $att->id) }}"
                                               class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                                                <i class="bi bi-download me-1"></i>Download
                                            </a>
                                            @if(Auth::user()->get_employee->is_dms || Auth::user()->get_employee->is_mgt)
                                            <form method="POST" action="{{ route('pms.orders.attachment.destroy', [$order->id, $att->id]) }}"
                                                  class="d-inline ms-1" onsubmit="return confirm('Datei entfernen?')">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-2">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @endif
                    </div>{{-- end tab-pane dateien --}}

                    {{-- Tab: Rechnungen --}}
                    <div class="tab-pane fade" id="tab-rechnungen" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center px-3 pt-3 pb-2">
                            <span class="small text-muted fw-semibold">
                                {{ $invoices->count() }} Rechnung(en) für diesen Auftrag
                            </span>
                            @php
                                $hasOpenSchluss = $invoices->where('type','schluss')->where('status','!=','storniert')->count() > 0;
                            @endphp
                            <button class="btn btn-sm btn-primary rounded-pill px-3"
                                    data-bs-toggle="modal" data-bs-target="#modal-neue-rechnung">
                                <i class="bi bi-plus me-1"></i>Neue Rechnung
                            </button>
                        </div>

                        @if($invoices->isEmpty())
                            <div class="text-center text-muted py-5">
                                <i class="bi bi-receipt d-block fs-3 mb-2 opacity-25"></i>
                                Noch keine Rechnungen vorhanden.
                            </div>
                        @else
                            <div class="table-responsive px-3 pb-3">
                                <table class="table table-sm table-hover align-middle" style="font-size:13px;">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Nr.</th>
                                            <th>Kundennr.</th>
                                            <th>Typ</th>
                                            <th>Status</th>
                                            <th>Datum</th>
                                            <th class="text-end">Netto</th>
                                            <th class="text-end">Gesamt</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($invoices as $inv)
                                            <tr>
                                                <td class="fw-semibold">
                                                    {{ $inv->invoice_nr ?? '(Entwurf)' }}
                                                </td>
                                                <td class="text-muted small font-monospace">
                                                    {{ $order->customer?->customer_code ?? '—' }}
                                                </td>
                                                <td>
                                                    <span class="badge bg-{{ $inv->type_badge_color }}">
                                                        {{ $inv->type_labal }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="badge bg-{{ $inv->status_color }}">
                                                        {{ $inv->status_label }}
                                                    </span>
                                                </td>
                                                <td>{{ $inv->invoice_date ? \Carbon\Carbon::parse($inv->invoice_date)->format('d.m.Y') : '—' }}</td>
                                                <td class="text-end">{{ number_format($inv->subtotal, 2, ',', '.') }} €</td>
                                                <td class="text-end fw-semibold">{{ number_format($inv->total, 2, ',', '.') }} €</td>
                                                <td class="text-end">
                                                    @if($inv->status === 'entwurf')
                                                        <a href="{{ route('pms.invoices.edit', $inv->id) }}"
                                                           class="btn btn-xs btn-outline-primary rounded-pill px-2 py-0"
                                                           style="font-size:11px;">
                                                            <i class="bi bi-pencil me-1"></i>Bearbeiten
                                                        </a>
                                                    @else
                                                        <a href="{{ route('pms.invoices.show', $inv->id) }}"
                                                           class="btn btn-xs btn-outline-secondary rounded-pill px-2 py-0"
                                                           style="font-size:11px;">
                                                            <i class="bi bi-eye me-1"></i>Anzeigen
                                                        </a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            @php
                                $gestelltNetto  = $invoices->where('status', '!=', 'storniert')->sum('subtotal');
                                $gestelltBrutto = $invoices->where('status', '!=', 'storniert')->sum('total');
                                $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);
                                $offenNetto     = max(0, $orderNetto - $gestelltNetto);
                                $offenBrutto    = max(0, $orderBrutto - $gestelltBrutto);
                                $progressPct    = $orderBrutto > 0
                                                    ? min(100, round($gestelltBrutto / $orderBrutto * 100))
                                                    : 0;
                            @endphp
                            <div class="mx-3 mb-3 p-3 rounded border" style="background:#f8f9fa;">
                                <div class="d-flex justify-content-between align-items-center mb-1" style="font-size:12px;">
                                    <span class="text-muted">Gestellt</span>
                                    <span class="text-muted">Auftragssumme</span>
                                </div>
                                <div class="progress mb-2" style="height:10px; 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="row g-0 text-center" style="font-size:13px;">
                                    <div class="col-4">
                                        <div class="text-muted" style="font-size:11px;">Gestellt</div>
                                        <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 class="col-4 border-start border-end">
                                        <div class="text-muted" style="font-size:11px;">Auftragssumme</div>
                                        <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 class="col-4">
                                        <div class="text-muted" style="font-size:11px;">Noch offen</div>
                                        <div class="fw-semibold {{ $offenBrutto > 0 ? 'text-danger' : 'text-success' }}">
                                            {{ 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>
                        @endif
                    </div>{{-- end tab-pane rechnungen --}}


                </div>{{-- end tab-content --}}
            </div>

        </div>

        {{-- Rechts: Termine + Timeline --}}
        <div class="col-lg-4">

            {{-- Termine --}}
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-white border-0 pt-3 pb-2 px-4 d-flex justify-content-between align-items-center">
                    <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                        <i class="bi bi-calendar-check me-1"></i>Termine
                        @php
                            $now      = now();
                            $upcoming = $appointments->where('is_done', 0)->filter(fn($a) => $a->starts_at->gte($now))->sortBy('starts_at');
                            $missed   = $appointments->where('is_done', 0)->filter(fn($a) => $a->starts_at->lt($now))->sortByDesc('starts_at');
                            $done     = $appointments->where('is_done', 1)->sortByDesc('starts_at');
                        @endphp
                        @if($upcoming->count())
                            <span class="badge bg-primary rounded-pill ms-1" style="font-size:10px;">{{ $upcoming->count() }}</span>
                        @endif
                        @if($missed->count())
                            <span class="badge bg-danger rounded-pill ms-1" style="font-size:10px;">{{ $missed->count() }} verpasst</span>
                        @endif
                    </span>
                    <button class="btn btn-sm btn-primary rounded-pill px-3"
                            data-bs-toggle="modal" data-bs-target="#modal-appointment">
                        <i class="bi bi-plus me-1"></i>Neuer Termin
                    </button>
                </div>
                <div class="card-body p-0">
                    @if($appointments->isEmpty())
                        <div class="text-center text-muted py-4" style="font-size:13px;">
                            <i class="bi bi-calendar-x d-block fs-3 mb-2 opacity-25"></i>
                            Noch keine Termine vereinbart.
                        </div>
                    @else

                        {{-- Bevorstehende --}}
                        @foreach($upcoming as $apt)
                        <div class="row g-0 align-items-start px-3 py-2 border-bottom">
                            <div class="col-auto pe-2 pt-1">
                                <div class="d-flex flex-column align-items-center justify-content-center rounded-3 border px-2 py-2 gap-1"
                                     style="width:72px; font-size:11px; color:var(--bs-{{ $apt->type_color }}); background:rgba(var(--bs-{{ $apt->type_color }}-rgb),.08); border-color:rgba(var(--bs-{{ $apt->type_color }}-rgb),.3) !important;">
                                    <i class="bi {{ $apt->type_icon }}" style="font-size:18px;"></i>
                                    <span>{{ $apt->type_label }}</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fw-semibold" style="font-size:13px;">{{ $apt->title }}</div>
                                <div class="text-muted" style="font-size:11px;">
                                    <i class="bi bi-clock me-1"></i>{{ $apt->starts_at->format('d.m.Y H:i') }}
                                    @if($apt->ends_at) – {{ $apt->ends_at->format('H:i') }} @endif
                                </div>
                                @if($apt->notes)
                                    <div class="text-muted mt-1" style="font-size:11px; line-height:1.4;">{{ $apt->notes }}</div>
                                @endif
                            </div>
                            <div class="col-auto ps-2 d-flex flex-column gap-1 pt-1">
                                <form method="POST" action="{{ route('pms.orders.appointment.done', [$order->id, $apt->id]) }}" class="m-0">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-outline-success rounded-circle p-0"
                                            style="width:22px; height:22px; font-size:11px;" title="Erledigt">
                                        <i class="bi bi-check-lg"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('pms.orders.appointment.destroy', [$order->id, $apt->id]) }}" class="m-0">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-outline-danger rounded-circle p-0"
                                            style="width:22px; height:22px; font-size:11px;" title="Löschen"
                                            onclick="return confirm('Termin löschen?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                        @endforeach

                        {{-- Verpasst --}}
                        @if($missed->count())
                        <div class="border-top border-danger border-opacity-25">
                            <div class="px-3 py-1" style="background:#fff5f5; font-size:10px; letter-spacing:.04em; color:#dc3545;">
                                <i class="bi bi-exclamation-circle me-1"></i>VERPASST
                            </div>
                            @foreach($missed as $apt)
                            <div class="row g-0 align-items-start px-3 py-2 border-bottom" style="background:#fff8f8;">
                                <div class="col-auto pe-2 pt-1">
                                    <div class="d-flex flex-column align-items-center justify-content-center rounded-3 border px-2 py-2 gap-1"
                                         style="width:72px; font-size:11px; color:var(--bs-{{ $apt->type_color }}); background:rgba(var(--bs-{{ $apt->type_color }}-rgb),.08); border-color:rgba(var(--bs-{{ $apt->type_color }}-rgb),.3) !important;">
                                        <i class="bi {{ $apt->type_icon }}" style="font-size:18px;"></i>
                                        <span>{{ $apt->type_label }}</span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fw-semibold" style="font-size:13px;">{{ $apt->title }}</div>
                                    <div class="text-danger" style="font-size:11px;">
                                        <i class="bi bi-clock me-1"></i>{{ $apt->starts_at->format('d.m.Y H:i') }}
                                        @if($apt->ends_at) – {{ $apt->ends_at->format('H:i') }} @endif
                                    </div>
                                    @if($apt->notes)
                                        <div class="text-muted mt-1" style="font-size:11px;">{{ $apt->notes }}</div>
                                    @endif
                                </div>
                                <div class="col-auto ps-2 d-flex flex-column gap-1 pt-1">
                                    <form method="POST" action="{{ route('pms.orders.appointment.done', [$order->id, $apt->id]) }}" class="m-0">
                                        @csrf
                                        <button type="submit" class="btn btn-xs btn-outline-success rounded-circle p-0"
                                                style="width:22px; height:22px; font-size:11px;" title="Erledigt">
                                            <i class="bi bi-check-lg"></i>
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ route('pms.orders.appointment.destroy', [$order->id, $apt->id]) }}" class="m-0">
                                        @csrf
                                        <button type="submit" class="btn btn-xs btn-outline-danger rounded-circle p-0"
                                                style="width:22px; height:22px; font-size:11px;" title="Löschen"
                                                onclick="return confirm('Termin löschen?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif

                        {{-- Erledigte (eingeklappt) --}}
                        @if($done->count())
                        <div class="border-top">
                            <button class="btn btn-link btn-sm text-muted w-100 py-2 text-start px-3"
                                    style="font-size:11px; letter-spacing:.03em;"
                                    data-bs-toggle="collapse" data-bs-target="#apt-done-list">
                                <i class="bi bi-check-all me-1"></i>{{ $done->count() }} erledigt
                                <i class="bi bi-chevron-down ms-1" style="font-size:9px;"></i>
                            </button>
                            <div class="collapse" id="apt-done-list">
                                @foreach($done as $apt)
                                <div class="d-flex align-items-start gap-2 px-3 py-2 border-bottom opacity-50">
                                    <div class="flex-shrink-0 mt-1">
                                        <i class="bi bi-check-circle-fill text-success" style="font-size:16px;"></i>
                                    </div>
                                    <div class="flex-grow-1 min-w-0">
                                        <div class="fw-semibold text-decoration-line-through" style="font-size:13px;">{{ $apt->title }}</div>
                                        <div class="text-muted" style="font-size:11px;">{{ $apt->starts_at->format('d.m.Y H:i') }}</div>
                                    </div>
                                    <div class="flex-shrink-0 d-flex flex-column gap-1">
                                        <form method="POST" action="{{ route('pms.orders.appointment.done', [$order->id, $apt->id]) }}" class="m-0">
                                            @csrf
                                            <button type="submit" class="btn btn-xs btn-link text-muted p-0"
                                                    title="Wieder öffnen" style="font-size:11px;">
                                                <i class="bi bi-arrow-counterclockwise"></i>
                                            </button>
                                        </form>
                                        <form method="POST" action="{{ route('pms.orders.appointment.destroy', [$order->id, $apt->id]) }}" class="m-0">
                                            @csrf
                                            <button type="submit" class="btn btn-xs btn-outline-danger rounded-circle p-0"
                                                    style="width:22px; height:22px; font-size:11px;" title="Löschen"
                                                    onclick="return confirm('Termin löschen?')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                    @endif
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom px-3 py-2 d-flex align-items-center gap-2">
                    <i class="bi bi-clock-history text-primary"></i>
                    <span class="fw-semibold small text-uppercase text-muted" style="letter-spacing:.05em;">Verlauf / Hinweise</span>
                </div>
                <div class="card-body p-3">

                    {{-- Neuer Eintrag --}}
                    <form method="POST" action="{{ route('pms.orders.timeline.store', $order->id) }}"
                          onsubmit="syncTextarea()" novalidate>
                        @csrf

                        <div class="d-flex gap-1 mb-2">
                            @foreach([
                                ['4','notes','bi-info-square-fill','Info','text-info'],
                                ['0','call','bi-telephone-fill','Anruf','text-success'],
                                ['1','mail','bi-envelope-fill','E-Mail','text-primary'],
                                ['2','poste','bi-mailbox2','Post','text-secondary'],
                                ['3','personally','bi-people-fill','Persönlich','text-warning'],
                            ] as [$val,$rid,$ico,$lbl,$col])
                            <label class="tl-type-label flex-fill text-center rounded py-1 px-0"
                                   title="{{ $lbl }}" style="cursor:pointer; font-size:11px;">
                                <input class="d-none tl-type-radio" onclick="contact_checked(this);"
                                       type="radio" name="contact_type" value="{{ $val }}" id="{{ $rid }}"
                                       {{ $val==='4' ? 'checked' : '' }}>
                                <i class="bi {{ $ico }} d-block {{ $col }}" style="font-size:17px;"></i>
                                <span class="d-block" style="line-height:1.1;">{{ $lbl }}</span>
                            </label>
                            @endforeach
                        </div>

                        <div id="contact-with" class="mb-2" style="display:none;">
                            <input type="text" name="contact_dst" class="form-control form-control-sm"
                                   placeholder="Kontakt mit …" list="contact-dst-list" autocomplete="off">
                            <datalist id="contact-dst-list">
                                @if($order->customer)
                                    <option value="Kunde: {{ $order->customer->name }}">
                                @endif
                                @if($order->customer_contact)
                                    <option value="Kontakt: {{ $order->customer_contact->first_name }} {{ $order->customer_contact->last_name }}">
                                @endif
                            </datalist>
                        </div>

                        <textarea id="msg" name="message" style="display:none;" required></textarea>
                        <div id="editor-container" class="w-100 mb-2"></div>

                        <button type="submit" class="btn btn-primary btn-sm w-100">
                            <i class="bi bi-plus-lg me-1"></i>Speichern
                        </button>
                    </form>

                    <hr class="my-3">

                    {{-- Filter --}}
                    <div class="d-flex align-items-center gap-1 mb-3 flex-wrap">
                        <span class="text-muted small me-1">Filter:</span>
                        @foreach([
                            ['0','all','bi-list-ul','Alle'],
                            ['1','fnotes','bi-info-square-fill','Info'],
                            ['2','fcall','bi-telephone-fill','Anruf'],
                            ['3','fmail','bi-envelope-fill','E-Mail'],
                            ['4','fposte','bi-mailbox2','Post'],
                            ['5','fpersonally','bi-people-fill','Person'],
                        ] as [$val,$fid,$ico,$lbl])
                        <label class="tl-filter-label rounded px-1 py-0" title="{{ $lbl }}"
                               style="cursor:pointer; font-size:10px; line-height:1.8;">
                            <input class="d-none tl-filter-radio" onclick="filter_checked(this);"
                                   type="radio" name="note_type" value="{{ $val }}" id="{{ $fid }}"
                                   {{ $val==='0' ? 'checked' : '' }}>
                            <i class="bi {{ $ico }}"></i> {{ $lbl }}
                        </label>
                        @endforeach
                    </div>

                    {{-- Einträge --}}
                    <div style="max-height:420px; overflow-y:auto; padding-right:2px;">
                    @forelse($order->timeline->sortByDesc('created_at') as $entry)
                        @php
                            $ct           = (int) $entry->contact_type;
                            $isNote       = $ct === 4;
                            $isCall       = $ct === 0;
                            $isEmail      = $ct === 1;
                            $isPost       = $ct === 2;
                            $isPersonally = $ct === 3;
                            if ($isNote)       { $tlIcon = 'bi-info-square-fill'; $tlColor = '#0dcaf0'; }
                            elseif ($isCall)   { $tlIcon = 'bi-telephone-fill';   $tlColor = '#198754'; }
                            elseif ($isEmail)  { $tlIcon = 'bi-envelope-fill';    $tlColor = '#0d6efd'; }
                            elseif ($isPost)   { $tlIcon = 'bi-mailbox2';         $tlColor = '#6c757d'; }
                            else               { $tlIcon = 'bi-people-fill';      $tlColor = '#ffc107'; }
                        @endphp
                        <div class="note0 {{ $isNote?'note1':'' }} {{ $isCall?'note2':'' }} {{ $isEmail?'note3':'' }} {{ $isPost?'note4':'' }} {{ $isPersonally?'note5':'' }} mb-2">
                            <div class="rounded border" style="border-left: 3px solid {{ $tlColor }} !important; background:#fff;">
                                <div class="d-flex align-items-center gap-2 px-2 pt-2 pb-1 border-bottom"
                                     style="background:#f8f9fa; border-radius:.375rem .375rem 0 0;">
                                    <i class="bi {{ $tlIcon }}" style="color:{{ $tlColor }}; font-size:14px;"></i>
                                    @if(!$isNote && $entry->contact_dst)
                                        <span class="small text-muted">
                                            <i class="bi bi-arrow-right-short"></i>{{ $entry->contact_dst }}
                                        </span>
                                    @endif
                                    <span class="ms-auto text-muted" style="font-size:10px;">
                                        <i class="bi bi-clock me-1"></i>{{ $entry->created_at ? \Carbon\Carbon::parse($entry->created_at)->format('d.m.Y - H:i') : '—' }}
                                    </span>
                                </div>
                                <div class="px-2 py-2">
                                    <div class="small mb-1" style="white-space:pre-line;">{!! $entry->message !!}</div>
                                    <div class="text-muted" style="font-size:10px;">
                                        <i class="bi bi-person me-1"></i>{{ $entry->employee?->first_name }} {{ $entry->employee?->last_name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-chat-left-dots d-block fs-2 mb-1 opacity-25"></i>
                            <small>Noch keine Einträge.</small>
                        </div>
                    @endforelse
                    </div>{{-- end scroll-wrapper --}}

                </div>
            </div>
        </div>

    </div>
</div>

{{-- Modal: Neue Rechnung erstellen --}}
<div class="modal fade" id="modal-neue-rechnung" tabindex="-1" aria-labelledby="modal-neue-rechnung-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <form method="POST" action="{{ route('pms.invoices.store', $order->id) }}">
                @csrf

                <div class="modal-header border-0 px-4 pt-4 pb-2">
                    <div>
                        <h5 class="modal-title fw-bold mb-0" id="modal-neue-rechnung-label">
                            Neue Rechnung erstellen
                        </h5>
                        <div class="text-muted small mt-1">{{ $order->order_nr }} · {{ $order->title }}</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body px-4 pb-2">

                    {{-- Typ-Auswahl --}}
                    @php
                        $hasOpenSchluss  = $invoices->where('type','schluss')->where('status','!=','storniert')->count() > 0;
                        $hasAnyInvoice   = $invoices->where('status','!=','storniert')->count() > 0;
                        $hasAbschlag     = $invoices->where('type','abschlag')->where('status','!=','storniert')->count() > 0;
                        $defaultType     = $hasAnyInvoice ? 'abschlag' : 'rechnung';
                    @endphp

                    @if($hasAnyInvoice)
                    <div class="rounded-3 px-3 py-2 mb-3" style="background:#fff8e1; font-size:12px; color:#856404;">
                        <i class="bi bi-info-circle me-1"></i>
                        {{ $invoices->where('status','!=','storniert')->count() }} Rechnung(en) bereits gestellt
                        ({{ number_format($invoices->where('status','!=','storniert')->sum('total'), 2, ',', '.') }} € brutto).
                    </div>
                    @endif

                    <div class="mb-4">
                        <div class="small fw-semibold text-muted text-uppercase mb-2" style="letter-spacing:.06em;">Rechnungstyp</div>
                        <div class="d-flex gap-2 flex-wrap">

                            {{-- Einzelrechnung --}}
                            @php $rechnungDisabled = $hasAnyInvoice; @endphp
                            <input type="radio" class="btn-check" name="type" id="type_rechnung" value="rechnung"
                                   {{ $rechnungDisabled ? 'disabled' : '' }}
                                   {{ $defaultType === 'rechnung' ? 'checked' : '' }}>
                            <label class="flex-fill border rounded-3 p-3 position-relative {{ $rechnungDisabled ? 'opacity-50' : '' }}"
                                   for="type_rechnung"
                                   style="cursor:{{ $rechnungDisabled ? 'not-allowed' : 'pointer' }}; transition: border-color .15s, box-shadow .15s; min-width:140px;">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="rounded-circle d-flex align-items-center justify-content-center bg-info text-white"
                                          style="width:28px;height:28px;flex-shrink:0;">
                                        <i class="bi bi-file-text" style="font-size:13px;"></i>
                                    </span>
                                    <span class="fw-semibold" style="font-size:13px;">Rechnung</span>
                                </div>
                                <div class="text-muted" style="font-size:11px;">
                                    {{ $rechnungDisabled ? 'Nur bei erster Rechnung möglich' : 'Einzelne Schlussrechnung' }}
                                </div>
                            </label>

                            {{-- Abschlagsrechnung --}}
                            @php $abschlagDisabled = $invoices->where('type','rechnung')->where('status','!=','storniert')->count() > 0; @endphp
                            <input type="radio" class="btn-check" name="type" id="type_abschlag" value="abschlag"
                                   {{ $abschlagDisabled ? 'disabled' : '' }}
                                   {{ $defaultType === 'abschlag' ? 'checked' : '' }}>
                            <label class="flex-fill border rounded-3 p-3 position-relative {{ $abschlagDisabled ? 'opacity-50' : '' }}"
                                   for="type_abschlag"
                                   style="cursor:{{ $abschlagDisabled ? 'not-allowed' : 'pointer' }}; transition: border-color .15s, box-shadow .15s; min-width:140px;">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="rounded-circle d-flex align-items-center justify-content-center bg-secondary text-white"
                                          style="width:28px;height:28px;flex-shrink:0;">
                                        <i class="bi bi-receipt" style="font-size:13px;"></i>
                                    </span>
                                    <span class="fw-semibold" style="font-size:13px;">Abschlagsrechnung</span>
                                </div>
                                <div class="text-muted" style="font-size:11px;">Teilrechnung auf erbrachte Leistungen</div>
                            </label>

                            {{-- Schlussrechnung --}}
                            <input type="radio" class="btn-check" name="type" id="type_schluss" value="schluss"
                                   {{ $hasOpenSchluss ? 'disabled' : '' }}>
                            <label class="flex-fill border rounded-3 p-3 position-relative {{ $hasOpenSchluss ? 'opacity-50' : '' }}"
                                   for="type_schluss"
                                   style="cursor:{{ $hasOpenSchluss ? 'not-allowed' : 'pointer' }}; transition: border-color .15s, box-shadow .15s; min-width:140px;">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="rounded-circle d-flex align-items-center justify-content-center bg-primary text-white"
                                          style="width:28px;height:28px;flex-shrink:0;">
                                        <i class="bi bi-check2-circle" style="font-size:13px;"></i>
                                    </span>
                                    <span class="fw-semibold" style="font-size:13px;">Schlussrechnung</span>
                                </div>
                                <div class="text-muted" style="font-size:11px;">
                                    @if($hasOpenSchluss) Bereits eine aktive Schlussrechnung vorhanden
                                    @elseif($hasAbschlag) Abschläge werden automatisch abgezogen
                                    @else Abschluss ohne vorherige Abschläge
                                    @endif
                                </div>
                            </label>

                        </div>
                    </div>

                    {{-- Leistungszeitraum --}}
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Leistungszeitraum <span class="text-muted fw-normal">(optional)</span></label>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="date" name="performance_from" class="form-control form-control-sm" style="max-width:160px;">
                            <span class="text-muted small">bis</span>
                            <input type="date" name="performance_to" class="form-control form-control-sm" style="max-width:160px;">
                        </div>
                    </div>

                    {{-- AGB --}}
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">AGB / Zahlungsbedingungen</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 }}" {{ $t->is_default ? 'selected' : '' }}>
                                    {{ $t->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Bankkonto --}}
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">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 }}" {{ $ba->is_default ? 'selected' : '' }}>
                                    {{ $ba->bank_name ?? '' }} – {{ $ba->iban ?? '#'.$ba->id }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="rounded-3 px-3 py-2 mb-1" style="background:#f0f4ff; font-size:12px; color:#3a5bc7;">
                        <i class="bi bi-info-circle me-1"></i>
                        Alle Auftragspositionen werden kopiert und können danach angepasst werden.
                    </div>

                </div>

                <div class="modal-footer border-0 px-4 pb-4 pt-2 gap-2">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                            data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-plus-lg me-1"></i>Rechnung anlegen
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<style>
    .btn-check:checked + label.border { border-color: #0d6efd !important; box-shadow: 0 0 0 3px rgba(13,110,253,.15); }
</style>

{{-- Formular für Inline-Position (außerhalb Tabelle, via form="inline-pos-form") --}}
<form id="inline-pos-form" method="POST" action="{{ route('pms.orders.position.store', $order->id) }}">
    @csrf
    <input type="hidden" name="parent_id" id="inline-parent-id" value="">
    <input type="hidden" name="level" id="inline-level" value="1">
    <input type="hidden" name="source_type" id="inline-source-type" value="">
    <input type="hidden" name="source_id" id="inline-source-id" value="">
</form>

<style>
    /* Positionsliste – Minimal / Linear-Stil */
    .pos-card {
        margin-bottom: 6px;
        border-radius: 8px;
    }

    /* Gruppenzeile */
    .pos-group > div { background: #e5e7eb; border-radius: 8px 8px 0 0; }
    .pos-group:hover > div { background: #dde0e6; }

    /* Kein Kind → ganzer Header rund */
    .pos-card:not(:has(.pos-item)) .pos-group > div { border-radius: 8px; }

    /* Letztes Child des Cards: untere Rundung */
    .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;
    }

    /* Kindzeilen */
    .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; }

    /* Zahlen (Menge/ME/E-Preis) */
    .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; }

    /* G-Preis */
    .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; }

    /* Beschreibung + Badge */
    .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;
    }

    /* Bearbeitungszeile */
    .pos-edit-row { border-top: 1px solid #fde68a; background: #fffbeb; }

    /* Pfeile (↑ ↓) übereinander links */
    .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 rechts */
    .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); }

    /* + Unterposition – blau */
    .pos-icon-btn-add    { border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; }
    /* Bearbeiten – violett */
    .pos-icon-btn-edit   { border: 1px solid #ddd6fe; background: #f5f3ff; color: #7c3aed; }
    /* Löschen – rot */
    .pos-icon-btn-danger { border: 1px solid #fecaca; background: #fef2f2; color: #ef4444; }

    /* Aktionen + Pfeile – hover-sichtbar */
    .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; }

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

    /* Dropdown im Row-Kontext */
    .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; }
</style>

<script>
    function contact_checked() {
        if (document.getElementById('notes').checked) {
            document.getElementById('contact-with').style.display = 'none';
        } else {
            document.getElementById('contact-with').style.display = 'block';
        }
    }
    $(document).ready(function () { contact_checked(); });

    // Sub-Kontext für Katalog-Modals
    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-pos-form').reset();
        document.getElementById('inline-gpreis').textContent = '—';
        document.getElementById('inline-source-type').value = '';
        document.getElementById('inline-source-id').value   = '';
        @if(!$order->positions->count())
        document.getElementById('positions-empty').classList.remove('d-none');
        document.getElementById('positions-table').classList.add('d-none');
        @endif
    }

    function toggleEditRow(posId) {
        var row = document.getElementById('edit-row-' + posId);
        row.style.display = (row.style.display === 'none') ? '' : 'none';
    }

    function confirmDeletePosition(url, title) {
        if (!confirm('Position "' + title + '" löschen?\nAlle Unterpositionen werden ebenfalls gelöscht.')) return;
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        form.innerHTML = '<input type="hidden" name="_token" value="{{ csrf_token() }}">';
        document.body.appendChild(form);
        form.submit();
    }

    var _sortUrl = '{{ route('pms.orders.position.sort', $order->id) }}';
    var _csrfToken = '{{ csrf_token() }}';

    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(_sortUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': _csrfToken },
            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>

{{-- Modal: Leistungsbibliothek --}}
<div class="modal fade" id="modal-leistungsbibliothek" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-semibold"><i class="bi bi-book me-2 text-secondary"></i>Leistungsbibliothek</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-4">
                        <select id="sp-trade-filter" class="form-select form-select-sm">
                            <option value="">Alle Gewerke</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <input type="text" id="sp-search-input" class="form-control form-control-sm"
                               placeholder="Kurztext oder Suchbegriff eingeben…">
                    </div>
                </div>
                <div id="sp-results" style="max-height:380px; overflow-y:auto;">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th style="font-size:11px;">KURZTEXT</th>
                                <th style="font-size:11px; width:60px;">ME</th>
                                <th style="font-size:11px; width:90px;">RICHTPREIS</th>
                                <th style="width:100px;"></th>
                            </tr>
                        </thead>
                        <tbody id="sp-results-body">
                            <tr><td colspan="4" class="text-muted text-center py-4 small">
                                <i class="bi bi-search me-1"></i>Suche eingeben oder Gewerk wählen…
                            </td></tr>
                        </tbody>
                    </table>
                </div>
                <div id="sp-pagination" class="d-flex justify-content-between align-items-center mt-2 small text-muted">
                    <span id="sp-count"></span>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary px-2" id="sp-prev" disabled>‹</button>
                        <button class="btn btn-sm btn-outline-secondary px-2 ms-1" id="sp-next" disabled>›</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var currentPage = 1;
    var apiBase     = '/pms/leistungspositionen/api';

    document.getElementById('modal-leistungsbibliothek').addEventListener('show.bs.modal', function () {
        if (document.getElementById('sp-trade-filter').options.length <= 1) {
            fetch(apiBase + '/kategorien').then(r => r.json()).then(function (data) {
                var sel = document.getElementById('sp-trade-filter');
                data.forEach(function (c) {
                    var opt = document.createElement('option');
                    opt.value = c.trade_nr; opt.textContent = c.trade_nr + ' – ' + c.name;
                    sel.appendChild(opt);
                });
            });
        }
    });

    function doSearch(page) {
        currentPage = page || 1;
        var trade = document.getElementById('sp-trade-filter').value;
        var q     = document.getElementById('sp-search-input').value.trim();
        if (!trade && !q) {
            document.getElementById('sp-results-body').innerHTML =
                '<tr><td colspan="4" class="text-muted text-center py-4 small"><i class="bi bi-search me-1"></i>Suche eingeben oder Gewerk wählen…</td></tr>';
            document.getElementById('sp-count').textContent = '';
            document.getElementById('sp-prev').disabled = true;
            document.getElementById('sp-next').disabled = true;
            return;
        }
        var url = apiBase + '/suche?page=' + currentPage + '&per_page=20';
        if (trade) url += '&trade_nr=' + encodeURIComponent(trade);
        if (q)     url += '&q='        + encodeURIComponent(q);
        document.getElementById('sp-results-body').innerHTML =
            '<tr><td colspan="4" class="text-center py-3"><span class="spinner-border spinner-border-sm text-secondary"></span></td></tr>';
        fetch(url).then(r => r.json()).then(function (data) { renderSpResults(data); });
    }

    function renderSpResults(data) {
        var tbody = document.getElementById('sp-results-body');
        var count = document.getElementById('sp-count');
        tbody.innerHTML = '';
        if (!data.data || data.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4 small">Keine Ergebnisse</td></tr>';
            count.textContent = '0 Treffer';
            document.getElementById('sp-prev').disabled = true;
            document.getElementById('sp-next').disabled = true;
            return;
        }
        count.textContent = data.total + ' Treffer';
        data.data.forEach(function (pos) {
            var tr = document.createElement('tr');
            var price = pos.unit_price > 0 ? parseFloat(pos.unit_price).toFixed(2).replace('.', ',') + ' €' : '–';
            tr.innerHTML =
                '<td style="font-size:13px;">' + escHtml(pos.short_text) + '</td>' +
                '<td style="font-size:12px;">' + (pos.position_unit ? pos.position_unit.name : '–') + '</td>' +
                '<td style="font-size:12px;">' + price + '</td>' +
                '<td><button class="btn btn-sm btn-primary rounded-pill px-2 py-0 sp-apply-btn" ' +
                    'data-id="' + pos.id + '" data-title="' + escAttr(pos.short_text) + '" ' +
                    'data-unit-id="' + (pos.fk_unit_id || '') + '" data-price="' + (pos.unit_price || 0) + '" ' +
                    'style="font-size:11px;">Übernehmen</button></td>';
            tbody.appendChild(tr);
        });
        document.getElementById('sp-prev').disabled = !data.prev_page_url;
        document.getElementById('sp-next').disabled = !data.next_page_url;
    }

    function escHtml(str) { return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
    function escAttr(str) { return String(str).replace(/"/g,'&quot;'); }

    var searchTimer;
    document.getElementById('sp-search-input').addEventListener('input', function () {
        clearTimeout(searchTimer); searchTimer = setTimeout(function () { doSearch(1); }, 400);
    });
    document.getElementById('sp-trade-filter').addEventListener('change', function () { doSearch(1); });
    document.getElementById('sp-prev').addEventListener('click', function () { doSearch(currentPage - 1); });
    document.getElementById('sp-next').addEventListener('click', function () { doSearch(currentPage + 1); });

    document.getElementById('sp-results-body').addEventListener('click', function (e) {
        var btn = e.target.closest('.sp-apply-btn');
        if (!btn) return;
        _openInlineRow(_subCtx.parentId, _subCtx.level);
        document.getElementById('inline-title').value             = btn.dataset.title;
        document.getElementById('inline-source-type').value      = 'service_position';
        document.getElementById('inline-source-id').value        = btn.dataset.id || '';
        var unitSelect = document.querySelector('#inline-position-row select[name="fk_unit_id"]');
        if (unitSelect) unitSelect.value = btn.dataset.unitId || '';
        var priceInput = document.querySelector('#inline-position-row input[name="unit_price"]');
        if (priceInput) priceInput.value = btn.dataset.price || 0;
        updateInlineGpreis();
        bootstrap.Modal.getInstance(document.getElementById('modal-leistungsbibliothek')).hide();
    });

    document.getElementById('modal-leistungsbibliothek').addEventListener('hidden.bs.modal', function () {
        document.getElementById('sp-search-input').value = '';
        document.getElementById('sp-trade-filter').selectedIndex = 0;
        document.getElementById('sp-results-body').innerHTML =
            '<tr><td colspan="4" class="text-muted text-center py-4 small"><i class="bi bi-search me-1"></i>Suche eingeben oder Gewerk wählen…</td></tr>';
        document.getElementById('sp-count').textContent = '';
        document.getElementById('sp-prev').disabled = true;
        document.getElementById('sp-next').disabled = true;
    });
})();
</script>

{{-- Modal: Materialkatalog --}}
<div class="modal fade" id="modal-materialkatalog" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-semibold"><i class="bi bi-box-seam me-2 text-secondary"></i>Materialkatalog</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-2">
                    <div class="col-12"><select id="mat-cat-filter" class="form-select form-select-sm"><option value="">Alle Kategorien</option></select></div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-md-4">
                        <select id="mat-unit-filter" class="form-select form-select-sm">
                            <option value="">Alle Einheiten</option>
                            @foreach($units as $u)<option value="{{ $u->id }}">{{ $u->name }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-md-8">
                        <input type="text" id="mat-search-input" class="form-control form-control-sm" placeholder="Kurztext, Artikelnr. oder Suchbegriff…">
                    </div>
                </div>
                <div id="mat-results" style="max-height:380px; overflow-y:auto;">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th style="font-size:11px; width:110px;">ART.-NR.</th>
                                <th style="font-size:11px;">BEZEICHNUNG</th>
                                <th style="font-size:11px; width:55px;">ME</th>
                                <th style="font-size:11px; width:90px;">VK-PREIS</th>
                                <th style="width:100px;"></th>
                            </tr>
                        </thead>
                        <tbody id="mat-results-body">
                            <tr><td colspan="5" class="text-muted text-center py-4 small"><i class="bi bi-search me-1"></i>Suche eingeben…</td></tr>
                        </tbody>
                    </table>
                </div>
                <div id="mat-pagination" class="d-flex justify-content-between align-items-center mt-2 small text-muted">
                    <span id="mat-count"></span>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary px-2" id="mat-prev" disabled>‹</button>
                        <button class="btn btn-sm btn-outline-secondary px-2 ms-1" id="mat-next" disabled>›</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var matPage = 1;
    document.getElementById('modal-materialkatalog').addEventListener('show.bs.modal', function () {
        var sel = document.getElementById('mat-cat-filter');
        if (sel.options.length > 1) return;
        fetch('/pms/material/api/kategorien', { headers: { 'Accept': 'application/json' } }).then(r => r.json()).then(function (cats) {
            cats.forEach(function (c) {
                var opt = document.createElement('option'); opt.value = c.id; opt.textContent = c.name; sel.appendChild(opt);
            });
        });
    });
    function matSearch(page) {
        matPage = page || 1;
        var q = document.getElementById('mat-search-input').value.trim();
        var unitId = document.getElementById('mat-unit-filter').value;
        var catId  = document.getElementById('mat-cat-filter').value;
        if (!q && !unitId && !catId) {
            document.getElementById('mat-results-body').innerHTML = '<tr><td colspan="5" class="text-muted text-center py-4 small"><i class="bi bi-search me-1"></i>Suche eingeben…</td></tr>';
            document.getElementById('mat-count').textContent = '';
            document.getElementById('mat-prev').disabled = true; document.getElementById('mat-next').disabled = true;
            return;
        }
        var url = '/pms/material/api/suche?page=' + matPage + '&per_page=20';
        if (q)      url += '&q='              + encodeURIComponent(q);
        if (unitId) url += '&fk_unit_id='     + unitId;
        if (catId)  url += '&fk_category_id=' + catId;
        document.getElementById('mat-results-body').innerHTML = '<tr><td colspan="5" class="text-center py-3"><span class="spinner-border spinner-border-sm text-secondary"></span></td></tr>';
        fetch(url, { headers: { 'Accept': 'application/json' } }).then(r => r.json()).then(function (data) {
            var tbody = document.getElementById('mat-results-body');
            tbody.innerHTML = '';
            if (!data.items || data.items.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4 small">Keine Ergebnisse</td></tr>';
                document.getElementById('mat-count').textContent = '0 Treffer';
                document.getElementById('mat-prev').disabled = true; document.getElementById('mat-next').disabled = true;
                return;
            }
            document.getElementById('mat-count').textContent = data.total + ' Treffer';
            var esc = function(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); };
            var escA = function(s) { return String(s||'').replace(/"/g,'&quot;'); };
            data.items.forEach(function (it) {
                var tr = document.createElement('tr');
                var price = it.list_price > 0 ? parseFloat(it.list_price).toFixed(2).replace('.', ',') + ' €' : '–';
                tr.innerHTML = '<td style="font-size:12px; font-family:monospace;">' + esc(it.article_nr||'–') + '</td>' +
                    '<td style="font-size:13px;">' + esc(it.short_text) + '</td>' +
                    '<td style="font-size:12px;">' + esc(it.unit ? it.unit.name : '–') + '</td>' +
                    '<td style="font-size:12px;">' + price + '</td>' +
                    '<td><button class="btn btn-sm btn-primary rounded-pill px-2 py-0 mat-apply-btn" data-id="' + it.id + '" data-title="' + escA(it.short_text) + '" data-unit-id="' + (it.fk_unit_id||'') + '" data-price="' + (it.list_price||0) + '" style="font-size:11px;">Übernehmen</button></td>';
                tbody.appendChild(tr);
            });
            document.getElementById('mat-prev').disabled = matPage <= 1;
            document.getElementById('mat-next').disabled = matPage >= data.last_page;
        });
    }
    var matTimer;
    document.getElementById('mat-search-input').addEventListener('input', function () { clearTimeout(matTimer); matTimer = setTimeout(function () { matSearch(1); }, 400); });
    document.getElementById('mat-unit-filter').addEventListener('change', function () { matSearch(1); });
    document.getElementById('mat-cat-filter').addEventListener('change', function () { matSearch(1); });
    document.getElementById('mat-prev').addEventListener('click', function () { matSearch(matPage - 1); });
    document.getElementById('mat-next').addEventListener('click', function () { matSearch(matPage + 1); });
    document.getElementById('mat-results-body').addEventListener('click', function (e) {
        var btn = e.target.closest('.mat-apply-btn');
        if (!btn) return;
        _openInlineRow(_subCtx.parentId, _subCtx.level);
        document.getElementById('inline-title').value        = btn.dataset.title;
        document.getElementById('inline-source-type').value = 'material';
        document.getElementById('inline-source-id').value   = btn.dataset.id || '';
        var unitSelect = document.querySelector('#inline-position-row select[name="fk_unit_id"]');
        if (unitSelect) unitSelect.value = btn.dataset.unitId || '';
        var priceInput = document.querySelector('#inline-position-row input[name="unit_price"]');
        if (priceInput) priceInput.value = btn.dataset.price || 0;
        updateInlineGpreis();
        bootstrap.Modal.getInstance(document.getElementById('modal-materialkatalog')).hide();
    });
    document.getElementById('modal-materialkatalog').addEventListener('hidden.bs.modal', function () {
        document.getElementById('mat-search-input').value = '';
        document.getElementById('mat-unit-filter').selectedIndex = 0;
        document.getElementById('mat-cat-filter').selectedIndex  = 0;
        document.getElementById('mat-results-body').innerHTML = '<tr><td colspan="5" class="text-muted text-center py-4 small"><i class="bi bi-search me-1"></i>Suche eingeben…</td></tr>';
        document.getElementById('mat-count').textContent = '';
        document.getElementById('mat-prev').disabled = true; document.getElementById('mat-next').disabled = true;
    });
})();
</script>

{{-- Modals: Lohn / Geräte / Fremdleistung / Sonstiges --}}
<div class="modal fade" id="modal-lohnkatalog" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title fw-semibold"><i class="bi bi-clock me-2 text-secondary"></i>Lohn</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <input type="text" id="lohn-search" class="form-control form-control-sm mb-3" placeholder="Name oder Code suchen…">
            <div style="max-height:380px; overflow-y:auto;"><table class="table table-sm table-hover mb-0"><thead class="table-light sticky-top"><tr>
                <th style="font-size:11px; width:90px;">CODE</th><th style="font-size:11px;">BEZEICHNUNG</th><th style="font-size:11px; width:100px;" class="text-end">STUNDENSATZ</th><th style="width:100px;"></th>
            </tr></thead><tbody id="lohn-body"><tr><td colspan="4" class="text-center text-muted py-4 small"><span class="spinner-border spinner-border-sm"></span></td></tr></tbody></table></div>
        </div>
    </div></div>
</div>

<div class="modal fade" id="modal-geraetekatalog" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title fw-semibold"><i class="bi bi-tools me-2 text-secondary"></i>Geräte</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <input type="text" id="geraet-search" class="form-control form-control-sm mb-3" placeholder="Name oder Code suchen…">
            <div style="max-height:380px; overflow-y:auto;"><table class="table table-sm table-hover mb-0"><thead class="table-light sticky-top"><tr>
                <th style="font-size:11px; width:90px;">CODE</th><th style="font-size:11px;">BEZEICHNUNG</th><th style="font-size:11px; width:100px;" class="text-end">SATZ</th><th style="font-size:11px; width:60px;">EINHEIT</th><th style="width:100px;"></th>
            </tr></thead><tbody id="geraet-body"><tr><td colspan="5" class="text-center text-muted py-4 small"><span class="spinner-border spinner-border-sm"></span></td></tr></tbody></table></div>
        </div>
    </div></div>
</div>

<div class="modal fade" id="modal-fremdleistung" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title fw-semibold"><i class="bi bi-truck me-2 text-secondary"></i>Fremdleistung</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <input type="text" id="fremd-search" class="form-control form-control-sm mb-3" placeholder="Name oder Code suchen…">
            <div style="max-height:380px; overflow-y:auto;"><table class="table table-sm table-hover mb-0"><thead class="table-light sticky-top"><tr>
                <th style="font-size:11px; width:90px;">CODE</th><th style="font-size:11px;">BEZEICHNUNG</th><th style="font-size:11px;">BESCHREIBUNG</th><th style="width:100px;"></th>
            </tr></thead><tbody id="fremd-body"><tr><td colspan="4" class="text-center text-muted py-4 small"><span class="spinner-border spinner-border-sm"></span></td></tr></tbody></table></div>
        </div>
    </div></div>
</div>

<div class="modal fade" id="modal-sonstiges" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title fw-semibold"><i class="bi bi-three-dots me-2 text-secondary"></i>Sonstige</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <input type="text" id="sonst-search" class="form-control form-control-sm mb-3" placeholder="Name oder Code suchen…">
            <div style="max-height:380px; overflow-y:auto;"><table class="table table-sm table-hover mb-0"><thead class="table-light sticky-top"><tr>
                <th style="font-size:11px; width:90px;">CODE</th><th style="font-size:11px;">BEZEICHNUNG</th><th style="font-size:11px;">BESCHREIBUNG</th><th style="width:100px;"></th>
            </tr></thead><tbody id="sonst-body"><tr><td colspan="4" class="text-center text-muted py-4 small"><span class="spinner-border spinner-border-sm"></span></td></tr></tbody></table></div>
        </div>
    </div></div>
</div>

<script>
(function () {
    var esc  = function(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); };
    var escA = function(s) { return String(s||'').replace(/"/g,'&quot;'); };
    var fmt  = function(v) { return v > 0 ? parseFloat(v).toFixed(2).replace('.',',') + ' €' : '–'; };

    function makeKatalogModal(cfg) {
        var allItems = [];
        var loaded   = false;

        function load() {
            if (loaded) { render(allItems, cfg.q()); return; }
            fetch(cfg.url, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) { allItems = data; loaded = true; render(allItems, cfg.q()); });
        }

        function render(items, q) {
            var filtered = q ? items.filter(function(it) {
                return (it.name||'').toLowerCase().includes(q) || (it.code||'').toLowerCase().includes(q);
            }) : items;
            var tbody = document.getElementById(cfg.bodyId);
            if (!filtered.length) {
                tbody.innerHTML = '<tr><td colspan="' + cfg.cols + '" class="text-center text-muted py-4 small">Keine Einträge gefunden</td></tr>';
                return;
            }
            tbody.innerHTML = filtered.map(function(it) {
                return '<tr>' + cfg.rowFn(it) +
                    '<td><button class="btn btn-sm btn-primary rounded-pill px-2 py-0 kat-btn" ' +
                    'data-title="' + escA(it.name) + '" data-price="' + (cfg.priceFn ? cfg.priceFn(it) : 0) + '" ' +
                    'data-source="' + cfg.sourceType + '" data-id="' + it.id + '" ' +
                    'data-unit-name="' + escA(cfg.unitFn ? cfg.unitFn(it) : '') + '" ' +
                    'style="font-size:11px;">Übernehmen</button></td></tr>';
            }).join('');
        }

        document.getElementById(cfg.modalId).addEventListener('show.bs.modal', function() { load(); });

        var timer;
        document.getElementById(cfg.searchId).addEventListener('input', function() {
            clearTimeout(timer);
            var q = this.value.trim().toLowerCase();
            timer = setTimeout(function() { render(allItems, q); }, 300);
        });

        document.getElementById(cfg.modalId).addEventListener('hidden.bs.modal', function() {
            document.getElementById(cfg.searchId).value = '';
            render(allItems, '');
        });

        document.getElementById(cfg.bodyId).addEventListener('click', function(e) {
            var btn = e.target.closest('.kat-btn');
            if (!btn) return;
            _openInlineRow(_subCtx.parentId, _subCtx.level);
            document.getElementById('inline-title').value        = btn.dataset.title;
            document.getElementById('inline-source-type').value = btn.dataset.source;
            document.getElementById('inline-source-id').value   = btn.dataset.id || '';
            var unitName = (btn.dataset.unitName || '').trim().toLowerCase();
            if (unitName) {
                var unitSelect = document.querySelector('#inline-position-row select[name="fk_unit_id"]');
                if (unitSelect) {
                    var opt = Array.from(unitSelect.options).find(function(o) { return o.text.trim().toLowerCase() === unitName; });
                    if (opt) unitSelect.value = opt.value;
                }
            }
            var priceInput = document.querySelector('#inline-position-row input[name="unit_price"]');
            if (priceInput) priceInput.value = btn.dataset.price || 0;
            updateInlineGpreis();
            bootstrap.Modal.getInstance(document.getElementById(cfg.modalId)).hide();
        });
    }

    makeKatalogModal({
        modalId: 'modal-lohnkatalog', bodyId: 'lohn-body', searchId: 'lohn-search',
        url: '/pms/stammdaten/lohnarten/api/suche', sourceType: 'labor', cols: 4,
        priceFn: function(it) { return it.hourly_rate || 0; },
        unitFn:  function()   { return 'Std'; },
        rowFn:   function(it) {
            return '<td style="font-size:12px; font-family:monospace;">' + esc(it.code) + '</td>' +
                   '<td style="font-size:13px;">' + esc(it.name) + '</td>' +
                   '<td style="font-size:12px;" class="text-end">' + fmt(it.hourly_rate) + '</td>';
        },
        q: function() { return document.getElementById('lohn-search').value.trim().toLowerCase(); }
    });

    makeKatalogModal({
        modalId: 'modal-geraetekatalog', bodyId: 'geraet-body', searchId: 'geraet-search',
        url: '/pms/stammdaten/geraete/api/suche', sourceType: 'equipment', cols: 5,
        priceFn: function(it) { return it.rate || 0; },
        unitFn:  function(it) { return it.rate_unit || ''; },
        rowFn:   function(it) {
            return '<td style="font-size:12px; font-family:monospace;">' + esc(it.code) + '</td>' +
                   '<td style="font-size:13px;">' + esc(it.name) + '</td>' +
                   '<td style="font-size:12px;" class="text-end">' + fmt(it.rate) + '</td>' +
                   '<td style="font-size:12px;">' + esc(it.rate_unit||'–') + '</td>';
        },
        q: function() { return document.getElementById('geraet-search').value.trim().toLowerCase(); }
    });

    makeKatalogModal({
        modalId: 'modal-fremdleistung', bodyId: 'fremd-body', searchId: 'fremd-search',
        url: '/pms/stammdaten/fremdleistungen/api/suche', sourceType: 'external_service', cols: 4,
        priceFn: function() { return 0; },
        rowFn:   function(it) {
            return '<td style="font-size:12px; font-family:monospace;">' + esc(it.code) + '</td>' +
                   '<td style="font-size:13px;">' + esc(it.name) + '</td>' +
                   '<td style="font-size:12px; color:#666;">' + esc(it.description||'–') + '</td>';
        },
        q: function() { return document.getElementById('fremd-search').value.trim().toLowerCase(); }
    });

    makeKatalogModal({
        modalId: 'modal-sonstiges', bodyId: 'sonst-body', searchId: 'sonst-search',
        url: '/pms/stammdaten/sonstiges/api/suche', sourceType: 'misc', cols: 4,
        priceFn: function() { return 0; },
        rowFn:   function(it) {
            return '<td style="font-size:12px; font-family:monospace;">' + esc(it.code) + '</td>' +
                   '<td style="font-size:13px;">' + esc(it.name) + '</td>' +
                   '<td style="font-size:12px; color:#666;">' + esc(it.description||'–') + '</td>';
        },
        q: function() { return document.getElementById('sonst-search').value.trim().toLowerCase(); }
    });
})();
</script>

{{-- Modal: Dateien hochladen --}}
<div class="modal fade" id="modal-upload" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:520px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">
            <div class="modal-header border-0 px-4 pt-4 pb-2">
                <h6 class="modal-title fw-bold">
                    <i class="bi bi-cloud-arrow-up me-2 text-primary"></i>Dateien hochladen
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" id="btn-upload-close"></button>
            </div>
            <div class="modal-body px-4 pb-3">
                <div id="upload-drop-zone"
                     class="d-flex flex-column align-items-center justify-content-center rounded-3 py-5 gap-2 mb-3"
                     style="border:2px dashed #dee2e6; cursor:pointer; background:#fafafa; transition:.15s;">
                    <i class="bi bi-cloud-arrow-up" style="font-size:2.5rem; color:#adb5bd;"></i>
                    <div class="fw-semibold text-muted">Dateien hierher ziehen</div>
                    <div class="text-muted" style="font-size:12px;">oder</div>
                    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
                            onclick="document.getElementById('upload-file-input').click()">
                        <i class="bi bi-folder2-open me-1"></i>Auswählen
                    </button>
                    <div class="text-muted mt-1" style="font-size:11px;">Beliebige Dateitypen · max. 1 GB pro Datei</div>
                    <input type="file" id="upload-file-input" multiple class="d-none">
                </div>
                <div id="upload-queue" class="d-none">
                    <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.05em;">AUSGEWÄHLTE DATEIEN</div>
                    <div id="upload-queue-list" class="d-flex flex-column gap-2"></div>
                </div>
            </div>
            <div class="modal-footer border-0 px-4 pb-4 pt-0 gap-2">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary rounded-pill px-4 d-none" id="btn-start-upload">
                    <i class="bi bi-upload me-1"></i>Hochladen
                </button>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const UPLOAD_URL = '{{ route('pms.orders.attachment.upload', $order->id) }}';
    const CSRF       = '{{ csrf_token() }}';

    const dropZone   = document.getElementById('upload-drop-zone');
    const fileInput  = document.getElementById('upload-file-input');
    const queue      = document.getElementById('upload-queue');
    const queueList  = document.getElementById('upload-queue-list');
    const btnUpload  = document.getElementById('btn-start-upload');
    const btnClose   = document.getElementById('btn-upload-close');
    const modal      = document.getElementById('modal-upload');

    let selectedFiles = [];

    modal.addEventListener('hidden.bs.modal', () => {
        selectedFiles = [];
        queueList.innerHTML = '';
        queue.classList.add('d-none');
        btnUpload.classList.add('d-none');
        fileInput.value = '';
        resetDropZone();
    });

    function resetDropZone() {
        dropZone.style.borderColor = '#dee2e6';
        dropZone.style.background  = '#fafafa';
    }

    function fmtSize(bytes) {
        if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
        if (bytes >= 1048576)    return (bytes / 1048576).toFixed(1) + ' MB';
        return Math.round(bytes / 1024) + ' KB';
    }

    function addFiles(files) {
        [...files].forEach(f => selectedFiles.push(f));
        renderQueue();
    }

    function renderQueue() {
        queueList.innerHTML = '';
        selectedFiles.forEach((f, i) => {
            const row = document.createElement('div');
            row.id = `upload-item-${i}`;
            row.className = 'rounded-3 border p-2 bg-white';
            row.innerHTML = `
                <div class="d-flex align-items-center gap-2 mb-1">
                    <i class="bi bi-file-earmark text-muted flex-shrink-0" style="font-size:18px;"></i>
                    <div class="flex-grow-1 min-w-0">
                        <div class="fw-semibold text-truncate" style="font-size:13px;" title="${f.name}">${f.name}</div>
                        <div class="text-muted" style="font-size:11px;">${fmtSize(f.size)}</div>
                    </div>
                    <span class="upload-status flex-shrink-0" style="font-size:18px;">
                        <i class="bi bi-hourglass text-muted"></i>
                    </span>
                </div>
                <div class="progress upload-progress d-none" style="height:5px; border-radius:4px;">
                    <div class="progress-bar bg-primary" role="progressbar" style="width:0%"></div>
                </div>`;
            queueList.appendChild(row);
        });
        queue.classList.remove('d-none');
        btnUpload.classList.remove('d-none');
    }

    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.style.borderColor = '#0d6efd'; dropZone.style.background = '#f0f5ff'; });
    dropZone.addEventListener('dragleave', resetDropZone);
    dropZone.addEventListener('drop', e => { e.preventDefault(); resetDropZone(); addFiles(e.dataTransfer.files); });
    dropZone.addEventListener('click', e => { if (!e.target.closest('button')) fileInput.click(); });
    fileInput.addEventListener('change', () => { if (fileInput.files.length) addFiles(fileInput.files); });

    btnUpload.addEventListener('click', () => { btnUpload.disabled = true; btnClose.disabled = true; uploadNext(0); });

    function uploadNext(index) {
        if (index >= selectedFiles.length) { setTimeout(() => location.reload(), 800); return; }
        const f    = selectedFiles[index];
        const item = document.getElementById(`upload-item-${index}`);
        const bar  = item.querySelector('.progress-bar');
        const prog = item.querySelector('.upload-progress');
        const stat = item.querySelector('.upload-status');
        stat.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>';
        prog.classList.remove('d-none');
        const fd = new FormData();
        fd.append('_token', CSRF);
        fd.append('files[]', f);
        const xhr = new XMLHttpRequest();
        xhr.open('POST', UPLOAD_URL);
        xhr.upload.addEventListener('progress', e => {
            if (e.lengthComputable) { const pct = Math.round(e.loaded / e.total * 100); bar.style.width = pct + '%'; bar.textContent = pct < 100 ? pct + '%' : ''; }
        });
        xhr.addEventListener('load', () => {
            if (xhr.status === 200 || xhr.status === 302) { bar.style.width = '100%'; bar.classList.replace('bg-primary', 'bg-success'); stat.innerHTML = '<i class="bi bi-check-circle-fill text-success"></i>'; }
            else { bar.classList.replace('bg-primary', 'bg-danger'); stat.innerHTML = '<i class="bi bi-x-circle-fill text-danger"></i>'; }
            uploadNext(index + 1);
        });
        xhr.addEventListener('error', () => { bar.classList.replace('bg-primary', 'bg-danger'); stat.innerHTML = '<i class="bi bi-x-circle-fill text-danger"></i>'; uploadNext(index + 1); });
        xhr.send(fd);
    }
})();
</script>

{{-- Flatpickr --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
.flatpickr-calendar { border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; border-radius: 12px !important; font-family: inherit !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #0d6efd !important; border-color: #0d6efd !important; }
.flatpickr-day:hover { background: #e8f0fe !important; }
.flatpickr-months { border-radius: 12px 12px 0 0; background: #0d6efd; padding: 4px 0; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-monthDropdown-months { color: #fff !important; fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-weekdays { background: #f8f9fa; }
.flatpickr-weekday { color: #6c757d !important; font-weight: 600; font-size: 11px; }
.flatpickr-time input { font-size: 22px !important; font-weight: 600 !important; }
.flatpickr-time .flatpickr-time-separator { font-size: 22px; font-weight: 300; color: #adb5bd; }
.apt-picker-wrap {
    position: relative; display: flex; align-items: center; gap: 8px;
    border: 1.5px solid #dee2e6; border-radius: 10px; padding: 8px 12px;
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.apt-picker-wrap:focus-within { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.1); }
.apt-picker-wrap i { color: #6c757d; font-size: 16px; flex-shrink: 0; }
.apt-picker-wrap input.flatpickr-input { border: none !important; outline: none !important; background: transparent; font-size: 14px; font-weight: 500; width: 100%; cursor: pointer; }
.apt-picker-wrap input.flatpickr-input::placeholder { color: #adb5bd; font-weight: 400; }
.apt-type-label { color: #6c757d; transition: color .12s, border-color .12s, background .12s; }
.apt-type-label:has(input:checked) { color: #0d6efd; border-color: #0d6efd !important; background: #eff6ff; }
</style>

{{-- Modal: Neuer Termin --}}
<div class="modal fade" id="modal-appointment" tabindex="-1" aria-labelledby="modal-apt-title-order" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">
            <form method="POST" action="{{ route('pms.orders.appointment.store', $order->id) }}" id="form-appointment">
                @csrf
                <input type="hidden" name="starts_at" id="apt-starts-at">
                <input type="hidden" name="ends_at"   id="apt-ends-at">

                <div class="modal-header border-0 px-4 pt-4 pb-2">
                    <h6 class="modal-title fw-bold fs-6" id="modal-apt-title-order">
                        <i class="bi bi-calendar-plus me-2 text-primary"></i>Neuer Termin
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body px-4 pb-2">

                    {{-- Typ --}}
                    <div class="mb-3">
                        <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.06em;">TYP</div>
                        <div class="d-flex gap-2 flex-wrap">
                            @foreach(\App\Models\PmsAppointment::TYPES as $val => $t)
                            <label class="apt-type-label d-flex flex-column align-items-center justify-content-center rounded-3 border px-2 py-2 gap-1"
                                   style="cursor:pointer; min-width:72px; font-size:11px;">
                                <input type="radio" name="type" value="{{ $val }}" class="d-none apt-type-radio"
                                       {{ $val === 0 ? 'checked' : '' }}>
                                <i class="bi {{ $t['icon'] }}" style="font-size:18px;"></i>
                                <span>{{ $t['label'] }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    {{-- Titel --}}
                    <div class="mb-3">
                        <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.06em;">TITEL *</div>
                        <input type="text" name="title" class="form-control" required
                               style="border-radius:10px; border:1.5px solid #dee2e6; font-size:14px;"
                               placeholder="z.B. Aufmaß vor Ort">
                    </div>

                    {{-- Datum --}}
                    <div class="mb-3">
                        <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.06em;">DATUM *</div>
                        <div class="apt-picker-wrap">
                            <i class="bi bi-calendar3"></i>
                            <input type="text" id="apt-date" placeholder="Datum wählen" readonly required>
                        </div>
                    </div>

                    {{-- Von / Bis --}}
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.06em;">VON *</div>
                            <div class="apt-picker-wrap">
                                <i class="bi bi-clock"></i>
                                <input type="time" id="apt-time-from" required
                                       style="border:none; outline:none; background:transparent; font-size:14px; font-weight:500; width:100%; cursor:pointer;">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.06em;">BIS</div>
                            <div class="apt-picker-wrap">
                                <i class="bi bi-clock" style="opacity:.5;"></i>
                                <input type="time" id="apt-time-to"
                                       style="border:none; outline:none; background:transparent; font-size:14px; font-weight:500; width:100%; cursor:pointer;">
                            </div>
                        </div>
                    </div>

                    {{-- Notizen --}}
                    <div class="mb-1">
                        <div class="text-muted fw-semibold mb-2" style="font-size:10px; letter-spacing:.06em;">NOTIZEN</div>
                        <textarea name="notes" rows="2" class="form-control"
                                  style="border-radius:10px; border:1.5px solid #dee2e6; font-size:14px; resize:none;"
                                  placeholder="Optionale Anmerkungen..."></textarea>
                    </div>

                </div>

                <div class="modal-footer border-0 px-4 pb-4 pt-2 gap-2">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                            data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-calendar-check me-1"></i>Speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
<script>
(function () {
    const modal = document.getElementById('modal-appointment');
    modal.addEventListener('shown.bs.modal', function () {
        if (!document.getElementById('apt-date')._flatpickr) {
            flatpickr('#apt-date', {
                locale: 'de',
                dateFormat: 'd.m.Y',
                minDate: 'today',
                disableMobile: true,
            });
        }
    });

    document.getElementById('form-appointment').addEventListener('submit', function (e) {
        const dateParts = document.getElementById('apt-date').value;
        const timeFrom  = document.getElementById('apt-time-from').value;
        const timeTo    = document.getElementById('apt-time-to').value;

        if (!dateParts || !timeFrom) { e.preventDefault(); return; }

        const [d, m, y] = dateParts.split('.');
        const dateIso = `${y}-${m}-${d}`;
        document.getElementById('apt-starts-at').value = `${dateIso} ${timeFrom}`;
        if (timeTo) document.getElementById('apt-ends-at').value = `${dateIso} ${timeTo}`;
    });
})();
</script>

@endsection