ladill-merchant/resources/views/merchant/orders.blade.php

<x-user-layout>
    <x-slot name="title">Orders</x-slot>
    <div class="space-y-6">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Orders</h1>
            <p class="mt-1 text-sm text-slate-500">Incoming orders across all your storefronts.</p>
        </div>
        <form method="get" class="max-w-md">
            <input type="search" name="q" value="{{ $search }}" placeholder="Search customer, reference…"
                   class="w-full rounded-xl border-slate-200 text-sm focus:border-indigo-500 focus:ring-indigo-500">
        </form>
        @if($bookings->isNotEmpty())
            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
                <div class="border-b border-slate-100 px-6 py-4">
                    <h2 class="font-semibold text-slate-900">Upcoming bookings</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                            <tr>
                                <th class="px-6 py-3">When</th>
                                <th class="px-6 py-3">Customer</th>
                                <th class="px-6 py-3">Service</th>
                                <th class="px-6 py-3">Storefront</th>
                                <th class="px-6 py-3">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($bookings as $booking)
                                <tr>
                                    <td class="px-6 py-4 text-slate-600">{{ $booking->starts_at->format('D j M, g:i A') }}</td>
                                    <td class="px-6 py-4">
                                        <p class="font-medium text-slate-900">{{ $booking->customer_name }}</p>
                                        @if($booking->customer_email)<p class="text-xs text-slate-500">{{ $booking->customer_email }}</p>@endif
                                    </td>
                                    <td class="px-6 py-4 text-slate-600">{{ $booking->service_name }}</td>
                                    <td class="px-6 py-4 text-slate-600">{{ $booking->qrCode?->label }}</td>
                                    <td class="px-6 py-4">
                                        @if($booking->status === \App\Models\QrBooking::STATUS_CONFIRMED)
                                            <form method="post" action="{{ route('merchant.bookings.update-status', $booking) }}" class="inline">
                                                @csrf @method('patch')
                                                <select name="fulfillment_status" onchange="this.form.submit()" class="rounded-lg border-slate-200 text-xs">
                                                    @foreach(\App\Models\QrBooking::FULFILLMENT_STATUSES as $val => $label)
                                                        <option value="{{ $val }}" @selected(($booking->fulfillment_status ?? 'new') === $val)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                            </form>
                                        @else
                                            <span class="text-xs text-amber-600">{{ ucfirst($booking->status) }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if($bookings->hasPages())<div class="border-t border-slate-100 px-6 py-4">{{ $bookings->links() }}</div>@endif
            </div>
        @endif

        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <div class="border-b border-slate-100 px-6 py-4">
                <h2 class="font-semibold text-slate-900">Shop & menu orders</h2>
            </div>
            @if($orders->isEmpty())
                <p class="px-6 py-10 text-sm text-slate-500">No orders yet.</p>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                            <tr>
                                <th class="px-6 py-3">When</th>
                                <th class="px-6 py-3">Customer</th>
                                <th class="px-6 py-3">Storefront</th>
                                <th class="px-6 py-3">Amount</th>
                                <th class="px-6 py-3">Payment</th>
                                <th class="px-6 py-3">Fulfilment</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($orders as $order)
                                <tr>
                                    <td class="px-6 py-4 text-slate-600">{{ $order->paid_at?->format('M j, g:i A') ?? $order->created_at->format('M j, g:i A') }}</td>
                                    <td class="px-6 py-4">
                                        <p class="font-medium text-slate-900">{{ $order->customer_name ?: 'Customer' }}</p>
                                        @if($order->customer_email)
                                            <p class="text-xs text-slate-500">{{ $order->customer_email }}</p>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 text-slate-600">{{ $order->qrCode?->label }}</td>
                                    <td class="px-6 py-4 font-semibold text-slate-900">
                                        GHS {{ number_format((float) ($order->status === \App\Models\QrSaleOrder::STATUS_PAID ? $order->merchant_amount_ghs : $order->amount_ghs), 2) }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $order->status === \App\Models\QrSaleOrder::STATUS_PAID ? 'bg-emerald-50 text-emerald-700' : ($order->status === \App\Models\QrSaleOrder::STATUS_FAILED ? 'bg-red-50 text-red-700' : 'bg-amber-50 text-amber-700') }}">
                                            {{ ucfirst($order->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        @if($order->status === \App\Models\QrSaleOrder::STATUS_PAID)
                                            <form method="post" action="{{ route('merchant.orders.update-status', $order) }}" class="inline">
                                                @csrf
                                                @method('patch')
                                                <select name="fulfillment_status" onchange="this.form.submit()"
                                                        class="rounded-lg border-slate-200 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                                    @foreach(\App\Models\QrSaleOrder::FULFILLMENT_STATUSES as $val => $label)
                                                        <option value="{{ $val }}" @selected(($order->fulfillment_status ?? 'new') === $val)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                            </form>
                                        @else
                                            <span class="text-xs text-slate-400">—</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if($orders->hasPages())
                    <div class="border-t border-slate-100 px-6 py-4">{{ $orders->links() }}</div>
                @endif
            @endif
        </div>
    </div>
</x-user-layout>