@extends('layouts.buyer')

@section('title', 'Detail Pesanan #' . $order->order_number)

@push('styles')
<style>
    .order-detail-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;
    }
    .order-detail-header::after {
        content: '';
        position: absolute;
        top: -60%; right: -5%;
        width: 320px; height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(198,161,91,0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .order-card {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 1.25rem;
        box-shadow: 0 4px 6px -1px rgba(74, 48, 40, 0.04);
        overflow: hidden;
    }

    .order-card-header {
        padding: 1.25rem 1.75rem;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border-light);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: gap;
    }

    .order-items-table th {
        background: var(--color-bg);
        color: var(--color-text-light);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--color-border);
        padding: 0.9rem 1.25rem;
    }

    .order-items-table td {
        padding: 1.1rem 1.25rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--color-border-light);
    }

    .info-label {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        margin-bottom: 0.25rem;
    }

    .info-value {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-text);
    }
</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"><a href="{{ route('buyer.orders.index') }}" class="text-decoration-none text-muted">Pesanan Saya</a></li>
            <li class="breadcrumb-item active fw-semibold text-primary" aria-current="page">#{{ $order->order_number }}</li>
        </ol>
    </nav>

    {{-- Header Banner --}}
    <div class="order-detail-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">
                    <span class="badge bg-white text-dark fw-bold px-3 py-1.5 rounded-pill shadow-sm">
                        <i class="bi bi-receipt me-1 text-success"></i> INVOICE
                    </span>
                    <span class="badge {{ $order->status_badge_class }} px-3 py-1.5 rounded-pill fw-semibold">
                        {{ $order->status_label }}
                    </span>
                </div>
                <h1 class="h3 fw-bold mb-1">Pesanan #{{ $order->order_number }}</h1>
                <p class="mb-0 text-white-75 small">
                    Dibuat pada {{ $order->created_at->translatedFormat('d F Y, H:i') }} WIB
                </p>
            </div>

            <div class="d-flex align-items-center gap-2 flex-wrap">
                <a href="{{ route('buyer.orders.index') }}" 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-list-ul"></i> Semua Pesanan
                </a>
                <a href="{{ route('buyer.dashboard') }}" class="btn btn-outline-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>
    </div>

    {{-- Content Layout --}}
    <div class="row g-4 align-items-start">

        {{-- KOLOM KIRI: Daftar Item Pesanan --}}
        <div class="col-12 col-lg-8">
            <div class="order-card mb-4">
                <div class="order-card-header">
                    <h2 class="h6 fw-bold mb-0 text-dark d-flex align-items-center gap-2">
                        <i class="bi bi-box-seam text-primary"></i>
                        Daftar Produk yang Dipesan
                    </h2>
                    <span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill">
                        {{ $order->items->count() }} Jenis Produk
                    </span>
                </div>

                <div class="table-responsive">
                    <table class="table order-items-table w-100 mb-0">
                        <thead>
                            <tr>
                                <th style="width: 50%;">Produk</th>
                                <th style="width: 18%;" class="text-center">Harga Satuan</th>
                                <th style="width: 12%;" class="text-center">Jumlah</th>
                                <th style="width: 20%;" class="text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->items as $item)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        @if($item->product && $item->product->image && \Illuminate\Support\Facades\Storage::disk('public')->exists($item->product->image))
                                            <img src="{{ asset('storage/' . $item->product->image) }}"
                                                alt="{{ $item->product_name }}"
                                                style="width: 54px; height: 54px; object-fit: cover; border-radius: 0.6rem; border: 1px solid #e2e8f0;">
                                        @else
                                            <div style="width: 54px; height: 54px; border-radius: 0.6rem; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #4f46e5; border: 1px solid #e2e8f0;">
                                                <i class="bi bi-box-seam"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="fw-bold text-dark" style="font-size: 0.92rem;">
                                                {{ $item->product_name }}
                                            </div>
                                            @if($item->product)
                                                <a href="{{ route('buyer.products.show', $item->product->slug ?? $item->product->id) }}"
                                                    class="text-primary text-decoration-none small" style="font-size: 0.78rem;">
                                                    Lihat Produk <i class="bi bi-box-arrow-up-right"></i>
                                                </a>
                                            @else
                                                <span class="text-muted small" style="font-size: 0.78rem;">Produk telah dihapus</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center fw-semibold text-slate-700">
                                    {{ $item->formatted_price }}
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark border px-2.5 py-1.5 fw-bold">
                                        {{ $item->quantity }}
                                    </span>
                                </td>
                                <td class="text-end fw-bold text-primary">
                                    {{ $item->formatted_subtotal }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="bg-light">
                                <td colspan="3" class="text-end fw-bold py-3 text-dark">Total Pembayaran:</td>
                                <td class="text-end fw-extrabold py-3 text-primary fs-5">
                                    {{ $order->formatted_total_amount }}
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {{-- Status & Petunjuk Pembayaran --}}
            <div class="card border-0 shadow-sm rounded-4 bg-primary-subtle text-primary-emphasis p-4">
                <div class="d-flex align-items-start gap-3">
                    <div class="rounded-circle bg-primary text-white p-2 d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; flex-shrink: 0;">
                        <i class="bi bi-info-lg fs-5"></i>
                    </div>
                    <div>
                        <h3 class="h6 fw-bold mb-1">Informasi Transaksi & Status Pesanan</h3>
                        <p class="mb-0 small" style="line-height: 1.6;">
                            Pesanan Anda berhasil tercatat di database dengan status <strong>"{{ $order->status_label }}"</strong>.
                            Stok produk telah berkurang secara otomatis dan keranjang Anda telah dikosongkan.
                            Admin toko akan melakukan verifikasi dan memproses pengiriman pesanan Anda ke alamat yang tercantum.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{-- KOLOM KANAN: Data Pengiriman & Ringkasan --}}
        <div class="col-12 col-lg-4">
            <div class="order-card p-4">
                <h2 class="h6 fw-bold text-dark mb-3 d-flex align-items-center gap-2">
                    <i class="bi bi-geo-alt-fill text-danger"></i>
                    Detail Pengiriman
                </h2>

                <div class="mb-3">
                    <div class="info-label">Penerima</div>
                    <div class="info-value">{{ $order->user->name ?? 'Pembeli' }}</div>
                    <div class="text-muted small">{{ $order->user->email ?? '-' }}</div>
                </div>

                <hr class="my-3 border-slate-200">

                <div class="mb-3">
                    <div class="info-label">Nomor Telepon / WhatsApp</div>
                    <div class="info-value d-flex align-items-center gap-2">
                        <i class="bi bi-telephone text-primary"></i>
                        {{ $order->phone }}
                    </div>
                </div>

                <hr class="my-3 border-slate-200">

                <div class="mb-3">
                    <div class="info-label">Alamat Lengkap Pengiriman</div>
                    <div class="info-value" style="font-weight: 500; font-size: 0.9rem; line-height: 1.5;">
                        {{ $order->shipping_address }}
                    </div>
                </div>

                @if($order->notes)
                <hr class="my-3 border-slate-200">
                <div class="mb-3">
                    <div class="info-label">Catatan Pesanan</div>
                    <div class="p-2.5 rounded-3 bg-light text-secondary small" style="line-height: 1.4;">
                        <i class="bi bi-chat-quote me-1"></i> {{ $order->notes }}
                    </div>
                </div>
                @endif

                <hr class="my-3 border-slate-200">

                <div class="mb-0">
                    <div class="info-label">Metode Pembayaran</div>
                    <div class="info-value small text-dark d-flex align-items-center gap-1.5">
                        <i class="bi bi-cash-stack text-success"></i> Transfer Manual / COD
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection