@extends('mainlayout.layout')

@section('title', config('app.name') . ' | Customers')
@section('topbar-search', 'enabled')

@section('content')
@php
    $customersIndexUrl = request()->routeIs('support.customers.index')
        ? route('support.customers.index')
        : url('/customers/view_customer');
@endphp
<main class="portal-workspace portal-light-type" data-async-directory>
    <header class="portal-page-header">
        <div>
            <span class="portal-eyebrow">Customer management</span>
            <h1>Customers</h1>
            <p>Find customer accounts and understand their order activity.</p>
        </div>
    </header>

    <section class="portal-kpi-grid portal-kpi-grid--four" aria-label="Customer overview">
        <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx bx-group"></i></span><span class="portal-kpi-label">Total customers</span><strong>{{ number_format($metrics['total']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon tone-dark"><i class="bx bx-cart"></i></span><span class="portal-kpi-label">Customers with orders</span><strong>{{ number_format($metrics['with_orders']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon tone-orange"><i class="bx bx-user-plus"></i></span><span class="portal-kpi-label">Added in 30 days</span><strong>{{ number_format($metrics['recent']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx bx-wallet"></i></span><span class="portal-kpi-label">Portfolio order value</span><strong>TZS {{ number_format($metrics['order_value']) }}</strong></article>
    </section>

    <section class="portal-card" data-async-list>
        <form class="portal-filter-bar portal-filter-bar--search" action="{{ $customersIndexUrl }}" method="GET" data-async-filter>
            @if(request()->filled('per_page'))<input type="hidden" name="per_page" value="{{ request('per_page') }}">@endif
            <label class="portal-search-field">
                <i class="bx bx-search"></i>
                <input type="search" name="search_customer" value="{{ $searchterm }}" placeholder="Search name, customer ID, phone or email" aria-label="Search customers" autocomplete="off" data-auto-submit>
            </label>
            <button class="btn btn-mlk-primary" type="submit"><i class="bx bx-search"></i> Search</button>
            @if($searchterm !== '')
                <a class="btn btn-mlk-outline" href="{{ $customersIndexUrl }}" data-async-clear>Clear</a>
            @endif
        </form>

        <header class="portal-card-header">
            <div>
                <h2>{{ $searchterm !== '' ? 'Matching customers' : 'Recent customers' }}</h2>
                <p>{{ $searchterm !== '' ? 'All matching customers, with adjustable page sizes.' : 'Newest customers first. Choose how many results to show per page.' }}</p>
            </div>
            <span class="portal-status portal-status--neutral">
                @if($customers->total()) {{ number_format($customers->firstItem()) }}–{{ number_format($customers->lastItem()) }} of {{ number_format($customers->total()) }} @else 0 customers @endif
            </span>
        </header>

        <div class="portal-directory-progress" data-async-progress role="status" aria-live="polite"><span></span> Loading customers…</div>
        <div class="table-responsive">
            <table class="table portal-table">
                <thead><tr><th>Customer</th><th>Customer ID</th><th>Contact</th><th>Orders</th><th>Order value</th><th>Registered</th></tr></thead>
                <tbody>
                @forelse($customers as $customer)
                    @php
                        $customerUrl = request()->routeIs('support.customers.index')
                            ? route('support.customers.show', $customer)
                            : url('/customers/view_customer/' . encrypt($customer->uid));
                        $customerName = trim($customer->first_name . ' ' . $customer->middle_name . ' ' . $customer->last_name);
                    @endphp
                    <tr class="portal-clickable-row" data-href="{{ $customerUrl }}" tabindex="0" role="link" aria-label="View customer {{ $customerName ?: $customer->uid }}">
                        <td><a href="{{ $customerUrl }}">{{ $customerName ?: 'Unnamed customer' }}</a><small>{{ $customer->source ?: 'Miliki customer' }}</small></td>
                        <td>{{ $customer->userID ?: $customer->uid }}</td>
                        <td>{{ $customer->phone ?: 'Phone not available' }}<small>{{ $customer->email ?: 'Email not available' }}</small></td>
                        <td>{{ number_format((int) $customer->orders_count) }}</td>
                        <td>TZS {{ number_format((int) $customer->order_value) }}</td>
                        <td>{{ optional($customer->created_at)->format('d M Y') ?: '—' }}<small>{{ optional($customer->created_at)->format('H:i') }}</small></td>
                    </tr>
                @empty
                    <tr><td colspan="6"><div class="portal-empty portal-empty--muted compact">No customers match the current search.</div></td></tr>
                @endforelse
                </tbody>
            </table>
        </div>

        @include('partials.directory-pagination', ['paginator' => $customers])
    </section>
</main>
@endsection

@push('scripts')
<script src="{{ asset('/web/assets/js/portal-async-directory.js') }}?v=2" defer></script>
@endpush