@extends('admin.layout')

@section('title', 'Customer Profile: ' . $customer->fname . ' ' . $customer->lname)

@section('content')
<div class="space-y-6">

    <div class="flex items-center justify-between bg-white p-4 rounded-3xl border border-slate-200 shadow-xs">
        <a href="{{ route('admin.customers.index') }}" class="text-xs font-bold text-slate-500 hover:text-slate-900">&larr; Back to Customers</a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <!-- Profile Card (4 cols) -->
        <div class="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4 text-xs">
            <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                <div class="w-12 h-12 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-bold text-base">
                    {{ substr($customer->fname, 0, 1) }}
                </div>
                <div>
                    <h3 class="font-bold text-slate-900 text-sm">{{ $customer->fname }} {{ $customer->lname }}</h3>
                    <span class="text-slate-400 text-[11px]">User ID: #{{ $customer->id }}</span>
                </div>
            </div>

            <div class="space-y-2 text-slate-600">
                <div><strong>Email:</strong> {{ $customer->email }}</div>
                <div><strong>Phone:</strong> {{ $customer->phone }}</div>
                <div><strong>Referral Code:</strong> <span class="font-mono font-bold text-emerald-700">{{ $customer->ref_code ?? 'None' }}</span></div>
            </div>
        </div>

        <!-- Orders History (8 cols) -->
        <div class="lg:col-span-8 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4">
            <h3 class="font-extrabold text-slate-900 text-sm border-b border-slate-100 pb-3">Purchase History</h3>

            @if($orders->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs">
                        <thead>
                            <tr class="text-slate-400 border-b border-slate-100">
                                <th class="pb-3 font-bold">Order ID</th>
                                <th class="pb-3 font-bold">Amount</th>
                                <th class="pb-3 font-bold">Status</th>
                                <th class="pb-3 font-bold">Date</th>
                                <th class="pb-3 font-bold text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($orders as $o)
                                <tr>
                                    <td class="py-3 font-mono font-bold text-slate-900">#{{ $o->order_id }}</td>
                                    <td class="py-3 font-bold text-slate-900">₹{{ number_format((float)$o->order_price, 2) }}</td>
                                    <td class="py-3">
                                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold {{ $o->payment_status === 'SUCCESS' || $o->payment_status == 1 ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700' }}">
                                            {{ $o->payment_status ?? 'Pending' }}
                                        </span>
                                    </td>
                                    <td class="py-3 text-slate-400 text-[11px]">{{ date('d M Y', strtotime($o->created_date)) }}</td>
                                    <td class="py-3 text-right">
                                        <a href="{{ route('admin.orders.show', ['id' => $o->id]) }}" class="px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-emerald-50 hover:text-emerald-700 font-bold transition-all">Details</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-xs text-slate-400 py-6 text-center">No orders recorded for this patient.</p>
            @endif
        </div>

    </div>

</div>
@endsection