@extends('layouts.buyer')

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

@push('styles')
<style>
    .orders-header {
        background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
        border-radius: 1.25rem;
        color: var(--color-bg);
        padding: 2.25rem 2.5rem;
        position: relative;
        overflow: hidden;
    }
    .orders-header::after {
        content: '';
        position: absolute;
        top: -60%; right: -5%;
        width: 300px; height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(198,161,91,0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .order-card-row {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 1.25rem;
        padding: 1.25rem 1.5rem;
        transition: all 0.2s ease;
        margin-bottom: 1rem;
    }
    .order-card-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px -4px rgba(74, 48, 40, 0.08);
        border-color: var(--color-gold);
    }

    .filter-pill {
        border-radius: 9999px;
        padding: 0.4rem 1rem;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.15s ease;
        border: 1.5px solid var(--color-border);
        color: var(--color-text);
        background: var(--color-white);
    }
    .filter-pill:hover {
        background: var(--color-bg-alt);
        color: var(--color-primary);
        border-color: var(--color-brown-light);
    }
    .filter-pill.active {
        background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
        color: var(--color-primary-dark);
        border-color: var(--color-gold);
        box-shadow: 0 2px 8px rgba(198, 161, 91, 0.3);
    }
    .order-total-amount { color: var(--color-gold-dark) !important; }
</style>
@endpush

@section('content')

    {{-- Breadcrumb Navigation --}}
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb mb-0 small">
            <li class="breadcrumb-item"><a href="{{ route('buyer.dashboard') }}" class="text-decoration-none text-muted">Katalog</a></li>
            <li class="breadcrumb-item active fw-semibold text-primary" aria-current="page">Pesanan Saya</li>
        </ol>
    </nav>

    {{-- Header Banner --}}
    <div class="orders-header mb-4">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1">
                    <i class="bi bi-clock-history fs-4"></i>
                    <h1 class="h3 fw-bold mb-0">Riwayat Pesanan Saya</h1>
                </div>
                <p class="mb-0 text-white-50 small">
                    Pantau status seluruh transaksi dan detail pembelian produk Anda.
                </p>
            </div>
            <a href="{{ route('buyer.dashboard') }}" class="btn btn-light btn-sm px-3 py-2 rounded-3 fw-semibold d-flex align-items-center gap-2">
                <i class="bi bi-cart-plus"></i> Belanja Lagi
            </a>
        </div>
    </div>

    {{-- Filter Status Pesanan --}}
    <div class="d-flex align-items-center gap-2 flex-wrap mb-4">
        <span class="text-muted small fw-semibold me-1"><i class="bi bi-funnel"></i> Status:</span>
        <a href="{{ route('buyer.orders.index') }}" class="filter-pill {{ empty($status) ? 'active' : '' }}">
            Semua
        </a>
        <a href="{{ route('buyer.orders.index', ['status' => 'pending']) }}" class="filter-pill {{ $status === 'pending' ? 'active' : '' }}">
            Menunggu Pembayaran
        </a>
        <a href="{{ route('buyer.orders.index', ['status' => 'processing']) }}" class="filter-pill {{ $status === 'processing' ? 'active' : '' }}">
            Diproses
        </a>
        <a href="{{ route('buyer.orders.index', ['status' => 'completed']) }}" class="filter-pill {{ $status === 'completed' ? 'active' : '' }}">
            Selesai
        </a>
        <a href="{{ route('buyer.orders.index', ['status' => 'cancelled']) }}" class="filter-pill {{ $status === 'cancelled' ? 'active' : '' }}">
            Dibatalkan
        </a>
    </div>

    {{-- Daftar Pesanan --}}
    @if($orders->count() > 0)
        <div class="mb-4">
            @foreach($orders as $order)
            <div class="order-card-row">
                <div class="row align-items-center gy-3">
                    {{-- Info Utama --}}
                    <div class="col-12 col-md-4">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="fw-bold text-dark fs-6">#{{ $order->order_number }}</span>
                            <span class="badge {{ $order->status_badge_class }} rounded-pill" style="font-size: 0.72rem;">
                                {{ $order->status_label }}
                            </span>
                        </div>
                        <div class="text-muted small">
                            <i class="bi bi-calendar3 me-1"></i> {{ $order->created_at->translatedFormat('d M Y, H:i') }}
                        </div>
                    </div>

                    {{-- Ringkasan Produk --}}
                    <div class="col-12 col-md-4">
                        <div class="text-muted small mb-0.5">
                            {{ $order->items->count() }} jenis produk ({{ $order->items->sum('quantity') }} item)
                        </div>
                        <div class="fw-semibold text-slate-800 text-truncate small" style="max-width: 280px;">
                            {{ $order->items->pluck('product_name')->join(', ') }}
                        </div>
                    </div>

                    {{-- Total Bayar & Aksi --}}
                    <div class="col-12 col-md-4 text-md-end">
                        <div class="text-muted small">Total Tagihan</div>
                        <div class="fw-extrabold text-primary fs-5 mb-2">
                            {{ $order->formatted_total_amount }}
                        </div>
                        <a href="{{ route('buyer.orders.show', $order->id) }}"
                            class="btn btn-outline-primary btn-sm px-3 py-1.5 rounded-3 fw-semibold d-inline-flex align-items-center gap-1.5">
                            <i class="bi bi-eye"></i> Detail Pesanan
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

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

    @else
        {{-- Empty State --}}
        <div class="card border-0 shadow-sm rounded-4 text-center py-5 px-4">
            <div class="mb-3">
                <div style="width: 80px; height: 80px; border-radius: 50%; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; color: #64748b; font-size: 2rem;">
                    <i class="bi bi-inbox"></i>
                </div>
            </div>
            <h3 class="h5 fw-bold text-dark mb-1">Belum Ada Pesanan</h3>
            <p class="text-muted small mb-4 col-md-5 mx-auto">
                @if(!empty($status))
                    Tidak ditemukan pesanan dengan status "{{ $status }}".
                @else
                    Anda belum pernah membuat pesanan belanja apapun. Yuk, jelajahi katalog produk kami sekarang!
                @endif
            </p>
            <div>
                <a href="{{ route('buyer.dashboard') }}" class="btn btn-primary px-4 py-2 rounded-3 fw-bold d-inline-flex align-items-center gap-2">
                    <i class="bi bi-shop"></i> Belanja Sekarang
                </a>
            </div>
        </div>
    @endif

@endsection