@extends('layouts.app-shell')
@section('title', 'Customers')
@section('sidebar')
    @include('admin._sidebar')
@endsection
@section('bottomnav')
    <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard*') ? 'active' : '' }}"><x-icon name="home" :size="20" /><span>Home</span></a>
    <a href="{{ route('admin.bookings') }}" class="{{ request()->routeIs('admin.bookings*') ? 'active' : '' }}"><x-icon name="bookings" :size="20" /><span>Subs</span></a>
    <a href="{{ route('admin.customers') }}" class="{{ request()->routeIs('admin.customers*') ? 'active' : '' }}"><x-icon name="profile" :size="20" /><span>Customers</span></a>
    <a href="{{ route('admin.services.index') }}" class="{{ request()->routeIs('admin.services*') ? 'active' : '' }}"><x-icon name="services" :size="20" /><span>Catalogue</span></a>
@endsection

@section('content')
<div class="flex-between mb-3">
    <div>
        <h2 style="font-size: 22px; font-weight: 700;">Customers</h2>
        <p class="muted" style="font-size: 13px;">All registered customers and their booking activity.</p>
    </div>
</div>

<x-admin-filter :searchPlaceholder="'Search by name, email or phone'" />

<div class="panel">
    <div class="panel-head"><h3>{{ $customers->total() }} customer{{ $customers->total() === 1 ? '' : 's' }}</h3></div>
    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Bookings</th>
                    <th>Location</th>
                    <th>Joined</th>
                </tr>
            </thead>
            <tbody>
                @forelse($customers as $u)
                    <tr>
                        <td data-label="Avatar"><div class="row-thumb">{{ strtoupper(substr($u->name, 0, 1)) }}</div></td>
                        <td data-label="Name"><strong>{{ $u->name }}</strong></td>
                        <td data-label="Email" style="font-size: 12.5px;">{{ $u->email }}</td>
                        <td data-label="Phone">{{ $u->phone ?: '—' }}</td>
                        <td data-label="Bookings"><strong>{{ $u->customerBookings()->count() }}</strong></td>
                        <td data-label="Location">
                            @if($u->city || $u->address)
                                {{ $u->city ?: '' }}@if($u->pincode) · {{ $u->pincode }}@endif
                            @else<span class="muted">—</span>@endif
                        </td>
                        <td data-label="Joined" class="muted" style="font-size: 12.5px;">{{ $u->created_at->format('d M Y') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="7"><div class="empty">No customers found.</div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-3">{{ $customers->appends(request()->query())->links() }}</div>

@endsection
