@extends('layouts.buyer')

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

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('buyer.dashboard') }}" class="text-decoration-none">Katalog</a></li>
                <li class="breadcrumb-item"><a href="{{ route('buyer.orders.index') }}" class="text-decoration-none">Riwayat Pesanan</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $order->order_number }}</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
            <div>
                <h2 class="fw-bold mb-0">
                    <i class="bi bi-receipt text-primary me-2"></i> Detail Pesanan
                </h2>
                <p class="text-muted mt-1 mb-0 font-monospace">{{ $order->order_number }}</p>
            </div>
            @php
                $statusConfig = [
                    'pending'    => ['warning', 'clock',       'Pending'],
                    'processing' => ['info',    'gear',         'Diproses'],
                    'shipped'    => ['primary', 'truck',        'Dikirim'],
                    'delivered'  => ['success', 'check-circle', 'Selesai'],
                    'cancelled'  => ['danger',  'x-circle',     'Dibatalkan'],
                ];
                $cfg = $statusConfig[$order->status] ?? ['secondary', 'question', $order->status];
            @endphp
            <span class="badge bg-{{ $cfg[0] }} {{ $cfg[0] === 'warning' ? 'text-dark' : 'text-white' }} px-3 py-2 fs-6 align-self-center">
                <i class="bi bi-{{ $cfg[1] }} me-1"></i> {{ $cfg[2] }}
            </span>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Kiri: Daftar Produk --}}
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-bottom">
                <h5 class="mb-0 fw-bold">
                    <i class="bi bi-box-seam me-2 text-primary"></i> Produk yang Dipesan
                </h5>
            </div>
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Produk</th>
                            <th class="text-center">Harga Satuan</th>
                            <th class="text-center">Qty</th>
                            <th class="text-end">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->orderItems as $item)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($item->product && $item->product->image)
                                            <img src="{{ Storage::url($item->product->image) }}"
                                                 alt="{{ $item->product_name }}"
                                                 class="rounded border me-3"
                                                 style="width:56px;height:56px;object-fit:cover;">
                                        @else
                                            <div class="bg-secondary-subtle text-secondary rounded d-flex align-items-center justify-content-center me-3 border"
                                                 style="width:56px;height:56px;">
                                                <i class="bi bi-image fs-5"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="fw-semibold">{{ $item->product_name }}</div>
                                            @if($item->product)
                                                <a href="{{ route('buyer.products.show', $item->product) }}"
                                                   class="small text-primary text-decoration-none">
                                                    <i class="bi bi-arrow-right-short"></i> Lihat Produk
                                                </a>
                                            @else
                                                <small class="text-muted fst-italic">Produk tidak tersedia</small>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center text-secondary">
                                    Rp {{ number_format($item->price, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2">
                                        {{ $item->quantity }}
                                    </span>
                                </td>
                                <td class="text-end fw-bold text-primary">
                                    Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="3" class="text-end text-muted">Subtotal Produk</td>
                            <td class="text-end fw-semibold">Rp {{ number_format($order->subtotal, 0, ',', '.') }}</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-end text-muted">Ongkos Kirim</td>
                            <td class="text-end fw-semibold text-success">
                                {{ $order->shipping_fee > 0 ? 'Rp ' . number_format($order->shipping_fee, 0, ',', '.') : 'Gratis' }}
                            </td>
                        </tr>
                        @if($order->discount > 0)
                            <tr>
                                <td colspan="3" class="text-end text-muted">Diskon</td>
                                <td class="text-end fw-semibold text-danger">- Rp {{ number_format($order->discount, 0, ',', '.') }}</td>
                            </tr>
                        @endif
                        <tr class="fw-bold fs-5">
                            <td colspan="3" class="text-end">Total Pembayaran</td>
                            <td class="text-end text-primary">Rp {{ number_format($order->total, 0, ',', '.') }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    {{-- Kanan: Info Pesanan --}}
    <div class="col-lg-4">
        {{-- Status Pesanan --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white py-3 border-bottom">
                <h6 class="mb-0 fw-bold"><i class="bi bi-activity me-2"></i>Status Pesanan</h6>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Status Order</span>
                    <span class="badge bg-{{ $cfg[0] }} {{ $cfg[0] === 'warning' ? 'text-dark' : 'text-white' }}">
                        {{ $cfg[2] }}
                    </span>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="text-muted">Status Bayar</span>
                    @if($order->payment_status === 'paid')
                        <span class="badge bg-success text-white">Lunas</span>
                    @else
                        <span class="badge bg-danger text-white">Belum Bayar</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Info Pembeli --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white py-3 border-bottom">
                <h6 class="mb-0 fw-bold"><i class="bi bi-person me-2"></i>Info Pembeli</h6>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <div class="text-muted small">Nama</div>
                    <div class="fw-semibold">{{ $order->customer_name }}</div>
                </div>
                <div class="mb-2">
                    <div class="text-muted small">Email</div>
                    <div>{{ $order->customer_email }}</div>
                </div>
                <div class="mb-2">
                    <div class="text-muted small">Tanggal Pesanan</div>
                    <div>{{ $order->created_at->format('d F Y, H:i') }} WIB</div>
                </div>
                @if($order->shipping_address)
                    <div class="mb-2">
                        <div class="text-muted small">Alamat Pengiriman</div>
                        <div>{{ $order->shipping_address }}</div>
                    </div>
                @endif
                @if($order->notes)
                    <div>
                        <div class="text-muted small">Catatan</div>
                        <div class="fst-italic text-secondary">{{ $order->notes }}</div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Tombol Aksi --}}
        <a href="{{ route('buyer.orders.index') }}" class="btn btn-outline-secondary w-100">
            <i class="bi bi-arrow-left me-1"></i> Kembali ke Riwayat
        </a>
    </div>
</div>
@endsection