<div>
    <x-title>
        Wills &amp; Trusts

        @can('wills-cases.create')
            <x-slot:buttons>
                <a href="{{ route('wills-cases.create') }}" class="btn btn-success waves-effect waves-light">
                    <i class="mdi mdi-plus me-2"></i> New W&amp;T Case
                </a>
            </x-slot:buttons>
        @endcan
    </x-title>

    <div class="card shadow-sm">
        <div class="card-body">

            {{-- CONTROLS --}}
            <div class="row align-items-end mb-3 g-2">
                <div class="col-12 col-md-5">
                    <label class="form-label">Search</label>
                    <input class="form-control"
                           wire:model.live.debounce.300ms="search"
                           placeholder="Case #, NI, client name…">
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" wire:model.live="status">
                        <option value="all">All</option>
                        <option value="open">Open</option>
                        <option value="closed">Closed</option>
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label">Per Page</label>
                    <select class="form-select" wire:model.live="perPage">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>

            {{-- TABLE --}}
            <div class="table-responsive">
                <table class="table table-centered table-striped table-nowrap mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>Case #</th>
                        <th>Client</th>
                        <th>NI Number</th>
                        <th>Fee Structure</th>
                        <th>IFA Referred</th>
                        <th>Opened</th>
                        <th>Status</th>
                        <th class="text-end"></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($cases as $case)
                        <tr>
                            <td>
                                <strong>{{ $case->case_number ?? $case->displayId }}</strong>
                            </td>
                            <td>
                                @if($case->client)
                                    <a href="{{ route('clients.show', $case->client) }}" class="text-dark">
                                        {{ $case->client->name_first }} {{ $case->client->name_last }}
                                    </a>
                                @else
                                    <span class="text-muted">Unknown</span>
                                @endif
                            </td>
                            <td>{{ $case->national_insurance ?? '—' }}</td>
                            <td>{{ $case->fee_structure ?? '—' }}</td>
                            <td>
                                @if($case->ifa_referred)
                                    <span class="badge bg-info">Yes</span>
                                @else
                                    <span class="badge bg-light text-dark">No</span>
                                @endif
                            </td>
                            <td>{{ $case->opened_at ? $case->opened_at->format('d/m/Y') : '—' }}</td>
                            <td>
                                @if($case->is_open)
                                    <span class="badge bg-success">Open</span>
                                @else
                                    <span class="badge bg-secondary">Closed</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <a href="{{ route('wills-cases.view', $case) }}"
                                   class="text-secondary me-2" title="View">
                                    <i class="mdi mdi-eye"></i>
                                </a>
                                @can('edit', $case)
                                    <a href="{{ route('wills-cases.edit', $case) }}"
                                       class="text-primary" title="Edit">
                                        <i class="mdi mdi-pencil"></i>
                                    </a>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                No Wills &amp; Trusts cases found.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

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

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