@extends('layouts.app', ['title' => 'Angebot ' . $offer->offer_nr])
@section('content')

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

    {{-- Header --}}
    <div class="mb-4">
        {{-- Breadcrumb-Zeile --}}
        <div class="d-flex align-items-center gap-2 mb-2">
            <a href="{{ route('pms.offers.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($offer->category)
                <span class="text-muted" style="font-size:12px;">|</span>
                <span class="badge rounded-pill text-bg-light border fw-normal" style="font-size:11px;">{{ $offer->category->nr_prefix }} · {{ $offer->category->name }}</span>
            @endif
            <code class="text-muted ms-1" style="font-size:12px;">{{ $offer->offer_nr }}</code>
        </div>

        {{-- Titel + Actions --}}
        <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
            <h4 class="fw-bold mb-0 mt-1">{{ $offer->title }}</h4>

            {{-- Aktionen: alle in einer Zeile, visuell gruppiert --}}
            <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">

                {{-- Sekundär: Kopieren --}}
                <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3"
                        data-bs-toggle="modal" data-bs-target="#modal-kopieren">
                    <i class="bi bi-copy me-1"></i>Kopieren
                </button>

                {{-- Trennlinie --}}
                <span class="text-muted" style="font-size:18px; line-height:1;">|</span>

                {{-- PDF-Gruppe --}}
                @if(!$offer->order)
                    <button onclick="erstellePdf()" class="btn btn-sm btn-outline-danger rounded-pill px-3" id="btn-pdf-erstellen">
                        <i class="bi bi-file-earmark-pdf me-1"></i>PDF erstellen
                    </button>
                @endif

                @if($dmsFile)
                    <a href="{{ route('pms.offers.pdf.download', $dmsFile->id) }}"
                       class="btn btn-sm btn-danger rounded-pill px-3" id="btn-pdf-download">
                        <i class="bi bi-file-earmark-arrow-down me-1"></i>Angebot PDF <span style="opacity:.7;font-size:.85em;">v{{ $dmsFile->version }}</span>
                    </a>
                @else
                    <a href="#" class="btn btn-sm btn-danger rounded-pill px-3 d-none" id="btn-pdf-download">
                        <i class="bi bi-file-earmark-arrow-down me-1"></i>Angebot PDF
                    </a>
                @endif

                {{-- Trennlinie --}}
                <span class="text-muted" style="font-size:18px; line-height:1;">|</span>

                {{-- Haupt-CTA: Beauftragen / Zum Auftrag --}}
                @if($offer->order)
                    <a href="{{ route('pms.orders.show', $offer->order->id) }}"
                       class="btn btn-sm btn-success rounded-pill px-3">
                        <i class="bi bi-check2-circle me-1"></i>Zum Auftrag
                    </a>
                    @if($abFile)
                        <a href="{{ route('pms.offers.ab.download', $abFile->id) }}"
                           class="btn btn-sm btn-outline-success rounded-pill px-3">
                            <i class="bi bi-file-earmark-arrow-down me-1"></i>AB
                        </a>
                    @endif
                @elseif($dmsFile)
                    <button type="button" class="btn btn-sm btn-success rounded-pill px-3"
                            data-bs-toggle="modal" data-bs-target="#modal-beauftragt">
                        <i class="bi bi-trophy me-1"></i>Beauftragen
                    </button>
                @else
                    <span class="text-muted small fst-italic">
                        <i class="bi bi-info-circle me-1"></i>Erst PDF erstellen
                    </span>
                @endif

            </div>
        </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 (nur wenn Workflow zugewiesen) --}}
    @if($offer->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">

            {{-- Zeile 1: Zurück · Phase/Abteilung · Weiter --}}
            <div class="d-flex align-items-center justify-content-between gap-3">

                {{-- Zurück --}}
                <div style="min-width:160px;">
                    @if($wfPrevStation && !$offer->order)
                        <form action="{{ route('pms.offers.workflow.zuruck') }}" method="POST" class="m-0">
                            @csrf
                            <input type="hidden" name="id" value="{{ $offer->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 {{ $offer->current_phase }}: {{ $wfCurrentStation->department->name ?? '—' }}
                    </span>
                </div>

                {{-- Weiter --}}
                <div class="text-end" style="min-width:160px;">
                    @if(!$offer->order)
                        @if($wfNextStation)
                            <form action="{{ route('pms.offers.workflow.weiter') }}" method="POST" class="m-0">
                                @csrf
                                <input type="hidden" name="id" value="{{ $offer->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
                    @endif
                </div>

            </div>

            {{-- Zeile 2: Aufgabe --}}
            @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
        $allOfferStatuses = \App\Models\PmsStatus::offer()->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" style="background:#fafafa;">
        <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:10px; min-width:80px; letter-spacing:.05em;">HAUPTSTATUS</span>
                @foreach($allOfferStatuses as $s)
                    <form method="POST" action="{{ route('pms.offers.status.update', $offer->id) }}" class="p-0 m-0">
                        @csrf
                        <input type="hidden" name="fk_status_id" value="{{ $s->id }}">
                        <button type="submit"
                                class="btn btn-sm rounded-pill px-3 {{ $offer->fk_status_id == $s->id ? 'btn-'.$s->color : 'btn-outline-secondary text-muted' }}"
                                style="font-size:11px;"
                                {{ $offer->fk_status_id == $s->id ? 'disabled' : '' }}>
                            {{ $s->name }}
                        </button>
                    </form>
                @endforeach
            </div>
            <div class="d-flex align-items-center gap-2 pt-2 flex-wrap">
                <span class="text-muted fw-semibold" style="font-size:10px; min-width:80px; letter-spacing:.05em;">ABTEILUNG</span>
                @foreach($allDeptStatuses as $s)
                    <form method="POST" action="{{ route('pms.offers.status.update', $offer->id) }}" class="p-0 m-0">
                        @csrf
                        <input type="hidden" name="fk_status_dept_id" value="{{ $s->id }}">
                        <button type="submit"
                                class="btn btn-sm rounded-pill px-3 {{ $offer->fk_status_dept_id == $s->id ? 'btn-'.$s->color : 'btn-outline-secondary text-muted' }}"
                                style="font-size:11px;"
                                {{ $offer->fk_status_dept_id == $s->id ? 'disabled' : '' }}>
                            {{ $s->name }}
                        </button>
                    </form>
                @endforeach
            </div>
        </div>
    </div>

    <div class="row g-3">

        {{-- Linke Spalte --}}
        <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:.05em;">
                        <i class="bi bi-info-circle me-1"></i>Stammdaten
                    </span>
                    <a href="{{ route('pms.offers.edit', $offer->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 pb-3 pt-2">

                    {{-- Gruppe 1: Auftraggeber --}}
                    <div class="row g-3 small mb-1">
                        <div class="col-sm-6">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">KUNDE</div>
                            <div class="fw-semibold">{{ $offer->customer?->name ?? '—' }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">ANSPRECHPARTNER</div>
                            <div class="fw-semibold">
                                {{ $offer->customer_contact ? $offer->customer_contact->first_name . ' ' . $offer->customer_contact->last_name : '—' }}
                            </div>
                        </div>
                    </div>

                    <hr class="my-2 opacity-25">

                    {{-- Gruppe 2: Bauvorhaben --}}
                    <div class="row g-3 small mb-1">
                        <div class="col-12">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">BAUVORHABEN</div>
                            <div class="fw-semibold">
                                @if($offer->project_location)
                                    <a href="{{ route('project.location.show', ['id' => $offer->project_location->id]) }}" class="text-decoration-none">
                                        <i class="bi bi-geo-alt me-1 text-muted"></i>{{ $offer->project_location->name }}
                                    </a>
                                    @if($offer->project_location->address)
                                        <span class="text-muted fw-normal ms-1" style="font-size:12px;">— {{ $offer->project_location->address }}</span>
                                    @endif
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <hr class="my-2 opacity-25">

                    {{-- Gruppe 3: Konditionen --}}
                    <div class="row g-3 small mb-1">
                        <div class="col-sm-4">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">ANGEBOTSDATUM</div>
                            <div class="fw-semibold">{{ $offer->offer_date ? \Carbon\Carbon::parse($offer->offer_date)->format('d.m.Y') : '—' }}</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">GÜLTIG BIS</div>
                            <div class="fw-semibold">
                                @php $validUntil = $offer->valid_until ? \Carbon\Carbon::parse($offer->valid_until) : null; @endphp
                                @if($validUntil)
                                    <span class="{{ $validUntil->isPast() && !$offer->order ? 'text-danger' : '' }}">
                                        {{ $validUntil->format('d.m.Y') }}
                                    </span>
                                @else
                                    —
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">PROJEKTART</div>
                            <div class="fw-semibold">{{ $offer->type?->name ?? '—' }}</div>
                        </div>
                    </div>

                    <hr class="my-2 opacity-25">

                    {{-- Gruppe 4: Workflow & AGB --}}
                    <div class="row g-3 small">
                        <div class="col-sm-6">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">WORKFLOW</div>
                            <div class="fw-semibold">
                                @if($offer->workflow)
                                    <i class="bi bi-diagram-3 me-1 text-muted"></i>{{ $offer->workflow->name }}
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">AGB / ZAHLUNGSBEDINGUNGEN</div>
                            <div class="fw-semibold">
                                @if($offer->terms)
                                    <a href="#" class="text-decoration-none"
                                       data-bs-toggle="modal" data-bs-target="#modal-agb">
                                        <i class="bi bi-file-text me-1 text-muted"></i>{{ $offer->terms->title }}
                                    </a>
                                @else
                                    <span class="text-muted small fst-italic">Standard AGB</span>
                                @endif
                            </div>
                        </div>
                        @if($offer->description)
                        <div class="col-12 pt-1">
                            <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">BESCHREIBUNG</div>
                            <div class="text-secondary">{{ $offer->description }}</div>
                        </div>
                        @endif
                    </div>

                </div>
            </div>

            {{-- Positionen --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-3 pb-0 px-4">
                    <ul class="nav nav-tabs border-0" id="pos-tabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active px-3 py-2" id="tab-positionen-btn"
                                    data-bs-toggle="tab" data-bs-target="#tab-positionen" type="button" role="tab"
                                    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"
                                    data-bs-toggle="tab" data-bs-target="#tab-attachments" type="button" role="tab"
                                    style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-paperclip me-1"></i>DATEIEN
                                @if($attachments->count())
                                    <span class="badge bg-secondary rounded-pill ms-1" style="font-size:10px;">{{ $attachments->count() }}</span>
                                @endif
                            </button>
                        </li>
                        <li class="nav-item" id="tab-pdf-li" style="{{ $dmsFile ? '' : 'display:none;' }}">
                            <button class="nav-link px-3 py-2" id="tab-pdf-btn"
                                    data-bs-toggle="tab" data-bs-target="#tab-pdf" type="button" role="tab"
                                    style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-file-earmark-pdf me-1 text-danger"></i>ANGEBOT PDF
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link px-3 py-2"
                                    data-bs-toggle="tab" data-bs-target="#tab-pdf-history" type="button" role="tab"
                                    style="font-size:12px; letter-spacing:.04em;">
                                <i class="bi bi-clock-history me-1 text-danger"></i>PDF VERSIONEN
                                @if($pdfHistory->count())
                                    <span class="badge bg-danger rounded-pill ms-1" style="font-size:10px;">{{ $pdfHistory->count() }}</span>
                                @endif
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-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>
                            <button class="btn btn-sm btn-outline-secondary " id="btn-leistungsposition"
                                    data-bs-toggle="modal" data-bs-target="#modal-leistungsbibliothek">
                                <i class="bi bi-book me-1"></i>Leistung
                            </button>
                            <button class="btn btn-sm btn-outline-secondary "
                                    data-bs-toggle="modal" data-bs-target="#modal-materialkatalog">
                                <i class="bi bi-box-seam me-1"></i>Material
                            </button>
                        </div>
                <div class="card-body p-0">
                    <div id="positions-empty" class="{{ $offer->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="{{ $offer->positions->count() ? '' : 'd-none' }}">
                        <div id="positions-tbody">
                            @foreach($offer->positions as $i => $pos)
                                @include('pms.offers._position_row', ['pos' => $pos, 'depth' => 0, 'nr' => ($i+1)])
                            @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($offer->positions->count())
                        @php
                            $netto     = $offer->positions->where('is_optional', 0)->sum('calculated_total');
                            $vatFactor = (float)($offer->vat_rate ?? 19) / 100;
                            $mwst      = $netto * $vatFactor;
                            $brutto    = $netto + $mwst;
                        @endphp
                        @php
                            $totalRowStyle = 'd-flex align-items-center gap-2 px-3';
                        @endphp
                        <div class="border-top">
                            {{-- Nettosumme --}}
                            <div class="{{ $totalRowStyle }} py-2 small border-bottom">
                                <div style="min-width:42px;"></div>
                                <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:90px; text-align:right;">{{ number_format($netto, 2, ',', '.') }} €</span>
                                </div>
                                <div style="min-width:90px;"></div>
                            </div>
                            {{-- MwSt --}}
                            <div class="{{ $totalRowStyle }} py-2 small border-bottom">
                                <div style="min-width:42px;"></div>
                                <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($offer->vat_hinweis)<span class="fst-italic pe-3">{{ $offer->vat_hinweis }}</span> · @endif
                                        UMSATZSTEUER {{ number_format($offer->vat_rate ?? 19, 0) }} %
                                    </span>
                                    <span class="text-muted" style="min-width:90px; text-align:right;">{{ number_format($mwst, 2, ',', '.') }} €</span>
                                </div>
                                <div style="min-width:90px;"></div>
                            </div>
                            {{-- Gesamtsumme --}}
                            <div class="{{ $totalRowStyle }} py-2 fw-bold" style="background:#f8f9fa;">
                                <div style="min-width:42px;"></div>
                                <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:90px; text-align:right;">{{ number_format($brutto, 2, ',', '.') }} €</span>
                                </div>
                                <div style="min-width:90px;"></div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                    </div>{{-- end tab-pane positionen --}}

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

                        {{-- Header --}}
                        <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>

                        {{-- Datei-Liste --}}
                        @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>
                                            @if($att->original_name && $att->original_name !== $att->filename)
                                                <div class="text-muted" style="font-size:11px;">{{ $att->filename }}</div>
                                            @endif
                                        </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.offers.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.offers.attachment.destroy', [$offer->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 attachments --}}

                    {{-- Tab: PDF Versionen --}}
                    <div class="tab-pane fade" id="tab-pdf-history" role="tabpanel">
                        @if($pdfHistory->isEmpty())
                            <div class="text-center text-muted py-5">
                                <i class="bi bi-file-earmark-pdf d-block fs-2 mb-2 opacity-25"></i>
                                Noch kein PDF erstellt.
                            </div>
                        @else
                            <table class="table table-hover align-middle mb-0 small">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-4">Version</th>
                                        <th>Dateiname</th>
                                        <th>Erstellt am</th>
                                        <th>Status</th>
                                        <th class="pe-4 text-end">Aktionen</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($pdfHistory as $pdf)
                                    <tr class="{{ $pdf->is_deleted ? 'text-muted' : '' }}">
                                        <td class="ps-4">
                                            <span class="badge {{ $pdf->is_deleted ? 'bg-secondary' : 'bg-danger' }} rounded-pill">
                                                v{{ $pdf->version }}
                                            </span>
                                        </td>
                                        <td>{{ $pdf->filename }}</td>
                                        <td>{{ $pdf->created_at ? \Carbon\Carbon::parse($pdf->created_at)->format('d.m.Y H:i') : '—' }}</td>
                                        <td>
                                            @if($pdf->is_deleted)
                                                <span class="text-muted"><i class="bi bi-archive me-1"></i>Archiviert</span>
                                            @else
                                                <span class="text-success"><i class="bi bi-check-circle me-1"></i>Aktuell</span>
                                            @endif
                                        </td>
                                        <td class="pe-4 text-end">
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-danger rounded-pill px-3"
                                                    onclick="openPdfModal('{{ route('pms.offers.pdf.view', $pdf->id) }}', 'v{{ $pdf->version }} – {{ $pdf->filename }}')">
                                                <i class="bi bi-eye me-1"></i>Anzeigen
                                            </button>
                                            <a href="{{ route('pms.offers.pdf.download', $pdf->id) }}"
                                               class="btn btn-sm btn-outline-secondary rounded-pill px-3 ms-1">
                                                <i class="bi bi-download"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @endif
                    </div>{{-- end tab-pane pdf-history --}}

                    <div class="tab-pane fade" id="tab-pdf" role="tabpanel">
                        <div id="pdf-iframe-wrap" style="height:780px; background:#e9e9e9;">
                            {{-- <div id="pdf-placeholder" class="d-flex flex-column align-items-center justify-content-center h-100 text-muted"
                                 style="{{ $dmsFile ? 'display:none;' : '' }}">
                                <i class="bi bi-file-earmark-pdf" style="font-size:3rem; opacity:.3;"></i>
                                <div class="mt-2 small">PDF noch nicht erstellt — oben auf <strong>PDF erstellen</strong> klicken.</div>
                            </div> --}}
                            <iframe id="pdf-iframe"
                                    src="{{ $dmsFile ? route('pms.offers.pdf.view', $dmsFile->id) : '' }}"
                                    style="width:100%; height:100%; border:0; {{ $dmsFile ? '' : 'display:none;' }}"></iframe>
                        </div>
                    </div>{{-- end tab-pane pdf --}}

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

        </div>

        {{-- Rechte Spalte: 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.offers.appointment.done', [$offer->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.offers.appointment.destroy', [$offer->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.offers.appointment.done', [$offer->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.offers.appointment.destroy', [$offer->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.offers.appointment.done', [$offer->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.offers.appointment.destroy', [$offer->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>

            {{-- Timeline --}}
            <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 action="{{ route('pms.offers.timeline.store', $offer->id) }}" method="POST" id="form-note"
                        onsubmit="syncTextarea()" novalidate>
                        @csrf

                        {{-- Typ-Auswahl --}}
                        <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>

                        {{-- Kontakt mit --}}
                        <div id="contact-with" class="mb-2" style="display:none;">
                            <label class="form-label small text-muted mb-1">Kontakt mit:</label>
                            <select class="form-select form-select-sm" id="contact-dst-id" name="contact_dst">
                                @if($offer->customer)
                                    <option value="Kunde: {{ $offer->customer->name }}">
                                        Kunde: {{ $offer->customer->name }}
                                    </option>
                                @endif
                                @if($offer->customer_contact)
                                    <option value="Kontakt: {{ $offer->customer_contact->first_name }} {{ $offer->customer_contact->last_name }}">
                                        Kontakt: {{ $offer->customer_contact->first_name }} {{ $offer->customer_contact->last_name }}
                                    </option>
                                @endif
                            </select>
                        </div>

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

                        <button type="submit" class="btn btn-sm btn-primary 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 --}}
                    @forelse($offer->timeline as $entry)
                        @php
                            $isNote       = $entry->contact_type == 4;
                            $isCall       = $entry->contact_type == 0;
                            $isEmail      = $entry->contact_type == 1;
                            $isPost       = $entry->contact_type == 2;
                            $isPersonally = $entry->contact_type == 3;
                            $tlIcon = $isNote ? 'bi-info-square-fill' : ($isCall ? 'bi-telephone-fill' : ($isEmail ? 'bi-envelope-fill' : ($isPost ? 'bi-mailbox2' : 'bi-people-fill')));
                            $tlColor = $isNote ? '#0dcaf0' : ($isCall ? '#198754' : ($isEmail ? '#0d6efd' : ($isPost ? '#6c757d' : '#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>
            </div>
        </div>

    </div>
</div>

{{-- Formular für Inline-Position (außerhalb Tabelle, via form="inline-pos-form") --}}
<form id="inline-pos-form" method="POST" action="{{ route('pms.offers.position.store', $offer->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 */
    .pos-row { border-bottom: 1px solid #f0f0f0; }
    .pos-group > .pos-row-inner { background: #f6f7f8; }
    .pos-group + .pos-group > .pos-row-inner { border-top: 2px solid #e0e3e7; }
    .pos-item > .pos-row-inner { background: #fff; }
    .pos-item:hover > .pos-row-inner { background: #f9fafe; }
    .pos-row .pos-actions { opacity: 0; transition: opacity .15s; }
    .pos-row:hover .pos-actions,
    #inline-position-row .pos-actions,
    [id^="edit-row-"] .pos-actions { opacity: 1; }
</style>

<script>
    $(document).ready(function() {
        contact_checked();
    });

    function contact_checked() {
        if (document.getElementById("notes").checked) {
            document.getElementById("contact-with").style.display = 'none';
        } else {
            document.getElementById("contact-with").style.display = 'block';
        }
    }

    var pdfStoreUrl = '{{ route('pms.offers.pdf.store', $offer->id) }}';
    var csrfToken   = '{{ csrf_token() }}';

    function erstellePdf() {
        var btn = document.getElementById('btn-pdf-erstellen');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Erstelle…';

        fetch(pdfStoreUrl, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) throw new Error('Fehler');
            window.location.reload();
        })
        .catch(() => alert('PDF-Erstellung fehlgeschlagen.'))
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-file-earmark-pdf me-1"></i>PDF erstellen';
        });
    }

    // Buttons zeigen/verstecken je nach aktivem Tab
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('tab-positionen-btn').addEventListener('shown.bs.tab', function () {
            document.getElementById('btn-add-position').style.display = '';
            document.getElementById('btn-leistungsposition').style.display = '';
        });
        document.getElementById('tab-pdf-btn').addEventListener('shown.bs.tab', function () {
            document.getElementById('btn-add-position').style.display = 'none';
            document.getElementById('btn-leistungsposition').style.display = 'none';
        });
    });

    function showInlinePosition() {
        // Immer L1, kein Parent
        _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');

        // Inline-Zeile ans Ende des tbody verschieben und anzeigen
        var tbody = document.getElementById('positions-tbody');
        var row = document.getElementById('inline-position-row');
        tbody.appendChild(row);
        row.style.display = '';

        // Titel leeren und fokussieren
        var titleInput = document.getElementById('inline-title');
        titleInput.value = '';
        titleInput.focus();
        row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    // G-Preis Live-Berechnung
    function updateInlineGpreis() {
        var qty   = parseFloat(document.getElementById('inline-quantity')?.value || 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(!$offer->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';
    }

</script>

{{-- Modal: Angebot kopieren --}}
<div class="modal fade" id="modal-kopieren" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <form method="POST" action="{{ route('pms.offers.duplicate', $offer->id) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h6 class="modal-title fw-semibold"><i class="bi bi-copy me-2 text-primary"></i>Angebot kopieren</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label small fw-semibold">In welche Gruppe kopieren?</label>
                <div class="d-grid gap-2 mt-1">
                    @foreach($categories as $cat)
                        <div class="form-check border rounded px-3 py-2 {{ $cat->id == $offer->fk_category_id ? 'border-primary' : '' }}">
                            <input class="form-check-input" type="radio" name="fk_category_id"
                                   id="show_cat_{{ $cat->id }}" value="{{ $cat->id }}"
                                   {{ $cat->id == $offer->fk_category_id ? 'checked' : '' }} required>
                            <label class="form-check-label w-100" for="show_cat_{{ $cat->id }}">
                                <span class="fw-semibold">{{ $cat->nr_prefix }}</span>
                                <span class="text-muted ms-1 small">{{ $cat->name }}</span>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                <button type="submit" class="btn btn-primary rounded-pill px-4">
                    <i class="bi bi-copy me-1"></i>Kopieren
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Modal: Beauftragt / Auftragsbestätigung hochladen --}}
<div class="modal fade" id="modal-beauftragt" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('pms.offers.beauftragt', $offer->id) }}"
              enctype="multipart/form-data" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title fw-semibold">
                    <i class="bi bi-trophy text-success me-2"></i>Angebot beauftragen
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-3">
                    Das Angebot wird auf <strong class="text-success">Beauftragt</strong> gesetzt und ein Auftrag wird automatisch angelegt.
                </p>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Auftragsbestätigung (PDF)</label>
                    <input type="file" name="ab_file" class="form-control" accept=".pdf">
                    <div class="form-text">Optional · Nur PDF-Dateien, max. 20 MB</div>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Auftragsdatum</label>
                    <input type="date" name="ab_date" class="form-control"
                           value="{{ now()->toDateString() }}">
                </div>
                <div class="mb-1">
                    <label class="form-label small fw-semibold">Hinweis</label>
                    <textarea name="ab_note" class="form-control" rows="2"
                              placeholder="Optionaler Hinweis zum Auftrag…"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-3"
                        data-bs-dismiss="modal">Abbrechen</button>
                <button type="submit" class="btn btn-success rounded-pill px-4">
                    <i class="bi bi-check2-circle me-1"></i>Beauftragen &amp; Auftrag anlegen
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Modal: PDF Vollbild-Ansicht --}}
<div class="modal fade" id="modal-pdf-view" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:92vw;">
        <div class="modal-content" style="height:90vh;">
            <div class="modal-header py-2 px-3">
                <h6 class="modal-title fw-semibold mb-0" id="modal-pdf-title">PDF</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="flex:1; overflow:hidden;">
                <iframe id="modal-pdf-iframe" src="" style="width:100%; height:100%; border:0;"></iframe>
            </div>
        </div>
    </div>
</div>

<script>
function openPdfModal(url, title) {
    document.getElementById('modal-pdf-title').textContent = title || 'PDF';
    document.getElementById('modal-pdf-iframe').src = url;
    new bootstrap.Modal(document.getElementById('modal-pdf-view')).show();
}

document.getElementById('modal-pdf-view').addEventListener('hidden.bs.modal', function () {
    document.getElementById('modal-pdf-iframe').src = '';
});
</script>

{{-- Modal: Leistungsbibliothek (Angebot) --}}
<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">

                {{-- Filter --}}
                <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>

                {{-- Ergebnisse --}}
                <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>

                {{-- Pagination --}}
                <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';

    // Gewerke laden wenn Modal geöffnet wird
    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(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');
            tr.style.cursor = 'pointer';
            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;');
    }

    // Events
    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); });

    // Position übernehmen
    document.getElementById('sp-results-body').addEventListener('click', function (e) {
        var btn = e.target.closest('.sp-apply-btn');
        if (!btn) return;

        var title  = btn.dataset.title;
        var unitId = btn.dataset.unitId;
        var price  = btn.dataset.price;

        showInlinePosition();

        document.getElementById('inline-title').value = 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 = unitId || '';

        var priceInput = document.querySelector('#inline-position-row input[name="unit_price"]');
        if (priceInput) priceInput.value = price || 0;
        updateInlineGpreis();

        bootstrap.Modal.getInstance(document.getElementById('modal-leistungsbibliothek')).hide();
    });

    // Reset bei Modal-Schließen
    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-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;

    function matSearch(page) {
        matPage = page || 1;
        var q      = document.getElementById('mat-search-input').value.trim();
        var unitId = document.getElementById('mat-unit-filter').value;

        if (!q && !unitId) {
            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;

        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) { renderMatResults(data); });
    }

    function renderMatResults(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';

        data.items.forEach(function (it) {
            var tr = document.createElement('tr');
            tr.style.cursor = 'pointer';
            var price  = it.list_price > 0 ? parseFloat(it.list_price).toFixed(2).replace('.', ',') + ' €' : '–';
            var unitNm = it.unit ? it.unit.name : '–';
            tr.innerHTML =
                '<td style="font-size:12px; font-family:monospace;">' + escHtmlM(it.article_nr || '–') + '</td>' +
                '<td style="font-size:13px;">' + escHtmlM(it.short_text) + '</td>' +
                '<td style="font-size:12px;">' + escHtmlM(unitNm) + '</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="'   + escAttrM(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;
    }

    function escHtmlM(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
    function escAttrM(s) { return String(s||'').replace(/"/g,'&quot;'); }

    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-prev').addEventListener('click', function () { matSearch(matPage - 1); });
    document.getElementById('mat-next').addEventListener('click', function () { matSearch(matPage + 1); });

    // Übernehmen → Inline-Zeile befüllen
    document.getElementById('mat-results-body').addEventListener('click', function (e) {
        var btn = e.target.closest('.mat-apply-btn');
        if (!btn) return;

        showInlinePosition();

        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();
    });

    // Reset bei Schließen
    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-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>

{{-- Flatpickr --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
/* Flatpickr custom theme */
.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-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #cfe2ff !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 input boxes */
.apt-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    padding: 8px 12px;
    gap: 8px;
    cursor: pointer;
    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 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    width: 100%;
    cursor: pointer;
}
.apt-picker-wrap input.flatpickr-input::placeholder { color: #adb5bd; font-weight: 400; }

/* Typ-Karten */
.apt-type-label { color: #6c757d; transition: all .15s; }
.apt-type-label:has(.apt-type-radio:checked) {
    border-color: #0d6efd !important;
    color: #0d6efd;
    background: #f0f5ff;
    font-weight: 600;
}
</style>

{{-- 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">

                {{-- Drop Zone --}}
                <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>

                {{-- Datei-Queue --}}
                <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.offers.attachment.upload', $offer->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 = [];

    // Reset modal on close
    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');
    }

    // Drag & Drop
    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); });

    // Upload: sequenziell, eine Datei nach der anderen
    btnUpload.addEventListener('click', () => {
        btnUpload.disabled = true;
        btnClose.disabled  = true;
        uploadNext(0);
    });

    function uploadNext(index) {
        if (index >= selectedFiles.length) {
            // Alle fertig
            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>';
                item.title = 'Fehler beim Hochladen';
            }
            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>

{{-- Modal: Neuer Termin --}}
<div class="modal fade" id="modal-appointment" tabindex="-1" aria-labelledby="modal-apt-title" 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.offers.appointment.store', $offer->id) }}" id="form-appointment">
                @csrf
                {{-- Hidden: kombinierte Felder für Controller --}}
                <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">
                        <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,
            });
        }
    });

    // Vor Submit: Datum + Zeit zusammenbauen
    document.getElementById('form-appointment').addEventListener('submit', function (e) {
        const dateParts = document.getElementById('apt-date').value; // dd.mm.yyyy
        const timeFrom  = document.getElementById('apt-time-from').value; // HH:ii
        const timeTo    = document.getElementById('apt-time-to').value;

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

        // dd.mm.yyyy → yyyy-mm-dd
        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>

{{-- Modal: AGB Vorschau --}}
@if($offer->terms)
<div class="modal fade" id="modal-agb" tabindex="-1" aria-labelledby="modal-agb-title" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header border-0 pb-1">
                <h6 class="modal-title fw-semibold" id="modal-agb-title">
                    <i class="bi bi-file-text me-2 text-muted"></i>{{ $offer->terms->title }}
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body px-4 py-3" style="font-size:14px; line-height:1.7;">
                {!! $offer->terms->terms_text !!}
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3"
                        data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>
@endif

@endsection