@extends('template.desktop.app')

@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    {{-- <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        softred: "#FCECEC",
                        softred2: "#F8D9D9",
                        graymain: "#6B7280"
                    }
                }
            }
        }
    </script> --}}
@endpush

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-white via-white to-softred/10 py-2">
        <div class="mx-auto w-full">

            <div
                class="relative mb-10 flex flex-col gap-4 md:flex-row md:items-center md:justify-between
            rounded-xl p-6 bg-white/95 backdrop-blur-md border border-white/80
            shadow-[0_1px_2px_rgba(0,0,0,0.03)] overflow-hidden">

                <div
                    class="absolute inset-0 bg-gradient-to-br 
                from-softred/15 via-white/60 to-white/90 pointer-events-none">
                </div>

                <div class="absolute inset-x-0 top-0 h-1/4 
                bg-gradient-to-b from-white/95 to-transparent">
                </div>

                <div class="relative z-10">
                    <div class="flex items-center gap-3">
                        <i class='bx bx-package text-3xl text-[#D9A5A5]'></i>
                        <h1 class="text-3xl font-semibold text-gray-800">
                            #{{ $order['reference_no'] }}
                        </h1>
                    </div>
                    <p class="mt-1 text-sm text-graymain">
                        Dibuat pada: <span class="text-gray-700">{{ $order['order_date'] }}</span>
                    </p>
                </div>

                <div class="relative z-10 flex gap-3">
                    <button
                        class="px-4 py-2 text-xs font-medium rounded-md bg-white border border-gray-300 
                    hover:bg-gray-50 transition">
                        <i class='bx bx-edit'></i> Edit
                    </button>

                    <button
                        class="px-4 py-2 text-xs font-semibold rounded-md bg-[#D77E7E] text-white 
                    hover:bg-[#BF6B6B] transition">
                        <i class='bx bx-trash'></i> Batalkan
                    </button>
                </div>
            </div>

            <div class="grid gap-6 md:grid-cols-3 mb-8">

                @php
                    $topCards = [
                        [
                            'title' => 'Total Pembayaran',
                            'value' => number_format($order['total_payment']),
                            'desc' => 'Barang + ongkir + biaya lainnya',
                            'icon' => 'bx-wallet',
                        ],
                        [
                            'title' => 'Total Barang',
                            'value' => number_format($order['total']),
                            'desc' => 'Subtotal seluruh produk',
                            'icon' => 'bx-cart-alt',
                        ],
                        [
                            'title' => 'Metode Pembayaran',
                            'value' => $order['payment_method'],
                            'desc' => 'Sumber: ' . strtoupper($order['order_source']),
                            'icon' => 'bx-credit-card',
                        ],
                    ];
                @endphp

                @foreach ($topCards as $card)
                    <div
                        class="relative rounded-xl p-5 bg-white/95 backdrop-blur-md 
                border border-white/80 shadow-[0_1px_2px_rgba(0,0,0,0.03)] overflow-hidden">

                        <div
                            class="absolute inset-0 bg-gradient-to-br 
                    from-softred/15 via-white/70 to-white/95">
                        </div>

                        <div
                            class="absolute inset-x-0 top-0 h-1/4 
                    bg-gradient-to-b from-white/95 to-transparent">
                        </div>

                        <div class="relative z-10 flex items-center justify-between">
                            <div>
                                <p class="text-sm text-graymain">{{ $card['title'] }}</p>
                                <p class="mt-1 text-2xl font-bold text-gray-800">Rp {{ $card['value'] }}</p>
                                <p class="mt-1 text-xs text-gray-500">{{ $card['desc'] }}</p>
                            </div>
                            <i class='bx {{ $card['icon'] }} text-4xl text-[#D9A5A5]'></i>
                        </div>
                    </div>
                @endforeach
            </div>

            @php
                function glossy_start()
                {
                    return '
                <div class="relative rounded-xl bg-white/95 backdrop-blur-md p-5
                    border border-white/80 shadow-[0_1px_2px_rgba(0,0,0,0.03)] overflow-hidden">

                    <div class="absolute inset-0 bg-gradient-to-br 
                        from-[#FCECEC]/15 via-white/70 to-white/95"></div>

                    <div class="absolute inset-x-0 top-0 h-1/4 
                        bg-gradient-to-b from-white/95 to-transparent"></div>

                    <div class="relative z-10">
                ';
                }
                function glossy_end()
                {
                    return '</div></div>';
                }
            @endphp

            <div class="grid lg:grid-cols-5 gap-6">

                <div class="space-y-6 lg:col-span-2">

                    {!! glossy_start() !!}
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
                        <i class="bx bx-detail text-2xl text-[#D9A5A5]"></i>
                        Detail Order
                    </h2>

                    <div class="space-y-3 text-sm text-gray-700">
                        <div class="flex justify-between">
                            <span class="text-graymain">Client Order</span>
                            <span>{{ $order['client_order_no'] }}</span>
                        </div>

                        <div class="flex justify-between">
                            <span class="text-graymain">Actor</span>
                            <span>{{ $order['actor_label'] }} (ID: {{ $order['actor_id'] }})</span>
                        </div>

                        <div class="flex justify-between">
                            <span class="text-graymain">Shipment Order</span>
                            <span>{{ $order['shipment_order_no'] }}</span>
                        </div>

                        <div class="flex justify-between">
                            <span class="text-graymain">No Resi</span>
                            <span>{{ $shipment['awb_number'] ?? '-' }}</span>
                        </div>

                        <div class="flex justify-between">
                            <span class="text-graymain">Catatan</span>
                            <span>{{ $order['notes'] ?: '-' }}</span>
                        </div>
                    </div>
                    {!! glossy_end() !!}

                    {!! glossy_start() !!}
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
                        <i class="bx bx-user-pin text-2xl text-[#D9A5A5]"></i>
                        Data Penerima
                    </h2>

                    @if ($receiver)
                        <div class="space-y-3 text-sm text-graymain">
                            <div>
                                <p class="text-xs">Nama</p>
                                <p class="font-medium text-gray-800">{{ $receiver['name'] }}</p>
                            </div>

                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <p class="text-xs">No HP</p>
                                    <p>{{ $receiver['phone_number'] }}</p>
                                </div>
                                <div>
                                    <p class="text-xs">Kota</p>
                                    <p>{{ $receiver['city'] }}</p>
                                </div>
                            </div>

                            <div>
                                <p class="text-xs">Alamat Lengkap</p>
                                <p>{{ $receiver['address'] }}<br>{{ $receiver['postal_code'] }}</p>
                            </div>
                        </div>
                    @endif

                    {!! glossy_end() !!}

                    {!! glossy_start() !!}
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
                        <i class="bx bx-money text-2xl text-[#D9A5A5]"></i>
                        Informasi COD
                    </h2>

                    @if ($cod)
                        <div class="grid grid-cols-2 gap-4 text-sm text-graymain">
                            <div>
                                <p class="text-xs">Total COD</p>
                                <p class="font-semibold text-gray-900">Rp {{ number_format($cod['total']) }}</p>
                            </div>

                            <div>
                                <p class="text-xs">Biaya COD</p>
                                <p>Rp {{ number_format($cod['fee']) }}</p>
                            </div>

                            <div>
                                <p class="text-xs">Total Pencairan</p>
                                <p class="font-semibold text-[#BD6F6F]">
                                    Rp {{ number_format($cod['total_disbursement']) }}
                                </p>
                            </div>

                            <div>
                                <p class="text-xs">Dibayar Oleh</p>
                                <p>{{ strtoupper($cod['fee_paid_by']) }}</p>
                            </div>
                        </div>
                    @else
                        <p class="text-xs text-graymain">Pesanan ini bukan COD.</p>
                    @endif

                    {!! glossy_end() !!}

                </div>

                <div class="space-y-6 lg:col-span-3">

                    {!! glossy_start() !!}
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
                        <i class="bx bx-cube text-2xl text-[#D9A5A5]"></i>
                        Produk dalam Pesanan
                    </h2>

                    <div
                        class="relative overflow-hidden rounded-xl bg-white/95 backdrop-blur-md 
                    border border-white/80 shadow-[0_1px_2px_rgba(0,0,0,0.03)]">

                        <div
                            class="absolute inset-0 bg-gradient-to-br 
                        from-softred/10 via-white/70 to-white/95">
                        </div>

                        <table class="relative z-10 w-full text-sm">
                            <thead class="bg-white text-gray-700 border-b border-[#F0E3E3]">
                                <tr>
                                    <th class="px-4 py-2 text-left">SKU</th>
                                    <th class="px-4 py-2 text-left">Nama Produk</th>
                                    <th class="px-4 py-2 text-center">Qty</th>
                                    <th class="px-4 py-2 text-right">Harga</th>
                                    <th class="px-4 py-2 text-right">Subtotal</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($items as $item)
                                    <tr class="hover:bg-softred/20 transition">
                                        <td class="px-4 py-2">{{ $item['sku'] }}</td>
                                        <td class="px-4 py-2">{{ $item['product_name'] }}</td>
                                        <td class="px-4 py-2 text-center">{{ $item['qty'] }}</td>
                                        <td class="px-4 py-2 text-right">Rp {{ number_format($item['price']) }}</td>
                                        <td class="px-4 py-2 text-right font-semibold text-gray-700">
                                            Rp {{ number_format($item['subtotal']) }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>

                    {!! glossy_end() !!}

                    {!! glossy_start() !!}
                    <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
                        <i class="bx bx-send text-2xl text-[#D9A5A5]"></i>
                        Informasi Pengiriman
                    </h2>

                    @if ($shipment)
                        <div class="grid grid-cols-2 gap-4 text-sm text-graymain">
                            <div>
                                <p class="text-xs">Nomor Resi</p>
                                <p>{{ $shipment['awb_number'] }}</p>
                            </div>
                            <div>
                                <p class="text-xs">Status</p>
                                <p>{{ $shipment['status_name'] }}</p>
                            </div>
                            <div>
                                <p class="text-xs">Biaya Ongkir</p>
                                <p class="font-semibold text-gray-900">
                                    Rp {{ number_format($shipment['shipment_cost']) }}
                                </p>
                            </div>
                            <div>
                                <p class="text-xs">Biaya Admin</p>
                                <p>Rp {{ number_format($shipment['admin_fee']) }}</p>
                            </div>
                            <div>
                                <p class="text-xs">Diskon</p>
                                <p>Rp {{ number_format($shipment['discount']) }}</p>
                            </div>
                            <div>
                                <p class="text-xs">Pickup</p>
                                <p>{{ $shipment['min_pickup_time'] }} — {{ $shipment['max_pickup_time'] }}</p>
                            </div>
                        </div>
                    @endif

                    {!! glossy_end() !!}

                    @isset($comparison)
                        {!! glossy_start() !!}
                        <h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
                            <i class="bx bx-bar-chart-alt text-2xl text-[#D9A5A5]"></i>
                            Perbandingan Harga
                        </h2>

                        <div class="grid md:grid-cols-3 gap-4 text-sm">

                            <div class="rounded-xl bg-white/95 p-4 border border-[#F3E6E6]">
                                <p class="text-xs text-graymain mb-1">Harga Logistik</p>
                                <p class="text-lg font-bold text-gray-800">
                                    Rp {{ number_format($comparison['logistic_price_original']) }}
                                </p>

                                <p class="mt-2 text-xs text-graymain">Final Ongkir</p>
                                <p class="text-sm text-gray-800">
                                    Rp {{ number_format($comparison['logistic_shipment_cost']) }}
                                </p>

                                <p class="mt-2 text-xs text-[#BD6F6F]">
                                    Cashback: Rp {{ number_format($comparison['logistic_cashback']) }}
                                </p>
                            </div>

                            <div class="rounded-xl bg-white/95 p-4 border border-[#F3E6E6]">
                                <p class="text-xs text-graymain mb-1">Generate Ongkir</p>
                                <p class="text-lg font-bold text-gray-800">
                                    Rp {{ number_format($comparison['generated_shipping_cost']) }}
                                </p>

                                <p class="mt-2 text-xs text-graymain">Tagihan Logistik</p>
                                <p class="text-sm text-gray-800">
                                    Rp {{ number_format($comparison['generated_total_payment']) }}
                                </p>
                            </div>

                            <div class="rounded-xl bg-softred/30 p-4 border border-[#F3E6E6]">
                                <p class="text-xs text-graymain mb-1">Total di Order</p>
                                <p class="text-lg font-bold text-gray-800">
                                    Rp {{ number_format($comparison['order_total_payment']) }}
                                </p>
                                <p class="mt-2 text-xs text-gray-600">
                                    Sudah termasuk ongkir + barang
                                </p>
                            </div>

                        </div>

                        {!! glossy_end() !!}
                    @endisset

                </div>

            </div>

        </div>
    </div>
@endsection