@extends('layouts.admin')

@section('title', $customer->name)
@section('page_title', $customer->name)

@section('toolbar')
    <a href="{{ route('admin.customers.edit', $customer) }}" class="kt-btn kt-btn-primary">Edit</a>
    @if($customer->id !== auth()->id())
        <form action="{{ route('admin.customers.destroy', $customer) }}" method="POST" onsubmit="return confirm('Delete this account? Orders stay in the order list.')">
            @csrf
            @method('DELETE')
            <button class="kt-btn kt-btn-light" type="submit">Delete</button>
        </form>
    @endif
@endsection

@section('content')
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-5">
    <div class="kt-card">
        <div class="kt-card-content p-5">
            <div class="text-sm text-secondary-foreground mb-1">Orders</div>
            <div class="text-2xl font-semibold text-mono">{{ $customer->orders->count() }}</div>
        </div>
    </div>
    <div class="kt-card">
        <div class="kt-card-content p-5">
            <div class="text-sm text-secondary-foreground mb-1">Spent</div>
            <div class="text-2xl font-semibold text-mono">₹{{ number_format($spent, 0) }}</div>
        </div>
    </div>
    <div class="kt-card">
        <div class="kt-card-content p-5">
            <div class="text-sm text-secondary-foreground mb-1">Addresses</div>
            <div class="text-2xl font-semibold text-mono">{{ $customer->addresses->count() }}</div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-5">
    <div class="flex flex-col gap-5">
        <div class="kt-card">
            <div class="kt-card-header"><h3 class="kt-card-title">Account</h3></div>
            <div class="kt-card-content text-sm flex flex-col gap-2">
                <div><span class="text-secondary-foreground">Name</span><div class="font-medium">{{ $customer->name }}</div></div>
                <div><span class="text-secondary-foreground">Email</span><div class="font-medium">{{ $customer->email }}</div></div>
                <div><span class="text-secondary-foreground">Phone</span><div class="font-medium">{{ $customer->phone ?: '—' }}</div></div>
                <div><span class="text-secondary-foreground">Role</span><div class="font-medium">{{ ucfirst($customer->role) }}</div></div>
                <div><span class="text-secondary-foreground">Registered</span><div class="font-medium">{{ $customer->created_at->format('d M Y, h:i A') }}</div></div>
            </div>
        </div>

        <div class="kt-card">
            <div class="kt-card-header"><h3 class="kt-card-title">Addresses</h3></div>
            <div class="kt-card-content flex flex-col gap-3 text-sm">
                @forelse($customer->addresses as $address)
                    <div class="border border-border rounded-lg p-3">
                        <div class="flex items-center justify-between gap-2 mb-1">
                            <strong>{{ $address->label }}</strong>
                            @if($address->is_default)
                                <span class="kt-badge kt-badge-sm kt-badge-outline">Default</span>
                            @endif
                        </div>
                        <div>{{ $address->name }} · {{ $address->phone }}</div>
                        <div class="text-secondary-foreground">{{ $address->address }}, {{ $address->city }} {{ $address->pincode }}</div>
                    </div>
                @empty
                    <div class="text-secondary-foreground">No saved addresses.</div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="kt-card xl:col-span-2">
        <div class="kt-card-header"><h3 class="kt-card-title">Orders</h3></div>
        <div class="kt-card-content p-0">
            <div class="kt-scrollable-x-auto">
                <table class="kt-table table-auto">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Status</th>
                            <th>Payment</th>
                            <th>Total</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customer->orders as $order)
                            <tr>
                                <td><a class="text-primary font-medium" href="{{ route('admin.orders.show', $order) }}">{{ $order->order_number }}</a></td>
                                <td><span class="kt-badge kt-badge-outline kt-badge-sm">{{ ucfirst($order->status) }}</span></td>
                                <td>{{ strtoupper($order->payment_method) }}</td>
                                <td>₹{{ number_format($order->total, 0) }}</td>
                                <td>{{ $order->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center py-8 text-secondary-foreground">This customer has not placed an order.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection