@extends('layouts.buyer')

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

@section('content')
<!-- Navigasi Breadcrumb -->
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-2 px-3 bg-white rounded-3 border">
            <li class="breadcrumb-item">
                <a href="{{ route('buyer.toko') }}" class="text-decoration-none text-primary fw-medium">
                    <i class="bi bi-shop me-1"></i>Katalog Toko
                </a>
            </li>
            <li class="breadcrumb-item active text-dark fw-semibold" aria-current="page">
                Riwayat Pesanan
            </li>
        </ol>
    </nav>
</div>

<!-- Header Riwayat Pesanan -->
<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>Riwayat Pesanan Saya</span>
            </h1>
            <p class="text-muted small mb-0">Daftar semua transaksi dan pesanan yang pernah Anda buat di Lazy Store.</p>
        </div>
    </div>
    <a href="{{ route('buyer.toko') }}" class="btn btn-primary btn-sm d-inline-flex align-items-center gap-1 shadow-sm">
        <i class="bi bi-shop"></i>
        <span>Katalog Toko</span>
    </a>
</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 Pesanan</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 Belanja</th>
                        <th scope="col" class="py-3 text-center">Status</th>
                        <th scope="col" class="pe-4 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($orders as $order)
                        <tr>
                            <td class="ps-4 py-3 fw-bold text-dark">
                                <a href="{{ route('buyer.orders.show', $order) }}" class="text-decoration-none text-primary">
                                    {{ $order->order_number }}
                                </a>
                            </td>
                            <td class="py-3 text-muted small">
                                {{ $order->created_at->format('d M Y, H:i') }}
                            </td>
                            <td class="py-3 text-center fw-medium">
                                {{ $order->orderItems->sum('quantity') }} unit
                            </td>
                            <td class="py-3 text-end fw-bold text-success">
                                {{ $order->formatted_total_price }}
                            </td>
                            <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">
                                        Pending
                                    </span>
                                @elseif ($order->status === 'completed')
                                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                                        Completed
                                    </span>
                                @else
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2 py-1">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                @endif
                            </td>
                            <td class="pe-4 py-3 text-center">
                                <a href="{{ route('buyer.orders.show', $order) }}" class="btn btn-sm btn-outline-primary shadow-sm d-inline-flex align-items-center gap-1">
                                    <i class="bi bi-eye"></i>
                                    <span>Detail</span>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <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-receipt fs-1 text-secondary"></i>
                </span>
            </div>
            <h4 class="fw-bold text-dark mb-2">Belum Ada Riwayat Pesanan</h4>
            <p class="text-muted mb-4 mx-auto" style="max-width: 420px;">
                Anda belum pernah melakukan checkout pemesanan barang. Mulai belanja produk favorit Anda sekarang!
            </p>
            <a href="{{ route('buyer.toko') }}" class="btn btn-primary px-4 py-2 shadow-sm d-inline-flex align-items-center gap-2">
                <i class="bi bi-bag-plus"></i>
                <span>Mulai Belanja</span>
            </a>
        </div>
    </div>
@endif
@endsection