📄 index.blade.php

<x-vendor-layout>
    <x-slot name="title">Orders</x-slot>

    <div class="vp-ph">
        <h1>Orders</h1>
    </div>

    <div class="vp-card">
        {{-- Filters --}}
        <form method="GET" class="vp-filters">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search order number…">
            <select name="status">
                <option value="">All Statuses</option>
                @foreach(['pending','confirmed','processing','shipped','delivered','cancelled'] as $s)
                    <option value="{{ $s }}" {{ request('status') == $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
            <button type="submit" class="vp-btn vp-btn-primary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                Filter
            </button>
            @if(request()->hasAny(['search','status']))
                <a href="{{ route('vendor.orders') }}" class="vp-btn vp-btn-secondary">Clear</a>
            @endif
        </form>

        {{-- Table --}}
        <div class="vp-table-wrap">
            <table class="vp-table">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Customer</th>
                        <th>Items</th>
                        <th>Total</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $order)
                    <tr>
                        <td>
                            <span style="font-weight:600;color:var(--tx)">#{{ $order->order_number }}</span>
                        </td>
                        <td style="color:var(--tx)">{{ $order->user->name ?? 'Guest' }}</td>
                        <td style="color:var(--mu)">{{ $order->items->count() }} item(s)</td>
                        <td style="font-weight:700;color:var(--ac)">Rs. {{ number_format($order->total_amount, 0) }}</td>
                        <td style="color:var(--mu);white-space:nowrap">{{ $order->created_at->format('d M Y') }}</td>
                        <td>
                            @php
                                $pc = match($order->status) {
                                    'delivered'  => 'vp-pill-green',
                                    'shipped'    => 'vp-pill-blue',
                                    'cancelled'  => 'vp-pill-red',
                                    'processing' => 'vp-pill-purple',
                                    'confirmed'  => 'vp-pill-teal',
                                    default      => 'vp-pill-yellow',
                                };
                            @endphp
                            <span class="vp-pill {{ $pc }}">{{ ucfirst($order->status) }}</span>
                        </td>
                        <td>
                            <div class="vp-table-actions">
                                <a href="{{ route('orders.track', $order->uuid) }}" class="vp-btn vp-btn-secondary vp-btn-sm" target="_blank">View</a>
                                <a href="{{ route('vendor.orders.invoice', $order) }}" class="vp-btn vp-btn-secondary vp-btn-sm">Invoice</a>
                                @if(in_array($order->status, ['confirmed', 'processing']))
                                <form action="{{ route('vendor.orders.dispatch', $order) }}" method="POST" style="display:inline">
                                    @csrf
                                    <button type="submit" class="vp-btn vp-btn-primary vp-btn-sm"
                                            onclick="return confirm('Mark this order as dispatched?')">
                                        Dispatch
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">
                            <div class="vp-empty">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="1.5" style="margin:0 auto 10px"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                                <div class="vp-empty-title">No orders found</div>
                                <div class="vp-empty-sub">Orders matching your filters will appear here.</div>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="vp-pag">
            <span class="vp-pag-info">Showing {{ $orders->firstItem() ?? 0 }}–{{ $orders->lastItem() ?? 0 }} of {{ $orders->total() }} orders</span>
            {{ $orders->withQueryString()->links() }}
        </div>
    </div>
</x-vendor-layout>