@extends('layouts.user', ['heading' => 'Shop'])

@section('content')
    <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
        <div class="user-card bg-gradient-to-r from-indigo-600 to-violet-600 p-4 text-white">
            <div class="text-xs uppercase tracking-wide text-indigo-100">Order Snapshot</div>
            <div class="mt-2 text-2xl font-semibold">{{ number_format((int) $summary['total_orders']) }}</div>
            <div class="text-xs text-indigo-100">Total user orders</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Pending / Processing</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['pending_orders'] }}">0</div>
            <a href="{{ route('user.orders', ['status' => 'pending_payment']) }}" class="mt-2 inline-block text-xs text-[var(--user-primary)]">View Orders</a>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Delivered Orders</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['delivered_orders'] }}">0</div>
            <a href="{{ route('user.orders', ['status' => 'delivered']) }}" class="mt-2 inline-block text-xs text-[var(--user-primary)]">View Delivered</a>
        </div>
    </div>

    <form method="GET" class="mb-4 grid grid-cols-1 gap-2 md:grid-cols-4">
        <input name="q" value="{{ $search }}" placeholder="Search by product name or SKU" class="rounded border border-[var(--user-border)] p-2 text-sm md:col-span-2">
        <select name="category" class="rounded border border-[var(--user-border)] p-2 text-sm">
            <option value="">All Categories</option>
            @foreach($categories as $cat)
                <option value="{{ $cat->id }}" @selected((string) $category === (string) $cat->id)>{{ $cat->name }}</option>
            @endforeach
        </select>
        <div class="flex gap-2">
            <button class="rounded bg-[var(--user-primary)] px-4 py-2 text-sm text-white">Filter</button>
            <a href="{{ route('user.shop') }}" class="rounded border border-[var(--user-border)] px-4 py-2 text-sm">Reset</a>
        </div>
    </form>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        @forelse($products as $product)
            <div class="user-card p-4">
                <div class="h-40 overflow-hidden rounded-xl bg-slate-100">
                    @if($product->image_path)
                        <img src="{{ asset('storage/'.$product->image_path) }}" alt="{{ $product->name }}" class="h-full w-full object-cover">
                    @else
                        <div class="flex h-full items-center justify-center text-sm text-slate-400">No Image</div>
                    @endif
                </div>
                <div class="mt-3 text-sm font-semibold">{{ $product->name }}</div>
                <div class="text-xs text-slate-500">SKU: {{ $product->sku }}</div>
                <div class="text-xs text-slate-500">Category: {{ $product->category?->name ?? 'General' }}</div>
                <div class="mt-2 text-sm text-slate-600">BV: {{ number_format((float) $product->bv, 2) }}</div>
                <div class="mt-1 text-lg font-bold">Rs. {{ number_format((float) $product->dp_price, 2) }}</div>
                <div class="mt-1 text-xs {{ (int) $product->stock > 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                    Stock: {{ $product->stock }}
                </div>

                <form method="POST" action="{{ route('user.shop.order') }}" class="mt-3 space-y-2">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <div class="flex gap-2">
                        <input type="number" name="quantity" min="1" max="100" value="1" class="w-20 rounded border border-[var(--user-border)] p-2 text-xs">
                        <select name="payment_method" class="flex-1 rounded border border-[var(--user-border)] p-2 text-xs">
                            <option value="wallet">Shopping Wallet</option>
                            <option value="upi">UPI</option>
                            <option value="cod">Cash on Delivery</option>
                        </select>
                    </div>
                    <button type="submit" class="w-full rounded bg-emerald-600 px-3 py-2 text-xs font-semibold text-white" {{ (int) $product->stock < 1 ? 'disabled' : '' }}>
                        {{ (int) $product->stock < 1 ? 'Out of Stock' : 'Place Order' }}
                    </button>
                </form>
            </div>
        @empty
            <div class="user-card p-6 text-center text-sm text-[var(--user-muted)] md:col-span-2 lg:col-span-3 xl:col-span-4">
                No active products found.
            </div>
        @endforelse
    </div>

    <div class="mt-4">{{ $products->links() }}</div>
@endsection