@extends('layouts.app')
@section('title', 'Store Orders')
@section('page-title', 'Online Store Orders')

@section('content')
<div class="flex items-center justify-between mb-5">
    <div class="flex gap-2">
        <form method="GET" class="flex gap-2">
            <select name="status" class="form-input w-36 text-sm py-2" onchange="this.form.submit()">
                <option value="">All Status</option>
                @foreach(['pending','confirmed','preparing','ready','delivered','cancelled'] as $s)
                <option value="{{ $s }}" {{ request('status') === $s ? 'selected':'' }}>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
            <input type="date" name="date" value="{{ request('date') }}" class="form-input w-36 text-sm py-2" onchange="this.form.submit()">
        </form>
    </div>
    <a href="{{ route('storefront.admin.index') }}" class="btn-secondary btn-sm">← Store Dashboard</a>
</div>

<div class="card p-0 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="table-th">Order #</th>
                    <th class="table-th">Customer</th>
                    <th class="table-th">Items</th>
                    <th class="table-th text-right">Amount</th>
                    <th class="table-th">Payment</th>
                    <th class="table-th">Status</th>
                    <th class="table-th">Time</th>
                    <th class="table-th text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($orders as $order)
                <tr class="hover:bg-slate-50 transition-colors {{ $order->status === 'pending' ? 'bg-amber-50/30' : '' }}">
                    <td class="table-td">
                        <a href="{{ route('storefront.admin.orders.show', $order) }}" class="font-bold text-brand-600 hover:underline">
                            {{ $order->order_number }}
                        </a>
                        @if($order->status === 'pending')
                        <span class="block text-xs text-amber-600 font-medium animate-pulse">• New</span>
                        @endif
                    </td>
                    <td class="table-td">
                        <p class="font-medium">{{ $order->customer_name }}</p>
                        <p class="text-xs text-slate-400">{{ $order->customer_phone }}</p>
                    </td>
                    <td class="table-td text-slate-500">{{ $order->items->count() }} item(s)</td>
                    <td class="table-td text-right font-bold">₹{{ number_format($order->total_amount, 2) }}</td>
                    <td class="table-td">
                        <span class="{{ $order->payment_status === 'paid' ? 'badge-green' : 'badge-yellow' }} text-xs capitalize">
                            {{ $order->payment_mode }} · {{ $order->payment_status }}
                        </span>
                    </td>
                    <td class="table-td">
                        <span class="badge text-xs {{ match($order->status) {
                            'pending'    => 'bg-amber-100 text-amber-800',
                            'confirmed'  => 'bg-blue-100 text-blue-800',
                            'preparing'  => 'bg-purple-100 text-purple-800',
                            'ready'      => 'bg-indigo-100 text-indigo-800',
                            'delivered'  => 'bg-emerald-100 text-emerald-800',
                            'cancelled'  => 'bg-red-100 text-red-800',
                            default      => 'bg-slate-100 text-slate-700'
                        } }}">{{ ucfirst($order->status) }}</span>
                    </td>
                    <td class="table-td text-xs text-slate-400">{{ $order->created_at->diffForHumans() }}</td>
                    <td class="table-td text-right">
                        <a href="{{ route('storefront.admin.orders.show', $order) }}" class="btn-secondary btn-sm py-1 px-2 text-xs">View</a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="py-12 text-center text-slate-400">
                    <p class="font-medium">No orders yet</p>
                    <p class="text-sm mt-1">Share your store link to start receiving orders</p>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($orders->hasPages())
    <div class="p-4 border-t border-slate-100">{{ $orders->links() }}</div>
    @endif
</div>
@endsection