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

{{-- Neuer Kontakt Modal --}}
<div class="modal fade" id="new-item" 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
                <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="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Kunde / Firma *</label>
                            @if(!empty($customers))
                                <select class="form-select" name="customer_id" 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" 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" name="address">
                        </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>

{{-- Bearbeiten Modal --}}
<div class="modal fade" id="edit-modal" 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-12">
                            <label class="form-label small fw-semibold text-muted">Kunde / Firma *</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>

{{-- Ansehen Modal --}}
<div class="modal fade" id="show-modal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold" id="show-modal-title">Kontakt</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">Kunde / Firma</label>
                        <input type="text" class="form-control" id="customer_name_show" disabled>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold text-muted">Beruf</label>
                        <input type="text" class="form-control" id="position_name_show" disabled>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold text-muted">Geschlecht</label>
                        <input type="text" class="form-control" id="gender_show" disabled>
                    </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-show" disabled>
                    </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-show" disabled>
                    </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-show" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold text-muted">E-Mail</label>
                        <input type="text" class="form-control" id="email-show" disabled>
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold text-muted">Adresse</label>
                        <input type="text" class="form-control" id="address-show" disabled>
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold text-muted">Hinweis</label>
                        <textarea class="form-control" id="note-show" rows="2" disabled></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">Schließen</button>
                <button type="button" class="btn btn-primary rounded-pill px-3" id="show-to-edit-btn">
                    <i class="bi bi-pencil me-1"></i>Bearbeiten
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Löschen Modal --}}
<div class="modal fade" id="delete-item" 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>

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Kunden-Kontakte</h4>
            <small class="text-muted">CRM – alle Kontaktpersonen</small>
        </div>
        <div class="d-flex gap-2">
            @if(Auth::user()->get_employee->is_mgt)
                <a href="{{ route('export-new-customers-contacts') }}" id="expot-new" target="_blank"
                   class="btn btn-light border rounded-pill px-3">
                    <i class="bi bi-file-earmark-excel me-1 text-success"></i>
                    ({{ $export_new_contact }}) exportieren
                </a>
            @endif
            <button class="btn btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#new-item">
                <i class="bi bi-plus-lg me-1"></i>Neuer Kontakt
            </button>
        </div>
    </div>

    {{-- Alerts --}}
    @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

    {{-- Suche --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2 px-3">
            <form action="{{ route('Customer.Employee') }}" method="get">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 text-muted">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" class="form-control border-start-0 ps-0"
                           placeholder="Kontakt suchen…" name="name" value="{{ request('name') }}">
                    <button class="btn btn-primary px-4" type="submit">Suchen</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Tabelle --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-3 pb-2 px-4">
            <span class="small text-muted">{{ $items->total() }} {{ $items->total() === 1 ? 'Kontakt' : 'Kontakte' }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="px-4 py-3 text-muted fw-normal small" style="width:60px;">ID</th>
                            <th class="py-3 text-muted fw-normal small">Name / Beruf</th>
                            <th class="py-3 text-muted fw-normal small">Firma</th>
                            <th class="py-3 text-muted fw-normal small">E-Mail</th>
                            <th class="py-3 text-muted fw-normal small">Tel / Mobil</th>
                            @if(Auth::user()->get_employee->is_mgt)
                                <th class="py-3 text-muted fw-normal small pe-4" style="width:110px;"></th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($items as $item)
                            <tr>
                                <td class="px-4">
                                    <span class="text-muted small">{{ $item->employee_id }}</span>
                                </td>
                                <td>
                                    <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:32px;height:32px;">
                                            <i class="bi bi-person text-primary" style="font-size:13px;"></i>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0)" onclick="showItem({{ $item->employee_id }})"
                                               class="fw-semibold text-decoration-none text-dark small">
                                                {{ $item->gender == '1' ? 'Herr ' : ($item->gender == '2' ? 'Frau ' : '') }}{{ $item->name }}
                                            </a>
                                            <div class="text-muted" style="font-size:11px;">{{ $item->position->name ?? '—' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="/kunde/{{ $item->customer->customer_id }}"
                                       class="text-decoration-none small">{{ $item->customer->name }}</a>
                                </td>
                                <td>
                                    @if($item->email)
                                        <a href="mailto:{{ $item->email }}" class="text-decoration-none small text-muted">{{ $item->email }}</a>
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                                <td class="small text-muted">
                                    @if($item->tel || $item->mobile)
                                        @if($item->tel)<div><i class="bi bi-telephone me-1"></i>{{ $item->tel }}</div>@endif
                                        @if($item->mobile)<div><i class="bi bi-phone me-1"></i>{{ $item->mobile }}</div>@endif
                                    @else
                                        —
                                    @endif
                                </td>
                                @if(Auth::user()->get_employee->is_mgt)
                                    <td class="pe-4">
                                        <div class="d-flex gap-1 justify-content-end">
                                            <button type="button" title="Ansehen"
                                                    class="btn btn-light btn-sm rounded-circle border"
                                                    style="width:32px;height:32px;"
                                                    onclick="showItem({{ $item->employee_id }})">
                                                <i class="bi bi-eye" style="font-size:12px;"></i>
                                            </button>
                                            <button type="button" title="Bearbeiten"
                                                    class="btn btn-light btn-sm rounded-circle border"
                                                    style="width:32px;height:32px;"
                                                    onclick="editItem({{ $item->employee_id }})">
                                                <i class="bi bi-pencil" style="font-size:12px;"></i>
                                            </button>
                                            <button type="button" title="Löschen"
                                                    class="btn btn-light btn-sm rounded-circle border text-danger delete_btn"
                                                    style="width:32px;height:32px;"
                                                    data-bs-toggle="modal" data-bs-target="#delete-item"
                                                    data-id="{{ $item->employee_id }}">
                                                <i class="bi bi-trash" style="font-size:12px;"></i>
                                            </button>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%" class="text-center text-muted py-5">
                                    <i class="bi bi-people d-block fs-2 mb-2 opacity-25"></i>
                                    <div class="small">Keine Kontakte gefunden</div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($items->hasPages())
            <div class="card-footer bg-white border-0 d-flex justify-content-center py-3">
                {!! $items->links() !!}
            </div>
        @endif
    </div>

</div>

<script>
    $(document).on('click', '.delete_btn', function () {
        $('#id').val($(this).data('id'));
    });

    var currentShowId = null;

    function showItem(id) {
        currentShowId = id;
        $.get('/crm/kunden-kontakt/' + id, function (item) {
            var genderMap = { '0': '—', '1': 'männlich', '2': 'weiblich', '3': 'divers' };
            var anrede = item.gender == '1' ? 'Herr ' : (item.gender == '2' ? 'Frau ' : '');
            $('#show-modal-title').text(anrede + item.name);
            $('#customer_name_show').val(item.customer_name || '');
            $('#position_name_show').val(item.position_name || '');
            $('#gender_show').val(genderMap[item.gender] || '—');
            $('#name-show').val(item.name || '');
            $('#tel-show').val(item.tel || '');
            $('#mobile-show').val(item.mobile || '');
            $('#email-show').val(item.email || '');
            $('#address-show').val(item.address || '');
            $('#note-show').val(item.note || '');
            new bootstrap.Modal(document.getElementById('show-modal')).show();
        });
    }

    $('#show-to-edit-btn').on('click', function () {
        bootstrap.Modal.getInstance(document.getElementById('show-modal')).hide();
        setTimeout(function () { editItem(currentShowId); }, 300);
    });

    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);
            $('#mobile-edit').val(item.mobile);
            $('#email-edit').val(item.email);
            $('#note-edit').val(item.note);
            new bootstrap.Modal(document.getElementById('edit-modal')).show();
        });
    }
</script>

@endsection