@extends('layouts.app', ['title' => 'SRM | ' . $supplier->name])
@section('content')

    {{-- ── Neuer Kontakt ──────────────────────────────────────────────── --}}
    <div class="modal fade" id="new-kontakt" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('srm.supplier.contact.new') }}" method="POST" novalidate>
                    @csrf
                    <input id="id" name="id" value="{{ $supplier->id }}" hidden>
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-semibold">
                            <i class="bi bi-person-plus me-2 text-success"></i>Neuer Kontakt
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body pt-1">
                        <p class="text-muted small mb-3">
                            <i class="bi bi-building me-1"></i>{{ $supplier->name }}
                        </p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Geschlecht</label>
                                <select class="form-select" id="gender" name="gender">
                                    <option value="0">unbestimmt</option>
                                    <option value="1">männlich</option>
                                    <option value="2">weiblich</option>
                                    <option value="3">divers</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tel</label>
                                <input type="text" class="form-control" id="tel" name="tel">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Mobil</label>
                                <input type="text" class="form-control" id="mobile" name="mobile">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">E-Mail</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Adresse</label>
                                <input type="text" class="form-control geoapify-address" id="address" name="address" autocomplete="new-password">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Hinweis</label>
                                <textarea class="form-control" id="note" name="note" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                            data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-success rounded-pill px-4">
                            <i class="bi bi-check-lg me-1"></i>Speichern
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Kontakt bearbeiten ─────────────────────────────────────────── --}}
    <div class="modal fade" id="edit-kontakt" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('srm.supplier.contact.update') }}" method="POST" novalidate>
                    @csrf
                    <input id="id-edit" name="id-edit" value="" hidden>
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-semibold">
                            <i class="bi bi-pencil-square me-2 text-primary"></i>Kontakt bearbeiten
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body pt-2">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Geschlecht</label>
                                <select class="form-select" id="gender-edit" name="gender-edit">
                                    <option value="0">unbestimmt</option>
                                    <option value="1">männlich</option>
                                    <option value="2">weiblich</option>
                                    <option value="3">divers</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name-edit" name="name-edit" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tel</label>
                                <input type="text" class="form-control" id="tel-edit" name="tel-edit">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Mobil</label>
                                <input type="text" class="form-control" id="mobile-edit" name="mobile-edit">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">E-Mail</label>
                                <input type="email" class="form-control" id="email-edit" name="email-edit">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Adresse</label>
                                <input type="text" class="form-control" id="address-edit" name="address-edit">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Hinweis</label>
                                <textarea class="form-control" id="note-edit" name="note-edit" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <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-check-lg me-1"></i>Aktualisieren
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Kontakt löschen ───────────────────────────────────────────── --}}
    <div class="modal fade" id="delete-kontakt" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('srm.supplier.contact.delete') }}" method="POST">
                    @csrf
                    <input id="eid" name="eid" value="" hidden>
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-semibold text-danger">
                            <i class="bi bi-trash me-2"></i>Kontakt löschen
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center py-4">
                        <i class="bi bi-exclamation-triangle-fill text-warning fs-1 mb-3 d-block"></i>
                        <p class="mb-0">Möchten Sie diesen Kontakt wirklich löschen?</p>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                            data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-danger rounded-pill px-4">
                            <i class="bi bi-trash me-1"></i>Löschen
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Neuer Standort ─────────────────────────────────────────────── --}}
    <div class="modal fade" id="new-branch" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('srm.supplier.branch.new') }}" method="POST" novalidate>
                    @csrf
                    <input id="supplier_id" name="supplier_id" value="{{ $supplier->id }}" hidden>
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-semibold">
                            <i class="bi bi-geo-alt-fill me-2 text-success"></i>Neuer Standort
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body pt-1">
                        <p class="text-muted small mb-3">
                            <i class="bi bi-building me-1"></i>{{ $supplier->name }}
                        </p>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-semibold">Name / Bezeichnung</label>
                                <input type="text" class="form-control" name="name">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Adresse</label>
                                <input type="text" class="form-control geoapify-address" name="address" autocomplete="new-password">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tel</label>
                                <input type="text" class="form-control" name="tel">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Mobil</label>
                                <input type="text" class="form-control" name="mobile">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Fax</label>
                                <input type="text" class="form-control" name="fax">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">E-Mail</label>
                                <input type="email" class="form-control" name="email">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Webseite</label>
                                <input type="text" class="form-control" name="website">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                            data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-success rounded-pill px-4">
                            <i class="bi bi-check-lg me-1"></i>Speichern
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Standort bearbeiten ────────────────────────────────────────── --}}
    <div class="modal fade" id="edit-branch" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('srm.supplier.branch.update') }}" method="POST" novalidate>
                    @csrf
                    <input id="id-edit-branch" name="id-edit-branch" value="" hidden>
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-semibold">
                            <i class="bi bi-pencil-square me-2 text-primary"></i>Standort bearbeiten
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body pt-2">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-semibold">Name / Bezeichnung</label>
                                <input type="text" class="form-control" id="name-edit-branch" name="name-edit-branch">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Adresse</label>
                                <input type="text" class="form-control" id="address-edit-branch" name="address-edit-branch">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tel</label>
                                <input type="text" class="form-control" id="tel-edit-branch" name="tel-edit-branch">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Mobil</label>
                                <input type="text" class="form-control" id="mobile-edit-branch" name="mobile-edit-branch">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Fax</label>
                                <input type="text" class="form-control" id="fax-edit-branch" name="fax-edit-branch">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">E-Mail</label>
                                <input type="email" class="form-control" id="email-edit-branch" name="email-edit-branch">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Webseite</label>
                                <input type="text" class="form-control" id="website-edit-branch" name="website-edit-branch">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <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-check-lg me-1"></i>Aktualisieren
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Standort löschen ──────────────────────────────────────────── --}}
    <div class="modal fade" id="delete-branch" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('srm.supplier.branch.delete') }}" method="POST">
                    @csrf
                    <input id="sid" name="sid" value="" hidden>
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-semibold text-danger">
                            <i class="bi bi-trash me-2"></i>Standort löschen
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center py-4">
                        <i class="bi bi-exclamation-triangle-fill text-warning fs-1 mb-3 d-block"></i>
                        <p class="mb-0">Möchten Sie diesen Standort wirklich löschen?</p>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                            data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-danger rounded-pill px-4">
                            <i class="bi bi-trash me-1"></i>Löschen
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Main Content ───────────────────────────────────────────────── --}}
    <div class="container-fluid py-4" style="max-width:1400px;">

        {{-- Alert --}}
        @if (session('msg'))
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                <i class="bi bi-check-circle me-2"></i>{{ session('msg') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Header --}}
        <div class="d-flex align-items-center gap-3 mb-4">
            <a href="{{ route('srm.supplier.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                <i class="bi bi-arrow-left me-1"></i>Zurück
            </a>
            <div>
                <h4 class="fw-bold mb-0">
                    <i class="bi bi-building me-2 text-secondary"></i>{{ $supplier->name }}
                </h4>
                @if($supplier->supplier_code)
                    <span class="badge bg-light text-dark border small">Datev: {{ $supplier->supplier_code }}</span>
                @endif
            </div>
        </div>

        <div class="row g-4">

            {{-- ── Left Column ── --}}
            <div class="{{ (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_srm == '1') ? 'col-lg-7' : 'col-12' }}">

                {{-- Stammdaten --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 pt-3 pb-0">
                        <h6 class="fw-semibold text-muted mb-0">
                            <i class="bi bi-info-circle me-2"></i>Stammdaten
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            @if($supplier->address)
                            <div class="col-md-6">
                                <small class="text-muted d-block">Anschrift</small>
                                <span>{{ $supplier->address }}</span>
                            </div>
                            @endif
                            @if($supplier->tel)
                            <div class="col-md-3">
                                <small class="text-muted d-block">Tel</small>
                                <span>{{ $supplier->tel }}</span>
                            </div>
                            @endif
                            @if($supplier->mobile)
                            <div class="col-md-3">
                                <small class="text-muted d-block">Mobil</small>
                                <span>{{ $supplier->mobile }}</span>
                            </div>
                            @endif
                            @if($supplier->fax)
                            <div class="col-md-3">
                                <small class="text-muted d-block">Fax</small>
                                <span>{{ $supplier->fax }}</span>
                            </div>
                            @endif
                            @if($supplier->email)
                            <div class="col-md-4">
                                <small class="text-muted d-block">E-Mail</small>
                                <a href="mailto:{{ $supplier->email }}" class="text-decoration-none">{{ $supplier->email }}</a>
                            </div>
                            @endif
                            @if($supplier->website)
                            <div class="col-md-4">
                                <small class="text-muted d-block">Webseite</small>
                                <a href="{{ $supplier->website }}" target="_blank" class="text-decoration-none">{{ $supplier->website }}</a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Standorte --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
                        <h6 class="fw-semibold text-muted mb-0">
                            <i class="bi bi-geo-alt me-2"></i>Standorte / Niederlassungen
                        </h6>
                        @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_srm)
                            <button type="button" class="btn btn-sm btn-outline-success rounded-pill px-3"
                                data-bs-toggle="modal" data-bs-target="#new-branch">
                                <i class="bi bi-plus-lg me-1"></i>Neuer Standort
                            </button>
                        @endif
                    </div>
                    <div class="card-body">
                        @if($supplier->branches->isEmpty())
                            <p class="text-muted small mb-0">Keine Standorte eingetragen.</p>
                        @else
                            <div class="row g-3">
                                @foreach ($supplier->branches as $item)
                                    <div class="col-md-6">
                                        <div class="card border rounded-3 h-100">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-start mb-2">
                                                    <h6 class="fw-semibold mb-0">{{ $item->name ?: '—' }}</h6>
                                                    @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_srm)
                                                        <div class="d-flex gap-1">
                                                            <button type="button" title="Bearbeiten"
                                                                class="btn btn-sm btn-outline-primary rounded-circle"
                                                                onclick="editBranch({{ $item->id }})"
                                                                style="width:28px;height:28px;padding:0;">
                                                                <i class="bi bi-pencil" style="font-size:.7rem;"></i>
                                                            </button>
                                                            <button type="button" title="Löschen"
                                                                class="btn btn-sm btn-outline-danger rounded-circle delete_branch_btn"
                                                                data-id="{{ $item->id }}"
                                                                style="width:28px;height:28px;padding:0;">
                                                                <i class="bi bi-trash" style="font-size:.7rem;"></i>
                                                            </button>
                                                        </div>
                                                    @endif
                                                </div>
                                                <hr class="my-2">
                                                <div class="row g-1 small">
                                                    @if($item->address)<div class="col-12 text-muted">{{ $item->address }}</div>@endif
                                                    @if($item->tel)<div class="col-6"><i class="bi bi-telephone me-1 text-muted"></i>{{ $item->tel }}</div>@endif
                                                    @if($item->mobile)<div class="col-6"><i class="bi bi-phone me-1 text-muted"></i>{{ $item->mobile }}</div>@endif
                                                    @if($item->fax)<div class="col-6"><i class="bi bi-printer me-1 text-muted"></i>{{ $item->fax }}</div>@endif
                                                    @if($item->email)<div class="col-12"><i class="bi bi-envelope me-1 text-muted"></i>{{ $item->email }}</div>@endif
                                                    @if($item->website)<div class="col-12"><i class="bi bi-globe me-1 text-muted"></i>{{ $item->website }}</div>@endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Kontaktpersonen --}}
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
                        <h6 class="fw-semibold text-muted mb-0">
                            <i class="bi bi-people me-2"></i>Kontaktpersonen
                        </h6>
                        @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_srm)
                            <button type="button" class="btn btn-sm btn-outline-success rounded-pill px-3"
                                data-bs-toggle="modal" data-bs-target="#new-kontakt">
                                <i class="bi bi-plus-lg me-1"></i>Neuer Kontakt
                            </button>
                        @endif
                    </div>
                    <div class="card-body">
                        @if($supplier->get_employees->isEmpty())
                            <p class="text-muted small mb-0">Keine Kontaktpersonen eingetragen.</p>
                        @else
                            <div class="row g-3">
                                @foreach ($supplier->get_employees as $emp)
                                    <div class="col-md-6">
                                        <div class="card border rounded-3 h-100">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-start mb-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                                                            style="width:36px;height:36px;">
                                                            <i class="bi bi-person text-primary"></i>
                                                        </div>
                                                        <div>
                                                            <h6 class="fw-semibold mb-0">
                                                                {{ $emp->gender == '1' ? 'Herr ' : ($emp->gender == '2' ? 'Frau ' : '') }}{{ $emp->name }}
                                                            </h6>
                                                        </div>
                                                    </div>
                                                    @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_srm)
                                                        <div class="d-flex gap-1">
                                                            <button type="button" title="Bearbeiten"
                                                                class="btn btn-sm btn-outline-primary rounded-circle"
                                                                onclick="editItem({{ $emp->id }})"
                                                                style="width:28px;height:28px;padding:0;">
                                                                <i class="bi bi-pencil" style="font-size:.7rem;"></i>
                                                            </button>
                                                            <button type="button" title="Löschen"
                                                                class="btn btn-sm btn-outline-danger rounded-circle delete_kontakt_btn"
                                                                data-id="{{ $emp->id }}"
                                                                style="width:28px;height:28px;padding:0;">
                                                                <i class="bi bi-trash" style="font-size:.7rem;"></i>
                                                            </button>
                                                        </div>
                                                    @endif
                                                </div>
                                                <hr class="my-2">
                                                <div class="row g-1 small">
                                                    @if($emp->tel)<div class="col-6"><i class="bi bi-telephone me-1 text-muted"></i>{{ $emp->tel }}</div>@endif
                                                    @if($emp->mobile)<div class="col-6"><i class="bi bi-phone me-1 text-muted"></i>{{ $emp->mobile }}</div>@endif
                                                    @if($emp->email)<div class="col-12"><i class="bi bi-envelope me-1 text-muted"></i>{{ $emp->email }}</div>@endif
                                                    @if($emp->address)<div class="col-12"><i class="bi bi-geo-alt me-1 text-muted"></i>{{ $emp->address }}</div>@endif
                                                    @if($emp->note)<div class="col-12 text-muted fst-italic">{{ $emp->note }}</div>@endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

            </div>

            {{-- ── Right Column (MGT/SRM only) ── --}}
            @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_srm)
                <div class="col-lg-5">
                    <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('srm.supplier.contactHistory.add') }}" method="POST"
                                  onsubmit="return srmSyncTextarea()" novalidate>
                                @csrf
                                <input type="hidden" id="cid" name="cid" value="{{ $supplier->id }}">

                                {{-- 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="srmContactChecked(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>
                                    <input type="text" class="form-control form-control-sm" name="contact_with"
                                           placeholder="Name / Kontaktperson"
                                           list="contact-persons-list" autocomplete="off">
                                    <datalist id="contact-persons-list">
                                        @foreach($supplier->get_employees as $emp)
                                            <option value="{{ $emp->name }}"></option>
                                        @endforeach
                                    </datalist>
                                </div>

                                <textarea class="form-control" name="msg" id="msg" style="display:none;" rows="3" 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($supplier->contact_history->sortByDesc('created_at') as $tt)
                                @php
                                    $isNote       = $tt->is_note && !$tt->is_call && !$tt->is_email && !$tt->is_post && !$tt->is_personally;
                                    $isCall       = (bool)$tt->is_call;
                                    $isEmail      = (bool)$tt->is_email;
                                    $isPost       = (bool)$tt->is_post;
                                    $isPersonally = (bool)$tt->is_personally;
                                    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
                                @if(request('d_tag') == $tt->id)
                                    <div id="E{{ $tt->id }}"></div>
                                @endif
                                <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 && $tt->contact_with)
                                                <span class="small text-muted">
                                                    <i class="bi bi-arrow-right-short"></i>{{ $tt->contact_with }}
                                                </span>
                                            @endif
                                            <span class="ms-auto text-muted" style="font-size:10px;">
                                                <i class="bi bi-clock me-1"></i>{{ $tt->created_at ? \Carbon\Carbon::parse($tt->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;">{!! $tt->note !!}</div>
                                            <div class="text-muted" style="font-size:10px;">
                                                <i class="bi bi-person me-1"></i>{{ $tt->employee->first_name }} {{ $tt->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>
            @endif

        </div>
    </div>

    <script>
        $(document).on('click', '.delete_kontakt_btn', function () {
            $('#eid').val($(this).data('id'));
            new bootstrap.Modal(document.getElementById('delete-kontakt')).show();
        });

        $(document).on('click', '.delete_branch_btn', function () {
            $('#sid').val($(this).data('id'));
            new bootstrap.Modal(document.getElementById('delete-branch')).show();
        });

        function editItem(id) {
            var url = "{{ route('srm.supplier.contact.get', ':id') }}".replace(':id', id);
            $.get(url, function (item) {
                $('#id-edit').val(item.id);
                $('#gender-edit').val(item.gender);
                $('#name-edit').val(item.name);
                $('#tel-edit').val(item.tel);
                $('#address-edit').val(item.address);
                $('#note-edit').val(item.note);
                $('#mobile-edit').val(item.mobile);
                $('#email-edit').val(item.email);
                new bootstrap.Modal(document.getElementById('edit-kontakt')).show();
            });
        }

        function editBranch(id) {
            var url = "{{ route('srm.supplier.branch.get', ':id') }}".replace(':id', id);
            $.get(url, function (item) {
                $('#id-edit-branch').val(item.id);
                $('#name-edit-branch').val(item.name);
                $('#address-edit-branch').val(item.address);
                $('#tel-edit-branch').val(item.tel);
                $('#fax-edit-branch').val(item.fax);
                $('#mobile-edit-branch').val(item.mobile);
                $('#email-edit-branch').val(item.email);
                $('#website-edit-branch').val(item.website);
                new bootstrap.Modal(document.getElementById('edit-branch')).show();
            });
        }

        $(document).ready(function() { srmContactChecked(); });

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

        function srmSyncTextarea() {
            var text = quill.getText().trim();
            if (!text) {
                quill.root.style.outline = '1px solid #dc3545';
                return false;
            }
            quill.root.style.outline = '';
            document.getElementById('msg').value = quill.root.innerHTML;
            return true;
        }
    </script>

@endsection