@extends('layouts.content')

@section('content')
    <style>
        .order-detail-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 1.5rem 1rem;
        }
        .order-detail-card {
            background: #fff;
            border: 1px solid rgba(0,0,0,.08);
            border-radius: 16px;
            padding: 1.5rem;
        }
        .order-detail-section-title {
            font-weight: 800;
            font-size: 1.05rem;
            color: #222;
            margin-bottom: 1rem;
        }
        .order-status-badge-lg {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 1rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.85rem;
        }
        .product-thumb {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(0,0,0,.05);
        }
        .info-row:last-child {
            border-bottom: none;
        }
        .info-label {
            color: #666;
            font-size: 0.9rem;
        }
        .info-value {
            color: #222;
            font-weight: 600;
            font-size: 0.9rem;
            text-align: right;
        }
        @media (max-width: 576px) {
            .order-detail-container { padding: 1rem 0.75rem; }
        }
    </style>

    <main class="order-detail-container">
        <!-- Breadcrumb / Back -->
        <a href="{{ route('profile.index') }}?tab=orders" class="btn btn-sm btn-outline-secondary rounded-pill mb-3">
            <i class="bi bi-arrow-left me-1"></i> Kembali ke Pesanan
        </a>

        @if (session('error'))
            <div class="alert alert-danger border-0 rounded-3 shadow-sm mb-4">{{ session('error') }}</div>
        @endif
        @if (session('success'))
            <div class="alert alert-success border-0 rounded-3 shadow-sm mb-4">{{ session('success') }}</div>
        @endif

        <!-- Header: Invoice & Status -->
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
            <div>
                <h4 class="fw-bold mb-1">{{ $order->invoice_number }}</h4>
                <small class="text-secondary">{{ $order->created_at->translatedFormat('d M Y H:i') }}</small>
            </div>
            @php
                $statusColor = '#f59e0b';
                $statusLabel = 'Menunggu';
                $statusIcon = 'bi-clock';
                if ($order->order_status === 'processing') {
                    $statusLabel = 'Dikemas';
                    $statusColor = '#f59e0b';
                    $statusIcon = 'bi-box-seam';
                } elseif ($order->order_status === 'shipped') {
                    $statusLabel = 'Dikirim';
                    $statusColor = '#3b82f6';
                    $statusIcon = 'bi-truck';
                } elseif ($order->order_status === 'completed') {
                    $statusLabel = 'Selesai';
                    $statusColor = '#10b981';
                    $statusIcon = 'bi-check-circle';
                } elseif ($order->order_status === 'cancelled') {
                    $statusLabel = 'Dibatalkan';
                    $statusColor = '#ef4444';
                    $statusIcon = 'bi-x-circle';
                }
            @endphp
            <span class="order-status-badge-lg" style="background: {{ $statusColor }}15; color: {{ $statusColor }};">
                <i class="bi {{ $statusIcon }}"></i> {{ $statusLabel }}
            </span>
        </div>

        @if($order->order_status === 'completed')
            <div class="mb-3">
                <a href="{{ route('review.create', $order->order_id) }}" class="btn btn-success rounded-3 fw-semibold px-4">
                    <i class="bi bi-star me-1"></i> Beri Ulasan
                </a>
            </div>
        @endif

        <!-- Row: Left (Products) + Right (Summary) -->
        <div class="row g-4">
            <!-- Left Column: Products -->
            <div class="col-lg-7">
                <div class="order-detail-card">
                    <div class="order-detail-section-title">
                        <i class="bi bi-bag-check me-1"></i> Produk Dibeli
                    </div>
                    <div class="d-flex flex-column gap-3">
                        @forelse($order->details as $detail)
                            @php
                                $pkg = $detail->package;
                                $prod = $pkg?->product;
                                $photoUrl = asset('assets/img/selada.png');
                                if ($prod && $prod->media->isNotEmpty()) {
                                    $mainMedia = $prod->media->firstWhere('is_main', true) ?? $prod->media->first();
                                    $ext = strtolower(pathinfo($mainMedia->getRawOriginal('file_url'), PATHINFO_EXTENSION));
                                    if (in_array($ext, ['jpg','jpeg','png','webp','gif','heic'])) {
                                        $photoUrl = $mainMedia->file_url;
                                    }
                                }
                            @endphp
                            <div class="d-flex gap-3 align-items-start p-3 border rounded-4 bg-light">
                                <img src="{{ $photoUrl }}" alt="{{ $prod->product_name ?? '-' }}" class="product-thumb">
                                <div class="flex-grow-1 min-w-0">
                                    <div class="fw-bold text-dark">{{ $prod->product_name ?? '-' }}</div>
                                    <div class="text-secondary small">Varian: {{ $pkg->weight_in_kg ? $pkg->weight_in_kg . ' Kg' : '-' }}</div>
                                    <div class="d-flex justify-content-between mt-1">
                                        <span class="text-secondary small">{{ $detail->quantity }} x Rp {{ number_format($detail->unit_price, 0, ',', '.') }}</span>
                                        <span class="fw-bold text-primary-custom">Rp {{ number_format($detail->quantity * $detail->unit_price, 0, ',', '.') }}</span>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-4 text-secondary">Tidak ada detail produk.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Right Column: Summary & Info -->
            <div class="col-lg-5">
                <!-- Payment Summary -->
                <div class="order-detail-card mb-3">
                    <div class="order-detail-section-title">
                        <i class="bi bi-receipt me-1"></i> Rincian Pembayaran
                    </div>
                    <div class="info-row">
                        <span class="info-label">Total Produk</span>
                        <span class="info-value">Rp {{ number_format($order->total_product_price, 0, ',', '.') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Ongkos Kirim ({{ $order->total_weight_kg }} kg)</span>
                        <span class="info-value">Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                    </div>
                    @if($order->coupon_discount_nominal > 0)
                        <div class="info-row">
                            <span class="info-label">Diskon Kupon</span>
                            <span class="info-value text-danger">- Rp {{ number_format($order->coupon_discount_nominal, 0, ',', '.') }}</span>
                        </div>
                    @endif
                    <div class="info-row border-0 mt-2 pt-2 border-top">
                        <span class="fw-bold">Total Pembayaran</span>
                        <span class="fw-bold text-primary-custom fs-5">Rp {{ number_format($order->total_payment, 0, ',', '.') }}</span>
                    </div>

                    @if($order->payment_status)
                        <div class="mt-2 small text-secondary">
                            Status Pembayaran:
                            <span class="fw-medium
                                @if($order->payment_status === 'paid') text-success
                                @elseif($order->payment_status === 'unpaid') text-warning
                                @else text-danger @endif">
                                {{ ucfirst($order->payment_status) }}
                            </span>
                        </div>
                    @endif
                </div>

                <!-- Shipping Info -->
                <div class="order-detail-card mb-3">
                    <div class="order-detail-section-title">
                        <i class="bi bi-truck me-1"></i> Pengiriman
                    </div>
                    @if($order->address)
                        <div class="mb-2">
                            <div class="fw-medium">{{ $order->address->recipient_name }}</div>
                            <div class="small text-secondary">{{ $order->address->recipient_phone }}</div>
                            <div class="small text-dark mt-1" style="overflow-wrap: break-word; word-break: break-word;">
                                {{ $order->address->full_address }},
                                {{ $order->address->village ? $order->address->village . ', ' : '' }}
                                {{ $order->address->district }},
                                {{ $order->address->city }},
                                {{ $order->address->province }}
                                {{ $order->address->postal_code }}
                            </div>
                        </div>
                    @endif
                    @if(!empty($order->tracking_number) && trim($order->tracking_number) !== '')
                        <div class="mt-2 pt-2 border-top">
                            <span class="info-label">Nomor Resi:</span>
                            <span class="fw-medium ms-2">{{ $order->tracking_number }}</span>
                        </div>
                    @endif
                    
                    @if(in_array($order->order_status, ['processing', 'shipped', 'completed']) && $order->rate && !empty($order->rate->estimated_days))
                        <div class="mt-2 pt-2 border-top">
                            <span class="info-label">
                                <i class="bi bi-calendar-check me-1"></i> Estimasi Sampai:
                            </span>
                            <span class="fw-medium ms-2 text-primary">
                                {{ $order->rate->estimated_days }} hari
                            </span>
                        </div>
                    @endif
                </div>

                <!-- Coupon Info (if any) -->
                @if($order->coupon)
                    <div class="order-detail-card">
                        <div class="order-detail-section-title">
                            <i class="bi bi-ticket-perforated me-1"></i> Kupon
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="info-label">{{ $order->coupon->coupon_code }}</span>
                            <span class="info-value text-success">- Rp {{ number_format($order->coupon_discount_nominal, 0, ',', '.') }}</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </main>
@endsection