@extends('layouts.app')
@section('title','Customers')
@section('content')
@php
    $filters = [];
    if(request()->filled('search')) $filters[] = ['label'=>'Search','value'=>request('search'),'removeUrl'=>route('customers.index',request()->except(['search','page']))];
    if(request()->filled('branch_id')) {
        $branch = $branches->firstWhere('id',(int)request('branch_id'));
        $filters[] = ['label'=>'Branch','value'=>$branch?->name ?? request('branch_id'),'removeUrl'=>route('customers.index',request()->except(['branch_id','page']))];
    }
    if(request()->filled('status')) $filters[] = ['label'=>'Status','value'=>ucfirst((string)request('status')),'removeUrl'=>route('customers.index',request()->except(['status','page']))];
@endphp

<x-ui.page-toolbar title="Customers" description="Manage customer identity, KYC status and branch ownership." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Customers']]">
    @if(auth()->user()->can('customers.create'))
        <x-slot:actions><a class="mf-btn mf-btn-primary" href="{{ route('customers.create') }}">+ Register customer</a></x-slot:actions>
    @endif
</x-ui.page-toolbar>

<x-ui.quick-status-tabs :tabs="[
    ['label'=>'All','value'=>''],
    ['label'=>'Active','value'=>'active'],
    ['label'=>'Inactive','value'=>'inactive'],
    ['label'=>'Deceased','value'=>'deceased'],
]" />

<x-ui.table-toolbar table-id="customers-table" search-placeholder="Search name, number, phone, NIN or email…" :filter-names="['branch_id']" :columns="[
    'customer'=>'Customer', 'contact'=>'Contact', 'nin'=>'NIN', 'branch'=>'Branch', 'status'=>'Status'
]" export-filename="customers.csv">
    <x-slot:filters>
        <select name="branch_id" class="mf-filter-control" aria-label="Filter by branch">
            <option value="">All branches</option>
            @foreach($branches as $branch)<option value="{{ $branch->id }}" @selected((int)request('branch_id')===$branch->id)>{{ $branch->name }}</option>@endforeach
        </select>
    </x-slot:filters>
</x-ui.table-toolbar>

<x-ui.applied-filter-chips :filters="$filters" :clear-url="route('customers.index')" />

<div class="mf-table-frame">
    <table id="customers-table" class="mf-table" data-standard-table>
        <thead><tr>
            <th data-table-column="customer">Customer</th>
            <th data-table-column="contact">Contact</th>
            <th data-table-column="nin">NIN</th>
            <th data-table-column="branch">Branch</th>
            <th data-table-column="status">Status</th>
        </tr></thead>
        <tbody>
        @forelse($customers as $customer)
            <tr>
                <td data-table-column="customer"><a class="font-medium text-foreground hover:underline" href="{{ route('customers.show',$customer) }}">{{ $customer->customer_number }}</a><div class="text-xs text-muted-foreground">{{ $customer->full_name }}</div></td>
                <td data-table-column="contact">{{ $customer->phone }}<div class="text-xs text-muted-foreground">{{ $customer->email ?: '—' }}</div></td>
                <td data-table-column="nin">{{ $customer->nin ?: '—' }}</td>
                <td data-table-column="branch">{{ $customer->branch?->name ?: '—' }}</td>
                <td data-table-column="status"><span class="mf-badge {{ $customer->status==='active'?'mf-badge-success':($customer->status==='inactive'?'mf-badge-muted':'mf-badge-warning') }}">{{ ucfirst($customer->status) }}</span></td>
            </tr>
        @empty
            <tr><td colspan="5" class="text-center text-muted-foreground">No customers found.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $customers->links() }}</div>
@endsection
