@extends('layouts.app', ['title' => $offer ? 'Angebot bearbeiten' : 'Neues Angebot'])
@section('content')

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">{{ $offer ? 'Angebot bearbeiten' : 'Neues Angebot' }}</h4>
            <small class="text-muted">
                {{ $offer ? $offer->offer_nr : ($preselect_category ? $preselect_category->nr_prefix . ' – ' . $preselect_category->name : 'PMS · Angebotsverwaltung') }}
            </small>
        </div>
        <a href="{{ $offer
            ? route('pms.offers.show', $offer->id)
            : ($preselect_nr ?? null
                ? route('pms.offers.category', $preselect_nr)
                : route('pms.offers.index')) }}"
           class="btn btn-sm btn-outline-secondary rounded-pill px-3">
            <i class="bi bi-x me-1"></i>Abbrechen
        </a>
    </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

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-exclamation-triangle me-2"></i><strong>Bitte Fehler korrigieren:</strong>
            <ul class="mb-0 mt-1 ps-3">
                @foreach($errors->all() as $error)
                    <li class="small">{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ $offer ? route('pms.offers.update', $offer->id) : route('pms.offers.store') }}"
          method="POST" class="needs-validation" novalidate>
        @csrf

        @if(!$offer)
            <input type="hidden" name="fk_status_id" value="{{ $first_status_id ?? '' }}">
            <input type="hidden" name="fk_status_dept_id" value="{{ $first_dept_status_id ?? '' }}">
        @endif

        {{-- 0. Bauvorhaben --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-geo-alt me-1"></i>Bauvorhaben
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">

                {{-- Radio-Auswahl --}}
                <div class="d-flex gap-4 mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="bv_mode" id="bv_mode_old"
                               value="old" {{ old('bv_mode', 'old') == 'old' ? 'checked' : '' }}
                               onchange="bvModeChange()">
                        <label class="form-check-label small fw-semibold" for="bv_mode_old">
                            Bereits im System eingetragen
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="bv_mode" id="bv_mode_new"
                               value="new" {{ old('bv_mode') == 'new' ? 'checked' : '' }}
                               onchange="bvModeChange()">
                        <label class="form-check-label small fw-semibold" for="bv_mode_new">
                            Neues Bauvorhaben anlegen
                        </label>
                    </div>
                </div>

                {{-- Bestehend auswählen --}}
                <div id="bv_existing">
                    @php
                        $selBvId  = old('fk_project_location_id') ?? $offer?->fk_project_location_id;
                        $selBvObj = $selBvId ? $project_locations->where('id', $selBvId)->first() : null;
                        $selBvTxt = $selBvObj ? '#'.$selBvObj->id.' · '.$selBvObj->name . ($selBvObj->address ? ' – '.$selBvObj->address : '') : '';
                    @endphp
                    <div class="ssc-wrap" data-name="fk_project_location_id">
                        <input type="text" class="form-control ssc-input"
                               placeholder="ID oder Name suchen…" autocomplete="off"
                               value="{{ $selBvTxt }}">
                        <input type="hidden" name="fk_project_location_id" id="fk_project_location_id"
                               value="{{ $selBvId }}">
                        <div class="ssc-dropdown list-group shadow-sm"
                             style="display:none; position:absolute; z-index:1050; width:100%; max-height:240px; overflow-y:auto;">
                            <button type="button" class="list-group-item list-group-item-action ssc-option small py-1"
                                    data-id="" data-text="">— kein Bauvorhaben —</button>
                            @foreach($project_locations as $bv)
                                <button type="button" class="list-group-item list-group-item-action ssc-option small py-2"
                                        data-id="{{ $bv->id }}"
                                        data-text="#{{ $bv->id }} · {{ $bv->name }}{{ $bv->address ? ' – '.$bv->address : '' }}">
                                    <span class="text-muted me-1" style="font-size:11px;">#{{ $bv->id }}</span>
                                    <strong>{{ $bv->name }}</strong>
                                    @if($bv->address)
                                        <br><small class="text-muted">{{ $bv->address }}</small>
                                    @endif
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Neu anlegen --}}
                <div id="bv_new" style="display:none;">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Name / Bezeichnung <span class="text-danger">*</span></label>
                            <input type="text" name="bv_name" class="form-control"
                                   placeholder="z.B. Berlin-Mitte AWO Kita"
                                   value="{{ old('bv_name') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Adresse</label>
                            <input type="text" name="bv_address" class="form-control geoapify-address"
                                   placeholder="z.B. Musterstr. 1, 12345 Berlin"
                                   value="{{ old('bv_address') }}"
                                   autocomplete="new-password">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- Modal: Schnell-Kunde anlegen --}}
        <div class="modal fade" id="modal-quick-customer" data-bs-backdrop="static" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <div class="modal-header border-0 pb-0">
                        <h6 class="modal-title fw-bold"><i class="bi bi-person-plus me-2 text-primary"></i>Neuer Kunde</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body pt-2">
                        <div id="quick-customer-alert" class="alert alert-danger d-none py-2 small"></div>
                        <div class="mb-3">
                            <label class="form-label small fw-semibold">Firmenname <span class="text-danger">*</span></label>
                            <input type="text" id="qc-name" class="form-control" placeholder="z.B. Musterfirma GmbH">
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-semibold">Kategorie <span class="text-danger">*</span></label>
                            <select id="qc-category" class="form-select">
                                <option value="">— bitte wählen —</option>
                                @foreach(\App\Models\CustomerCategory::where('is_deleted',0)->orderBy('sort')->get() as $cat)
                                    <option value="{{ $cat->customer_category_id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-semibold">Adresse</label>
                            <input type="text" id="qc-address" class="form-control geoapify-address" placeholder="z.B. Musterstr. 1, 12345 Berlin" autocomplete="new-password">
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">Telefon</label>
                                <input type="text" id="qc-tel" class="form-control" placeholder="030 123456">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">E-Mail</label>
                                <input type="email" id="qc-email" class="form-control" placeholder="info@firma.de">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                        <button type="button" class="btn btn-primary rounded-pill px-4" id="qc-save-btn">
                            <i class="bi bi-check-lg me-1"></i>Speichern
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- 1. Kunde + Ansprechpartner --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-person me-1"></i>Kunde
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">
                <div class="row g-3">
                    <div class="col-md-7">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <label class="form-label small fw-semibold mb-0">Firma / Kunde</label>
                            <button type="button" class="btn btn-link btn-sm p-0 text-primary"
                                    data-bs-toggle="modal" data-bs-target="#modal-quick-customer">
                                <i class="bi bi-plus-circle me-1"></i><span style="font-size:12px;">Neu anlegen</span>
                            </button>
                        </div>
                        @php
                            $selCust = $customers->firstWhere('customer_id', old('fk_customer_id', $offer?->fk_customer_id));
                        @endphp
                        <div class="ssc-wrap" data-name="fk_customer_id" data-on-change="loadKontakte">
                            <input type="text" class="form-control ssc-input"
                                   placeholder="Kunde suchen…" autocomplete="off"
                                   value="{{ $selCust?->name }}">
                            <input type="hidden" name="fk_customer_id" id="fk_customer_id"
                                   value="{{ old('fk_customer_id', $offer?->fk_customer_id) }}">
                            <div class="ssc-dropdown list-group shadow-sm" style="display:none; position:absolute; z-index:1050; width:100%; max-height:220px; overflow-y:auto;">
                                <button type="button" class="list-group-item list-group-item-action ssc-option small py-1"
                                        data-id="" data-text="">— kein Kunde —</button>
                                @foreach($customers as $customer)
                                    <button type="button" class="list-group-item list-group-item-action ssc-option small py-1"
                                            data-id="{{ $customer->customer_id }}"
                                            data-text="{{ $customer->name }}">
                                        {{ $customer->name }}
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label small fw-semibold">Ansprechpartner</label>
                        <select name="fk_customer_contact_id" id="kundeperson" class="form-select">
                            <option value="">— kein Kontakt —</option>
                            @if($offer?->fk_customer_contact_id && $offer->customer_contact)
                                <option value="{{ $offer->customer_contact->id }}" selected>
                                    {{ $offer->customer_contact->first_name }} {{ $offer->customer_contact->last_name }}
                                </option>
                            @endif
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{-- 2. Projektart + Datum --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-calendar3 me-1"></i>Projekt & Zeitraum
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Projektart</label>
                        <select name="fk_type_id" class="form-select">
                            <option value="">— keine —</option>
                            @foreach($types as $type)
                                <option value="{{ $type->id }}"
                                    {{ old('fk_type_id', $offer?->fk_type_id) == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Angebotsdatum</label>
                        <input type="date" name="offer_date" id="offer_date" class="form-control"
                               value="{{ old('offer_date', $offer?->offer_date ?? now()->toDateString()) }}"
                               onchange="setValidUntil(this.value)">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Gültig bis</label>
                        <input type="date" name="valid_until" id="valid_until" class="form-control"
                               value="{{ old('valid_until', $offer?->valid_until) }}">
                    </div>
                </div>
            </div>
        </div>

        {{-- 3. Titel + Beschreibung --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-file-text me-1"></i>Details
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Titel <span class="text-danger">*</span></label>
                    <input type="text" name="title"
                           class="form-control @error('title') is-invalid @enderror"
                           placeholder="Angebotstitel…" value="{{ old('title', $offer?->title) }}" required>
                    @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-0">
                    <label class="form-label small fw-semibold">Beschreibung</label>
                    <textarea name="description" class="form-control" rows="3"
                              placeholder="Kurzbeschreibung…">{{ old('description', $offer?->description) }}</textarea>
                </div>
            </div>
        </div>

        {{-- 3b. Workflow + AGB --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-diagram-3 me-1"></i>Workflow &amp; AGB
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Workflow</label>
                        <select name="fk_workflow_id" class="form-select">
                            <option value="">— kein Workflow —</option>
                            @foreach($workflows as $wf)
                                <option value="{{ $wf->id }}"
                                    {{ old('fk_workflow_id', $offer?->fk_workflow_id) == $wf->id ? 'selected' : '' }}>
                                    {{ $wf->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">AGB / Zahlungsbedingungen</label>
                        <select name="fk_terms_id" class="form-select">
                            <option value="">— Standard AGB —</option>
                            @foreach($terms_list as $t)
                                <option value="{{ $t->id }}"
                                    {{ old('fk_terms_id', $offer?->fk_terms_id) == $t->id ? 'selected' : '' }}>
                                    {{ $t->title }}{{ $t->is_default ? ' ★' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{-- 3c. Umsatzsteuer --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-percent me-1"></i>Umsatzsteuer
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">MwSt-Satz</label>
                        <div class="input-group" style="max-width:140px;">
                            <input type="number" name="vat_rate" class="form-control text-end"
                                   value="{{ old('vat_rate', $offer?->vat_rate ?? 19) }}"
                                   step="0.1" min="0" max="100">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label small fw-semibold">Hinweis <span class="text-muted fw-normal">(optional)</span></label>
                        <input type="text" name="vat_hinweis" class="form-control"
                               value="{{ old('vat_hinweis', $offer?->vat_hinweis) }}"
                               placeholder="z.B. §13b UStG – Steuerschuldnerschaft des Leistungsempfängers">
                    </div>
                </div>
            </div>
        </div>

        {{-- 4. Kategorie + Status --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white border-0 pt-3 pb-1 px-4">
                <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                    <i class="bi bi-tags me-1"></i>Klassifizierung
                </span>
            </div>
            <div class="card-body pt-2 px-4 pb-3">
                <div class="row g-3">
                    @php
                        $fixedCategory = !$offer && $preselect_category;
                    @endphp
                    @if($fixedCategory)
                        {{-- Kategorie bereits bekannt (aus URL), kein Dropdown nötig --}}
                        <input type="hidden" name="fk_category_id" value="{{ $preselect_category->id }}">
                    @else
                    <div class="{{ $offer ? 'col-md-4' : 'col-md-12' }}">
                        <label class="form-label small fw-semibold">Kategorie <span class="text-danger">*</span></label>
                        <select name="fk_category_id" class="form-select @error('fk_category_id') is-invalid @enderror" required>
                            <option value="">— Bitte wählen —</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}"
                                    {{ old('fk_category_id', $offer?->fk_category_id) == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->nr_prefix }} – {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('fk_category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    @endif
                    @if($offer)
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Status (Angebot)</label>
                        <select name="fk_status_id" class="form-select">
                            <option value="">— kein Status —</option>
                            @foreach($statuses as $status)
                                <option value="{{ $status->id }}"
                                    {{ old('fk_status_id', $offer->fk_status_id) == $status->id ? 'selected' : '' }}>
                                    {{ $status->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Status (Abteilung)</label>
                        <select name="fk_status_dept_id" class="form-select">
                            <option value="">— kein Status —</option>
                            @foreach($dept_statuses as $status)
                                <option value="{{ $status->id }}"
                                    {{ old('fk_status_dept_id', $offer->fk_status_dept_id) == $status->id ? 'selected' : '' }}>
                                    {{ $status->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Buttons --}}
        <div class="d-flex gap-2 justify-content-end pb-4">
            <a href="{{ $offer
                ? route('pms.offers.show', $offer->id)
                : ($preselect_nr ?? null
                    ? route('pms.offers.category', $preselect_nr)
                    : route('pms.offers.index')) }}"
               class="btn btn-sm btn-outline-secondary rounded-pill px-3">Abbrechen</a>
            <button type="submit" class="btn btn-sm btn-primary rounded-pill px-3">
                <i class="bi bi-check-lg me-1"></i>
                {{ $offer ? 'Speichern' : 'Angebot anlegen' }}
            </button>
        </div>

    </form>
</div>

<script>
    function setValidUntil(dateStr) {
        if (!dateStr) return;
        var d = new Date(dateStr);
        d.setDate(d.getDate() + 28);
        document.getElementById('valid_until').value = d.toISOString().split('T')[0];
    }

    document.addEventListener('DOMContentLoaded', function () {
        var validUntil = document.getElementById('valid_until');
        if (!validUntil.value) {
            var offerDate = document.getElementById('offer_date').value;
            if (offerDate) setValidUntil(offerDate);
        }
    });

    /* ── Simple Search Combobox (SSC) ─────────────────────────────────── */
    function initSSC() {
        document.querySelectorAll('.ssc-wrap').forEach(function (wrap) {
            var input    = wrap.querySelector('.ssc-input');
            var hidden   = wrap.querySelector('input[type="hidden"]');
            var dropdown = wrap.querySelector('.ssc-dropdown');
            var options  = Array.from(wrap.querySelectorAll('.ssc-option'));
            var required = wrap.dataset.required === '1';
            var onChange = wrap.dataset.onChange;
            wrap.style.position = 'relative';

            function filter(q) {
                var ql = q.toLowerCase();
                options.forEach(function (btn) {
                    var match = !ql || btn.dataset.text.toLowerCase().indexOf(ql) !== -1;
                    btn.style.display = match ? '' : 'none';
                });
                dropdown.style.display = '';
            }

            function select(id, text) {
                hidden.value = id;
                input.value  = text;
                input.setCustomValidity('');
                dropdown.style.display = 'none';
                if (onChange && window[onChange]) window[onChange](id);
            }

            function validate() {
                if (!required) return;
                if (!hidden.value) {
                    input.setCustomValidity('Pflichtfeld');
                    input.classList.add('is-invalid');
                } else {
                    input.setCustomValidity('');
                    input.classList.remove('is-invalid');
                }
            }

            input.addEventListener('focus', function () { filter(this.value); });
            input.addEventListener('input', function () {
                hidden.value = '';
                input.setCustomValidity(required ? 'Pflichtfeld' : '');
                filter(this.value);
            });
            input.addEventListener('blur', function () {
                setTimeout(function () { dropdown.style.display = 'none'; }, 150);
                if (required && !hidden.value) validate();
            });

            options.forEach(function (btn) {
                btn.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                    select(this.dataset.id, this.dataset.text);
                });
            });

            // Auf Wunsch: Pflichtfeld-Status setzen
            if (required) {
                input.addEventListener('change', validate);
                // initial: wenn schon ein Wert gesetzt ist, valid
                if (hidden.value) input.setCustomValidity('');
                else if (input.value === '') input.setCustomValidity('Pflichtfeld');
            }
        });
    }

    function bvModeChange() {
        var mode  = document.querySelector('input[name="bv_mode"]:checked').value;
        var isNew = (mode === 'new');
        document.getElementById('bv_existing').style.display = isNew ? 'none' : '';
        document.getElementById('bv_new').style.display      = isNew ? '' : 'none';

        var bvName = document.querySelector('[name="bv_name"]');
        if (bvName) bvName.required = isNew;
    }

    function loadKontakte(customerId) {
        var select = document.getElementById('kundeperson');
        select.innerHTML = '<option value="">— kein Kontakt —</option>';
        if (!customerId) return;
        $.ajax({
            url: '/crm/kunden-kontakt/alle/' + customerId,
            type: 'GET', dataType: 'json',
            success: function (data) {
                data.forEach(function (item) {
                    $('#kundeperson').append('<option value="' + item.employee_id + '">' + item.name + '</option>');
                });
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        initSSC();

        // SSC-Felder mit vorhandenem hidden-Wert befüllen (z.B. beim Bearbeiten)
        document.querySelectorAll('.ssc-wrap').forEach(function (wrap) {
            var hidden = wrap.querySelector('input[type="hidden"]');
            var input  = wrap.querySelector('.ssc-input');
            if (hidden && hidden.value && !input.value) {
                var opt = wrap.querySelector('.ssc-option[data-id="' + hidden.value + '"]');
                if (opt) input.value = opt.dataset.text;
            }
        });

        bvModeChange();

        // Bootstrap Validation
        var form = document.querySelector('form.needs-validation');
        if (!form) return;
        form.addEventListener('submit', function (e) {
            if (!form.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            }
            form.classList.add('was-validated');
        });
    });

    // Schnell-Kunde anlegen
    document.getElementById('qc-save-btn').addEventListener('click', function () {
        var btn     = this;
        var alertEl = document.getElementById('quick-customer-alert');
        var name    = document.getElementById('qc-name').value.trim();
        var cat     = document.getElementById('qc-category').value;

        alertEl.classList.add('d-none');
        if (!name || !cat) {
            alertEl.textContent = 'Bitte Name und Kategorie ausfüllen.';
            alertEl.classList.remove('d-none');
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Speichern…';

        fetch('{{ route('crm.customer.quick-store') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({
                name:                 name,
                customer_category_id: cat,
                address:              document.getElementById('qc-address').value.trim(),
                tel:                  document.getElementById('qc-tel').value.trim(),
                email:                document.getElementById('qc-email').value.trim(),
            })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success) throw new Error();

            // Neuen Kunden ins SSC-Dropdown einfügen und auswählen
            var wrap     = document.querySelector('.ssc-wrap[data-name="fk_customer_id"]');
            var dropdown = wrap.querySelector('.ssc-dropdown');
            var sscInput = wrap.querySelector('.ssc-input');
            var hidden   = wrap.querySelector('input[type="hidden"]');

            var opt = document.createElement('button');
            opt.type = 'button';
            opt.className = 'list-group-item list-group-item-action ssc-option small py-1';
            opt.dataset.id   = data.id;
            opt.dataset.text = data.name;
            opt.textContent  = data.name;
            dropdown.appendChild(opt);

            sscInput.value = data.name;
            hidden.value   = data.id;
            hidden.dispatchEvent(new Event('change'));
            loadKontakte(data.id);

            // Modal schließen & Felder leeren
            bootstrap.Modal.getInstance(document.getElementById('modal-quick-customer')).hide();
            ['qc-name','qc-category','qc-address','qc-tel','qc-email'].forEach(function(id) {
                document.getElementById(id).value = '';
            });
        })
        .catch(function() {
            alertEl.textContent = 'Fehler beim Speichern. Bitte erneut versuchen.';
            alertEl.classList.remove('d-none');
        })
        .finally(function() {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>Speichern';
        });
    });

</script>
@endsection