@extends('layouts.admin')

@section('content')

@php
    $ordersFilterActive = request()->hasAny(['q', 'status', 'payment_status']);
    $ordersFilterSummary = 'All orders';
    if ($ordersFilterActive) {
        $parts = [];
        if (request('q')) {
            $parts[] = '"' . \Illuminate\Support\Str::limit(request('q'), 12) . '"';
        }
        if (request('status')) {
            $parts[] = ucfirst(request('status'));
        }
        if (request('payment_status')) {
            $parts[] = ucfirst(request('payment_status')) . ' pay';
        }
        $ordersFilterSummary = implode(' · ', $parts);
    }
@endphp

<div class="mb-2 mb-md-4">
    <h4 class="brand-font text-uppercase text-secondary mb-0">Manage Orders</h4>
</div>

<div class="card border-0 shadow-sm rounded-4 p-2 p-md-4 bg-white mb-3 mb-md-4">
    <x-admin-filter-bar
        id="orderFiltersCollapse"
        :action="route('admin.orders.index')"
        :summary="$ordersFilterSummary"
        :active="$ordersFilterActive"
        :clear-url="route('admin.orders.index')">

        <div class="col-12 col-md-4">
            <label class="form-label small text-muted mb-1 d-md-none">Search</label>
            <input type="text" class="form-control form-control-sm rounded-pill px-2 px-md-3 admin-filter-input" name="q" placeholder="Search order ID, phone..." value="{{ request('q') }}">
        </div>
        <div class="col-6 col-md-3">
            <label class="form-label small text-muted mb-1 d-md-none">Delivery</label>
            <select class="form-select form-select-sm rounded-pill px-2 px-md-3 admin-filter-select" name="status">
                <option value="">All Delivery Statuses</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                <option value="processing" {{ request('status') === 'processing' ? 'selected' : '' }}>Processing</option>
                <option value="shipped" {{ request('status') === 'shipped' ? 'selected' : '' }}>Shipped</option>
                <option value="delivered" {{ request('status') === 'delivered' ? 'selected' : '' }}>Delivered</option>
                <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
            </select>
        </div>
        <div class="col-6 col-md-3">
            <label class="form-label small text-muted mb-1 d-md-none">Payment</label>
            <select class="form-select form-select-sm rounded-pill px-2 px-md-3 admin-filter-select" name="payment_status">
                <option value="">All Payment Statuses</option>
                <option value="pending" {{ request('payment_status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="paid" {{ request('payment_status') === 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="failed" {{ request('payment_status') === 'failed' ? 'selected' : '' }}>Failed</option>
            </select>
        </div>
        <div class="col-6 col-md-2">
            <button type="submit" class="btn btn-primary-mj w-100 rounded-pill py-1 py-md-2 btn-sm">
                <i class="bi bi-search d-md-none"></i><span class="d-none d-md-inline">Filter</span><span class="d-md-none ms-1">Apply</span>
            </button>
        </div>
    </x-admin-filter-bar>

    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr class="text-uppercase text-secondary small" style="font-size: 10px;">
                    <th scope="col">Order ID</th>
                    <th scope="col">Recipient</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Total Price</th>
                    <th scope="col">Payment</th>
                    <th scope="col">Delivery</th>
                    <th scope="col" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $ord)
                    <tr>
                        <td class="fw-bold text-secondary">#{{ $ord->order_number }}</td>
                        <td class="small text-muted">{{ $ord->user->name ?? 'Guest Buyer' }}</td>
                        <td class="small text-muted">{{ $ord->phone }}</td>
                        <td class="fw-bold text-secondary">KSh {{ number_format($ord->total_amount) }}</td>
                        <td>
                            @if($ord->payment_status === 'paid')
                                <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2.5 py-1">Paid</span>
                            @elseif($ord->payment_status === 'failed')
                                <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-2.5 py-1">Failed</span>
                            @else
                                <span class="badge bg-warning bg-opacity-10 text-warning rounded-pill px-2.5 py-1">Pending</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-dark text-white rounded-pill px-2.5 py-1">
                                {{ ucfirst($ord->status) }}
                            </span>
                        </td>
                        <td class="text-end">
                            <div class="d-inline-flex gap-1">
                                <a href="{{ route('admin.orders.show', $ord->id) }}" class="btn btn-outline-primary btn-sm rounded-circle admin-action-btn" title="View order">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('admin.orders.invoice', $ord->id) }}" target="_blank" class="btn btn-outline-danger btn-sm rounded-circle admin-action-btn" title="Print invoice">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-3 mt-md-4">
        {{ $orders->links('pagination::bootstrap-5') }}
    </div>
</div>

@endsection
