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

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

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

        <div class="d-flex gap-2 align-items-center flex-wrap justify-content-end">
            <a href="{{ route('pms.orders.edit', $order->id) }}"
               class="btn btn-sm btn-outline-primary rounded-pill px-3">
                <i class="bi bi-pencil me-1"></i>Bearbeiten
            </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

            {{-- Rechnung PDF --}}
            <button onclick="erstelleRechnung()" id="btn-rechnung-erstellen"
                    class="btn btn-sm btn-outline-warning rounded-pill px-3">
                <i class="bi bi-receipt me-1"></i>Rechnung erstellen
            </button>
            @if($rechnungFile)
                <a href="{{ route('pms.orders.rechnung.view', $rechnungFile->id) }}"
                   target="_blank"
                   class="btn btn-sm btn-warning rounded-pill px-3" id="btn-rechnung-view">
                    <i class="bi bi-file-earmark-arrow-down me-1"></i>Rechnung PDF
                </a>
                <span class="text-muted" style="font-size:11px;" id="rechnung-version-info">
                    {{ $rechnungFile->re_nr }} · v{{ $rechnungFile->version }} · {{ \Carbon\Carbon::parse($rechnungFile->created_at)->format('d.m.Y H:i') }}
                </span>
            @else
                <a href="#" target="_blank" class="btn btn-sm btn-warning rounded-pill px-3 d-none" id="btn-rechnung-view">
                    <i class="bi bi-file-earmark-arrow-down me-1"></i>Rechnung PDF
                </a>
                <span class="text-muted d-none" style="font-size:11px;" id="rechnung-version-info"></span>
            @endif

            <form method="POST" action="{{ route('pms.orders.destroy', $order->id) }}"
                  onsubmit="return confirm('Auftrag wirklich löschen?')">
                @csrf
                <button class="btn btn-sm btn-outline-danger rounded-pill px-3">
                    <i class="bi bi-trash me-1"></i>Löschen
                </button>
            </form>
        </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

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

    <div class="row g-3">

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

            {{-- Stammdaten --}}
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header bg-white border-0 pt-3 pb-0 px-4">
                    <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.04em;">
                        <i class="bi bi-info-circle me-1"></i>Stammdaten
                    </span>
                </div>
                <div class="card-body px-4 py-3">
                    <div class="row g-3 small">
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">KUNDE</div>
                            <div class="fw-semibold">{{ $order->customer?->name ?? '—' }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">ANSPRECHPARTNER</div>
                            <div class="fw-semibold">
                                {{ $order->customer_contact
                                    ? $order->customer_contact->first_name . ' ' . $order->customer_contact->last_name
                                    : '—' }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">AUFTRAGSDATUM</div>
                            <div class="fw-semibold">
                                {{ $order->order_date ? \Carbon\Carbon::parse($order->order_date)->format('d.m.Y') : '—' }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">PROJEKTART</div>
                            <div class="fw-semibold">{{ $order->type?->name ?? '—' }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">STANDORT</div>
                            <div class="fw-semibold">{{ $order->project_location?->name ?? '—' }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">ERSTELLT VON</div>
                            <div class="fw-semibold">
                                {{ $order->created_by
                                    ? $order->created_by->first_name . ' ' . $order->created_by->last_name
                                    : '—' }}
                            </div>
                        </div>
                        @if($order->notes)
                        <div class="col-12">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">HINWEIS</div>
                            <div class="fw-semibold">{{ $order->notes }}</div>
                        </div>
                        @endif
                        @if($abFile)
                        <div class="col-12">
                            <div class="text-muted mb-1" style="font-size:11px; letter-spacing:.04em;">AUFTRAGSBESTÄTIGUNG</div>
                            <a href="{{ route('pms.offers.ab.download', $abFile->id) }}"
                               class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                                <i class="bi bi-file-earmark-pdf me-1 text-danger"></i>{{ $abFile->filename }}
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Positionen + PDF-Tab --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-3 pb-0 px-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <ul class="nav nav-tabs border-0" id="order-pos-tabs" role="tablist">
                            <li class="nav-item">
                                <button class="nav-link active px-3 py-2" data-bs-toggle="tab"
                                        data-bs-target="#tab-order-positionen" type="button"
                                        style="font-size:12px; letter-spacing:.04em;">
                                    <i class="bi bi-list-nested me-1"></i>POSITIONEN
                                </button>
                            </li>
                            <li class="nav-item" id="tab-rechnung-pdf-li" style="{{ $rechnungFile ? '' : 'display:none;' }}">
                                <button class="nav-link px-3 py-2" id="tab-rechnung-pdf-btn"
                                        data-bs-toggle="tab" data-bs-target="#tab-rechnung-pdf" type="button"
                                        style="font-size:12px; letter-spacing:.04em;">
                                    <i class="bi bi-file-earmark-pdf me-1 text-warning"></i>RECHNUNG PDF
                                </button>
                            </li>
                        </ul>
                        @if(!$order->fk_offer_id)
                            <div class="d-flex gap-1">
                                <button class="btn btn-sm btn-primary rounded-pill px-3 mb-2" onclick="showOrderInlinePosition()">
                                    <i class="bi bi-plus me-1"></i>Position
                                </button>
                                <button class="btn btn-sm btn-outline-secondary rounded-pill px-3 mb-2"
                                        data-bs-toggle="modal" data-bs-target="#modal-order-leistungsbibliothek"
                                        title="Aus Leistungsbibliothek übernehmen">
                                    <i class="bi bi-book me-1"></i>Leistungsposition
                                </button>
                            </div>
                        @else
                            <small class="text-muted mb-2">
                                <i class="bi bi-lock me-1"></i>aus Angebot <code>{{ $order->offer->offer_nr }}</code>
                            </small>
                        @endif
                    </div>
                </div>
                <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-order-positionen" role="tabpanel">
                <div class="card-body p-0">
                    <div id="order-positions-empty" class="{{ $order->positions->count() ? 'd-none' : '' }} text-center text-muted py-5">
                        <i class="bi bi-inbox d-block fs-3 mb-2 opacity-25"></i>
                        Noch keine Positionen angelegt.
                    </div>
                    <div id="order-positions-table" class="{{ $order->positions->count() ? '' : 'd-none' }}">
                        <div id="order-positions-tbody">
                            @foreach($order->positions as $i => $pos)
                                @include('pms.orders._position_row', ['pos' => $pos, 'depth' => 0, 'nr' => ($i+1), 'readonly' => !!$order->fk_offer_id])
                            @endforeach
                            @if(!$order->fk_offer_id)
                            <div id="order-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="order-inline-pos-form" name="title"
                                               id="order-inline-title"
                                               class="form-control form-control-sm mb-1"
                                               placeholder="Titel *" required>
                                        <textarea form="order-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="order-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="order-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="order-inline-pos-form" type="number" name="unit_price"
                                                       step="0.01" value="0"
                                                       class="form-control form-control-sm text-end" style="width:95px;">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0 pt-1" style="white-space:nowrap;">
                                        <button type="submit" form="order-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="cancelOrderInlinePosition()"
                                                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>
                            @endif
                        </div>
                        @if($order->positions->count())
                        @php
                            $netto     = $order->positions->sum('calculated_total');
                            $vatRate   = (float)($order->vat_rate ?? 19);
                            $vatFactor = $vatRate / 100;
                            $mwst      = $netto * $vatFactor;
                            $brutto    = $netto + $mwst;
                            $rowStyle  = 'd-flex align-items-center gap-2 px-4';
                        @endphp
                        <div class="border-top">
                            {{-- Nettosumme --}}
                            <div class="{{ $rowStyle }} py-2 small border-bottom">
                                <div class="flex-grow-1 d-flex justify-content-end gap-3 align-items-center">
                                    <span class="fw-bold text-muted" style="font-size:10px; letter-spacing:.04em;">NETTOSUMME</span>
                                    <span class="fw-bold" style="min-width:110px; text-align:right;">{{ number_format($netto, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                            {{-- MwSt --}}
                            <div class="{{ $rowStyle }} py-2 small border-bottom">
                                <div class="flex-grow-1 d-flex justify-content-end gap-3 align-items-center">
                                    <span class="text-muted" style="font-size:10px; letter-spacing:.04em;">
                                        @if($order->vat_hinweis)<span class="fst-italic pe-2">{{ $order->vat_hinweis }}</span> · @endif
                                        UMSATZSTEUER {{ number_format($vatRate, 0) }} %
                                    </span>
                                    <span class="text-muted" style="min-width:110px; text-align:right;">{{ number_format($mwst, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                            {{-- Gesamtsumme --}}
                            <div class="{{ $rowStyle }} py-2 fw-bold" style="background:#f8f9fa;">
                                <div class="flex-grow-1 d-flex justify-content-end gap-3 align-items-center">
                                    <span style="font-size:10px; letter-spacing:.04em;">GESAMTSUMME</span>
                                    <span style="min-width:110px; text-align:right;">{{ number_format($brutto, 2, ',', '.') }} €</span>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                </div>{{-- end tab-pane positionen --}}

                    {{-- Tab: Rechnung PDF --}}
                    <div class="tab-pane fade" id="tab-rechnung-pdf" role="tabpanel">
                        <div id="rechnung-iframe-wrap" style="height:780px; background:#e9e9e9;">
                            <iframe id="rechnung-iframe"
                                    src="{{ $rechnungFile ? route('pms.orders.rechnung.view', $rechnungFile->id) : '' }}"
                                    style="width:100%; height:100%; border:0; {{ $rechnungFile ? '' : 'display:none;' }}"></iframe>
                        </div>
                    </div>{{-- end tab-pane rechnung-pdf --}}

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

        </div>

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

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

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

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

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

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

                    <hr class="my-3">

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

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

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

    </div>
</div>

{{-- Modal: Neue Rechnung bestätigen --}}
<div class="modal fade" id="modal-neue-rechnung" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold">
                    <i class="bi bi-receipt me-2 text-warning"></i>Neue Rechnung erstellen
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body small">
                Es existiert bereits eine Rechnung
                @if($rechnungFile?->re_nr)
                    <strong>({{ $rechnungFile->re_nr }})</strong>
                @endif
                für diesen Auftrag.<br><br>
                Eine neue Rechnung erhält eine neue Rechnungsnummer. Die alte wird archiviert.
                <div id="rechnung-error" class="alert alert-danger py-1 mt-2 d-none" style="font-size:12px;"></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="button" class="btn btn-warning rounded-pill px-4"
                        onclick="_doErstelleRechnung()">
                    <i class="bi bi-receipt me-1"></i>Neu erstellen
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Inline-Formular --}}
@if(!$order->fk_offer_id)
<form id="order-inline-pos-form" method="POST" action="{{ route('pms.orders.position.store', $order->id) }}">
    @csrf
    <input type="hidden" name="parent_id" id="order-inline-parent-id" value="">
    <input type="hidden" name="level" id="order-inline-level" value="1">
</form>
@endif

<style>
    .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,
    #order-inline-position-row .pos-actions,
    [id^="order-edit-row-"] .pos-actions { opacity: 1; }
</style>

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

    function showOrderInlinePosition() { _openOrderInlineRow(null, 1); }
    function showOrderSubPosition(parentId, level) { _openOrderInlineRow(parentId, level); }

    function _openOrderInlineRow(parentId, level) {
        document.getElementById('order-inline-parent-id').value = parentId || '';
        document.getElementById('order-inline-level').value = level || 1;
        document.getElementById('order-positions-empty').classList.add('d-none');
        document.getElementById('order-positions-table').classList.remove('d-none');
        var tbody = document.getElementById('order-positions-tbody');
        var row   = document.getElementById('order-inline-position-row');
        tbody.appendChild(row);
        row.style.display = '';
        var titleInput = document.getElementById('order-inline-title');
        titleInput.value = '';
        titleInput.focus();
        row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function cancelOrderInlinePosition() {
        var row = document.getElementById('order-inline-position-row');
        if (row) {
            row.style.display = 'none';
            document.getElementById('order-inline-pos-form').reset();
        }
        @if(!$order->positions->count())
        document.getElementById('order-positions-empty').classList.remove('d-none');
        document.getElementById('order-positions-table').classList.add('d-none');
        @endif
    }

    function erstelleRechnung() {
        @if($rechnungFile)
            var modal = new bootstrap.Modal(document.getElementById('modal-neue-rechnung'));
            modal.show();
        @else
            _doErstelleRechnung();
        @endif
    }

    function _doErstelleRechnung() {
        var modal = bootstrap.Modal.getInstance(document.getElementById('modal-neue-rechnung'));
        if (modal) modal.hide();

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

        fetch('{{ route('pms.orders.rechnung.store', $order->id) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(r => {
            if (!r.ok) throw new Error('Server-Fehler ' + r.status);
            return r.json();
        })
        .then(data => {
            if (data.success) {
                var viewBtn  = document.getElementById('btn-rechnung-view');
                var infoSpan = document.getElementById('rechnung-version-info');
                var tabLi    = document.getElementById('tab-rechnung-pdf-li');
                var iframe   = document.getElementById('rechnung-iframe');

                viewBtn.href = data.view_url;
                viewBtn.classList.remove('d-none');
                infoSpan.textContent = data.re_nr + ' · v' + data.version + ' · ' + data.created_at;
                infoSpan.classList.remove('d-none');

                // PDF-Tab einblenden + iframe aktualisieren
                tabLi.style.display = '';
                iframe.src = data.view_url;
                iframe.style.display = '';

                // Tab direkt öffnen
                var tabBtn = document.getElementById('tab-rechnung-pdf-btn');
                bootstrap.Tab.getOrCreateInstance(tabBtn).show();

                window.open(data.view_url, '_blank');
            }
        })
        .catch(err => {
            var errEl = document.getElementById('rechnung-error');
            if (errEl) { errEl.textContent = err.message; errEl.classList.remove('d-none'); }
            alert('Fehler beim Erstellen der Rechnung:\n' + err.message);
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-receipt me-1"></i>Rechnung erstellen';
        });
    }

    function toggleOrderEditRow(posId) {
        var row = document.getElementById('order-edit-row-' + posId);
        row.style.display = (row.style.display === 'none') ? '' : 'none';
    }
</script>

@if(!$order->fk_offer_id)
{{-- Modal: Leistungsbibliothek (Auftrag) --}}
<div class="modal fade" id="modal-order-leistungsbibliothek" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <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="osp-trade-filter" class="form-select form-select-sm">
                            <option value="">Alle Gewerke</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <input type="text" id="osp-search-input"
                               class="form-control form-control-sm"
                               placeholder="Kurztext oder Suchbegriff eingeben…">
                    </div>
                </div>

                {{-- Ergebnisse --}}
                <div id="osp-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="osp-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 class="d-flex justify-content-between align-items-center mt-2 small text-muted">
                    <span id="osp-count"></span>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary px-2" id="osp-prev" disabled>‹</button>
                        <button class="btn btn-sm btn-outline-secondary px-2 ms-1" id="osp-next" disabled>›</button>
                    </div>
                </div>

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

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

    document.getElementById('modal-order-leistungsbibliothek').addEventListener('show.bs.modal', function () {
        if (document.getElementById('osp-trade-filter').options.length <= 1) {
            fetch(ospApiBase + '/kategorien')
                .then(r => r.json())
                .then(function (data) {
                    var sel = document.getElementById('osp-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 ospSearch(page) {
        ospPage     = page || 1;
        var trade   = document.getElementById('osp-trade-filter').value;
        var q       = document.getElementById('osp-search-input').value.trim();

        if (!trade && !q) {
            document.getElementById('osp-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('osp-count').textContent = '';
            document.getElementById('osp-prev').disabled = true;
            document.getElementById('osp-next').disabled = true;
            return;
        }

        var url = ospApiBase + '/suche?page=' + ospPage + '&per_page=20';
        if (trade) url += '&trade_nr=' + encodeURIComponent(trade);
        if (q)     url += '&q='        + encodeURIComponent(q);

        document.getElementById('osp-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) { ospRender(data); });
    }

    function ospRender(data) {
        var tbody = document.getElementById('osp-results-body');
        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>';
            document.getElementById('osp-count').textContent = '0 Treffer';
            document.getElementById('osp-prev').disabled = true;
            document.getElementById('osp-next').disabled = true;
            return;
        }

        document.getElementById('osp-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;">' + ospEsc(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 osp-apply-btn" ' +
                    'data-title="'   + ospEscAttr(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('osp-prev').disabled = !data.prev_page_url;
        document.getElementById('osp-next').disabled = !data.next_page_url;
    }

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

    var ospTimer;
    document.getElementById('osp-search-input').addEventListener('input', function () {
        clearTimeout(ospTimer);
        ospTimer = setTimeout(function () { ospSearch(1); }, 400);
    });
    document.getElementById('osp-trade-filter').addEventListener('change', function () { ospSearch(1); });
    document.getElementById('osp-prev').addEventListener('click', function () { ospSearch(ospPage - 1); });
    document.getElementById('osp-next').addEventListener('click', function () { ospSearch(ospPage + 1); });

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

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

        showOrderInlinePosition();

        document.getElementById('order-inline-title').value = title;

        var unitSelect = document.querySelector('#order-inline-position-row select[name="fk_unit_id"]');
        if (unitSelect) {
            unitSelect.value = unitId || '';
        }

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

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

    document.getElementById('modal-order-leistungsbibliothek').addEventListener('hidden.bs.modal', function () {
        document.getElementById('osp-search-input').value = '';
        document.getElementById('osp-trade-filter').selectedIndex = 0;
        document.getElementById('osp-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('osp-count').textContent = '';
        document.getElementById('osp-prev').disabled = true;
        document.getElementById('osp-next').disabled = true;
    });
})();
</script>
@endif

@endsection