@extends('layouts.app')

@section('title', 'Detail Pesanan #' . $order->order_number . ' | Trisna Monel')

@section('extra_css')
    <style>
        .order-show-section {
            padding: 140px 0 6rem;
            background: #fafafa;
            min-height: 80vh;
        }

        .order-show-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .order-show-card {
            background: white;
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
            margin-bottom: 2rem;
        }

        .status-actions-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .status-buttons-group {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .tracking-buttons-group {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
        }

        @media (max-width: 576px) {
            .order-show-card {
                padding: 1.25rem;
                border-radius: 14px;
            }
            .order-show-item {
                gap: 0.75rem;
                padding: 0.85rem;
            }
            .order-show-item-img {
                width: 50px;
                height: 50px;
            }
            .order-show-item-details h4 {
                font-size: 0.85rem !important;
            }
        }

        .detail-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--color-primary);
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .grid-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        @media (max-width: 768px) {
            .grid-details {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        .detail-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
            margin-bottom: 0.4rem;
        }

        .detail-val {
            font-size: 0.95rem;
            color: var(--color-primary);
            font-weight: 600;
        }

        .order-show-items-list {
            margin-bottom: 2rem;
            border: 1px solid #f0f0f0;
            border-radius: 12px;
            overflow: hidden;
        }

        .order-show-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.25rem;
            background: white;
            border-bottom: 1px solid #f0f0f0;
        }

        .order-show-item:last-child {
            border-bottom: none;
        }

        .order-show-item-img {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 8px;
            background: #fafafa;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .order-show-item-details {
            flex-grow: 1;
        }

        .status-header-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            border-radius: 16px;
            margin-bottom: 2rem;
            background: #fcfcfc;
            border: 1px solid #f0f0f0;
        }

        @media (max-width: 576px) {
            .status-header-box {
                flex-direction: column;
                align-items: stretch;
                gap: 1.25rem;
                padding: 1.25rem;
            }
            .status-actions-container {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                gap: 0.75rem;
            }
            .status-badge {
                text-align: center;
                width: 100%;
            }
            .status-buttons-group {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                gap: 0.6rem;
            }
            .status-buttons-group form {
                width: 100%;
                margin: 0;
            }
            .status-buttons-group .btn-pay-now,
            .status-buttons-group button {
                width: 100%;
                justify-content: center;
                display: flex;
            }
            .tracking-buttons-group {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                gap: 0.6rem;
            }
            .tracking-buttons-group form {
                width: 100%;
                margin: 0;
            }
            .tracking-buttons-group .btn-pay-now,
            .tracking-buttons-group a {
                width: 100%;
                justify-content: center;
                display: flex !important;
            }
        }

        .status-badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 6px 16px;
            border-radius: 50px;
        }

        .status-menunggu_pembayaran { background: rgba(176, 130, 86, 0.08); color: var(--color-secondary); border: 1px solid rgba(176, 130, 86, 0.2); }
        .status-diproses { background: rgba(13, 110, 253, 0.05); color: #0d6efd; border: 1px solid rgba(13, 110, 253, 0.2); }
        .status-dikirim { background: rgba(111, 66, 193, 0.05); color: #6f42c1; border: 1px solid rgba(111, 66, 193, 0.2); }
        .status-selesai { background: rgba(25, 135, 84, 0.05); color: #198754; border: 1px solid rgba(25, 135, 84, 0.2); }
        .status-dibatalkan { background: rgba(220, 53, 69, 0.05); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.2); }

        .btn-pay-now {
            padding: 1rem 2rem;
            background: var(--grad-gold);
            color: white;
            border: none;
            border-radius: 10px;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(176, 130, 86, 0.15);
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-pay-now:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(176, 130, 86, 0.25);
            filter: brightness(1.05);
        }

        .tracking-number-card {
            background: rgba(111, 66, 193, 0.03);
            border: 1px solid rgba(111, 66, 193, 0.12);
            padding: 1.5rem 2rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        @media (max-width: 576px) {
            .tracking-number-card {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            .tracking-number-card button {
                width: 100%;
            }
        }
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(176, 130, 86, 0.4); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(176, 130, 86, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(176, 130, 86, 0); }
        }

        /* Real-time Tracking CSS */
        .tracking-timeline-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            position: relative;
            padding-left: 1.5rem;
            margin-left: 0.5rem;
            border-left: 2px dashed rgba(111, 66, 193, 0.2);
            margin-top: 1.5rem;
        }

        .tracking-timeline-item {
            position: relative;
        }

        .tracking-timeline-item::before {
            content: '';
            position: absolute;
            left: calc(-1.5rem - 6px);
            top: 4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #cbd5e1;
            border: 2px solid white;
            box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.2);
            transition: all 0.3s ease;
        }

        .tracking-timeline-item.active::before {
            background: #6f42c1;
            box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.3);
            animation: pulse-dot 1.5s infinite;
        }

        .tracking-timeline-item.delivered::before {
            background: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
        }

        @keyframes pulse-dot {
            0% { box-shadow: 0 0 0 0px rgba(111, 66, 193, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(111, 66, 193, 0); }
            100% { box-shadow: 0 0 0 0px rgba(111, 66, 193, 0); }
        }

        .tracking-time {
            font-size: 0.7rem;
            font-weight: 700;
            color: #6f42c1;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.2rem;
        }

        .tracking-desc {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--color-primary);
            line-height: 1.4;
        }

        .tracking-loc {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            margin-top: 0.15rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        /* Skeleton Loader styles */
        .tracking-skeleton-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            padding-left: 0.5rem;
        }

        .tracking-skeleton-item {
            height: 50px;
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: loading-pulse 1.5s infinite;
            border-radius: 8px;
        }

        @keyframes loading-pulse {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
    </style>
@endsection

@section('content')
    <section class="order-show-section">
        <div class="container order-show-container">
            
            <a href="{{ route('orders.index') }}" class="text-gold" style="color: var(--color-secondary); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;">
                <i class="fas fa-arrow-left"></i> Kembali ke Riwayat Pesanan
            </a>

            @if(session('success'))
                <div style="background: rgba(16, 185, 129, 0.08); border-left: 4px solid #10b981; color: #065f46; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;">
                    <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div style="background: rgba(239, 68, 68, 0.08); border-left: 4px solid #ef4444; color: #991b1b; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;">
                    <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
                </div>
            @endif

            <!-- Status Header Box -->
            <div class="status-header-box">
                <div>
                    <h4 class="font-heading" style="font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem;">Pesanan #{{ $order->order_number }}</h4>
                    <p style="font-size: 0.8rem; color: var(--color-text-muted); margin: 0;">Dibuat pada {{ $order->created_at->format('d F Y, H:i') }} WIB</p>
                </div>

                <div class="status-actions-container">
                    <span class="status-badge status-{{ $order->status }}">
                        @if($order->status === 'menunggu_pembayaran')
                            Menunggu Pembayaran
                        @elseif($order->status === 'diproses')
                            Diproses
                        @elseif($order->status === 'dikirim')
                            Dikirim (Dalam Perjalanan)
                        @elseif($order->status === 'selesai')
                            Selesai
                        @elseif($order->status === 'dibatalkan')
                            Dibatalkan
                        @else
                            {{ ucfirst($order->status) }}
                        @endif
                    </span>

                    @if($order->status === 'menunggu_pembayaran')
                        <div class="status-buttons-group">
                            @if($order->payment_token)
                                <button class="btn-pay-now" id="pay-button">
                                    Bayar Sekarang <i class="fas fa-wallet"></i>
                                </button>
                            @endif
                            <form action="{{ route('orders.cancel', $order->order_number) }}" method="POST" id="cancelOrderForm">
                                @csrf
                                <button type="button" id="btnCancelOrder" class="btn-pay-now" style="background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%); box-shadow: 0 10px 20px rgba(220, 53, 69, 0.15);">
                                    Batalkan Pesanan <i class="fas fa-times-circle"></i>
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Resi / Tracking Card -->
            @if(($order->status === 'dikirim' || $order->status === 'selesai') && $order->tracking_number)
                <div class="tracking-number-card" style="display: block;">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;">
                        <div>
                            <div class="detail-label" style="color: #6f42c1;">Kurir & Nomor Resi Pengiriman</div>
                            <div style="font-size: 1.15rem; font-weight: 700; color: var(--color-primary); display: flex; align-items: center; gap: 0.75rem;">
                                <span>{{ strtoupper($order->courier) }} - <span style="letter-spacing: 0.05em; color: #6f42c1;" id="resiNumberVal">{{ $order->tracking_number }}</span></span>
                                <button onclick="copyResi()" class="text-gold" style="background: none; border: none; cursor: pointer; font-size: 0.95rem; color: var(--color-secondary); padding: 0.25rem; display: inline-flex; align-items: center; justify-content: center;" title="Salin Nomor Resi">
                                    <i class="far fa-copy"></i>
                                </button>
                                <span id="copyTooltip" style="font-size: 0.65rem; color: #10b981; font-weight: 700; opacity: 0; transition: opacity 0.3s;">Tersalin!</span>
                            </div>
                            <p style="font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; margin-bottom: 0;">Gunakan nomor resi ini untuk melacak status paket logistik Anda secara real-time.</p>
                        </div>

                        <div class="tracking-buttons-group">
                            @if($order->status === 'dikirim')
                                <form action="{{ route('orders.complete', $order->order_number) }}" method="POST" id="completeOrderForm">
                                    @csrf
                                    <button type="button" id="btnCompleteOrder" class="btn-pay-now" style="background: linear-gradient(135deg, #198754 0%, #157347 100%); box-shadow: 0 10px 20px rgba(25, 135, 84, 0.15);">
                                        Selesai Diterima <i class="fas fa-check-double"></i>
                                    </button>
                                </form>
                            @endif
                            
                            @php
                                $courierUrls = [
                                    'jne' => 'https://www.jne.co.id/id/tracking/trace',
                                    'tiki' => 'https://www.tiki.id/id/tracking',
                                    'pos' => 'https://www.posindonesia.co.id/id/tracking'
                                ];
                                $trackingUrl = $courierUrls[strtolower($order->courier)] ?? 'https://cekresi.com';
                            @endphp
                            <a href="{{ $trackingUrl }}" target="_blank" class="btn-pay-now" style="background: #cbd5e1; color: #334155; box-shadow: none; border: 1px solid #cbd5e1; text-decoration: none;">
                                Web Resmi <i class="fas fa-external-link-alt"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Real-Time Tracking Timeline -->
                    <div id="trackingTimelineSection" style="margin-top: 2rem; border-top: 1px dashed rgba(111, 66, 193, 0.15); padding-top: 1.5rem;">
                        <h4 style="font-size: 0.95rem; font-weight: 700; color: #6f42c1; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; font-family: 'Outfit', sans-serif;">
                            <i class="fas fa-route"></i> Perjalanan Paket (Real-Time)
                        </h4>
                        <div id="trackingTimelineContent">
                            <div class="tracking-skeleton-wrapper">
                                <div class="tracking-skeleton-item"></div>
                                <div class="tracking-skeleton-item"></div>
                                <div class="tracking-skeleton-item"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Order Details Card -->
            <div class="order-show-card">
                <h3 class="detail-title"><i class="fas fa-receipt text-gold" style="color: var(--color-secondary);"></i> Detail Transaksi</h3>
                
                <div class="grid-details">
                    <div>
                        <div class="detail-group" style="margin-bottom: 1.25rem;">
                            <div class="detail-label">Penerima</div>
                            <div class="detail-val">{{ $order->recipient_name }}</div>
                        </div>
                        <div class="detail-group">
                            <div class="detail-label">Nomor Telepon</div>
                            <div class="detail-val">{{ $order->recipient_phone }}</div>
                        </div>
                    </div>

                    <div>
                        <div class="detail-group" style="margin-bottom: 1.25rem;">
                            <div class="detail-label">Alamat Pengiriman</div>
                            <div class="detail-val">
                                {{ $order->address_detail }}<br>
                                {{ $order->city }}, {{ $order->province }}<br>
                                Kode Pos: {{ $order->postal_code }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-details" style="border-top: 1px dashed #f0f0f0; padding-top: 1.5rem; margin-bottom: 0;">
                    <div>
                        <div class="detail-group" style="margin-bottom: 1.25rem;">
                            <div class="detail-label">Metode Pengiriman</div>
                            <div class="detail-val">{{ strtoupper($order->courier) }} ({{ $order->shipping_service }})</div>
                        </div>
                        <div class="detail-group">
                            <div class="detail-label">Catatan Pesanan</div>
                            <div class="detail-val" style="font-weight: 500; font-style: italic; color: var(--color-text-muted);">
                                {{ $order->notes ? $order->notes : 'Tidak ada catatan' }}
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="detail-group" style="margin-bottom: 1.25rem;">
                            <div class="detail-label">Status Pembayaran</div>
                            <div class="detail-val" style="text-transform: uppercase;">
                                @if($order->payment_status === 'settlement')
                                    <span style="color: #198754; font-weight: 700;"><i class="fas fa-check-circle mr-1"></i> LUNAS (Settlement)</span>
                                @elseif($order->payment_status === 'pending')
                                    <span style="color: var(--color-secondary); font-weight: 700;"><i class="fas fa-clock mr-1"></i> Menunggu Bayar (Pending)</span>
                                @else
                                    <span style="color: #dc3545; font-weight: 700;"><i class="fas fa-times-circle mr-1"></i> {{ $order->payment_status }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Items Card -->
            <div class="order-show-card">
                <h3 class="detail-title"><i class="fas fa-box-open text-gold" style="color: var(--color-secondary);"></i> Produk Yang Dibeli</h3>
                
                <div class="order-show-items-list">
                    @foreach($order->items as $item)
                        <div class="order-show-item">
                            <img src="{{ $item->product && $item->product->main_image ? asset('uploads/' . $item->product->main_image) : 'https://placehold.co/100x100?text=Trisna+Monel' }}" 
                                 class="order-show-item-img" 
                                 alt="{{ $item->product_name }}"
                                 onerror="this.src='https://placehold.co/100x100?text=Trisna+Monel'">
                            
                            <div class="order-show-item-details">
                                <h4 class="font-heading" style="font-weight: 700; font-size: 1rem; color: var(--color-primary);">{{ $item->product_name }}</h4>
                                @if($item->variation)
                                    <span style="font-size: 0.75rem; background: #fafafa; border: 1px solid #e0e0e0; color: #555; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 0.25rem;">
                                        Variasi: {{ $item->variation }}
                                    </span>
                                @endif
                                <div style="font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.4rem;">
                                    Rp {{ number_format($item->price, 0, ',', '.') }} x {{ $item->quantity }}
                                </div>
                            </div>

                            <div class="font-heading" style="font-weight: 700; font-size: 1.05rem; color: var(--color-accent); white-space: nowrap; flex-shrink: 0;">
                                Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}
                            </div>
                        </div>
                    @endforeach
                </div>

                <div style="max-width: 320px; margin-left: auto;">
                    <div class="summary-row" style="display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--color-text-muted);">
                        <span>Subtotal Produk</span>
                        <span style="font-weight: 600; color: var(--color-primary);">Rp {{ number_format($order->total_price, 0, ',', '.') }}</span>
                    </div>
                    <div class="summary-row" style="display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--color-text-muted);">
                        <span>Ongkos Kirim</span>
                        <span style="font-weight: 600; color: var(--color-primary);">Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                    </div>
                    <div class="summary-row total" style="display: flex; justify-content: space-between; border-top: 1px dashed #e0e0e0; padding-top: 1rem; margin-top: 0.8rem; font-size: 1.15rem; font-weight: 700; color: var(--color-primary);">
                        <span>Total Pembayaran</span>
                        <span style="color: var(--color-accent);">Rp {{ number_format($order->grand_total, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

            <!-- Premium Glassmorphic Payment Simulator Modal -->
            <div id="payment-simulator-modal" style="display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); z-index: 9999; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease-in-out; padding: 1.5rem;">
                <div style="background: rgba(17, 17, 17, 0.95); border: 2px solid var(--color-secondary, #b08256); border-radius: 24px; max-width: 480px; width: 100%; box-shadow: 0 25px 50px -12px rgba(176, 130, 86, 0.25); overflow: hidden; transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-family: 'Outfit', sans-serif;">
                    <!-- Modal Header -->
                    <div style="background: var(--grad-gold, linear-gradient(135deg, #b08256 0%, #8d6239 100%)); padding: 1.75rem 2rem; color: white; position: relative;">
                        <h4 style="font-size: 1.25rem; font-weight: 800; margin: 0; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.75rem;">
                            <i class="fas fa-tools"></i> DEMO PAYMENT GATEWAY
                        </h4>
                        <p style="margin: 0.25rem 0 0; font-size: 0.8rem; opacity: 0.9; font-weight: 500;">Simulasi Pembayaran Trisna Monel Offline</p>
                        <button id="close-simulator-btn" style="position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: white; font-size: 1.25rem; cursor: pointer; transition: opacity 0.3s; opacity: 0.8;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.8">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <!-- Modal Body -->
                    <div style="padding: 2.25rem 2rem; color: #fff;">
                        <div style="text-align: center; margin-bottom: 2rem;">
                            <div style="width: 70px; height: 70px; background: rgba(176, 130, 86, 0.15); border: 2px dashed var(--color-secondary, #b08256); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--color-secondary, #b08256); font-size: 1.8rem; animation: pulse 2s infinite;">
                                <i class="fas fa-wallet"></i>
                            </div>
                            <h5 style="font-size: 1.1rem; font-weight: 700; color: #f3f4f6; margin-bottom: 0.5rem;">Mode Simulasi Aktif</h5>
                            <p style="font-size: 0.85rem; color: #9ca3af; line-height: 1.6; margin: 0;">
                                Akun Midtrans Anda sedang berada dalam mode demo / luring. Anda dapat menggunakan simulator ini untuk memverifikasi alur pembayaran pesanan Anda tanpa kartu kredit atau uang riil.
                            </p>
                        </div>

                        <!-- Order Summary Box -->
                        <div style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 1.25rem; margin-bottom: 2rem;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.85rem;">
                                <span style="color: #9ca3af;">Nomor Pesanan:</span>
                                <span style="font-weight: 700; color: #f3f4f6;">{{ $order->order_number }}</span>
                            </div>
                            <div style="display: flex; justify-content: space-between; font-size: 0.85rem;">
                                <span style="color: #9ca3af;">Total Tagihan:</span>
                                <span style="font-weight: 800; color: var(--color-secondary, #b08256); font-size: 0.95rem;">Rp {{ number_format($order->grand_total, 0, ',', '.') }}</span>
                            </div>
                        </div>

                        <!-- Simulator Action Button -->
                        <button id="confirm-payment-btn" style="width: 100%; padding: 1.1rem; background: var(--grad-gold, linear-gradient(135deg, #b08256 0%, #8d6239 100%)); border: none; border-radius: 12px; color: white; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: 0 10px 20px rgba(176, 130, 86, 0.2); transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                            <span>Bayar Lunas (Simulasi)</span> <i class="fas fa-check-circle"></i>
                        </button>
                        
                        <div id="simulator-error" style="display: none; color: #ef4444; font-size: 0.8rem; font-weight: 600; text-align: center; margin-top: 1rem;">
                            <i class="fas fa-exclamation-circle mr-1"></i> <span id="simulator-error-msg"></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection

@section('extra_js')
    @if($order->status === 'menunggu_pembayaran' && $order->payment_token)
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const isDemoToken = '{{ $order->payment_token }}'.startsWith('DEMO-SNAP-TOKEN-');
                const payButton = document.getElementById('pay-button');
                
                if (!payButton) return;

                if (isDemoToken) {
                    // Demo simulated flow
                    const modal = document.getElementById('payment-simulator-modal');
                    const closeBtn = document.getElementById('close-simulator-btn');
                    const confirmBtn = document.getElementById('confirm-payment-btn');
                    const errorDiv = document.getElementById('simulator-error');
                    const errorMsg = document.getElementById('simulator-error-msg');
                    
                    payButton.addEventListener('click', function() {
                        modal.style.display = 'flex';
                        setTimeout(() => {
                            modal.style.opacity = '1';
                            modal.querySelector('div').style.transform = 'scale(1)';
                        }, 20);
                    });
                    
                    function closeModal() {
                        modal.style.opacity = '0';
                        modal.querySelector('div').style.transform = 'scale(0.9)';
                        setTimeout(() => {
                            modal.style.display = 'none';
                        }, 400);
                    }
                    
                    closeBtn.addEventListener('click', closeModal);
                    modal.addEventListener('click', function(e) {
                        if (e.target === modal) closeModal();
                    });
                    
                    confirmBtn.addEventListener('click', function() {
                        confirmBtn.disabled = true;
                        confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
                        errorDiv.style.display = 'none';
                        
                        fetch('{{ route("orders.simulate-payment", $order->order_number) }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json'
                            }
                        })
                        .then(res => res.json())
                        .then(res => {
                            if (res.status === 'success') {
                                confirmBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
                                confirmBtn.innerHTML = 'Sukses Terbayar! <i class="fas fa-check"></i>';
                                setTimeout(() => {
                                    location.reload();
                                }, 1200);
                            } else {
                                confirmBtn.disabled = false;
                                confirmBtn.innerHTML = 'Bayar Lunas (Simulasi) <i class="fas fa-check-circle"></i>';
                                errorMsg.innerText = res.message || 'Gagal memproses simulasi.';
                                errorDiv.style.display = 'block';
                            }
                        })
                        .catch(err => {
                            console.error(err);
                            confirmBtn.disabled = false;
                            confirmBtn.innerHTML = 'Bayar Lunas (Simulasi) <i class="fas fa-check-circle"></i>';
                            errorMsg.innerText = 'Terjadi kesalahan jaringan atau server saat memproses simulasi.';
                            errorDiv.style.display = 'block';
                        });
                    });
                } else {
                    // Real Midtrans Snap JS flow
                    const script = document.createElement('script');
                    script.src = "https://app.sandbox.midtrans.com/snap/snap.js";
                    script.setAttribute('data-client-key', "{{ config('services.midtrans.client_key') }}");
                    document.head.appendChild(script);
                    
                    script.onload = function() {
                        payButton.addEventListener('click', function () {
                            window.snap.pay('{{ $order->payment_token }}', {
                                onSuccess: function(result){
                                    alert("Pembayaran berhasil diselesaikan!");
                                    location.reload();
                                },
                                onPending: function(result){
                                    alert("Menunggu penyelesaian pembayaran Anda.");
                                    location.reload();
                                },
                                onError: function(result){
                                    alert("Gagal menyelesaikan pembayaran.");
                                    location.reload();
                                },
                                onClose: function(){
                                    alert('Anda menutup panel pembayaran sebelum transaksi selesai.');
                                }
                            });
                        });
                    };
                }
            });
        </script>
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btnComplete = document.getElementById('btnCompleteOrder');
            const formComplete = document.getElementById('completeOrderForm');
            if (btnComplete && formComplete) {
                btnComplete.addEventListener('click', function(e) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Konfirmasi Pesanan Selesai',
                        text: 'Apakah Anda yakin pesanan sudah sampai dengan baik dan ingin menandai transaksi selesai?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#111111',
                        cancelButtonColor: '#B08256',
                        confirmButtonText: 'Ya, Selesai!',
                        cancelButtonText: 'Batal',
                        background: '#ffffff',
                        customClass: {
                            popup: 'rounded-2xl',
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            formComplete.submit();
                        }
                    });
                });
            }

            const btnCancel = document.getElementById('btnCancelOrder');
            const formCancel = document.getElementById('cancelOrderForm');
            if (btnCancel && formCancel) {
                btnCancel.addEventListener('click', function(e) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Batalkan Pesanan?',
                        text: 'Apakah Anda yakin ingin membatalkan pesanan ini? Aksi ini tidak dapat dibatalkan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#111111',
                        confirmButtonText: 'Ya, Batalkan!',
                        cancelButtonText: 'Kembali',
                        background: '#ffffff',
                        customClass: {
                            popup: 'rounded-2xl',
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            formCancel.submit();
                        }
                    });
                });
            }
        });
    </script>

    @if(($order->status === 'dikirim' || $order->status === 'selesai') && $order->tracking_number)
        <script>
            function copyResi() {
                const resiText = document.getElementById('resiNumberVal').innerText;
                navigator.clipboard.writeText(resiText).then(() => {
                    const tooltip = document.getElementById('copyTooltip');
                    tooltip.style.opacity = '1';
                    setTimeout(() => {
                        tooltip.style.opacity = '0';
                    }, 2000);
                });
            }

            document.addEventListener('DOMContentLoaded', function() {
                const resi = '{{ $order->tracking_number }}';
                const courier = '{{ strtolower($order->courier) }}';
                const container = document.getElementById('trackingTimelineContent');

                if (!resi || !container) return;

                fetch(`{{ route('orders.track-resi') }}?resi=${resi}&courier=${courier}`)
                    .then(res => res.json())
                    .then(res => {
                        if (res.status === 'success' && res.data && res.data.history && res.data.history.length > 0) {
                            let html = '<div class="tracking-timeline-container">';
                            res.data.history.forEach((item, index) => {
                                let itemClass = '';
                                if (index === 0) {
                                    itemClass = res.data.summary.status === 'DELIVERED' ? 'active delivered' : 'active';
                                }
                                
                                html += `
                                    <div class="tracking-timeline-item ${itemClass}">
                                        <div class="tracking-time">${item.date}</div>
                                        <div class="tracking-desc">${item.desc}</div>
                                        <div class="tracking-loc"><i class="fas fa-map-marker-alt"></i> ${item.location || 'Hub'}</div>
                                    </div>
                                `;
                            });
                            html += '</div>';
                            container.innerHTML = html;
                        } else {
                            container.innerHTML = `
                                <div style="text-align: center; padding: 2rem; color: var(--color-text-muted);">
                                    <i class="fas fa-exclamation-triangle" style="font-size: 1.5rem; color: #b08256; margin-bottom: 0.5rem;"></i>
                                    <p style="font-size: 0.8rem; font-weight: 600;">Gagal memuat status pelacakan logistik.</p>
                                    <p style="font-size: 0.75rem; color: #777; margin-top: 0.25rem;">Silakan gunakan tombol "Web Resmi" di atas untuk melacak secara manual.</p>
                                </div>
                            `;
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        container.innerHTML = `
                            <div style="text-align: center; padding: 2rem; color: var(--color-text-muted);">
                                <i class="fas fa-wifi" style="font-size: 1.5rem; color: #b08256; margin-bottom: 0.5rem;"></i>
                                <p style="font-size: 0.8rem; font-weight: 600;">Kesalahan koneksi saat memuat pelacakan real-time.</p>
                                <p style="font-size: 0.75rem; color: #777; margin-top: 0.25rem;">Silakan gunakan tombol "Web Resmi" di atas untuk melacak secara manual.</p>
                            </div>
                        `;
                    });
            });
        </script>
    @endif
@endsection