{{-- Partial: card grid + pagination — returned for AJAX search requests --}}
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4" id="business-cards">

    @forelse ($businesses as $business)
    <div class="col">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">

                {{-- Header row: name + status badge --}}
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <h6 class="fw-bold mb-0">{{ $business->name }}</h6>
                        <span class="text-muted small">{{ $business->phone }}</span>
                    </div>
                    @if ($business->is_active)
                        <span class="badge text-bg-success">Active</span>
                    @else
                        <span class="badge text-bg-secondary">Inactive</span>
                    @endif
                </div>

                {{-- Contact details --}}
                <div class="mb-3">
                    <div class="small text-muted mb-1">
                        <i class="bi bi-envelope me-1"></i>{{ $business->email }}
                    </div>
                </div>

                {{-- WhatsApp identifiers --}}
                <div class="border-top pt-3">
                    <p class="small text-muted mb-1 fw-semibold">WhatsApp</p>
                    <div class="small text-muted mb-1 text-truncate" title="{{ $business->waba_id }}">
                        <span class="fw-medium">WABA ID:</span> {{ $business->waba_id }}
                    </div>
                    <div class="small text-muted text-truncate" title="{{ $business->phone_number_id }}">
                        <span class="fw-medium">Phone Number ID:</span> {{ $business->phone_number_id }}
                    </div>
                </div>

            </div>
            <div class="card-footer bg-transparent border-0 px-4 pb-4 pt-0 d-flex gap-2">
                <a href="{{ route('admin.businesses.templates', $business) }}"
                   class="btn btn-sm btn-outline-secondary flex-fill">
                    <i class="bi bi-layout-text-sidebar-reverse me-1"></i>Templates
                </a>
                <a href="{{ route('admin.businesses.transactions.index', $business) }}"
                   class="btn btn-sm btn-outline-warning flex-fill">
                    <i class="bi bi-wallet2 me-1"></i>Wallet
                </a>
                <a href="{{ route('admin.businesses.edit', $business) }}"
                   class="btn btn-sm btn-outline-primary flex-fill">
                    <i class="bi bi-pencil me-1"></i>Edit
                </a>
            </div>
        </div>
    </div>
    @empty
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-5 text-center text-muted">
                <i class="bi bi-buildings" style="font-size: 2.5rem; opacity: 0.3;"></i>
                <p class="mt-3 mb-0">
                    @if ($search)
                        No businesses match "{{ $search }}".
                    @else
                        No businesses yet. <a href="{{ route('admin.businesses.create') }}">Add the first one.</a>
                    @endif
                </p>
            </div>
        </div>
    </div>
    @endforelse

</div>

{{-- Pagination --}}
@if ($businesses->hasPages())
<div class="mt-4 d-flex justify-content-center" id="business-pagination">
    {{ $businesses->links() }}
</div>
@endif