@extends('layouts.app', ['title' => 'CRM | Kunde'])
@section('content')

{{-- Neuer Kontakt Modal --}}
<div class="modal fade" id="new-kontakt" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('Customer.Employee.new') }}" method="POST">
                @csrf
                <input name="customer_id" value="{{ $customer->customer_id }}" hidden>
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Neuer Kontakt</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-light border rounded py-2 mb-3 small">
                        <i class="bi bi-building me-1 text-muted"></i><strong>{{ $customer->name }}</strong>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Beruf *</label>
                            @if(!empty($customer_employee_positions))
                                <select class="form-select" name="position_id" required>
                                    @foreach($customer_employee_positions as $itemc)
                                        <option value="{{ $itemc->position_id }}">{{ $itemc->name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold text-muted">Geschlecht</label>
                            <select class="form-select" name="gender">
                                <option value="0">—</option>
                                <option value="1">männlich</option>
                                <option value="2">weiblich</option>
                                <option value="3">divers</option>
                            </select>
                        </div>
                        <div class="col-md-9">
                            <label class="form-label small fw-semibold text-muted">Name *</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Tel</label>
                            <input type="text" class="form-control" name="tel">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Mobil</label>
                            <input type="text" class="form-control" name="mobile">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">E-Mail</label>
                            <input type="email" class="form-control" name="email">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Adresse</label>
                            <input type="text" class="form-control geoapify-address" name="address" autocomplete="new-password">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Hinweis</label>
                            <textarea class="form-control" name="note" rows="2"></textarea>
                        </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="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-check-lg me-1"></i>Speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Kontakt bearbeiten Modal --}}
<div class="modal fade" id="edit-kontakt" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('Customer.Employee.update') }}" method="POST">
                @csrf
                <input id="id-edit" name="id-edit" value="" hidden>
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Kontakt bearbeiten</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Kunde *</label>
                            @if(!empty($customers))
                                <select class="form-select" id="customer_id_edit" name="customer_id_edit" required>
                                    @foreach($customers as $itemc)
                                        <option value="{{ $itemc->customer_id }}">{{ $itemc->name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Beruf *</label>
                            @if(!empty($customer_employee_positions))
                                <select class="form-select" id="position_id_edit" name="position_id_edit" required>
                                    @foreach($customer_employee_positions as $itemc)
                                        <option value="{{ $itemc->position_id }}">{{ $itemc->name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold text-muted">Geschlecht</label>
                            <select class="form-select" id="gender-edit" name="gender-edit">
                                <option value="0">—</option>
                                <option value="1">männlich</option>
                                <option value="2">weiblich</option>
                                <option value="3">divers</option>
                            </select>
                        </div>
                        <div class="col-md-9">
                            <label class="form-label small fw-semibold text-muted">Name *</label>
                            <input type="text" class="form-control" id="name-edit" name="name-edit" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Tel</label>
                            <input type="text" class="form-control" id="tel-edit" name="tel-edit">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Mobil</label>
                            <input type="text" class="form-control" id="mobile-edit" name="mobile-edit">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">E-Mail</label>
                            <input type="email" class="form-control" id="email-edit" name="email-edit">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Adresse</label>
                            <input type="text" class="form-control" id="address-edit" name="address-edit">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Hinweis</label>
                            <textarea class="form-control" id="note-edit" name="note-edit" rows="2"></textarea>
                        </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="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 Modal --}}
<div class="modal fade" id="delete-kontakt" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('Customer.Employee.delete') }}" method="POST">
                @csrf
                <input id="id" name="id" value="" hidden>
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold text-danger">Kontakt löschen</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:56px;height:56px;">
                        <i class="bi bi-person-x text-danger fs-4"></i>
                    </div>
                    <p class="mb-0">Möchten Sie diesen Kontakt wirklich löschen?</p>
                </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="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 Modal --}}
<div class="modal fade" id="new-branch" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('Customer.branch.new') }}" method="POST">
                @csrf
                <input name="customer_id" value="{{ $customer->customer_id }}" hidden>
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Neuer Standort</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-light border rounded py-2 mb-3 small">
                        <i class="bi bi-building me-1 text-muted"></i><strong>{{ $customer->name }}</strong>
                    </div>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Name / Titel</label>
                            <input type="text" class="form-control" name="name">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">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 small fw-semibold text-muted">Mobil</label>
                            <input type="text" class="form-control" name="mobile">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Tel</label>
                            <input type="text" class="form-control" name="tel">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Fax</label>
                            <input type="text" class="form-control" name="fax">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">E-Mail</label>
                            <input type="email" class="form-control" name="email">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Webseite</label>
                            <input type="text" class="form-control" name="website">
                        </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="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-check-lg me-1"></i>Speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Standort bearbeiten Modal --}}
<div class="modal fade" id="edit-branch" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('Customer.branch.update') }}" method="POST">
                @csrf
                <input id="id-edit-branch" name="id-edit-branch" value="" hidden>
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Standort bearbeiten</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">Name</label>
                            <input type="text" class="form-control" id="name-edit-branch" name="name-edit-branch">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold text-muted">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 small fw-semibold text-muted">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 small fw-semibold text-muted">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 small fw-semibold text-muted">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 small fw-semibold text-muted">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 small fw-semibold text-muted">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 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-check-lg me-1"></i>Aktualisieren
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Standort löschen Modal --}}
<div class="modal fade" id="delete-branch" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('Customer.branch.delete') }}" method="POST">
                @csrf
                <input id="sid" name="sid" value="" hidden>
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold text-danger">Standort löschen</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:56px;height:56px;">
                        <i class="bi bi-building-x text-danger fs-4"></i>
                    </div>
                    <p class="mb-0">Möchten Sie diesen Standort wirklich löschen?</p>
                </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="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 border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-check-circle me-2"></i>{{ session('msg') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-exclamation-circle me-2"></i>{{ $errors->first() }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                 style="width:48px;height:48px;">
                <i class="bi bi-building text-primary fs-5"></i>
            </div>
            <div>
                <h4 class="fw-bold mb-0">{{ $customer->name }}</h4>
                <div class="d-flex align-items-center gap-2 mt-1">
                    @if($customer->customer_code)
                        <span class="badge bg-secondary bg-opacity-10 text-secondary font-monospace">{{ $customer->customer_code }}</span>
                    @endif
                    <span class="badge bg-light text-dark border" style="font-weight:normal;">{{ $customer->category->name ?? '—' }}</span>
                </div>
            </div>
        </div>
        <div class="d-flex gap-2">
            @if(Auth::user()->get_employee->is_mgt)
                <a href="/projekte/kunde/{{ $customer->customer_id }}" class="btn btn-light border rounded-pill px-3" target="_blank">
                    <i class="bi bi-folder2 me-1"></i>Alle Projekte
                    <i class="bi bi-box-arrow-up-right ms-1" style="font-size:11px;"></i>
                </a>
            @endif
        </div>
    </div>

    <div class="row g-4">

        {{-- Linke Spalte --}}
        <div class="{{ Auth::user()->get_employee->is_mgt ? '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-2 px-4">
                    <span class="fw-semibold small">Stammdaten</span>
                </div>
                <div class="card-body px-4 pb-3 pt-2">
                    <div class="row g-2">
                        @if($customer->address)
                        <div class="col-12 d-flex gap-2 align-items-start py-1 border-bottom">
                            <i class="bi bi-geo-alt text-muted mt-1" style="width:16px;"></i>
                            <span class="small">{{ $customer->address }}</span>
                        </div>
                        @endif
                        @if($customer->tel)
                        <div class="col-md-6 d-flex gap-2 align-items-center py-1">
                            <i class="bi bi-telephone text-muted" style="width:16px;"></i>
                            <span class="small">{{ $customer->tel }}</span>
                        </div>
                        @endif
                        @if($customer->mobile)
                        <div class="col-md-6 d-flex gap-2 align-items-center py-1">
                            <i class="bi bi-phone text-muted" style="width:16px;"></i>
                            <span class="small">{{ $customer->mobile }}</span>
                        </div>
                        @endif
                        @if($customer->fax)
                        <div class="col-md-6 d-flex gap-2 align-items-center py-1">
                            <i class="bi bi-printer text-muted" style="width:16px;"></i>
                            <span class="small">{{ $customer->fax }}</span>
                        </div>
                        @endif
                        @if($customer->email)
                        <div class="col-md-6 d-flex gap-2 align-items-center py-1">
                            <i class="bi bi-envelope text-muted" style="width:16px;"></i>
                            <a href="mailto:{{ $customer->email }}" class="small text-decoration-none">{{ $customer->email }}</a>
                        </div>
                        @endif
                        @if($customer->website)
                        <div class="col-md-6 d-flex gap-2 align-items-center py-1">
                            <i class="bi bi-globe text-muted" style="width:16px;"></i>
                            <span class="small">{{ $customer->website }}</span>
                        </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-2 px-4 d-flex align-items-center justify-content-between">
                    <span class="fw-semibold small">Standorte / Niederlassungen
                        <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $customer->branches->count() }}</span>
                    </span>
                    @if(Auth::user()->get_employee->is_mgt || Auth::user()->get_employee->is_crm)
                        <button class="btn btn-light btn-sm border rounded-pill px-2" data-bs-toggle="modal" data-bs-target="#new-branch">
                            <i class="bi bi-plus-lg me-1"></i>Neu
                        </button>
                    @endif
                </div>
                <div class="card-body p-3">
                    @forelse($customer->branches as $item)
                        <div class="border rounded p-3 mb-2 bg-light bg-opacity-50">
                            <div class="d-flex align-items-start justify-content-between mb-2">
                                <span class="fw-semibold">{{ $item->name ?: '—' }}</span>
                                @if(Auth::user()->get_employee->is_mgt || Auth::user()->get_employee->is_crm)
                                    <div class="d-flex gap-1">
                                        <button type="button" class="btn btn-light btn-sm rounded-circle border" style="width:28px;height:28px;"
                                                onclick="editBranch({{ $item->id }})">
                                            <i class="bi bi-pencil" style="font-size:11px;"></i>
                                        </button>
                                        <button type="button" class="btn btn-light btn-sm rounded-circle border text-danger delete_branch_btn" style="width:28px;height:28px;"
                                                data-bs-toggle="modal" data-bs-target="#delete-branch"
                                                data-id="{{ $item->id }}">
                                            <i class="bi bi-trash" style="font-size:11px;"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                            <div class="row g-1 small text-muted">
                                @if($item->address)<div class="col-12"><i class="bi bi-geo-alt me-1"></i>{{ $item->address }}</div>@endif
                                @if($item->tel)<div class="col-auto"><i class="bi bi-telephone me-1"></i>{{ $item->tel }}</div>@endif
                                @if($item->mobile)<div class="col-auto"><i class="bi bi-phone me-1"></i>{{ $item->mobile }}</div>@endif
                                @if($item->email)<div class="col-auto"><i class="bi bi-envelope me-1"></i>{{ $item->email }}</div>@endif
                                @if($item->website)<div class="col-auto"><i class="bi bi-globe me-1"></i>{{ $item->website }}</div>@endif
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-3 small">
                            <i class="bi bi-building d-block fs-4 opacity-25 mb-1"></i>Keine Standorte vorhanden
                        </div>
                    @endforelse
                </div>
            </div>

            {{-- Kontaktpersonen --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-3 pb-2 px-4 d-flex align-items-center justify-content-between">
                    <span class="fw-semibold small">Kontaktpersonen
                        <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $customer->get_employees->count() }}</span>
                    </span>
                    @if(Auth::user()->get_employee->is_mgt || Auth::user()->get_employee->is_crm)
                        <button class="btn btn-light btn-sm border rounded-pill px-2" data-bs-toggle="modal" data-bs-target="#new-kontakt">
                            <i class="bi bi-plus-lg me-1"></i>Neu
                        </button>
                    @endif
                </div>
                <div class="card-body p-3">
                    @forelse($customer->get_employees as $emp)
                        <div class="border rounded p-3 mb-2 bg-light bg-opacity-50">
                            <div class="d-flex align-items-start justify-content-between mb-2">
                                <div class="d-flex align-items-center gap-2">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                         style="width:34px;height:34px;">
                                        <i class="bi bi-person text-primary" style="font-size:14px;"></i>
                                    </div>
                                    <div>
                                        <div class="fw-semibold small">
                                            {{ $emp->gender == '1' ? 'Herr ' : ($emp->gender == '2' ? 'Frau ' : '') }}{{ $emp->name }}
                                        </div>
                                        <div class="text-muted" style="font-size:11px;">{{ $emp->position->name ?? '—' }}</div>
                                    </div>
                                </div>
                                @if(Auth::user()->get_employee->is_mgt || Auth::user()->get_employee->is_crm)
                                    <div class="d-flex gap-1">
                                        <button type="button" class="btn btn-light btn-sm rounded-circle border" style="width:28px;height:28px;"
                                                onclick="editItem({{ $emp->employee_id }})">
                                            <i class="bi bi-pencil" style="font-size:11px;"></i>
                                        </button>
                                        <button type="button" class="btn btn-light btn-sm rounded-circle border text-danger delete_btn" style="width:28px;height:28px;"
                                                data-bs-toggle="modal" data-bs-target="#delete-kontakt"
                                                data-id="{{ $emp->employee_id }}">
                                            <i class="bi bi-trash" style="font-size:11px;"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                            <div class="row g-1 small text-muted ms-1">
                                @if($emp->tel)<div class="col-auto"><i class="bi bi-telephone me-1"></i>{{ $emp->tel }}</div>@endif
                                @if($emp->mobile)<div class="col-auto"><i class="bi bi-phone me-1"></i>{{ $emp->mobile }}</div>@endif
                                @if($emp->email)<div class="col-auto"><i class="bi bi-envelope me-1"></i>{{ $emp->email }}</div>@endif
                                @if($emp->address)<div class="col-12"><i class="bi bi-geo-alt me-1"></i>{{ $emp->address }}</div>@endif
                                @if($emp->note)<div class="col-12 fst-italic">{{ $emp->note }}</div>@endif
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-3 small">
                            <i class="bi bi-people d-block fs-4 opacity-25 mb-1"></i>Keine Kontaktpersonen vorhanden
                        </div>
                    @endforelse
                </div>
            </div>

        </div>

        {{-- Rechte Spalte: Timeline (nur mgt) --}}
        @if(Auth::user()->get_employee->is_mgt)
        <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('Customer.ContactHistory.add') }}" method="POST"
                          onsubmit="return crmSyncTextarea()" novalidate>
                        @csrf
                        <input type="hidden" id="cid" name="cid" value="{{ $customer->customer_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="crmContactChecked(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 (nur bei Anruf/E-Mail/Post/Persönlich) --}}
                        <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($customer->get_employees as $emp)
                                    <option value="{{ $emp->name }}">{{ $emp->position->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($customer->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
                        <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_btn', function () {
        $('#id').val($(this).data('id'));
    });
    $(document).on('click', '.delete_branch_btn', function () {
        $('#sid').val($(this).data('id'));
    });

    function editItem(id) {
        $.get('/crm/kunden-kontakt/' + id, function (item) {
            $('#id-edit').val(item.employee_id);
            $('#customer_id_edit').val(item.fk_customer_id);
            $('#position_id_edit').val(item.fk_position_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) {
        $.get('/crm/kunde/branch/' + id, 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() { crmContactChecked(); });

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

    function crmSyncTextarea() {
        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