@extends('layouts.buyer')

@section('title', 'Riwayat Pesanan Saya')

@section('content')
<div class="container py-2">
    <!-- Header Page -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 fw-bold mb-1">📦 Riwayat Pesanan Saya</h1>
            <p class="text-muted small mb-0">Lihat seluruh riwayat pesanan yang telah Anda lakukan.</p>
        </div>
        <a href="{{ route('buyer.dashboard') }}" class="btn btn-primary btn-sm rounded-pill px-3">
            <i class="bi bi-cart-plus me-1"></i> Belanja Lagi
        </a>
    </div>

    @if($orders->isEmpty())
        <div class="card border-0 shadow-sm rounded-4 p-5 text-center my-4">
            <div class="mb-3">
                <i class="bi bi-bag-x text-muted" style="font-size: 4rem;"></i>
            </div>
            <h4 class="fw-bold text-secondary">Belum Ada Pesanan</h4>
            <p class="text-muted">Anda belum memiliki pesanan aktif. Mulai belanja sekarang untuk membuat pesanan baru.</p>
            <div class="mt-3">
                <a href="{{ route('buyer.dashboard') }}" class="btn btn-primary rounded-pill px-4 py-2 fw-semibold">
                    <i class="bi bi-shop me-1"></i> Jelajahi Produk
                </a>
            </div>
        </div>
    @else
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light small text-uppercase text-secondary">
                        <tr>
                            <th scope="col" class="ps-4">No. Pesanan</th>
                            <th scope="col">Tanggal</th>
                            <th scope="col">Jumlah Item</th>
                            <th scope="col">Total Pembayaran</th>
                            <th scope="col" class="text-center">Status</th>
                            <th scope="col" class="text-center pe-4">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                            <tr>
                                <td class="ps-4 fw-bold text-dark">
                                    {{ $order->order_number }}
                                </td>
                                <td class="text-muted small">
                                    {{ $order->created_at->format('d M Y, H:i') }}
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border">
                                        {{ $order->orderItems->sum('quantity') }} unit ({{ $order->orderItems->count() }} produk)
                                    </span>
                                </td>
                                <td class="fw-bold text-primary">
                                    Rp {{ number_format($order->total, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    @if($order->status === 'pending')
                                        <span class="badge bg-warning-subtle text-warning-emphasis px-3 py-2 rounded-pill fw-semibold text-uppercase">
                                            <i class="bi bi-hourglass-split me-1"></i> Pending
                                        </span>
                                    @elseif($order->status === 'completed')
                                        <span class="badge bg-success-subtle text-success-emphasis px-3 py-2 rounded-pill fw-semibold text-uppercase">
                                            <i class="bi bi-check-circle me-1"></i> Completed
                                        </span>
                                    @elseif($order->status === 'cancelled')
                                        <span class="badge bg-danger-subtle text-danger-emphasis px-3 py-2 rounded-pill fw-semibold text-uppercase">
                                            <i class="bi bi-x-circle me-1"></i> Cancelled
                                        </span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary px-3 py-2 rounded-pill fw-semibold text-uppercase">
                                            {{ $order->status }}
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center pe-4">
                                    <a href="{{ route('buyer.orders.show', $order->id) }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                                        <i class="bi bi-eye me-1"></i> Detail
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($orders->hasPages())
                <div class="card-footer bg-white p-3 border-top">
                    {{ $orders->links() }}
                </div>
            @endif
        </div>
    @endif
</div>
@endsection