<x-layouts.admin title="Customer">
    <x-admin.page-header :title="$customer->name" subtitle="{{ $customer->email }}">
        <x-slot:actions>
            <a href="{{ route('admin.customers.index') }}" class="text-sm text-ink/50 hover:text-ink">&larr; Back to customers</a>
        </x-slot:actions>
    </x-admin.page-header>

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-3">
        <x-admin.card>
            <h3 class="mb-4 text-sm font-semibold text-ink">Details</h3>
            <dl class="space-y-3 text-sm">
                <div class="flex justify-between"><dt class="text-ink/50">Phone</dt><dd class="text-ink">{{ $customer->phone ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-ink/50">Joined</dt><dd class="text-ink">{{ $customer->created_at->format('d M Y') }}</dd></div>
                <div class="flex justify-between"><dt class="text-ink/50">Total Orders</dt><dd class="text-ink">{{ $customer->orders->count() }}</dd></div>
                <div class="flex justify-between">
                    <dt class="text-ink/50">Lifetime Spend</dt>
                    <dd class="text-ink">{{ config('niyarasa.currency.symbol') }} {{ number_format((float) $customer->orders->sum('grand_total')) }}</dd>
                </div>
            </dl>
        </x-admin.card>

        <x-admin.card class="lg:col-span-2" :padded="false">
            <div class="border-b border-black/5 px-5 py-4">
                <h3 class="text-sm font-semibold text-ink">Order History</h3>
            </div>

            @if ($customer->orders->isEmpty())
                <x-admin.empty-state icon="fa-solid fa-receipt" title="No orders yet" />
            @else
                <div class="overflow-x-auto">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Order</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customer->orders as $order)
                                <tr>
                                    <td class="font-medium text-ink">{{ $order->order_number }}</td>
                                    <td class="tabular-nums text-ink/60">{{ config('niyarasa.currency.symbol') }} {{ number_format((float) $order->grand_total) }}</td>
                                    <td><x-admin.badge :color="$order->order_status->color()">{{ $order->order_status->label() }}</x-admin.badge></td>
                                    <td class="text-ink/50">{{ $order->created_at->format('d M Y') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </x-admin.card>
    </div>
</x-layouts.admin>
