@extends('layouts.admin')

@section('title', 'Customer Management - Orange Groceries Admin')
@section('header_title', 'Customer Accounts')

@section('content')
<div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
    <div class="flex items-center justify-between border-b border-slate-100 pb-4">
        <h3 class="font-extrabold text-slate-900 text-base">Registered Customer Accounts</h3>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-left text-xs">
            <thead>
                <tr class="text-slate-400 uppercase font-extrabold border-b border-slate-100">
                    <th class="pb-3">Customer Name</th>
                    <th class="pb-3">Email & Phone</th>
                    <th class="pb-3">Orders Placed</th>
                    <th class="pb-3">Joined Date</th>
                    <th class="pb-3">Status</th>
                    <th class="pb-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                @foreach($customers as $cust)
                    <tr>
                        <td class="py-3 font-bold text-slate-900">{{ $cust->name }}</td>
                        <td class="py-3">
                            <div>{{ $cust->email }}</div>
                            <div class="text-[10px] text-slate-400">{{ $cust->phone ?? 'No phone' }}</div>
                        </td>
                        <td class="py-3 font-extrabold text-brand-600">{{ $cust->orders_count }} Orders</td>
                        <td class="py-3 text-slate-500 font-mono">{{ $cust->created_at->format('d M Y') }}</td>
                        <td class="py-3">
                            <span class="px-2.5 py-0.5 rounded-full font-bold text-[10px] {{ $cust->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800' }}">
                                {{ ucfirst($cust->status) }}
                            </span>
                        </td>
                        <td class="py-3 text-right">
                            <form action="{{ route('admin.customers.toggle', $cust->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="font-bold text-xs {{ $cust->status === 'active' ? 'text-rose-600 hover:underline' : 'text-emerald-600 hover:underline' }}">
                                    {{ $cust->status === 'active' ? 'Block Customer' : 'Unblock Account' }}
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {{ $customers->links() }}
</div>
@endsection