@extends('layouts.app')

@section('title', 'Personen')

@section('content')
<div class="container-xxl mt-4">
    <h1>Personen</h1>
    <div id="person-table-container">
        <div class="spinner-border" role="status"><span class="visually-hidden">Laden...</span></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
fetch('{{ route("person.server.list") }}')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var el = document.getElementById('person-table-container');
        el.replaceChildren();

        var table = document.createElement('table');
        table.className = 'table table-striped table-hover';
        var thead = document.createElement('thead');
        var headerRow = document.createElement('tr');
        ['Nr.', 'Name', 'Firma', 'E-Mail', 'Telefon'].forEach(function(h) {
            var th = document.createElement('th');
            th.textContent = h;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);

        var tbody = document.createElement('tbody');
        data.forEach(function(p) {
            var tr = document.createElement('tr');
            [p.number || '', p.fullname, p.company || '', p.email || '', p.phone1 || ''].forEach(function(val) {
                var td = document.createElement('td');
                td.textContent = val;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        el.appendChild(table);
    });
</script>
@endpush