@extends('admin.layout')

@section('title', 'Dashboard Overview')

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

    <!-- KPI Metric Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        
        <div class="bg-white rounded-3xl border border-slate-200/90 p-6 shadow-xs flex items-center justify-between">
            <div class="space-y-1">
                <span class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Total Sales</span>
                <div class="text-2xl font-extrabold text-slate-900">₹{{ number_format($totalRevenue, 2) }}</div>
                <div class="text-[11px] font-semibold text-emerald-600">{{ $totalOrders }} Total Orders</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-indian-rupee-sign"></i>
            </div>
        </div>

        <div class="bg-white rounded-3xl border border-slate-200/90 p-6 shadow-xs flex items-center justify-between">
            <div class="space-y-1">
                <span class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Classic Formulations</span>
                <div class="text-2xl font-extrabold text-slate-900">{{ number_format($totalProducts) }}</div>
                <div class="text-[11px] font-semibold text-slate-500">Unani Pharmacopoeia</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-pills"></i>
            </div>
        </div>

        <div class="bg-white rounded-3xl border border-slate-200/90 p-6 shadow-xs flex items-center justify-between">
            <div class="space-y-1">
                <span class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Proprietary Drugs</span>
                <div class="text-2xl font-extrabold text-slate-900">{{ number_format($totalSbProducts) }}</div>
                <div class="text-[11px] font-semibold text-slate-500">Saba Remedies Formulas</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-box-open"></i>
            </div>
        </div>

        <div class="bg-white rounded-3xl border border-slate-200/90 p-6 shadow-xs flex items-center justify-between">
            <div class="space-y-1">
                <span class="text-[11px] font-bold uppercase tracking-wider text-slate-400">Registered Patients</span>
                <div class="text-2xl font-extrabold text-slate-900">{{ number_format($totalCustomers) }}</div>
                <div class="text-[11px] font-semibold text-slate-500">Customer Accounts</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-purple-50 text-purple-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>

    </div>

    <!-- Recent Orders & Appointments Split Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <!-- Recent Orders Table (8 cols) -->
        <div class="lg:col-span-8 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <h3 class="font-extrabold text-slate-900 text-sm">Recent Customer Orders</h3>
                <a href="{{ route('admin.orders.index') }}" class="text-xs font-bold text-emerald-700 hover:underline">View All &rarr;</a>
            </div>

            @if($recentOrders->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">Customer</th>
                                <th class="pb-3 font-bold">Amount</th>
                                <th class="pb-3 font-bold">Status</th>
                                <th class="pb-3 font-bold text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($recentOrders as $order)
                                <tr class="hover:bg-slate-50/60 transition-colors">
                                    <td class="py-3 font-mono font-bold text-slate-900">#{{ $order->order_id }}</td>
                                    <td class="py-3 font-semibold text-slate-700">{{ $order->name }}</td>
                                    <td class="py-3 font-bold text-slate-900">₹{{ number_format((float)($order->total_price ?? 0), 2) }}</td>
                                    <td class="py-3">
                                        @if($order->payment_status === 'SUCCESS' || $order->payment_status == 1)
                                            <span class="bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full text-[10px] font-bold">Paid</span>
                                        @else
                                            <span class="bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full text-[10px] font-bold">{{ $order->payment_status ?? 'Pending' }}</span>
                                        @endif
                                    </td>
                                    <td class="py-3 text-right whitespace-nowrap">
                                        <a href="{{ route('admin.orders.show', ['id' => $order->id]) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-emerald-50 hover:text-emerald-700 text-slate-700 font-bold transition-all text-xs">
                                            <i class="fa-solid fa-eye text-[11px] text-emerald-600"></i> Details
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-xs text-slate-400 py-6 text-center">No orders recorded yet.</p>
            @endif
        </div>

        <!-- Consultation Enquiries Column (4 cols) -->
        <div class="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <h3 class="font-extrabold text-slate-900 text-sm">Consultations</h3>
                <a href="{{ route('admin.appointments') }}" class="text-xs font-bold text-emerald-700 hover:underline">View All &rarr;</a>
            </div>

            @if($recentAppointments->count() > 0)
                <div class="space-y-3">
                    @foreach($recentAppointments as $app)
                        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100 space-y-1 text-xs">
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-slate-900">{{ $app->name }}</span>
                                <span class="text-[10px] text-slate-400">{{ $app->date }}</span>
                            </div>
                            <p class="text-slate-500 text-[11px]"><i class="fa-solid fa-phone text-emerald-600 mr-1"></i> {{ $app->phone }}</p>
                            @if($app->message)
                                <p class="text-slate-600 text-[11px] line-clamp-1 italic">"{{ $app->message }}"</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-xs text-slate-400 py-6 text-center">No pending appointment requests.</p>
            @endif
        </div>

    </div>

</div>
@endsection