@extends('layouts.admin')

@section('title', 'Customers Directory')

@section('content')
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
    <div>
        <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a;">Registered Customer Directory</h1>
        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">View registered customer profiles and total purchase metrics.</p>
    </div>
</div>

<div class="admin-card" style="margin-bottom: 24px; padding: 14px 20px;">
    <form action="{{ route('admin.customers.index') }}" method="GET" style="display: flex; gap: 12px;">
        <input type="text" name="search" value="{{ $search }}" placeholder="Search by customer name, email or phone..." class="form-control" style="flex: 1;">
        <button type="submit" class="btn-admin btn-secondary">Search</button>
    </form>
</div>

<div class="admin-card">
    @if($customers->isEmpty())
        <div style="padding: 40px; text-align: center; color: var(--text-muted);">
            No registered customers found.
        </div>
    @else
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Contact Information</th>
                        <th>Address</th>
                        <th>Total Orders</th>
                        <th>Lifetime Spend</th>
                        <th>Registered Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customers as $c)
                        <tr>
                            <td>
                                <strong style="color: #0f172a; font-size: 15px;">{{ $c->name }}</strong>
                            </td>
                            <td>
                                <div>{{ $c->email }}</div>
                                <div style="font-size: 12px; color: var(--text-muted);">{{ $c->phone ?? 'No phone' }}</div>
                            </td>
                            <td>
                                <div style="font-size: 12px; color: #334155;">{{ $c->address ?? 'Not set' }}</div>
                                <div style="font-size: 11px; color: var(--text-muted);">{{ $c->city ? $c->city . ', ' . $c->state : '' }}</div>
                            </td>
                            <td><strong>{{ $c->orders_count }}</strong> orders</td>
                            <td><strong style="color: var(--primary);">₹{{ number_format($c->orders_sum_total_amount ?? 0, 2) }}</strong></td>
                            <td><span style="font-size: 12px; color: var(--text-muted);">{{ $c->created_at->format('M d, Y') }}</span></td>
                            <td>
                                <a href="{{ route('admin.customers.show', $c) }}" class="btn-admin btn-secondary" style="padding: 6px 12px; font-size: 12px; background: #e0eff9; color: #186297; border-color: #b9dff3;">
                                    <i data-lucide="eye" style="width: 14px;"></i> View Profile
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div style="margin-top: 20px;">
            {{ $customers->links() }}
        </div>
    @endif
</div>
@endsection