@extends('layouts.admin')

@section('title', __('admin_customers.all_accounts'))

@push('styles')
    .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.summary .card{padding:15px}.summary strong{display:block;font-size:24px;color:var(--primary)}.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;margin-bottom:20px}.control{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:white}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid var(--border);text-align:start;white-space:nowrap}.presence{display:inline-flex;align-items:center;gap:7px}.dot{width:10px;height:10px;border-radius:50%;background:#98a2b3}.dot.online{background:#19a44b;box-shadow:0 0 0 4px #dff6e7}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef2f6;font-weight:700}.badge-approved{color:#176b35;background:#eaf8ef}.badge-pending{color:#9a6700;background:#fff4d6}.badge-rejected,.badge-suspended{color:#a61b1b;background:#fff1f1}@media(max-width:800px){.summary{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}}
@endpush

@section('content')
    <div class="page-header"><h1 class="page-title">{{ __('admin_customers.all_accounts') }}</h1></div>
    <div class="summary">
        @foreach(['pending','approved','rejected','suspended'] as $state)
            <div class="card"><strong>{{ $counts[$state] ?? 0 }}</strong>{{ __('admin_customers.status_'.$state) }}</div>
        @endforeach
    </div>
    <section class="card">
        <form class="filters" method="GET">
            <input class="control" type="search" name="search" value="{{ $search }}" placeholder="{{ __('admin_customers.search_placeholder') }}">
            <select class="control" name="status"><option value="">{{ __('admin_customers.all_statuses') }}</option>@foreach(['pending','approved','rejected','suspended'] as $state)<option value="{{ $state }}" @selected($status===$state)>{{ __('admin_customers.status_'.$state) }}</option>@endforeach</select>
            <select class="control" name="activity"><option value="">{{ __('admin_customers.all_activity') }}</option><option value="online" @selected($activity==='online')>{{ __('admin_customers.online') }}</option><option value="offline" @selected($activity==='offline')>{{ __('admin_customers.offline') }}</option></select>
            <button class="button">{{ __('admin_customers.filter') }}</button>
        </form>
        <div class="table-wrap"><table><thead><tr><th>{{ __('admin_customers.activity') }}</th><th>{{ __('admin_customers.full_name') }}</th><th>{{ __('admin_customers.username') }}</th><th>{{ __('admin_customers.account_type') }}</th><th>{{ __('admin_customers.account_status') }}</th><th>{{ __('admin_customers.last_seen') }}</th><th></th></tr></thead><tbody>
        @forelse($customers as $customer)<tr><td><span class="presence"><span class="dot {{ $customer->is_online ? 'online' : '' }}"></span>{{ $customer->is_online ? __('admin_customers.online') : __('admin_customers.offline') }}</span></td><td>{{ $customer->full_name }}</td><td>{{ $customer->username }}</td><td>{{ __('admin_customers.'.$customer->account_type) }}</td><td><span class="badge badge-{{ $customer->status }}">{{ __('admin_customers.status_'.$customer->status) }}</span></td><td>{{ $customer->last_seen_at?->format('Y-m-d H:i') ?? $customer->last_login_at?->format('Y-m-d H:i') ?? '—' }}</td><td><a class="button" href="{{ route('admin.customers.show',$customer) }}">{{ __('admin_customers.view') }}</a></td></tr>
        @empty<tr><td colspan="7">{{ __('admin_customers.no_accounts') }}</td></tr>@endforelse
        </tbody></table></div><div style="margin-top:18px">{{ $customers->links() }}</div>
    </section>
@endsection