@extends('admin.layout')

@section('title', 'Customer Details')

@section('admin-content')
<div class="mb-6">
    <a href="{{ route('admin.users') }}" class="text-primary hover:underline">&larr; Back to Users</a>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white">
        <p class="text-blue-100 text-sm">Total Orders</p>
        <p class="text-3xl font-bold">{{ $totalOrders }}</p>
    </div>
    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white">
        <p class="text-green-100 text-sm">Total Paid</p>
        <p class="text-3xl font-bold">₦{{ number_format($totalPaid, 0) }}</p>
    </div>
    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl p-6 text-white">
        <p class="text-orange-100 text-sm">Outstanding Balance</p>
        <p class="text-3xl font-bold">₦{{ number_format($totalBalance, 0) }}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div class="bg-white rounded-2xl shadow-card p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Customer Info</h2>
        <div class="space-y-3">
            <p><span class="text-gray-500">Name:</span> <span class="font-semibold">{{ $user->name }}</span></p>
            <p><span class="text-gray-500">Email:</span> {{ $user->email }}</p>
            <p><span class="text-gray-500">Phone:</span> {{ $user->phone ?? 'N/A' }}</p>
            <p><span class="text-gray-500">Joined:</span> {{ $user->created_at->format('M d, Y') }}</p>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-card p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Orders ({{ $user->orders->count() }})</h2>
        @if($user->orders->isEmpty())
            <p class="text-gray-500">No orders yet</p>
        @else
            <div class="space-y-3 max-h-64 overflow-y-auto">
                @foreach($user->orders as $order)
                <a href="{{ route('admin.orders.show', $order) }}" class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
                    <div class="flex justify-between">
                        <span class="font-medium">{{ $order->order_number }}</span>
                        <span class="text-sm text-gray-500">{{ $order->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex justify-between text-sm mt-1">
                        <span>₦{{ number_format($order->total, 0) }}</span>
                        <span class="@if($order->payment_status === 'paid') text-green-600 @else text-orange-600 @endif">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>
                </a>
                @endforeach
            </div>
        @endif
    </div>

    <div class="bg-white rounded-2xl shadow-card p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Payment History</h2>
        @if($user->orders->flatMap->payments->isEmpty())
            <p class="text-gray-500">No payments yet</p>
        @else
            <div class="space-y-3 max-h-64 overflow-y-auto">
                @foreach($user->orders->flatMap->payments as $payment)
                <div class="flex justify-between p-3 bg-gray-50 rounded-lg">
                    <div>
                        <p class="font-medium">₦{{ number_format($payment->amount, 0) }}</p>
                        <p class="text-xs text-gray-500">{{ $payment->created_at->format('M d, Y') }}</p>
                    </div>
                    <span class="px-2 py-1 rounded text-xs @if($payment->status === 'confirmed') bg-green-100 text-green-600 @elseif($payment->status === 'rejected') bg-red-100 text-red-600 @else bg-yellow-100 text-yellow-600 @endif">
                        {{ ucfirst($payment->status) }}
                    </span>
                </div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="bg-white rounded-2xl shadow-card p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Active Pairings</h2>
        @if($user->pairings->isEmpty())
            <p class="text-gray-500">No pairings yet</p>
        @else
            <div class="space-y-3">
                @foreach($user->pairings as $pairing)
                <div class="flex justify-between p-3 bg-gray-50 rounded-lg">
                    <div>
                        <p class="font-medium">{{ $pairing->product->name }}</p>
                        <p class="text-xs text-gray-500">Qty: {{ $pairing->quantity }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">₦{{ number_format($pairing->total_price, 0) }}</p>
                        <span class="text-xs px-2 py-0.5 rounded-full @if($pairing->status === 'active') bg-green-100 text-green-600 @else bg-gray-100 text-gray-600 @endif">
                            {{ ucfirst($pairing->status) }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endsection