<div>
    <x-title>
        Clients
        @can('clients.create')
            <x-slot:buttons>
                <a href="{{ route('clients.create') }}" class="btn btn-success waves-effect waves-light">
                    <i class="mdi mdi-plus me-2"></i> Add Client
                </a>
            </x-slot:buttons>
        @endcan
    </x-title>

    <div class="row">
        <div class="col-12 col-md-9">
            <div class="card">
                <div class="card-body">

                    <div class="row mb-3 align-items-end g-2">
                        <div class="col-12 col-md-5">
                            <label class="form-label">Search</label>
                            <input type="text"
                                   class="form-control form-control-sm"
                                   wire:model.live.debounce.300ms="search"
                                   placeholder="Name, email or phone…">
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label">Per Page</label>
                            <select class="form-select form-select-sm" wire:model.live="perPage">
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-centered table-hover table-striped mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th class="d-none d-lg-table-cell">DOB</th>
                                    <th class="d-none d-xl-table-cell">Added</th>
                                    <th class="text-end"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($clients as $client)
                                    <tr>
                                        <td class="text-muted small">{{ $client->displayId }}</td>
                                        <td>
                                            <strong>
                                                @if($client->title) {{ $client->title }} @endif
                                                {{ $client->name_first }} {{ $client->name_last }}
                                            </strong>
                                            @if($client->name_preferred)
                                                <div class="text-muted extra-small">"{{ $client->name_preferred }}"</div>
                                            @endif
                                        </td>
                                        <td class="text-truncate" style="max-width: 160px;">
                                            {{ $client->email_address ?? '—' }}
                                        </td>
                                        <td>{{ $client->phone_number ?? '—' }}</td>
                                        <td class="d-none d-lg-table-cell">
                                            {{ $client->date_of_birth ? $client->date_of_birth->format('d/m/Y') : '—' }}
                                        </td>
                                        <td class="d-none d-xl-table-cell text-muted small">
                                            {{ $client->created_at->format('d/m/y') }}
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('clients.show', $client) }}"
                                               class="btn btn-sm" title="View Profile">
                                                <i class="mdi mdi-eye"></i>
                                            </a>
                                            @can('clients.edit')
                                                <a href="{{ route('clients.edit', $client) }}"
                                                   class="btn btn-sm" title="Edit">
                                                    <i class="mdi mdi-pencil"></i>
                                                </a>
                                            @endcan
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">No clients found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        {{ $clients->links() }}
                    </div>

                </div>
            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Filters</h5>

                    <div class="mb-3">
                        <label class="form-label">Added from</label>
                        <input type="date" class="form-control form-control-sm" wire:model.live="date_from">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Added to</label>
                        <input type="date" class="form-control form-control-sm" wire:model.live="date_to">
                    </div>
                </div>
                <div class="card-footer bg-transparent border-top-0 d-grid">
                    <button class="btn btn-sm btn-outline-secondary"
                            wire:click="$set('date_from', ''); $set('date_to', '')">
                        Clear Filters
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
