@extends('layouts.app')

@section('title', 'Buchung erstellen - Schritt 1')

@section('content')
<div class="container-xxl mt-4">
    <h1>Buchung erstellen</h1>
    <h4>Schritt 1: Person auswaehlen</h4>

    <form method="POST" action="{{ route('booking.create.step1') }}" id="step1-form">
        @csrf

        <div class="card mb-3">
            <div class="card-header">
                <h5>Vorhandene Person waehlen</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="person-search" placeholder="Name oder E-Mail suchen...">
                </div>
                <div id="person-list" class="list-group"></div>
                <input type="hidden" name="personId" id="personId">
                <div id="person-selected" class="mt-2" style="display:none;">
                    <div class="alert alert-info" id="person-selected-text"></div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">
                <h5>Oder neue Person anlegen</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Vorname</label>
                        <input type="text" class="form-control" name="person[firstName]">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Nachname</label>
                        <input type="text" class="form-control" name="person[surname]">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">E-Mail</label>
                    <input type="email" class="form-control" name="person[email]">
                </div>
                <div class="mb-3">
                    <label class="form-label">Telefon</label>
                    <input type="text" class="form-control" name="person[phone1]">
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Weiter zu Schritt 2</button>
    </form>
</div>
@endsection

@push('scripts')
<script>
var searchInput = document.getElementById('person-search');
var personList = document.getElementById('person-list');
var personIdInput = document.getElementById('personId');

searchInput.addEventListener('input', function() {
    var query = this.value.toLowerCase();
    personList.replaceChildren();
    if (query.length < 2) return;

    fetch('{{ route("person.server.list") }}')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            personList.replaceChildren();
            data.filter(function(p) {
                return (p.fullname && p.fullname.toLowerCase().indexOf(query) !== -1) ||
                       (p.email && p.email.toLowerCase().indexOf(query) !== -1) ||
                       (p.company && p.company.toLowerCase().indexOf(query) !== -1);
            }).slice(0, 10).forEach(function(p) {
                var a = document.createElement('a');
                a.href = '#';
                a.className = 'list-group-item list-group-item-action';
                a.dataset.id = p.id;
                var strong = document.createElement('strong');
                strong.textContent = p.fullname;
                a.appendChild(strong);
                if (p.company) a.appendChild(document.createTextNode(' (' + p.company + ')'));
                if (p.email) a.appendChild(document.createTextNode(' - ' + p.email));
                personList.appendChild(a);
            });
        });
});

personList.addEventListener('click', function(e) {
    var item = e.target.closest('[data-id]');
    if (item) {
        e.preventDefault();
        personIdInput.value = item.dataset.id;
        personList.replaceChildren();
        var selected = document.getElementById('person-selected');
        selected.style.display = 'block';
        document.getElementById('person-selected-text').textContent = 'Person ausgewaehlt: ' + item.textContent;
    }
});
</script>
@endpush