<div class="px-4 pt-4">

    {{-- ══ ORDER SUKSES ══════════════════════════════════════════════════ --}}
    @if ($orderPlaced)
        <div class="py-6 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-3">
                <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <h2 class="text-lg font-bold text-slate-800 mb-1">Pesanan Berhasil!</h2>
            <p class="text-sm text-slate-500 mb-1">Nomor pesanan Anda:</p>
            <p class="text-base font-black text-orange-500 mb-4">{{ $orderNumber }}</p>
        </div>

        {{-- ══ INSTRUKSI BERDASARKAN METODE PEMBAYARAN ═══════════════════ --}}
        @if ($placedPaymentMethod === 'transfer')
            <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-7 h-7 rounded-lg bg-blue-100 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75"/>
                        </svg>
                    </div>
                    <h3 class="text-sm font-bold text-slate-800">Instruksi Transfer Bank</h3>
                </div>

                @if ($bankAccounts && count($bankAccounts) > 0)
                    <div class="space-y-2 mb-3">
                        @foreach ($bankAccounts as $bank)
                            @if (!empty($bank['account_number']))
                                <div class="bg-slate-50 rounded-xl p-3">
                                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">
                                        {{ $bank['bank_name'] ?? 'Bank' }}
                                    </p>
                                    <p class="text-base font-black text-slate-800 tracking-wider">
                                        {{ $bank['account_number'] }}
                                    </p>
                                    @if (!empty($bank['account_name']))
                                        <p class="text-xs text-slate-500 mt-0.5">a.n. {{ $bank['account_name'] }}</p>
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    </div>
                @else
                    <p class="text-xs text-slate-400 mb-3">
                        Admin akan mengirimkan nomor rekening melalui WhatsApp.
                    </p>
                @endif

                @if ($transferInstruction)
                    <div class="text-xs text-slate-600 leading-relaxed bg-blue-50 rounded-lg p-3">
                        {!! nl2br(e($transferInstruction)) !!}
                    </div>
                @else
                    <div class="text-xs text-slate-500 leading-relaxed space-y-1">
                        <p>1. Transfer sesuai nominal pesanan ke rekening di atas.</p>
                        <p>2. Simpan bukti transfer Anda.</p>
                        <p>3. Konfirmasi pembayaran via WhatsApp Admin.</p>
                    </div>
                @endif
            </div>

        @elseif ($placedPaymentMethod === 'qris')
            <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-7 h-7 rounded-lg bg-purple-100 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"/>
                        </svg>
                    </div>
                    <h3 class="text-sm font-bold text-slate-800">Pembayaran QRIS</h3>
                </div>

                @if ($qrisImage)
                    <div x-data="{ open: false }" class="flex flex-col items-center mb-3">
                        {{-- Thumbnail klikable --}}
                        <button type="button" @click="open = true"
                            class="relative group">
                            <img src="{{ Storage::url($qrisImage) }}" alt="QRIS"
                                 class="w-48 h-48 object-contain rounded-xl border border-slate-200
                                        group-hover:opacity-90 transition-opacity cursor-zoom-in" />
                            <div class="absolute inset-0 flex items-center justify-center
                                        opacity-0 group-hover:opacity-100 transition-opacity rounded-xl
                                        bg-black/20">
                                <span class="text-white text-xs font-semibold bg-black/50 px-2 py-1 rounded">
                                    Perbesar
                                </span>
                            </div>
                        </button>

                        {{-- Tombol Download --}}
                        <a href="{{ Storage::url($qrisImage) }}" download="QRIS-{{ config('app.name') }}.png"
                           class="mt-2 h-8 px-4 inline-flex items-center gap-1.5 border border-slate-200
                                  text-slate-600 text-xs font-medium rounded-lg hover:bg-slate-50
                                  active:scale-95 transition-all">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
                            </svg>
                            Download QRIS
                        </a>

                        {{-- Modal fullscreen --}}
                        <div x-show="open" x-transition.opacity
                             class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
                             @click.self="open = false"
                             style="display:none">
                            <div class="relative max-w-sm w-full mx-4">
                                <img src="{{ Storage::url($qrisImage) }}" alt="QRIS"
                                     class="w-full rounded-2xl shadow-2xl" />
                                <button type="button" @click="open = false"
                                    class="absolute -top-3 -right-3 w-8 h-8 bg-white rounded-full shadow-lg
                                           flex items-center justify-center text-slate-600 hover:text-slate-900">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="bg-slate-50 rounded-xl p-4 text-center mb-3">
                        <p class="text-xs text-slate-400">QRIS belum dikonfigurasi. Admin akan mengirimkan QR via WhatsApp.</p>
                    </div>
                @endif

                @if ($qrisInstruction)
                    <div class="text-xs text-slate-600 leading-relaxed bg-purple-50 rounded-lg p-3">
                        {!! nl2br(e($qrisInstruction)) !!}
                    </div>
                @else
                    <div class="text-xs text-slate-500 leading-relaxed space-y-1">
                        <p>1. Scan QR code di atas menggunakan aplikasi e-wallet atau mobile banking.</p>
                        <p>2. Pastikan nominal sesuai dengan total pesanan.</p>
                        <p>3. Konfirmasi via WhatsApp setelah bayar.</p>
                    </div>
                @endif
            </div>

        @elseif ($placedPaymentMethod === 'cod')
            <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-7 h-7 rounded-lg bg-green-100 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>
                        </svg>
                    </div>
                    <h3 class="text-sm font-bold text-slate-800">Bayar di Tempat (COD)</h3>
                </div>
                <div class="text-xs text-slate-500 leading-relaxed space-y-1 bg-green-50 rounded-lg p-3">
                    <p>✓ Siapkan uang tunai sesuai total pesanan.</p>
                    <p>✓ Admin akan menghubungi Anda untuk konfirmasi waktu pengiriman.</p>
                    <p>✓ Bayar kepada kurir saat barang diterima.</p>
                </div>
            </div>
        @endif

        {{-- Tombol WA & navigasi --}}
        @php
            $waAdmin  = \App\Models\Setting::get('wa_admin');
            $waNum    = $waAdmin ? preg_replace('/^0/', '62', preg_replace('/[^0-9]/', '', $waAdmin)) : null;
            $waMsg    = urlencode('Halo Admin, saya baru saja melakukan pesanan dengan nomor ' . $orderNumber . '. Mohon konfirmasinya.');
        @endphp

        <div class="space-y-3 pb-2">
            @if ($waNum)
                <a href="https://wa.me/{{ $waNum }}?text={{ $waMsg }}"
                   target="_blank" rel="noopener"
                   class="w-full h-12 flex items-center justify-center gap-2.5 bg-green-500
                          hover:bg-green-600 text-white text-sm font-semibold rounded-xl shadow-sm
                          active:scale-[0.98] transition-all">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                    Konfirmasi via WhatsApp
                </a>
            @endif

            <a href="{{ route('store.orders') }}"
               class="w-full h-11 flex items-center justify-center bg-orange-500 hover:bg-orange-600
                      text-white text-sm font-semibold rounded-xl shadow-sm shadow-orange-200
                      active:scale-[0.98] transition-all">
                Lihat Pesanan Saya
            </a>

            <a href="{{ route('store.home') }}"
               class="block text-center text-sm text-slate-400 hover:text-orange-500 transition-colors py-1">
                Kembali Belanja
            </a>
        </div>

    @else

    {{-- Subtitle (judul "Checkout" sudah di header layout) --}}
    <p class="text-xs text-slate-400 mb-4">{{ $items->sum('quantity') }} item dari {{ $groupedItems->count() }} toko</p>

    <form wire:submit.prevent="placeOrder">

        {{-- ══ RINGKASAN PRODUK PER MITRA ══════════════════════════════════ --}}
        <div class="mb-4">
            <h2 class="text-sm font-semibold text-slate-700 mb-2">Pesanan</h2>
            <div class="space-y-2">
                @foreach ($groupedItems as $partnerId => $partnerItems)
                    @php $partner = $partnerItems->first()->product->partner; @endphp
                    <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
                        <div class="flex items-center gap-2 px-3 py-2 bg-slate-50 border-b border-slate-100">
                            <svg class="w-3 h-3 text-orange-400 shrink-0" fill="none" stroke="currentColor"
                                 viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z"/>
                            </svg>
                            <span class="text-xs font-semibold text-slate-700">{{ $partner->name ?? 'Mitra' }}</span>
                        </div>
                        <div class="divide-y divide-slate-50">
                            @foreach ($partnerItems as $item)
                                <div class="px-3 py-2.5 flex items-center gap-3">
                                    @if ($item->product->image)
                                        <img src="{{ Storage::url($item->product->image) }}"
                                             alt="{{ $item->product->name }}"
                                             class="w-10 h-10 rounded-lg object-cover shrink-0" />
                                    @else
                                        <div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center shrink-0">
                                            <svg class="w-5 h-5 text-orange-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                      d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
                                            </svg>
                                        </div>
                                    @endif
                                    <div class="flex-1 min-w-0">
                                        <p class="text-xs font-medium text-slate-800 truncate">{{ $item->product->name }}</p>
                                        <p class="text-[11px] text-slate-400">{{ $item->quantity }} × Rp {{ number_format($item->product->sell_price, 0, ',', '.') }}</p>
                                    </div>
                                    <p class="text-xs font-semibold text-slate-700 shrink-0">
                                        Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- ══ DATA PENERIMA ════════════════════════════════════════════════ --}}
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
            <h2 class="text-sm font-semibold text-slate-700 mb-3">Data Penerima</h2>

            <div class="space-y-3">
                <div>
                    <label class="block text-xs font-medium text-slate-600 mb-1">
                        Nama Lengkap <span class="text-red-500">*</span>
                    </label>
                    <input wire:model="name" type="text" placeholder="Nama lengkap penerima"
                           class="w-full h-10 px-3 bg-slate-50 border border-slate-200 rounded-xl text-sm
                                  focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent
                                  focus:bg-white transition-all placeholder:text-slate-300" />
                    @error('name') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-medium text-slate-600 mb-1">
                        Nomor HP <span class="text-red-500">*</span>
                    </label>
                    <input wire:model="phone" type="tel" placeholder="08xxxxxxxxxx"
                           class="w-full h-10 px-3 bg-slate-50 border border-slate-200 rounded-xl text-sm
                                  focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent
                                  focus:bg-white transition-all placeholder:text-slate-300" />
                    @error('phone') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-medium text-slate-600 mb-1">
                        Alamat Pengiriman <span class="text-red-500">*</span>
                    </label>
                    <textarea wire:model="address" rows="3"
                              placeholder="Nama jalan, nomor rumah, RT/RW, kelurahan, kecamatan..."
                              class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm
                                     focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent
                                     focus:bg-white transition-all placeholder:text-slate-300 resize-none"></textarea>
                    @error('address') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- ══ AREA PENGIRIMAN ══════════════════════════════════════════════ --}}
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
            <h2 class="text-sm font-semibold text-slate-700 mb-3">Area Pengiriman</h2>

            @if ($deliveryAreas->isEmpty())
                <p class="text-xs text-slate-400">Belum ada area pengiriman tersedia.</p>
            @else
                <div class="space-y-2">
                    @foreach ($deliveryAreas as $area)
                        <label class="flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-colors
                                      {{ $deliveryAreaId == $area->id
                                         ? 'border-orange-400 bg-orange-50'
                                         : 'border-slate-200 hover:border-orange-200' }}">
                            <input type="radio" wire:model.live="deliveryAreaId" value="{{ $area->id }}"
                                   class="accent-orange-500 shrink-0" />
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-slate-800">{{ $area->name }}</p>
                                @if ($area->estimasi_pengiriman)
                                    <p class="text-xs text-slate-400">Estimasi: {{ $area->estimasi_pengiriman }}</p>
                                @endif
                                @if ($area->keterangan)
                                    <p class="text-xs text-slate-400">{{ $area->keterangan }}</p>
                                @endif
                            </div>
                            <p class="text-sm font-bold text-orange-500 shrink-0">
                                @if ($area->cost == 0)
                                    Gratis
                                @else
                                    Rp {{ number_format($area->cost, 0, ',', '.') }}
                                @endif
                            </p>
                        </label>
                    @endforeach
                </div>
                @error('deliveryAreaId') <p class="mt-2 text-xs text-red-500">{{ $message }}</p> @enderror
            @endif
        </div>

        {{-- ══ METODE PEMBAYARAN ════════════════════════════════════════════ --}}
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
            <h2 class="text-sm font-semibold text-slate-700 mb-3">Metode Pembayaran</h2>

            <div class="space-y-2">
                @foreach ($paymentMethods as $method)
                    <label class="flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-colors
                                  {{ $paymentMethod === $method->value
                                     ? 'border-orange-400 bg-orange-50'
                                     : 'border-slate-200 hover:border-orange-200' }}">
                        <input type="radio" wire:model.live="paymentMethod" value="{{ $method->value }}"
                               class="accent-orange-500 shrink-0" />
                        <div class="flex-1">
                            <p class="text-sm font-medium text-slate-800">{{ $method->label() }}</p>
                            @if ($method === \App\Enums\PaymentMethod::Transfer)
                                <p class="text-xs text-slate-400">Bayar via transfer bank, konfirmasi manual</p>
                            @elseif ($method === \App\Enums\PaymentMethod::Qris)
                                <p class="text-xs text-slate-400">Scan QR code, bayar langsung</p>
                            @elseif ($method === \App\Enums\PaymentMethod::Cod)
                                <p class="text-xs text-slate-400">Bayar saat barang diterima</p>
                            @endif
                        </div>
                        @if (! $method->requiresProof())
                            <span class="text-[10px] font-semibold bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full shrink-0">
                                Bayar Nanti
                            </span>
                        @endif
                    </label>
                @endforeach
            </div>
            @error('paymentMethod') <p class="mt-2 text-xs text-red-500">{{ $message }}</p> @enderror
        </div>

        {{-- ══ CATATAN PESANAN ══════════════════════════════════════════════ --}}
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
            <h2 class="text-sm font-semibold text-slate-700 mb-2">Catatan Pesanan</h2>
            <textarea wire:model="customerNotes" rows="2"
                      placeholder="Contoh: Jangan pedas, kirim pagi hari..."
                      class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm
                             focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent
                             focus:bg-white transition-all placeholder:text-slate-300 resize-none"></textarea>
            @error('customerNotes') <p class="mt-1 text-xs text-red-500">{{ $message }}</p> @enderror
        </div>

        {{-- ══ RINGKASAN HARGA ══════════════════════════════════════════════ --}}
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
            <h2 class="text-sm font-semibold text-slate-700 mb-3">Ringkasan Pembayaran</h2>

            <div class="space-y-2.5">
                <div class="flex justify-between text-sm">
                    <span class="text-slate-600">Subtotal ({{ $items->sum('quantity') }} item)</span>
                    <span class="font-medium text-slate-800">Rp {{ number_format($subtotal, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-slate-600">Ongkos Kirim</span>
                    @if ($selectedArea)
                        <span class="font-medium text-slate-800">
                            @if ($deliveryCost == 0)
                                <span class="text-green-600 font-semibold">Gratis</span>
                            @else
                                Rp {{ number_format($deliveryCost, 0, ',', '.') }}
                            @endif
                        </span>
                    @elseif ($usingDefaultCost)
                        <span class="font-medium text-slate-800">
                            Rp {{ number_format($defaultCostValue, 0, ',', '.') }}
                            <span class="text-[10px] text-orange-500 block text-right">tarif default</span>
                        </span>
                    @else
                        <span class="text-slate-400 text-xs italic">Pilih area dulu</span>
                    @endif
                </div>
            </div>

            <div class="border-t border-slate-100 mt-3 pt-3 flex justify-between items-center">
                <span class="text-sm font-bold text-slate-800">Total Pembayaran</span>
                <span class="text-base font-black text-orange-500">
                    Rp {{ number_format($grandTotal, 0, ',', '.') }}
                </span>
            </div>
        </div>

        {{-- ══ TOMBOL BUAT PESANAN ══════════════════════════════════════════ --}}
        <div class="pb-2">
            <button type="submit"
                wire:loading.attr="disabled"
                wire:target="placeOrder"
                class="w-full h-12 flex items-center justify-center gap-2 bg-orange-500 hover:bg-orange-600
                       text-white font-semibold text-sm rounded-xl shadow-sm shadow-orange-200
                       active:scale-[0.98] transition-all disabled:opacity-70">
                <span wire:loading.remove wire:target="placeOrder">
                    Buat Pesanan
                </span>
                <span wire:loading wire:target="placeOrder" class="flex items-center gap-2">
                    <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                    Memproses...
                </span>
            </button>

            <p class="text-center text-[10px] text-slate-400 mt-2">
                Dengan menekan tombol di atas, Anda menyetujui pesanan ini.
            </p>
        </div>

    </form>
    @endif

</div>
