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

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

    {{-- Filters --}}
    <form method="GET" class="bg-white rounded-xl border border-slate-200 p-4 flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs font-medium text-slate-500 mb-1">Search</label>
            <input type="text" name="search" value="{{ request('search') }}"
                placeholder="Order # or phone..."
                class="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 w-48">
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-500 mb-1">Status</label>
            <select name="status" class="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">All</option>
                @foreach(['pending','confirmed','cancelled','refunded'] as $s)
                <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-500 mb-1">From</label>
            <input type="date" name="from" value="{{ request('from') }}"
                class="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-500 mb-1">To</label>
            <input type="date" name="to" value="{{ request('to') }}"
                class="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
        </div>
        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">Filter</button>
        <a href="{{ route('admin.orders.index') }}" class="px-4 py-2 bg-slate-100 text-slate-600 text-sm font-medium rounded-lg hover:bg-slate-200 transition-colors">Reset</a>
    </form>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr class="text-left text-xs text-slate-500 font-medium">
                        <th class="px-5 py-3">Order #</th>
                        <th class="px-5 py-3">Customer</th>
                        <th class="px-5 py-3">Amount</th>
                        <th class="px-5 py-3">Payment</th>
                        <th class="px-5 py-3">Status</th>
                        <th class="px-5 py-3">Date</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($orders as $order)
                    <tr class="hover:bg-slate-50">
                        <td class="px-5 py-3.5 font-medium text-indigo-600">#{{ $order->shopify_order_number ?? $order->id }}</td>
                        <td class="px-5 py-3.5">
                            <div class="font-medium text-slate-700">{{ $order->customer?->first_name }} {{ $order->customer?->last_name }}</div>
                            <div class="text-xs text-slate-400">{{ $order->customer?->phone }}</div>
                        </td>
                        <td class="px-5 py-3.5 font-semibold">₹{{ number_format($order->total_amount, 2) }}</td>
                        <td class="px-5 py-3.5">
                            @if($order->payments->isNotEmpty())
                            <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                                {{ ucfirst($order->payments->first()->status) }}
                            </span>
                            @endif
                        </td>
                        <td class="px-5 py-3.5">
                            <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-600'  => true,
                            ])>{{ ucfirst($order->status) }}</span>
                        </td>
                        <td class="px-5 py-3.5 text-slate-500 text-xs">{{ $order->created_at->format('d M Y, h:i A') }}</td>
                        <td class="px-5 py-3.5">
                            <a href="{{ route('admin.orders.show', $order->id) }}"
                               class="text-indigo-600 hover:text-indigo-700 text-xs font-medium">View →</a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="px-5 py-12 text-center text-slate-400">No orders found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($orders->hasPages())
        <div class="px-5 py-4 border-t border-slate-100">{{ $orders->links() }}</div>
        @endif
    </div>
</div>
@endsection