<x-app-layout>
    <x-page-header title="Клиенти" subtitle="Управување со клиенти">
        <x-slot:actions>
            <a href="{{ route('clients.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-lg me-1"></i>Нов клиент
            </a>
        </x-slot:actions>
    </x-page-header>

    <x-flash />

    <div x-data="clientsSearch()">
        <div class="d-flex justify-content-end mb-3">
            <div class="input-group" style="max-width: 320px;">
                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                <input type="search" x-model="q" @input.debounce.250ms="search()"
                       class="form-control border-start-0 ps-0" placeholder="Пребарај клиент…"
                       aria-label="Пребарај клиент" autocomplete="off">
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-stack align-middle mb-0">
                    <thead>
                        <tr><th>Име</th><th>Телефон</th><th>Лице за контакт</th><th class="text-end">Акции</th></tr>
                    </thead>
                    <tbody id="clients-rows">
                        @include('clients._rows')
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        function clientsSearch() {
            return {
                q: @js($q ?? ''),
                async search() {
                    const url = `{{ route('clients.index') }}?partial=1&q=${encodeURIComponent(this.q)}`;
                    const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    document.getElementById('clients-rows').innerHTML = await res.text();
                },
            };
        }
    </script>
</x-app-layout>
