@extends('layouts.app')
@section('title', 'Customers')

@section('content')
    <div class="page-head">
        <div><h1>Customers</h1><p>{{ $customers->total() }} record(s) matching your filters</p></div>
        <div class="page-actions">
            <a href="{{ route('reports.export', ['report' => 'invoices']) }}" class="btn secondary">Export CSV</a>
            <a href="{{ route('customers.create') }}" class="btn">+ New customer</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'All customers', 'value' => number_format($counts['all']), 'href' => route('customers.index')])
        @include('components.kpi', ['label' => 'Active', 'value' => number_format($counts['active']), 'variant' => 'good', 'href' => route('customers.index', ['status' => 'active'])])
        @include('components.kpi', ['label' => 'Suspended', 'value' => number_format($counts['suspended']), 'variant' => 'warn', 'href' => route('customers.index', ['status' => 'suspended'])])
        @include('components.kpi', ['label' => 'Leads / prospects', 'value' => number_format($counts['leads']), 'href' => route('leads.index')])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Name, number, phone, email, ID…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All statuses</option>
                @foreach (['lead','prospect','active','suspended','cancelled','closed'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Segment</label>
            <select name="segment" data-auto-submit>
                <option value="">All segments</option>
                @foreach (['residential','sme','enterprise','wholesale'] as $s)
                    <option value="{{ $s }}" @selected(($filters['segment'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>&nbsp;</label>
            <label class="check"><input type="checkbox" name="overdue" value="1" @checked(request()->boolean('overdue'))> Only with balance</label>
        </div>
        <div class="field" style="flex:0 0 auto;">
            <label>&nbsp;</label>
            <button type="submit" class="btn secondary">Filter</button>
        </div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Customer</th><th>Contact</th><th>Segment</th><th class="num">Services</th>
                        <th class="num">Balance</th><th>KYC</th><th>Status</th><th>Joined</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($customers as $customer)
                        <tr>
                            <td>
                                <a href="{{ route('customers.show', $customer) }}" class="strong">{{ $customer->display_name }}</a>
                                <div class="tiny muted mono">{{ $customer->customer_number }}</div>
                            </td>
                            <td class="small">
                                {{ $customer->phone }}
                                @if ($customer->email)<div class="tiny muted">{{ $customer->email }}</div>@endif
                            </td>
                            <td><span class="badge muted">{{ title_case_words($customer->segment) }}</span></td>
                            <td class="num">{{ $customer->active_services_count }}</td>
                            <td class="num {{ $customer->account_balance > 0 ? 'strong' : '' }}">
                                {{ $customer->account_balance > 0 ? money($customer->account_balance, $customer->currency) : '—' }}
                            </td>
                            <td><span class="badge {{ status_color($customer->kyc_status === 'verified' ? 'active' : 'pending') }}">{{ $customer->kyc_status }}</span></td>
                            <td><span class="badge {{ status_color($customer->status) }}"><span class="dot"></span>{{ $customer->status }}</span></td>
                            <td class="small nowrap">{{ $customer->joined_at?->format('d M Y') ?: '—' }}</td>
                            <td class="right nowrap">
                                <a href="{{ route('customers.show', $customer) }}" class="btn xs secondary">View</a>
                                <a href="{{ route('payments.create', ['customer' => $customer->id]) }}" class="btn xs">Pay</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#9786;', 'title' => 'No customers found',
                                'message' => 'Adjust your filters or add your first customer.',
                                'action' => '<a href="'.route('customers.create').'" class="btn sm">+ New customer</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($customers->hasPages())
            <div class="card-foot">{{ $customers->links('partials.pagination') }}</div>
        @endif
    </div>
@endsection