@extends('layouts.admin')
@section('title', $customer->email)
@section('content')
<x-admin.page :title="$customer->name ?? $customer->email" :subtitle="'Customer since '.$customer->created_at->format('M j, Y')">
    <x-slot:actions>
        <a href="{{ route('admin.customers.index') }}" class="rounded-lg border border-[var(--color-admin-border)] bg-white px-3 py-2 text-sm">All customers</a>
    </x-slot:actions>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_18rem]">
        <div class="space-y-5">
            <x-admin.section title="Profile">
                <dl class="grid gap-3 text-sm sm:grid-cols-2">
                    <div>
                        <dt class="text-xs text-[#6d7175]">Email</dt>
                        <dd class="font-medium">{{ $customer->email }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-[#6d7175]">Phone</dt>
                        <dd class="font-medium">{{ $customer->phone ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-[#6d7175]">Name</dt>
                        <dd class="font-medium">{{ $customer->name ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-[#6d7175]">Last login</dt>
                        <dd class="font-medium">{{ $customer->last_login_at ?: '—' }}</dd>
                    </div>
                </dl>
            </x-admin.section>

            <x-admin.section title="Addresses">
                <div class="grid gap-3 sm:grid-cols-2">
                    @forelse($customer->addresses as $address)
                        <div class="rounded-lg border border-[var(--color-admin-border)] bg-[#fafbfb] p-4 text-sm">
                            @if($address->is_default)<x-admin.badge tone="info">Default</x-admin.badge>@endif
                            <div class="mt-1 font-medium">{{ $address->name }}</div>
                            <div>{{ $address->line1 }}</div>
                            @if($address->line2)<div>{{ $address->line2 }}</div>@endif
                            <div>{{ $address->city }}, {{ $address->region }} {{ $address->postal_code }}</div>
                            <div>{{ $address->country }}</div>
                        </div>
                    @empty
                        <p class="text-sm text-[#6d7175]">No saved addresses.</p>
                    @endforelse
                </div>
            </x-admin.section>

            <x-admin.section title="Marketing consents">
                <x-admin.data-table>
                    <thead class="bg-[#f6f6f7] text-left text-xs text-[#6d7175]">
                        <tr><th class="p-3">Channel</th><th>Granted</th><th>Recorded</th></tr>
                    </thead>
                    <tbody>
                        @forelse($customer->consents as $consent)
                            <tr class="border-t border-[var(--color-admin-border)]">
                                <td class="p-3">{{ $consent->channel }}</td>
                                <td><x-admin.badge :tone="$consent->granted ? 'success' : 'muted'">{{ $consent->granted ? 'Yes' : 'No' }}</x-admin.badge></td>
                                <td class="text-xs text-[#6d7175]">{{ $consent->recorded_at ?? $consent->created_at }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="p-4 text-[#6d7175]">No consent records.</td></tr>
                        @endforelse
                    </tbody>
                </x-admin.data-table>
            </x-admin.section>

            <x-admin.section title="Orders">
                <x-admin.data-table>
                    <thead class="bg-[#f6f6f7] text-left text-xs text-[#6d7175]">
                        <tr><th class="p-3">Number</th><th>Payment</th><th>Total</th><th></th></tr>
                    </thead>
                    <tbody>
                        @forelse($customer->orders as $order)
                            <tr class="border-t border-[var(--color-admin-border)]">
                                <td class="p-3 font-medium">{{ $order->number }}</td>
                                <td>{{ $order->payment_status }}</td>
                                <td>{{ $order->money('total_cents') }}</td>
                                <td class="p-3 text-right"><a class="text-sm text-[#2c6ecb]" href="{{ route('admin.orders.show', $order) }}">Open</a></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="p-4 text-[#6d7175]">No orders.</td></tr>
                        @endforelse
                    </tbody>
                </x-admin.data-table>
            </x-admin.section>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <x-admin.section title="Notes">
                <p class="text-sm text-[#6d7175]">Internal notes are not stored on this customer yet. Use order notes for fulfillment context.</p>
            </x-admin.section>
            <x-admin.section title="Summary">
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between"><dt class="text-[#6d7175]">Orders</dt><dd class="font-medium">{{ $customer->orders->count() }}</dd></div>
                    <div class="flex justify-between"><dt class="text-[#6d7175]">Addresses</dt><dd class="font-medium">{{ $customer->addresses->count() }}</dd></div>
                </dl>
            </x-admin.section>
        </div>
    </div>
</x-admin.page>
@endsection