<?php $__env->startSection('title', 'My Vehicle Orders & Tracking – Customer Portal'); ?>
<?php $__env->startSection('page_title', 'My Orders & Import Tracking'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    
    <div>
        <h2 class="text-xl font-bold text-white font-heading">Vehicle Import & Delivery Orders</h2>
        <p class="text-xs text-slate-400">Track the end-to-end 12-step importation process from Japan to Dhaka.</p>
    </div>

    <?php if($orders->count() > 0): ?>
        <div class="space-y-4">
            <?php $__currentLoopData = $orders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $order): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $stepIndex = $order->current_step_index;
                    $percent = min(100, round((($stepIndex + 1) / 12) * 100));
                    $steps = \App\Models\Order::trackingSteps();
                    $stepInfo = $steps[$order->status] ?? ['title' => ucwords(str_replace('_', ' ', $order->status)), 'desc' => ''];
                ?>

                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 hover:border-red-500/40 transition shadow-xl space-y-6">
                    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border-b border-white/10 pb-5">
                        <div class="flex items-center gap-4">
                            <div class="w-16 h-14 rounded-xl overflow-hidden bg-slate-800 shrink-0">
                                <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>
                                <h3 class="text-base font-bold text-white font-heading mt-0.5">
                                    <?php echo e($order->car_title); ?>

                                </h3>
                                <p class="text-xs text-slate-400">
                                    Chassis: <span class="font-mono text-slate-200"><?php echo e($order->chassis_number ?? 'In Allocation'); ?></span>
                                </p>
                            </div>
                        </div>

                        <div class="flex items-center gap-3 self-end md:self-auto">
                            <div class="text-right hidden sm:block">
                                <span class="text-[10px] text-slate-400 font-bold uppercase block">Total Landed Cost</span>
                                <span class="text-base font-extrabold text-white">৳<?php echo e(number_format($order->total_amount_bdt)); ?></span>
                            </div>
                            <a href="<?php echo e(route('customer.orders.show', $order->id)); ?>" class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow-lg transition flex items-center gap-1.5">
                                <i class="fa-solid fa-location-dot"></i>
                                <span>Track Details</span>
                            </a>
                        </div>
                    </div>

                    <!-- 12-Step Progress Indicator -->
                    <div>
                        <div class="flex items-center justify-between text-xs mb-2">
                            <span class="font-bold text-slate-200">
                                Current Milestone: <span class="text-emerald-400"><?php echo e($stepInfo['title']); ?></span> (Step <?php echo e($stepIndex + 1); ?> of 12)
                            </span>
                            <span class="font-extrabold text-slate-400"><?php echo e($percent); ?>% Completed</span>
                        </div>
                        <div class="w-full h-2.5 rounded-full bg-slate-950 overflow-hidden border border-white/5">
                            <div class="bg-gradient-to-r from-red-600 via-amber-500 to-emerald-500 h-full transition-all duration-500" style="width: <?php echo e($percent); ?>%"></div>
                        </div>
                        <p class="text-[11px] text-slate-400 mt-1.5"><?php echo e($stepInfo['desc']); ?></p>
                    </div>

                    <!-- Vessel / Shipping Highlights -->
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4 border-t border-white/5 text-xs">
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">Vessel Name</span>
                            <span class="font-bold text-white mt-0.5 block truncate"><?php echo e($order->vessel_name ?? 'Pending Allocation'); ?></span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">B/L Number</span>
                            <span class="font-mono text-slate-300 mt-0.5 block truncate"><?php echo e($order->bl_number ?? 'In Issuance'); ?></span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">ETA Chittagong</span>
                            <span class="font-bold text-amber-400 mt-0.5 block"><?php echo e($order->eta_chittagong ? $order->eta_chittagong->format('M d, Y') : 'Estimating'); ?></span>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block uppercase">Payment Status</span>
                            <span class="font-bold text-emerald-400 mt-0.5 block">Paid: ৳<?php echo e(number_format($order->paid_amount_bdt)); ?></span>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            <div class="p-4">
                <?php echo e($orders->links()); ?>

            </div>
        </div>
    <?php else: ?>
        <div class="bg-slate-900 border border-white/10 rounded-2xl p-12 text-center text-slate-400">
            <i class="fa-solid fa-ship text-4xl mb-3 text-slate-600 block"></i>
            <p class="text-base font-bold text-white">No active orders found.</p>
            <p class="text-xs text-slate-500 mt-1">When an auction bid is hammered or you purchase from showroom stock, your order pipeline appears here.</p>
            <a href="<?php echo e(route('auction.index')); ?>" class="inline-block mt-4 px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs transition">
                Browse Japan Live Auctions
            </a>
        </div>
    <?php endif; ?>

</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/orders.blade.php ENDPATH**/ ?>