<?php $__env->startSection('title', 'Order #' . $order->order_number . ' – 12-Step Live Import Tracking'); ?>
<?php $__env->startSection('page_title', 'Order #' . $order->order_number); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-8 max-w-7xl">
    
    <!-- Top Back Navigation & Action Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <a href="<?php echo e(route('customer.orders.index')); ?>" class="text-xs font-bold text-slate-400 hover:text-white flex items-center gap-1.5">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Back to All Orders</span>
        </a>
        <div class="flex items-center gap-3">
            <a href="https://wa.me/<?php echo e(config('motosolution.contact.whatsapp')); ?>?text=Hello%20MotoSolution,%20I%20have%20an%20inquiry%20regarding%20Order%20%23<?php echo e($order->order_number); ?>" target="_blank" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow transition flex items-center gap-2">
                <i class="fa-brands fa-whatsapp"></i>
                <span>Order Concierge WhatsApp</span>
            </a>
        </div>
    </div>

    <!-- Order Header Hero Card -->
    <div class="bg-gradient-to-br from-slate-900 via-slate-900 to-[#1b1424] border border-white/10 rounded-2xl p-6 sm:p-8 shadow-2xl">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <div class="flex items-center gap-5">
                <div class="w-20 h-16 rounded-2xl overflow-hidden bg-slate-800 shrink-0 border border-white/10">
                    <img src="<?php echo e($order->car_image); ?>" alt="Car" class="w-full h-full object-cover">
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs font-bold uppercase tracking-wider text-red-400">Order #<?php echo e($order->order_number); ?></span>
                        <span class="text-[10px] bg-white/10 text-slate-300 font-semibold px-2 py-0.5 rounded-full uppercase"><?php echo e($order->order_type); ?></span>
                    </div>
                    <h2 class="text-xl sm:text-2xl font-extrabold text-white font-heading mt-1">
                        <?php echo e($order->car_title); ?>

                    </h2>
                    <p class="text-xs text-slate-400 mt-1">
                        Chassis: <span class="font-mono text-slate-200 font-bold"><?php echo e($order->chassis_number ?? 'Awaiting Allocation'); ?></span>
                        <?php if($order->bid && $order->bid->auctionVehicle): ?>
                            · Lot #<?php echo e($order->bid->auctionVehicle->lot_number); ?> (<?php echo e($order->bid->auctionVehicle->auctionHouse->name ?? 'Japan'); ?>)
                        <?php endif; ?>
                    </p>
                </div>
            </div>

            <!-- Financial Status Pills -->
            <div class="flex flex-wrap md:flex-nowrap gap-4 shrink-0 bg-slate-950/80 border border-white/5 rounded-xl p-4">
                <div>
                    <span class="text-[10px] text-slate-500 font-bold uppercase block">Total Landed Cost</span>
                    <span class="text-lg font-extrabold text-white">৳<?php echo e(number_format($order->total_amount_bdt)); ?></span>
                </div>
                <div class="border-l border-white/10 pl-4">
                    <span class="text-[10px] text-slate-500 font-bold uppercase block">Paid Amount</span>
                    <span class="text-lg font-extrabold text-emerald-400">৳<?php echo e(number_format($order->paid_amount_bdt)); ?></span>
                </div>
                <div class="border-l border-white/10 pl-4">
                    <span class="text-[10px] text-slate-500 font-bold uppercase block">Balance Due</span>
                    <span class="text-lg font-extrabold text-amber-400">৳<?php echo e(number_format($order->due_amount_bdt)); ?></span>
                </div>
            </div>
        </div>
    </div>

    <!-- 12-Step Visual Import Tracking Pipeline -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-8 shadow-2xl">
        <div class="flex items-center justify-between border-b border-white/10 pb-4 mb-8">
            <div>
                <h3 class="text-lg font-bold text-white font-heading flex items-center gap-2">
                    <i class="fa-solid fa-timeline text-red-500"></i> 12-Step Live Import Milestone Tracker
                </h3>
                <p class="text-xs text-slate-400">Complete provenance tracking from Japanese auction floor to Dhaka handover.</p>
            </div>
            <?php
                $currentIndex = $order->current_step_index;
                $percent = min(100, round((($currentIndex + 1) / 12) * 100));
            ?>
            <div class="text-right">
                <span class="text-xs font-bold text-emerald-400"><?php echo e($percent); ?>% Journey Completed</span>
            </div>
        </div>

        <!-- Timeline Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <?php
                $stepKeys = array_keys($trackingSteps);
            ?>

            <?php $__currentLoopData = $stepKeys; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $stepKey): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $step = $trackingSteps[$stepKey];
                    $isCompleted = $idx < $currentIndex;
                    $isCurrent = $idx === $currentIndex;
                    $isUpcoming = $idx > $currentIndex;
                ?>

                <div class="p-4 rounded-xl border transition relative <?php echo e($isCurrent ? 'bg-gradient-to-br from-red-950/40 to-slate-950 border-red-500 ring-1 ring-red-500/50 shadow-lg shadow-red-950/50' : ($isCompleted ? 'bg-slate-950/80 border-emerald-500/30' : 'bg-slate-950/40 border-white/5 opacity-60')); ?>">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-[10px] font-bold uppercase tracking-wider <?php echo e($isCurrent ? 'text-red-400 font-extrabold' : ($isCompleted ? 'text-emerald-400' : 'text-slate-500')); ?>">
                            Milestone <?php echo e(sprintf('%02d', $idx + 1)); ?>

                        </span>
                        
                        <?php if($isCompleted): ?>
                            <span class="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs">
                                <i class="fa-solid fa-check"></i>
                            </span>
                        <?php elseif($isCurrent): ?>
                            <span class="w-6 h-6 rounded-full bg-red-600 text-white flex items-center justify-center text-xs animate-pulse">
                                <i class="fa-solid fa-spinner fa-spin"></i>
                            </span>
                        <?php else: ?>
                            <span class="w-6 h-6 rounded-full bg-white/5 text-slate-600 flex items-center justify-center text-xs">
                                <?php echo e($idx + 1); ?>

                            </span>
                        <?php endif; ?>
                    </div>

                    <h4 class="text-sm font-bold text-white mb-1">
                        <?php echo e($step['title']); ?>

                    </h4>
                    <p class="text-[11px] text-slate-400 leading-relaxed">
                        <?php echo e($step['desc']); ?>

                    </p>

                    <?php if($isCurrent): ?>
                        <div class="mt-3 pt-2 border-t border-red-500/30">
                            <span class="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase text-red-400">
                                <span class="w-1.5 h-1.5 rounded-full bg-red-500 animate-ping"></span>
                                Currently In Progress
                            </span>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>

    <!-- Shipping Manifest & Financial Ledger (2 Columns) -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <!-- Left 6 Cols: Shipping Details & Port Logistics -->
        <div class="lg:col-span-6 space-y-6">
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-7 shadow-xl">
                <h3 class="text-base font-bold text-white font-heading border-b border-white/10 pb-4 mb-5 flex items-center gap-2">
                    <i class="fa-solid fa-ship text-blue-400"></i> Marine Shipping & Customs Manifest
                </h3>

                <div class="space-y-3.5 text-xs">
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">Vessel Name:</span>
                        <span class="font-bold text-white"><?php echo e($order->vessel_name ?? 'Pending Vessel Nomination'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">Voyage / Call Sign:</span>
                        <span class="font-mono text-slate-200"><?php echo e($order->voyage_number ?? 'TBD'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">Bill of Lading (B/L):</span>
                        <span class="font-mono text-emerald-400 font-bold"><?php echo e($order->bl_number ?? 'In Processing'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">Shipping Line:</span>
                        <span class="font-bold text-white"><?php echo e($order->shipping_line ?? 'NYK / MOL / Kline'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">Port of Loading (Japan):</span>
                        <span class="font-bold text-white"><?php echo e($order->port_of_loading ?? 'Yokohama / Nagoya'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">Port of Discharge (Bangladesh):</span>
                        <span class="font-bold text-white"><?php echo e($order->port_of_discharge ?? 'Chittagong Port'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">ETD Japan:</span>
                        <span class="font-medium text-slate-200"><?php echo e($order->etd_japan ? $order->etd_japan->format('M d, Y') : 'Scheduled'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5 border-b border-white/5">
                        <span class="text-slate-400">ETA Chittagong:</span>
                        <span class="font-bold text-amber-400"><?php echo e($order->eta_chittagong ? $order->eta_chittagong->format('M d, Y') : 'Estimating'); ?></span>
                    </div>
                    <div class="flex justify-between py-1.5">
                        <span class="text-slate-400">Customs Clearance Date:</span>
                        <span class="font-bold text-emerald-400"><?php echo e($order->customs_cleared_date ? $order->customs_cleared_date->format('M d, Y') : 'Pending Berthing'); ?></span>
                    </div>
                </div>
            </div>

            <!-- Milestone Updates Activity Log -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl">
                <h3 class="text-sm font-bold uppercase tracking-wider text-white font-heading border-b border-white/10 pb-3 mb-4 flex items-center gap-2">
                    <i class="fa-solid fa-clock-rotate-left text-amber-400"></i> Import History & C&F Notes
                </h3>
                <div class="space-y-4 max-h-64 overflow-y-auto">
                    <?php $__empty_1 = true; $__currentLoopData = $order->statusHistory; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $history): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <div class="flex items-start gap-3 text-xs">
                            <div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 shrink-0"></div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <span class="font-bold text-white"><?php echo e($history->status_title ?? ucwords(str_replace('_', ' ', $history->new_status))); ?></span>
                                    <span class="text-[10px] text-slate-500"><?php echo e($history->occurred_at ? $history->occurred_at->format('M d, Y h:i A') : $history->created_at->format('M d, Y')); ?></span>
                                </div>
                                <p class="text-slate-400 text-[11px] mt-0.5"><?php echo e($history->notes ?? 'Milestone achieved.'); ?></p>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <p class="text-xs text-slate-500">Order successfully initiated.</p>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Right 6 Cols: Invoices & Payment Ledger -->
        <div class="lg:col-span-6 space-y-6">
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-7 shadow-xl">
                <div class="flex items-center justify-between border-b border-white/10 pb-4 mb-5">
                    <div>
                        <h3 class="text-base font-bold text-white font-heading flex items-center gap-2">
                            <i class="fa-solid fa-file-invoice-dollar text-emerald-400"></i> Invoices & Payments Ledger
                        </h3>
                        <p class="text-xs text-slate-400">Multi-stage transparent payment milestones.</p>
                    </div>
                </div>

                <?php if($order->invoices->count() > 0): ?>
                    <div class="space-y-4">
                        <?php $__currentLoopData = $order->invoices; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $invoice): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="p-4 rounded-xl bg-slate-950 border border-white/5 space-y-3">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <span class="text-xs font-bold text-white"><?php echo e($invoice->title ?? 'Invoice #' . $invoice->invoice_number); ?></span>
                                        <span class="text-[10px] text-slate-500 block"><?php echo e($invoice->invoice_date ? $invoice->invoice_date->format('M d, Y') : $invoice->created_at->format('M d, Y')); ?></span>
                                    </div>
                                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase <?php echo e($invoice->status === 'paid' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-amber-500/20 text-amber-400'); ?>">
                                        <?php echo e($invoice->status); ?>

                                    </span>
                                </div>
                                <div class="flex justify-between text-xs border-t border-white/5 pt-2">
                                    <span class="text-slate-400">Invoice Amount:</span>
                                    <span class="font-extrabold text-white">৳<?php echo e(number_format($invoice->amount_bdt)); ?></span>
                                </div>

                                <!-- Payment Records Attached -->
                                <?php if($invoice->payments->count() > 0): ?>
                                    <div class="pt-2 border-t border-white/5 space-y-1 text-[11px]">
                                        <span class="text-slate-500 font-bold uppercase text-[9px]">Confirmed Payments:</span>
                                        <?php $__currentLoopData = $invoice->payments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $payment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <div class="flex justify-between text-emerald-400">
                                                <span><?php echo e(ucfirst($payment->payment_method)); ?> (Txn: <?php echo e($payment->transaction_reference ?? 'Bank'); ?>):</span>
                                                <span class="font-bold">৳<?php echo e(number_format($payment->amount_bdt)); ?></span>
                                            </div>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php else: ?>
                    <p class="text-xs text-slate-500 p-4 bg-slate-950 rounded-xl">No invoices generated yet. Our accounts department will generate milestone invoices as your shipment progresses.</p>
                <?php endif; ?>
            </div>

            <!-- Handover Showroom Location -->
            <div class="bg-gradient-to-br from-slate-900 to-red-950/30 border border-red-500/20 rounded-2xl p-6 text-xs text-slate-300 space-y-2">
                <span class="font-bold text-white uppercase text-[10px] tracking-wider block text-red-400">Dhaka Showroom Handover</span>
                <p class="font-bold text-white"><?php echo e(config('motosolution.showroom.address')); ?></p>
                <p class="text-[11px] text-slate-400">Upon arrival in Dhaka, vehicle undergoes a 120-point mechanical inspection, full Meguiar's detailing, BRTA smart card handover, and complimentary full tank of fuel.</p>
            </div>
        </div>

    </div>

</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.customer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/redwoneferdous/Desktop/MotoSolution/resources/views/customer/order-show.blade.php ENDPATH**/ ?>