@extends('layouts.admin')

@section('title', 'Orders · Aromaniacs ERP')
@section('overline', 'Sales')
@section('heading', 'Orders')

@section('content')
    <section class="card mb-6">
        <form method="GET" action="{{ route('admin.orders.index') }}" class="grid grid-cols-1 lg:grid-cols-12 gap-3 items-end">
            <div class="lg:col-span-4">
                <label class="label block mb-1" style="color: var(--color-ink-40);">Search</label>
                <input type="text" name="q" value="{{ $search }}" class="input" placeholder="Order number, customer, phone...">
            </div>
            <div class="lg:col-span-3">
                <label class="label block mb-1" style="color: var(--color-ink-40);">Status</label>
                <select name="status" class="input">
                    <option value="">All</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s->value }}" @selected($status === $s->value)>{{ $s->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="lg:col-span-3">
                <label class="label block mb-1" style="color: var(--color-ink-40);">Payment</label>
                <select name="payment_status" class="input">
                    <option value="">All</option>
                    @foreach ($paymentStatuses as $ps)
                        <option value="{{ $ps->value }}" @selected($payment === $ps->value)>{{ $ps->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div class="lg:col-span-2 flex gap-2 justify-end">
                <button type="submit" class="btn btn-ghost btn-icon" title="Filter orders" aria-label="Filter orders">
                    <i class="fi fi-rr-filter" aria-hidden="true"></i>
                </button>
                <a href="{{ route('admin.orders.create') }}" class="btn btn-primary btn-icon" title="Create order" aria-label="Create order">
                    <i class="fi fi-rr-plus" aria-hidden="true"></i>
                </a>
            </div>
        </form>
    </section>

    <section class="card">
        @if ($orders->isEmpty())
            <div class="rounded-md border border-dashed px-6 py-12 text-center" style="border-color: var(--color-ink-12);">
                <p class="text-lg">No orders yet.</p>
                <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Click "New Order" to log a sale and decrement stock.</p>
            </div>
        @else
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Date</th>
                        <th>Customer</th>
                        <th>Source</th>
                        <th>Status</th>
                        <th>Payment</th>
                        <th style="text-align: right;">Total</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($orders as $order)
                        <tr>
                            <td class="font-semibold">{{ $order->order_number }}</td>
                            <td style="color: var(--color-ink-70);">{{ optional($order->placed_at)->format('d M Y') }}</td>
                            <td>
                                <div class="font-semibold">{{ $order->customer_name }}</div>
                                <div class="text-xs" style="color: var(--color-ink-40);">{{ $order->customer_phone ?? '—' }}</div>
                            </td>
                            <td style="color: var(--color-ink-70);">{{ $order->source?->label() }}</td>
                            <td>
                                @php
                                    $statusVal = $order->status?->value;
                                @endphp
                                @if ($statusVal === 'pending')
                                    <span class="badge badge-muted">Pending</span>
                                @elseif ($statusVal === 'cancelled')
                                    <span class="badge" style="background: rgba(180,35,24,0.1); color: #b42318; border-color: rgba(180,35,24,0.35);">Cancelled</span>
                                @else
                                    <span class="badge">{{ $order->status->label() }}</span>
                                @endif
                            </td>
                            <td>
                                @if ($order->payment_status?->value === 'paid')
                                    <span class="badge">Paid</span>
                                @elseif ($order->payment_status?->value === 'partial')
                                    <span class="badge badge-muted">Partial</span>
                                @else
                                    <span class="badge badge-muted">{{ $order->payment_status?->label() }}</span>
                                @endif
                            </td>
                            <td style="text-align: right;" class="font-semibold">{{ number_format((float) $order->total, 2) }}</td>
                            <td>
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.orders.show', $order) }}" class="btn btn-ghost btn-icon btn-icon-sm" title="Open order" aria-label="Open order">
                                        <i class="fi fi-rr-arrow-up-right-from-square" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-5">
                {{ $orders->links() }}
            </div>
        @endif
    </section>
@endsection