<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center gap-3">
            <a href="{{ route('customer.orders.index') }}" class="text-gray-500 hover:text-orange-500" style="text-decoration: none;">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            <h2 style="font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, #1e1e2f 0%, #FBAF6B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                Detail Pesanan #{{ $order->order_number }}
            </h2>
        </div>
    </x-slot>

    <style>
        * {
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: #FFF9F0;
        }
        
        .order-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 32px 24px;
            background: transparent;
            min-height: 100vh;
        }

        /* Alert */
        .alert {
            padding: 14px 20px;
            margin-bottom: 24px;
            border-radius: 60px;
            font-size: 0.9rem;
            font-weight: 700;
            background: white;
            border-left: 4px solid;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .alert-success { border-left-color: #FBAF6B; background: #FFF5EA; color: #9a3412; }
        .alert-error { border-left-color: #ef4444; background: #fef2f2; color: #991b1b; }
        .alert-info { border-left-color: #FBAF6B; background: #FFF5EA; color: #9a3412; }

        /* Card */
        .card {
            background: white;
            border-radius: 20px;
            margin-bottom: 24px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border: 1px solid #FFE6C7;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(251, 175, 107, 0.15);
        }
        .card-header {
            padding: 18px 24px;
            border-bottom: 1px solid #FFE6C7;
            background: #ffffff;
        }
        .card-title {
            font-size: 1rem;
            font-weight: 800;
            color: #F89B3C;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0;
        }
        .card-body { padding: 24px; }

        /* Header Info */
        .order-header {
            background: white;
            border-radius: 20px;
            padding: 24px 28px;
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            border: 1px solid #FFE6C7;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .order-number {
            font-size: 1.35rem;
            font-weight: 800;
            background: linear-gradient(135deg, #1e1e2f 0%, #FBAF6B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .order-date {
            font-size: 0.85rem;
            font-weight: 700;
            color: #FBAF6B;
            margin-top: 6px;
        }
        .badge {
            display: inline-block;
            padding: 6px 18px;
            font-size: 0.8rem;
            font-weight: 800;
            border-radius: 60px;
            letter-spacing: 0.5px;
        }
        .badge-pending { background: #FFF5EA; color: #F89B3C; border: 1px solid #FFE6C7; }
        .badge-paid { background: #FFF5EA; color: #F89B3C; border: 1px solid #FFE6C7; }
        .badge-processing { background: #FFF5EA; color: #F89B3C; border: 1px solid #FFE6C7; }
        .badge-shipped { background: #FFF5EA; color: #F89B3C; border: 1px solid #FFE6C7; }
        .badge-completed { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
        .badge-cancelled { background: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2; }
        
        .invoice-link {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #ffffff;
            text-decoration: none;
            margin-left: 12px;
            padding: 8px 20px;
            border-radius: 60px;
            background: linear-gradient(135deg, #FBAF6B 0%, #F89B3C 100%);
            transition: all 0.3s;
            box-shadow: 0 2px 6px rgba(251, 175, 107, 0.3);
        }
        .invoice-link:hover {
            background: linear-gradient(135deg, #F89B3C 0%, #F48C28 100%);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(251, 175, 107, 0.4);
        }

        /* Progress Steps - ORANGE THEME */
        .progress-steps {
            display: flex;
            align-items: center;
            padding: 28px 24px;
            background: white;
        }
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            flex: 1;
            position: relative;
        }
        .step-dot {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #f3f4f6;
            border: 2px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 800;
            color: #9ca3af;
        }
        .step.done .step-dot {
            background: #FBAF6B;
            border-color: #FBAF6B;
            color: white;
        }
        .step.active .step-dot {
            border-color: #FBAF6B;
            background: #FFF5EA;
            color: #FBAF6B;
            border-width: 3px;
        }
        .step-line {
            flex: 1;
            height: 3px;
            background: #e5e7eb;
            margin: 0 -8px;
            margin-top: -22px;
            border-radius: 3px;
        }
        .step-line.done { background: #FBAF6B; }
        .step-label {
            font-size: 0.8rem;
            font-weight: 800;
            color: #9ca3af;
        }
        .step.done .step-label { color: #FBAF6B; }
        .step.active .step-label { color: #FBAF6B; font-weight: 800; }

        /* Info Row */
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #FFE6C7;
            font-size: 0.95rem;
        }
        .info-row:last-child { border-bottom: none; }
        .info-label {
            color: #6b7280;
            font-weight: 700;
        }
        .info-value {
            color: #1f2937;
            font-weight: 800;
        }

        /* Order Items */
        .order-item {
            display: flex;
            gap: 20px;
            padding: 20px 0;
            border-bottom: 1px solid #FFE6C7;
        }
        .order-item:last-child { border-bottom: none; }
        .item-img {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            object-fit: cover;
            background: #FFF5EA;
            border: 1px solid #FFE6C7;
        }
        .item-info { flex: 1; }
        .item-name {
            font-weight: 800;
            font-size: 1rem;
            color: #1f2937;
            margin-bottom: 6px;
        }
        .item-variant {
            font-size: 0.8rem;
            font-weight: 700;
            color: #FBAF6B;
            margin-bottom: 6px;
        }
        .item-qty {
            font-size: 0.8rem;
            font-weight: 700;
            color: #9ca3af;
        }
        .item-price {
            font-weight: 800;
            font-size: 1rem;
            color: #F89B3C;
            white-space: nowrap;
        }
        .review-link {
            display: inline-block;
            margin-top: 8px;
            font-size: 0.75rem;
            font-weight: 800;
            background: linear-gradient(135deg, #FBAF6B, #F89B3C);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
        }
        .review-link:hover { text-decoration: underline; }
        .reviewed-badge {
            display: inline-block;
            margin-top: 8px;
            font-size: 0.7rem;
            font-weight: 800;
            color: #2E7D32;
        }

        /* Totals */
        .totals {
            padding: 20px 24px;
            background: #ffffff;
            border-top: 1px solid #FFE6C7;
        }
        .total-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 0.95rem;
            font-weight: 700;
        }
        .grand-total {
            display: flex;
            justify-content: space-between;
            padding-top: 14px;
            margin-top: 10px;
            border-top: 2px solid #FFE6C7;
            font-weight: 800;
            font-size: 1.2rem;
            color: #F89B3C;
        }

        /* Address */
        .address-box {
            background: #ffffff;
            border-radius: 16px;
            padding: 20px;
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.6;
            border: 1px solid #FFE6C7;
        }
        .address-name {
            font-weight: 800;
            font-size: 1rem;
            color: #F89B3C;
            margin-bottom: 6px;
        }

        /* Buttons */
        .btn {
            display: block;
            width: 100%;
            padding: 14px 20px;
            font-size: 0.85rem;
            font-weight: 800;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
        }
        .btn-primary {
            background: linear-gradient(135deg, #FBAF6B 0%, #F89B3C 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(251, 175, 107, 0.3);
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #F89B3C 0%, #F48C28 100%);
            transform: scale(1.02);
            box-shadow: 0 6px 16px rgba(251, 175, 107, 0.4);
        }
        .btn-danger {
            background: white;
            color: #F89B3C;
            border: 2px solid #FFE6C7;
        }
        .btn-danger:hover {
            background: linear-gradient(135deg, #FBAF6B, #F89B3C);
            color: white;
            border-color: #FBAF6B;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(251, 175, 107, 0.3);
        }
        .info-box {
            background: #ffffff;
            border-radius: 60px;
            padding: 14px 18px;
            font-size: 0.85rem;
            font-weight: 700;
            color: #9a3412;
            text-align: center;
            border: 1px solid #FFE6C7;
        }

        /* Layout */
        .two-columns {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 24px;
        }
        @media (max-width: 768px) {
            .two-columns { grid-template-columns: 1fr; }
            .order-container { padding: 20px 16px; }
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal.active { display: flex; }
        .modal-content {
            background: white;
            border-radius: 24px;
            padding: 32px;
            width: 90%;
            max-width: 420px;
            border: 1px solid #FFE6C7;
        }
        .modal-title {
            font-size: 1.25rem;
            font-weight: 800;
            background: linear-gradient(135deg, #1e1e2f 0%, #FBAF6B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
        }
        .modal-sub {
            font-size: 0.85rem;
            font-weight: 700;
            color: #FBAF6B;
            margin-bottom: 20px;
        }
        .modal-textarea {
            width: 100%;
            padding: 12px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            border: 2px solid #FFE6C7;
            border-radius: 16px;
            resize: vertical;
            min-height: 100px;
        }
        .modal-textarea:focus {
            outline: none;
            border-color: #FBAF6B;
        }
        .modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        .modal-btn {
            flex: 1;
            padding: 12px;
            font-size: 0.8rem;
            font-weight: 800;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .modal-btn-cancel {
            background: #f3f4f6;
            color: #6b7280;
        }
        .modal-btn-cancel:hover {
            background: #e5e7eb;
            transform: scale(1.02);
        }
        .modal-btn-submit {
            background: linear-gradient(135deg, #FBAF6B, #F89B3C);
            color: white;
        }
        .modal-btn-submit:hover {
            background: linear-gradient(135deg, #F89B3C, #F48C28);
            transform: scale(1.02);
        }

        /* Courier Steps - ORANGE THEME */
        .courier-steps {
            display: flex;
            align-items: center;
            padding: 24px;
        }
        .cstep {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
        }
        .cstep-dot {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #f3f4f6;
            border: 2px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 800;
        }
        .cstep.done .cstep-dot {
            background: #FBAF6B;
            border-color: #FBAF6B;
            color: white;
        }
        .cstep.active .cstep-dot {
            border-color: #FBAF6B;
            border-width: 3px;
        }
        .cstep-line {
            flex: 1;
            height: 3px;
            background: #e5e7eb;
            margin: 0 -8px;
            margin-top: -19px;
            border-radius: 3px;
        }
        .cstep-line.done { background: #FBAF6B; }
        .cstep-label {
            font-size: 0.7rem;
            font-weight: 800;
            color: #9ca3af;
        }
        .cstep.done .cstep-label { color: #FBAF6B; }

        /* Proof Image */
        .proof-img {
            width: 100%;
            border-radius: 16px;
            cursor: pointer;
            margin-top: 16px;
            border: 2px solid #FFE6C7;
        }
        .tracking-box {
            background: #FFF5EA;
            padding: 12px 16px;
            border-radius: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            border: 1px solid #FFE6C7;
        }
        .copy-btn {
            background: linear-gradient(135deg, #FBAF6B, #F89B3C);
            border: none;
            font-size: 0.75rem;
            font-weight: 800;
            color: white;
            cursor: pointer;
            padding: 8px 18px;
            border-radius: 60px;
            transition: all 0.3s;
        }
        .copy-btn:hover {
            background: linear-gradient(135deg, #F89B3C, #F48C28);
            transform: scale(1.05);
        }
    </style>

    @php
        $statusRank = ['pending'=>0,'paid'=>1,'processing'=>2,'shipped'=>3,'completed'=>4,'cancelled'=>-1];
        $curRank    = $statusRank[$order->status] ?? 0;

        $pillMap = [
            'pending'=>'badge-pending','paid'=>'badge-paid',
            'processing'=>'badge-processing','shipped'=>'badge-shipped',
            'completed'=>'badge-completed','cancelled'=>'badge-cancelled',
        ];
        $statusLabel = [
            'pending'=>'Menunggu Bayar','paid'=>'Dibayar','processing'=>'Diproses',
            'shipped'=>'Dikirim','completed'=>'Selesai','cancelled'=>'Dibatalkan',
        ];

        $taskRank = ['assigned'=>1,'picked_up'=>2,'delivered'=>3];
        $curTask  = $taskRank[$order->courier_task_status ?? ''] ?? 0;

        $canConfirm      = $order->status === 'shipped' && $curTask >= 3;
        $canPay          = $order->payment_status !== 'paid' && $order->status === 'paid' && $order->snap_token;
        $cancellable     = in_array($order->status, ['pending','paid','processing']) && $order->cancel_request_status !== 'pending';
        $isPaid          = in_array($order->status, ['paid','processing','shipped','completed']) || $order->payment_status === 'paid';
    @endphp

    <div class="order-container">
        {{-- HEADER --}}
        <div class="order-header">
            <div>
                <div class="order-number">Pesanan #{{ $order->order_number }}</div>
                <div class="order-date">{{ $order->created_at->format('d M Y, H:i') }} WIB</div>
            </div>
            <div>
                <span class="badge {{ $pillMap[$order->status] ?? '' }}">
                    {{ $statusLabel[$order->status] ?? ucfirst($order->status) }}
                </span>
                @if(in_array($order->status, ['paid','processing','shipped','completed']))
                    <a href="{{ route('customer.orders.invoice', $order->id) }}" target="_blank" class="invoice-link">
                        Invoice
                    </a>
                @endif
            </div>
        </div>

        {{-- ALERTS --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-error">{{ session('error') }}</div>
        @endif
        @if(session('info'))
            <div class="alert alert-info">{{ session('info') }}</div>
        @endif

        {{-- PROGRESS BAR --}}
        @if($order->status !== 'cancelled')
        <div class="card">
            <div class="progress-steps">
                @php
                    $steps = [
                        ['key'=>'pending', 'label'=>'Pesanan'],
                        ['key'=>'paid', 'label'=>'Dibayar'],
                        ['key'=>'processing', 'label'=>'Diproses'],
                        ['key'=>'shipped', 'label'=>'Dikirim'],
                        ['key'=>'completed', 'label'=>'Selesai'],
                    ];
                    $stepRanks = ['pending'=>0,'paid'=>1,'processing'=>2,'shipped'=>3,'completed'=>4];
                @endphp
                @foreach($steps as $i => $step)
                    @php
                        $r = $stepRanks[$step['key']];
                        $cls = $curRank > $r ? 'done' : ($curRank === $r ? 'active' : '');
                    @endphp
                    @if($i > 0)
                        <div class="step-line {{ $curRank > $stepRanks[$steps[$i-1]['key']] ? 'done' : '' }}"></div>
                    @endif
                    <div class="step {{ $cls }}">
                        <div class="step-dot">
                            @if($curRank > $r) ✓ @else {{ $i+1 }} @endif
                        </div>
                        <div class="step-label">{{ $step['label'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
        @else
        <div class="card">
            <div class="card-body" style="text-align: center; color: #dc2626; font-weight: 800;">
                Pesanan Dibatalkan
            </div>
        </div>
        @endif

        <div class="two-columns">
            {{-- KOLOM KIRI --}}
            <div>
                {{-- STATUS KURIR --}}
                @if($order->courier_id)
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Status Pengiriman</div>
                    </div>
                    <div class="courier-steps">
                        @php
                            $cs = [
                                ['label'=>'Menuju Toko','rank'=>1],
                                ['label'=>'Dikirim','rank'=>2],
                                ['label'=>'Tiba','rank'=>3],
                            ];
                        @endphp
                        @foreach($cs as $i => $c)
                            @if($i > 0)
                                <div class="cstep-line {{ $curTask >= $c['rank'] ? 'done' : '' }}"></div>
                            @endif
                            @php $cCls = $curTask >= $c['rank'] ? 'done' : ($curTask === $c['rank']-1 ? 'active' : ''); @endphp
                            <div class="cstep {{ $cCls }}">
                                <div class="cstep-dot">
                                    @if($curTask >= $c['rank']) ✓ @else {{ $i+1 }} @endif
                                </div>
                                <div class="cstep-label">{{ $c['label'] }}</div>
                            </div>
                        @endforeach
                    </div>
                    <div class="card-body">
                        @if($order->courier_task_status === 'assigned')
                            <div class="info-box">Kurir sedang menuju toko untuk mengambil paket Anda.</div>
                        @elseif($order->courier_task_status === 'picked_up')
                            <div class="info-box">
                                Paket sedang dalam perjalanan menuju alamat Anda.
                                @if($order->picked_up_at)
                                    <div style="margin-top: 8px; font-size:0.8rem;">Diambil: {{ $order->picked_up_at->format('d M Y, H:i') }} WIB</div>
                                @endif
                                @if($order->tracking_number)
                                    <div class="tracking-box">
                                        <span style="font-weight:800;">No. Resi: <strong>{{ $order->tracking_number }}</strong></span>
                                        <button class="copy-btn" onclick="copyResi()">Salin</button>
                                    </div>
                                @endif
                            </div>
                        @elseif($order->courier_task_status === 'delivered')
                            <div class="info-box" style="background: #E8F5E9; color: #2E7D32;">
                                Paket telah diantar ke alamat Anda.
                                @if($order->delivered_at)
                                    <div style="margin-top: 8px;">Diantar: {{ $order->delivered_at->format('d M Y, H:i') }} WIB</div>
                                @endif
                            </div>
                            @php
                                $deliveryProofs = $order->deliveryProofs ?? collect();
                                $proofDelivered = $deliveryProofs->where('type', 'delivered')->last();
                            @endphp
                            @if($proofDelivered)
                                <div style="margin-top: 20px;">
                                    <div style="font-size: 0.85rem; font-weight: 800; margin-bottom: 10px; color:#F89B3C;">Bukti Pengiriman</div>
                                    <a href="{{ asset('storage/' . $proofDelivered->photo_path) }}" target="_blank">
                                        <img src="{{ asset('storage/' . $proofDelivered->photo_path) }}" class="proof-img">
                                    </a>
                                    @if($proofDelivered->notes)
                                        <div style="font-size: 0.75rem; font-weight: 700; color: #6b7280; margin-top: 10px;">{{ $proofDelivered->notes }}</div>
                                    @endif
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
                @endif

                {{-- ITEM PESANAN --}}
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Item Pesanan</div>
                    </div>
                    <div style="padding: 0 24px;">
                        @foreach($order->items as $item)
                        @php
                            $imgUrl = null;
                            if ($item->variant && $item->variant->image) $imgUrl = $item->variant->image->image_path;
                            if (!$imgUrl && $item->product?->images?->count()) {
                                $primary = $item->product->images->where('is_primary',true)->first();
                                $imgUrl  = $primary ? $primary->image_path : $item->product->images->first()->image_path;
                            }
                        @endphp
                        <div class="order-item">
                            @if($imgUrl)
                                <img src="{{ asset('storage/'.$imgUrl) }}" class="item-img">
                            @else
                                <div class="item-img" style="display: flex; align-items: center; justify-content: center;"></div>
                            @endif
                            <div class="item-info">
                                <div class="item-name">{{ $item->product_name ?? $item->product?->name }}</div>
                                @if($item->variant_info)
                                    <div class="item-variant">{{ $item->variant_info }}</div>
                                @endif
                                <div class="item-qty">Jumlah: {{ $item->quantity }}</div>
                                @if($order->status === 'completed' && $item->product)
                                    @php
                                        $hasReviewed = \App\Models\Review::where('user_id', Auth::id())
                                            ->where('order_id', $order->id)
                                            ->where('product_id', $item->product->id)
                                            ->exists();
                                    @endphp
                                    @if($hasReviewed)
                                        <span class="reviewed-badge">✓ Sudah Diulas</span>
                                    @else
                                        <a href="{{ route('reviews.create', ['order'=>$order->id, 'product'=>$item->product->id]) }}"
                                           class="review-link">Beri Ulasan</a>
                                    @endif
                                @endif
                            </div>
                            <div class="item-price">Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}</div>
                        </div>
                        @endforeach
                    </div>
                    <div class="totals">
                        <div class="total-row">
                            <span>Subtotal</span>
                            <span>Rp {{ number_format($order->subtotal, 0, ',', '.') }}</span>
                        </div>
                        <div class="total-row">
                            <span>Ongkos Kirim</span>
                            <span>Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                        </div>
                        <div class="grand-total">
                            <span>Total Bayar</span>
                            <span>Rp {{ number_format($order->total, 0, ',', '.') }}</span>
                        </div>
                    </div>
                </div>

                {{-- ALAMAT --}}
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Alamat Pengiriman</div>
                    </div>
                    <div class="card-body">
                        <div class="address-box">
                            <div class="address-name">{{ $order->recipient_name }}</div>
                            <div>{{ $order->recipient_phone }}</div>
                            <div style="margin-top: 10px;">{{ $order->shipping_address }}</div>
                            <div>{{ $order->village ? 'Kel. '.$order->village : '' }} {{ $order->district ? 'Kec. '.$order->district : '' }}</div>
                            <div>{{ $order->city ?? '' }} {{ $order->province ?? '' }} {{ $order->postal_code ?? '' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN --}}
            <div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Informasi Pesanan</div>
                    </div>
                    <div style="padding: 0 20px;">
                        <div class="info-row">
                            <span class="info-label">No. Pesanan</span>
                            <span class="info-value">#{{ $order->order_number }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Tanggal</span>
                            <span class="info-value">{{ $order->created_at->format('d M Y') }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Status Pembayaran</span>
                            <span class="info-value" style="{{ $isPaid ? 'color:#2E7D32;' : 'color:#C62828;' }}">
                                {{ $isPaid ? 'Lunas' : 'Belum Bayar' }}
                            </span>
                        </div>
                        @if($order->tracking_number)
                        <div class="info-row">
                            <span class="info-label">No. Resi</span>
                            <span class="info-value" style="font-family: monospace;">{{ $order->tracking_number }}</span>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Aksi</div>
                    </div>
                    <div class="card-body">
                        @if($canPay)
                            <button id="btn-pay" class="btn btn-primary" style="margin-bottom: 14px;">Bayar Sekarang</button>
                        @endif

                        @if($canConfirm)
                            <form action="{{ route('customer.orders.confirm-received', $order->id) }}" method="POST"
                                  onsubmit="return confirm('Konfirmasi pesanan sudah diterima?')">
                                @csrf
                                <button type="submit" class="btn btn-primary" style="margin-bottom: 14px;">Konfirmasi Diterima</button>
                            </form>
                        @endif

                        @if($order->status === 'shipped' && $curTask < 3)
                            <div class="info-box" style="margin-bottom: 14px;">Menunggu konfirmasi kurir</div>
                        @endif

                        @if($order->payment_status === 'paid' && !$canPay && !$canConfirm && $order->status !== 'completed')
                            <div class="info-box" style="margin-bottom: 14px; background: #E8F5E9; color: #2E7D32;">
                                Pembayaran telah diterima
                            </div>
                        @endif

                        @if($order->status === 'completed')
                            <div class="info-box" style="margin-bottom: 14px; background: #E8F5E9; color: #2E7D32;">
                                Pesanan selesai
                            </div>
                        @endif

                        @if($order->cancel_request_status === 'pending')
                            <div class="info-box" style="margin-bottom: 14px; background: #FFF5EA; color: #F89B3C;">
                                Permintaan pembatalan menunggu persetujuan
                                @if($order->cancel_reason)
                                    <div style="font-size: 0.75rem; font-weight: 600; margin-top: 6px;">Alasan: {{ $order->cancel_reason }}</div>
                                @endif
                            </div>
                        @elseif($order->cancel_request_status === 'rejected')
                            <div class="info-box" style="margin-bottom: 14px; background: #FFEBEE; color: #C62828;">
                                Permintaan pembatalan ditolak
                                @if($order->cancel_reject_reason)
                                    <div style="font-size: 0.75rem; font-weight: 600; margin-top: 6px;">{{ $order->cancel_reject_reason }}</div>
                                @endif
                            </div>
                        @endif

                        @if($cancellable)
                            <button type="button" class="btn btn-danger"
                                    onclick="document.getElementById('modalCancel').classList.add('active')">
                                Ajukan Pembatalan
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL BATAL --}}
    <div class="modal" id="modalCancel">
        <div class="modal-content">
            <div class="modal-title">Ajukan Pembatalan</div>
            <div class="modal-sub">Pesanan #{{ $order->order_number }}</div>
            <form action="{{ route('customer.orders.request-cancel', $order->id) }}" method="POST">
                @csrf
                <textarea name="cancel_reason" class="modal-textarea" required
                          placeholder="Alasan pembatalan..."></textarea>
                <div class="modal-actions">
                    <button type="button" class="modal-btn modal-btn-cancel"
                            onclick="document.getElementById('modalCancel').classList.remove('active')">Batal</button>
                    <button type="submit" class="modal-btn modal-btn-submit">Kirim</button>
                </div>
            </form>
        </div>
    </div>

    {{-- SCRIPT MIDTRANS --}}
    @if($canPay && $order->snap_token)
    <script src="{{ config('midtrans.is_production') ? 'https://app.midtrans.com/snap/snap.js' : 'https://app.sandbox.midtrans.com/snap/snap.js' }}"
            data-client-key="{{ config('midtrans.client_key') }}"></script>
    <script>
        document.getElementById('btn-pay')?.addEventListener('click', function() {
            window.snap.pay('{{ $order->snap_token }}', {
                onSuccess: () => {
                    fetch('{{ route("customer.orders.mark-paid", $order->id) }}', {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' }
                    }).then(() => window.location.reload());
                },
                onPending: () => window.location.reload(),
                onError:   () => window.location.reload(),
                onClose:   () => {}
            });
        });

        function copyResi() {
            navigator.clipboard.writeText('{{ $order->tracking_number }}');
            const btn = event.target;
            btn.textContent = '✓';
            setTimeout(() => btn.textContent = 'Salin', 1500);
        }
    </script>
    @endif
</x-app-layout>