@extends('admin.layouts.app')

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

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Customer Details</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $customer->name }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.customers.edit', $customer) }}" class="px-4 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition-colors">
                Edit Customer
            </a>
            <a href="{{ route('admin.customers.index') }}" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                Back to List
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Customer Info -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
            <div class="text-center mb-6">
                <img src="https://ui-avatars.com/api/?name={{ urlencode($customer->name) }}&background=6366f1&color=fff&size=128" class="w-24 h-24 rounded-2xl mx-auto mb-4">
                <h2 class="text-xl font-bold text-slate-800 dark:text-white">{{ $customer->name }}</h2>
                <p class="text-slate-500 dark:text-slate-400">Customer since {{ $customer->created_at->format('M Y') }}</p>
            </div>
            
            <div class="space-y-4">
                <div class="flex items-center">
                    <i data-lucide="phone" class="w-5 h-5 text-slate-400 mr-3"></i>
                    <span class="text-slate-700 dark:text-slate-300">{{ $customer->phone }}</span>
                </div>
                @if($customer->email)
                <div class="flex items-center">
                    <i data-lucide="mail" class="w-5 h-5 text-slate-400 mr-3"></i>
                    <span class="text-slate-700 dark:text-slate-300">{{ $customer->email }}</span>
                </div>
                @endif
                <div class="flex items-start">
                    <i data-lucide="map-pin" class="w-5 h-5 text-slate-400 mr-3 mt-0.5"></i>
                    <span class="text-slate-700 dark:text-slate-300">
                        {{ $customer->address }}<br>
                        {{ $customer->area?->name }}, {{ $customer->district?->name }}
                    </span>
                </div>
            </div>

            <div class="mt-6 pt-6 border-t border-slate-200 dark:border-slate-700">
                <div class="grid grid-cols-2 gap-4 text-center">
                    <div>
                        <p class="text-2xl font-bold text-slate-800 dark:text-white">{{ $customer->orders->count() }}</p>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Total Orders</p>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-slate-800 dark:text-white">৳{{ number_format($customer->orders->sum('total')) }}</p>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Total Spent</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order History -->
        <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="p-6 border-b border-slate-200 dark:border-slate-700">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Order History</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider border-b border-slate-200 dark:border-slate-700">
                            <th class="px-6 py-4">Order ID</th>
                            <th class="px-6 py-4">Date</th>
                            <th class="px-6 py-4">Items</th>
                            <th class="px-6 py-4">Total</th>
                            <th class="px-6 py-4">Status</th>
                            <th class="px-6 py-4">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                        @forelse($customer->orders as $order)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                            <td class="px-6 py-4 font-medium text-slate-800 dark:text-white">#{{ $order->id }}</td>
                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ $order->created_at->format('M d, Y') }}</td>
                            <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ $order->items->count() }}</td>
                            <td class="px-6 py-4 font-semibold text-slate-800 dark:text-white">৳{{ number_format($order->total) }}</td>
                            <td class="px-6 py-4">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
                                        'processing' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
                                        'completed' => 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400',
                                        'cancelled' => 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400',
                                        'returned' => 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400',
                                    ];
                                @endphp
                                <span class="px-3 py-1 text-xs font-medium {{ $statusColors[$order->status] ?? 'bg-slate-100 text-slate-700' }} rounded-full">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.orders.show', $order) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View</a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
                                No orders yet
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection