@extends('layouts.admin')

@section('title', 'Kelola Pesanan Masuk')

@section('content')
<!-- Header Halaman -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
    <div class="d-flex align-items-center gap-3">
        <img src="{{ asset('logo/logo.png') . '?v=2' }}" alt="Lazy Store" style="width:42px;height:42px;border-radius:10px;object-fit:cover;border:1.5px solid #bbf7d0;box-shadow:0 2px 8px rgba(22,163,74,.2);">
        <div>
            <h1 class="h3 fw-bold text-dark mb-1 d-flex align-items-center gap-2">
                <i class="bi bi-receipt-cutoff" style="color: #16a34a;"></i>
                <span>Daftar Semua Pesanan (Admin)</span>
            </h1>
            <p class="text-muted small mb-0">Kelola dan pantau seluruh transaksi pembelian dari seluruh buyer Lazy Store.</p>
        </div>
    </div>

    <!-- Filter & Pencarian -->
    <form action="{{ route('admin.orders.index') }}" method="GET" class="d-flex flex-wrap gap-2 align-items-center">
        <!-- Filter Status -->
        <select name="status" class="form-select form-select-sm" style="min-width: 160px;" onchange="this.form.submit()">
            <option value="">-- Semua Status --</option>
            @foreach ($statuses as $st)
                <option value="{{ $st }}" {{ request('status') === $st ? 'selected' : '' }}>
                    {{ ucfirst($st) }}
                </option>
            @endforeach
        </select>

        <!-- Input Keyword -->
        <div class="input-group input-group-sm" style="min-width: 220px;">
            <input type="text" name="search" class="form-control" placeholder="Cari nomor order / buyer..." value="{{ request('search') }}">
            <button class="btn btn-outline-secondary" type="submit">
                <i class="bi bi-search"></i>
            </button>
        </div>

        @if (request('status') || request('search'))
            <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-danger" title="Reset Filter">
                <i class="bi bi-x-lg"></i>
            </a>
        @endif
    </form>
</div>

@if ($orders->count() > 0)
    <div class="card card-custom border-0 shadow-sm overflow-hidden mb-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-muted small text-uppercase">
                    <tr>
                        <th scope="col" class="ps-4 py-3">Nomor Order</th>
                        <th scope="col" class="py-3">Data Buyer</th>
                        <th scope="col" class="py-3">Tanggal</th>
                        <th scope="col" class="py-3 text-center">Jumlah Item</th>
                        <th scope="col" class="py-3 text-end">Total</th>
                        <th scope="col" class="py-3 text-center" style="min-width: 160px;">Status Pesanan</th>
                        <th scope="col" class="pe-4 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($orders as $order)
                        <tr>
                            <!-- Nomor Order -->
                            <td class="ps-4 py-3 fw-bold">
                                <a href="{{ route('admin.orders.show', $order) }}" class="text-decoration-none fw-bold" style="color: #7c3aed;">
                                    {{ $order->order_number }}
                                </a>
                            </td>

                            <!-- Data Buyer -->
                            <td class="py-3">
                                <div class="fw-bold text-dark mb-0">
                                    {{ $order->user ? $order->user->name : 'Buyer ID #' . $order->user_id }}
                                </div>
                                <span class="small text-muted d-block">
                                    {{ $order->user ? $order->user->email : '-' }}
                                </span>
                            </td>

                            <!-- Tanggal -->
                            <td class="py-3 text-muted small">
                                {{ $order->created_at->format('d M Y, H:i') }}
                            </td>

                            <!-- Jumlah Item -->
                            <td class="py-3 text-center fw-medium">
                                {{ $order->orderItems->sum('quantity') }} unit
                            </td>

                            <!-- Total -->
                            <td class="py-3 text-end fw-bold text-success">
                                {{ $order->formatted_total_price }}
                            </td>

                            <!-- Status Pesanan (Badge) -->
                            <td class="py-3 text-center">
                                @if ($order->status === 'pending')
                                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1">
                                        <i class="bi bi-clock-history me-1"></i>Pending
                                    </span>
                                @elseif ($order->status === 'processing')
                                    <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle px-2 py-1">
                                        <i class="bi bi-arrow-repeat me-1"></i>Processing
                                    </span>
                                @elseif ($order->status === 'shipped')
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1">
                                        <i class="bi bi-truck me-1"></i>Shipped
                                    </span>
                                @elseif ($order->status === 'completed')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                                        <i class="bi bi-check-circle-fill me-1"></i>Completed
                                    </span>
                                @elseif ($order->status === 'cancelled')
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">
                                        <i class="bi bi-x-circle-fill me-1"></i>Cancelled
                                    </span>
                                @else
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2 py-1">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                @endif
                            </td>

                            <!-- Tombol Detail -->
                            <td class="pe-4 py-3 text-center">
                                <a href="{{ route('admin.orders.show', $order) }}" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-1 shadow-sm">
                                    <i class="bi bi-eye"></i>
                                    <span>Detail</span>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Paginasi -->
    <div class="d-flex justify-content-center mb-5">
        {{ $orders->links('pagination::bootstrap-5') }}
    </div>
@else
    <div class="card card-custom border-0 shadow-sm text-center py-5 my-4">
        <div class="card-body p-4 p-md-5">
            <div class="mb-3">
                <span class="d-inline-flex align-items-center justify-content-center bg-light text-muted rounded-circle p-4" style="width: 90px; height: 90px;">
                    <i class="bi bi-inbox fs-1 text-secondary"></i>
                </span>
            </div>
            <h4 class="fw-bold text-dark mb-2">Tidak Ada Pesanan Ditemukan</h4>
            <p class="text-muted mb-4 mx-auto" style="max-width: 440px;">
                @if (request('status') || request('search'))
                    Tidak ditemukan data pesanan dengan filter pencarian saat ini. Silakan atur ulang filter pencarian Anda.
                @else
                    Saat ini belum ada pesanan yang masuk dari pembeli di lazy store.
                @endif
            </p>
            @if (request('status') || request('search'))
                <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-secondary">
                    Reset Filter
                </a>
            @endif
        </div>
    </div>
@endif
@endsection