@extends('portal.layouts.app')

@section('title', 'Customers')
@section('subtitle', number_format($customers->total()).' BankIslami accountholders on the journey')

@section('content')

    <x-card>
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <div class="min-w-64 flex-1">
                <label class="field-label">Search</label>
                <input type="search" name="q" value="{{ request('q') }}"
                       placeholder="Name, CNIC, mobile, account number or bank customer ID"
                       class="field">
            </div>
            <div>
                <label class="field-label">Status</label>
                <select name="status" class="field">
                    <option value="">All</option>
                    @foreach (['active', 'blocked', 'do_not_contact'] as $status)
                        <option value="{{ $status }}" @selected(request('status') === $status)>{{ str($status)->headline() }}</option>
                    @endforeach
                </select>
            </div>
            <button class="btn-primary">Search</button>
            <a href="{{ route('customers.index') }}" class="btn-secondary">Reset</a>
        </form>
        <p class="mt-3 text-xs text-slate-500">
            CNIC, mobile and account numbers are encrypted at rest &mdash; searching uses a keyed blind index, so an exact value is required.
        </p>
    </x-card>

    <x-card :padded="false">
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Customer</th>
                    <th>CNIC</th>
                    <th>Mobile</th>
                    <th>Branch</th>
                    <th class="text-right">Plans</th>
                    <th>Status</th>
                    <th>Last seen</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($customers as $customer)
                    <tr>
                        <td>
                            <a href="{{ route('customers.show', $customer) }}" class="font-medium hover:underline">{{ $customer->full_name }}</a>
                            <span class="block text-xs text-slate-400">{{ $customer->bank_customer_id ?? $customer->uuid }}</span>
                        </td>
                        <td class="font-mono text-xs">{{ $customer->maskedCnic() ?? '-' }}</td>
                        <td class="font-mono text-xs">{{ $customer->maskedMobile() ?? '-' }}</td>
                        <td class="text-xs">{{ $customer->branch_name ?? '-' }}</td>
                        <td class="text-right text-xs tabular-nums">
                            {{ $customer->active_subscriptions_count }} / {{ $customer->subscriptions_count }}
                        </td>
                        <td>
                            <x-badge :variant="match ($customer->status) {
                                'active' => 'bg-emerald-100 text-emerald-800',
                                'blocked' => 'bg-rose-100 text-rose-800',
                                default => 'bg-amber-100 text-amber-800',
                            }">{{ str($customer->status)->headline() }}</x-badge>
                        </td>
                        <td class="text-xs text-slate-500">{{ $customer->last_seen_at?->diffForHumans(short: true) ?? '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="empty-state">No customers match this search.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        @if ($customers->hasPages())
            <div class="border-t border-slate-100 px-5 py-3">{{ $customers->links() }}</div>
        @endif
    </x-card>

@endsection