@extends('admin::layouts.app')

@section('title', 'Businesses — BizWap Admin')

@section('content')
{{-- Page header --}}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">Businesses</h4>
        <p class="text-muted small mb-0">Manage registered businesses and their WhatsApp credentials.</p>
    </div>
    <a href="{{ route('admin.businesses.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>Add Business
    </a>
</div>

{{-- Success flash --}}
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Search --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3">
        <div class="input-group">
            <span class="input-group-text bg-transparent border-end-0">
                <i class="bi bi-search text-muted"></i>
            </span>
            <input type="text"
                   id="business-search"
                   class="form-control border-start-0 ps-0"
                   placeholder="Search by name or phone..."
                   value="{{ $search }}"
                   autocomplete="off">
            <span id="search-spinner" class="input-group-text bg-transparent d-none">
                <span class="spinner-border spinner-border-sm text-muted"></span>
            </span>
        </div>
    </div>
</div>

{{-- Results container --}}
<div id="business-results">
    @include('admin::businesses._cards', ['businesses' => $businesses, 'search' => $search])
</div>
@endsection

@push('scripts')
<script>
(function () {
    const input    = document.getElementById('business-search');
    const results  = document.getElementById('business-results');
    const spinner  = document.getElementById('search-spinner');
    let   debounce = null;

    function fetchResults(search, page) {
        clearTimeout(debounce);
        debounce = setTimeout(function () {
            spinner.classList.remove('d-none');

            const url = new URL(window.location.href);
            url.searchParams.set('search', search);
            if (page) {
                url.searchParams.set('page', page);
            } else {
                url.searchParams.delete('page');
            }

            fetch(url.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (res) { return res.text(); })
            .then(function (html) {
                results.innerHTML = html;
                spinner.classList.add('d-none');
                window.history.replaceState(null, '', url.toString());
                bindPaginationLinks();
            })
            .catch(function () { spinner.classList.add('d-none'); });
        }, 300);
    }

    function bindPaginationLinks() {
        results.querySelectorAll('.pagination a').forEach(function (link) {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const href  = new URL(link.href);
                const page  = href.searchParams.get('page');
                fetchResults(input.value.trim(), page);
            });
        });
    }

    input.addEventListener('input', function () {
        fetchResults(input.value.trim(), null);
    });

    bindPaginationLinks();
})();
</script>
@endpush