@extends('mainlayout.layout')

@section('title', config('app.name') . ' | Orders')
@section('topbar-search', 'enabled')

@section('content')
@php
    $ordersIndexUrl = request()->routeIs('support.orders.index')
        ? route('support.orders.index')
        : url('/property/list/orders');
@endphp
<main class="portal-workspace portal-light-type" data-async-directory>
    <header class="portal-page-header">
        <div>
            <span class="portal-eyebrow">Order management</span>
            <h1>Orders</h1>
            <p>Monitor order value, progress and customer purchase activity.</p>
        </div>
    </header>

    <section class="portal-kpi-grid portal-kpi-grid--four" aria-label="Order overview">
        <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx bx-receipt"></i></span><span class="portal-kpi-label">Total orders</span><strong>{{ number_format($metrics['total']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon tone-orange"><i class="bx bx-time-five"></i></span><span class="portal-kpi-label">Current orders</span><strong>{{ number_format($metrics['current']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon tone-dark"><i class="bx bx-check-circle"></i></span><span class="portal-kpi-label">Completed orders</span><strong>{{ number_format($metrics['completed']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx bx-wallet"></i></span><span class="portal-kpi-label">Total order value</span><strong>TZS {{ number_format($metrics['value']) }}</strong></article>
    </section>

    <section class="portal-card" data-async-list>
        <form class="portal-filter-bar portal-filter-bar--list" action="{{ $ordersIndexUrl }}" method="GET" data-async-filter>
            @if(request()->filled('per_page'))<input type="hidden" name="per_page" value="{{ request('per_page') }}">@endif
            <label class="portal-search-field">
                <i class="bx bx-search"></i>
                <input type="search" name="search" value="{{ request('search') }}" placeholder="Search order ID, customer, phone or plot" aria-label="Search orders" autocomplete="off" data-auto-submit>
            </label>
            <select name="status" aria-label="Filter by status" data-auto-change>
                <option value="">All statuses</option>
                <option value="0" @selected(request('status') === '0')>Generated</option>
                <option value="1" @selected(request('status') === '1')>Initialized</option>
                <option value="2" @selected(request('status') === '2')>Completed</option>
                <option value="3" @selected(request('status') === '3')>Expired</option>
                <option value="4" @selected(request('status') === '4')>Cancelled</option>
                <option value="5" @selected(request('status') === '5')>Refunded</option>
            </select>
            <button class="btn btn-mlk-primary" type="submit"><i class="bx bx-filter-alt"></i> Apply</button>
            @if(request()->filled('search') || request()->filled('status'))
                <a class="btn btn-mlk-outline" href="{{ $ordersIndexUrl }}" data-async-clear>Clear</a>
            @endif
        </form>

        <header class="portal-card-header">
            <div>
                <h2>{{ request()->filled('search') || request()->filled('status') ? 'Matching orders' : 'Recent orders' }}</h2>
                <p>{{ request()->filled('search') || request()->filled('status') ? 'All matching orders, with adjustable page sizes.' : 'Newest orders first. Choose how many results to show per page.' }}</p>
            </div>
            <span class="portal-status portal-status--neutral">
                @if($orders->total()) {{ number_format($orders->firstItem()) }}–{{ number_format($orders->lastItem()) }} of {{ number_format($orders->total()) }} @else 0 orders @endif
            </span>
        </header>

        <div class="portal-directory-progress" data-async-progress role="status" aria-live="polite"><span></span> Loading orders…</div>
        <div class="table-responsive">
            <table class="table portal-table">
                <thead><tr><th>Order ID</th><th>Customer</th><th>Property &amp; plot</th><th>Payment plan</th><th>Amount</th><th>Status</th><th>Created</th></tr></thead>
                <tbody>
                @forelse($orders as $order)
                    @php
                        $orderUrl = request()->routeIs('support.orders.index')
                            ? route('support.orders.show', $order)
                            : url('/property/orders/view/' . encrypt($order->id));
                        $customerName = trim(optional($order->user)->first_name . ' ' . optional($order->user)->middle_name . ' ' . optional($order->user)->last_name);
                        $statusLabel = $order->status_description ?: ([0 => 'Generated', 1 => 'Initialized', 2 => 'Completed', 3 => 'Expired', 4 => 'Cancelled', 5 => 'Refunded'][$order->status] ?? 'Status ' . $order->status);
                    @endphp
                    <tr class="portal-clickable-row" data-href="{{ $orderUrl }}" tabindex="0" role="link" aria-label="View order {{ $order->referenceid ?: $order->id }}">
                        <td><a href="{{ $orderUrl }}">{{ $order->referenceid ?: '#' . $order->id }}</a><small>Internal #{{ $order->id }}</small></td>
                        <td>{{ $customerName ?: 'Unknown customer' }}<small>{{ optional($order->user)->phone ?: ($order->phonenumber ?: ($order->msisdn ?: 'Phone not available')) }}</small></td>
                        <td>{{ optional($order->property)->name ?: 'Property unavailable' }}<small>Plot {{ optional($order->plot)->plotnumber ?: 'not selected' }}</small></td>
                        <td>{{ ucfirst($order->order_type ?: 'Not specified') }}</td>
                        <td>TZS {{ number_format((int) $order->amount) }}</td>
                        <td><span class="portal-status">{{ $statusLabel }}</span>@if($order->ownerDisbursementOrder)<small class="text-success">Paid to owner</small>@elseif((int) $order->status === 2)<small class="text-muted">Awaiting disbursement</small>@endif</td>
                        <td>{{ optional($order->created_at)->format('d M Y') ?: '—' }}<small>{{ optional($order->created_at)->format('H:i') }}</small></td>
                    </tr>
                @empty
                    <tr><td colspan="7"><div class="portal-empty portal-empty--muted compact">No orders match the current search.</div></td></tr>
                @endforelse
                </tbody>
            </table>
        </div>

        @include('partials.directory-pagination', ['paginator' => $orders])
    </section>
</main>
@endsection

@push('scripts')
<script src="{{ asset('/web/assets/js/portal-async-directory.js') }}?v=2" defer></script>
@endpush