@extends('admin.layouts.app')
@section('title', 'Dashboard')

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

    {{-- Stat cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
        @php
        $cards = [
            ['label' => 'Orders Today',    'value' => $stats['orders_today'],             'icon' => '🛒', 'color' => 'bg-indigo-50 text-indigo-600'],
            ['label' => 'Revenue Today',   'value' => '₹'.number_format($stats['revenue_today'],2), 'icon' => '💰', 'color' => 'bg-green-50 text-green-600'],
            ['label' => 'Orders (Month)',  'value' => $stats['orders_month'],              'icon' => '📦', 'color' => 'bg-amber-50 text-amber-600'],
            ['label' => 'Conversion Rate', 'value' => $stats['conversion_rate'].'%',       'icon' => '📈', 'color' => 'bg-purple-50 text-purple-600'],
        ];
        @endphp

        @foreach($cards as $card)
        <div class="bg-white rounded-xl border border-slate-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm font-medium text-slate-500">{{ $card['label'] }}</span>
                <span class="text-xl {{ $card['color'] }} p-2 rounded-lg">{{ $card['icon'] }}</span>
            </div>
            <div class="text-2xl font-bold text-slate-800">{{ $card['value'] }}</div>
        </div>
        @endforeach
    </div>

    {{-- Funnel + Orders --}}
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5">

        {{-- Checkout Funnel --}}
        <div class="bg-white rounded-xl border border-slate-200 p-5">
            <h3 class="font-semibold text-slate-700 mb-4">Today's Funnel</h3>
            @php
            $funnel = $stats['funnel'];
            $funnelSteps = [
                ['label' => 'Checkout Started',   'key' => 'checkout_started'],
                ['label' => 'OTP Verified',        'key' => 'otp_verified'],
                ['label' => 'Payment Initiated',   'key' => 'payment_initiated'],
                ['label' => 'Payment Success',     'key' => 'payment_success'],
            ];
            $max = max(1, $funnel['checkout_started'] ?? 1);
            @endphp
            <div class="space-y-3">
                @foreach($funnelSteps as $step)
                @php $val = $funnel[$step['key']] ?? 0; $pct = round(($val / $max) * 100); @endphp
                <div>
                    <div class="flex justify-between text-xs mb-1">
                        <span class="text-slate-600">{{ $step['label'] }}</span>
                        <span class="font-semibold text-slate-700">{{ $val }}</span>
                    </div>
                    <div class="h-2 bg-slate-100 rounded-full">
                        <div class="h-2 bg-indigo-500 rounded-full" style="width: {{ $pct }}%"></div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Recent Orders --}}
        <div class="xl:col-span-2 bg-white rounded-xl border border-slate-200 p-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-slate-700">Recent Orders</h3>
                <a href="{{ route('admin.orders.index') }}" class="text-indigo-600 hover:text-indigo-700 text-sm font-medium">View all →</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-xs text-slate-400 border-b border-slate-100">
                            <th class="pb-3 font-medium">Order</th>
                            <th class="pb-3 font-medium">Customer</th>
                            <th class="pb-3 font-medium">Amount</th>
                            <th class="pb-3 font-medium">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @forelse($recentOrders as $order)
                        <tr class="hover:bg-slate-50 cursor-pointer" onclick="window.location='{{ route('admin.orders.show', $order->id) }}'">
                            <td class="py-3 font-medium text-indigo-600">#{{ $order->shopify_order_number ?? $order->id }}</td>
                            <td class="py-3 text-slate-600">{{ $order->customer?->first_name ?? '—' }} {{ $order->customer?->last_name ?? '' }}</td>
                            <td class="py-3 font-semibold">₹{{ number_format($order->total_amount, 2) }}</td>
                            <td class="py-3">
                                <span @class([
                                    'px-2 py-0.5 rounded-full text-xs font-medium',
                                    'bg-green-100 text-green-700'  => $order->status === 'confirmed',
                                    'bg-amber-100 text-amber-700'  => $order->status === 'pending',
                                    'bg-red-100 text-red-700'      => $order->status === 'cancelled',
                                    'bg-slate-100 text-slate-700'  => !in_array($order->status, ['confirmed','pending','cancelled']),
                                ])>{{ ucfirst($order->status) }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="py-8 text-center text-slate-400">No orders yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection