@extends('admin.layout')
@section('title', 'Orders Management')
@section('heading', 'Customer Orders Management')

@section('content')
<div class="card-custom p-4 w-100">
    <!-- Header Controls: Search & Filters -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h5 class="fw-bold mb-1" style="color: var(--text-dark);">All Customer Orders ({{ $orders->total() }})</h5>
            <p class="text-muted small mb-0">Track and manage customer saree orders, payment status, and delivery fulfillment.</p>
        </div>

        <form method="GET" action="{{ route('admin.orders.index') }}" class="d-flex flex-wrap gap-2 align-items-center">
            <div class="position-relative">
                <input type="text" name="search" class="form-control form-control-sm ps-4 pe-4 rounded-3" placeholder="Search order #, customer..." value="{{ request('search') }}" style="min-width: 220px;">
            </div>

            <select name="status" class="form-select form-select-sm rounded-3" onchange="this.form.submit()" style="width: 140px;">
                <option value="">All Statuses</option>
                <option value="Processing" @selected(request('status') == 'Processing')>Processing</option>
                <option value="Shipped" @selected(request('status') == 'Shipped')>Shipped</option>
                <option value="Delivered" @selected(request('status') == 'Delivered')>Delivered</option>
                <option value="Cancelled" @selected(request('status') == 'Cancelled')>Cancelled</option>
            </select>
        </form>
    </div>

    <!-- ORDERS TABLE -->
    <div class="table-responsive">
        <table class="table align-middle custom-table">
            <thead>
                <tr>
                    <th style="width: 60px;">S.No</th>
                    <th>Order Number</th>
                    <th>Customer Name</th>
                    <th>Items Count</th>
                    <th>Total Amount (₹)</th>
                    <th>Payment Status</th>
                    <th>Order Status</th>
                    <th>Date</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $index => $ord)
                    <tr>
                        <td class="fw-bold text-muted">{{ $orders->firstItem() + $index }}</td>
                        <td>
                            <strong class="text-dark">{{ $ord->order_number }}</strong>
                        </td>
                        <td>
                            <strong class="d-block text-dark small mb-0">{{ $ord->user->name ?? 'Customer' }}</strong>
                            <span class="small text-muted">{{ $ord->user->email ?? 'N/A' }}</span>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border fw-semibold">{{ $ord->items->count() }} items</span>
                        </td>
                        <td class="fw-bold text-danger">
                            ₹{{ number_format($ord->total_amount, 2) }}
                        </td>
                        <td>
                            <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1 rounded-pill">
                                ● {{ $ord->payment_status }}
                            </span>
                        </td>
                        <td>
                            <form method="POST" action="{{ route('admin.orders.status', $ord) }}" class="d-inline">
                                @csrf
                                @method('PATCH')
                                <select name="status" onchange="this.form.submit()" class="form-select form-select-sm rounded-pill fw-semibold border-0 {{ $ord->status == 'Delivered' ? 'bg-success text-white' : ($ord->status == 'Shipped' ? 'bg-info text-dark' : ($ord->status == 'Cancelled' ? 'bg-danger text-white' : 'bg-warning text-dark')) }}" style="width: 130px; font-size: 0.82rem; padding: 4px 10px;">
                                    <option value="Processing" @selected($ord->status == 'Processing')>Processing</option>
                                    <option value="Shipped" @selected($ord->status == 'Shipped')>Shipped</option>
                                    <option value="Delivered" @selected($ord->status == 'Delivered')>Delivered</option>
                                    <option value="Cancelled" @selected($ord->status == 'Cancelled')>Cancelled</option>
                                </select>
                            </form>
                        </td>
                        <td class="small text-muted">
                            {{ $ord->created_at ? $ord->created_at->format('d M Y') : 'N/A' }}
                        </td>
                        <td class="text-end">
                            <a href="{{ route('admin.orders.show', $ord) }}" class="btn btn-sm btn-outline-danger rounded-3 fw-semibold">
                                View Details →
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="py-5 text-center text-muted">
                            No customer orders found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Bottom Footer Bar: Showing Count & Single Row Pagination -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mt-4 pt-3 border-top">
        <div class="text-muted small fw-medium">
            Showing {{ $orders->firstItem() ?? 0 }} to {{ $orders->lastItem() ?? 0 }} of {{ $orders->total() }} entries
        </div>
        <div class="d-flex justify-content-end">
            {{ $orders->appends(request()->query())->links('admin.partials.pagination') }}
        </div>
    </div>
</div>
@endsection