<?php $__env->startSection('title', "{$vehicle->full_name} – Japanese Reconditioned Car in Dhaka | MotoSolution"); ?>
<?php $__env->startSection('meta_description', "{$vehicle->full_name} available in Dhaka showroom. {$vehicle->formatted_mileage}, Grade {$vehicle->auction_grade}, verified Japanese auction inspection sheet. Book a test drive today."); ?>

<?php $__env->startSection('content'); ?>
<!-- Breadcrumbs -->
<div class="bg-[#0B0F19] border-b border-white/10 text-xs py-3 text-slate-400">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-2">
        <a href="<?php echo e(route('home')); ?>" class="hover:text-white">Home</a>
        <span>/</span>
        <a href="<?php echo e(route('inventory.index')); ?>" class="hover:text-white">Ready Stock</a>
        <span>/</span>
        <span class="text-white font-medium truncate"><?php echo e($vehicle->full_name); ?></span>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10" x-data="{ activeImage: '<?php echo e($vehicle->main_image); ?>', testDriveOpen: false }">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        
        <!-- Left 7 Cols: Image Gallery & Description -->
        <div class="lg:col-span-7 space-y-6">
            <!-- Main Hero Image Showcase -->
            <div class="relative bg-slate-900 rounded-3xl overflow-hidden aspect-[16/10] border border-slate-200 shadow-xl">
                <img :src="activeImage" alt="<?php echo e($vehicle->full_name); ?>" class="w-full h-full object-cover transition duration-300">
                
                <div class="absolute top-4 left-4 flex gap-2">
                    <span class="bg-emerald-600 text-white text-xs font-black px-3 py-1 rounded-lg shadow">Ready Stock</span>
                    <span class="bg-slate-950/80 backdrop-blur-md text-amber-300 text-xs font-black px-2.5 py-1 rounded-lg border border-white/10">
                        Grade <?php echo e($vehicle->auction_grade); ?>

                    </span>
                </div>

                <div class="absolute bottom-4 left-4">
                    <span class="bg-black/70 backdrop-blur-md text-white text-xs px-3 py-1 rounded-lg font-mono">
                        Chassis: <?php echo e($vehicle->chassis_number); ?>

                    </span>
                </div>
            </div>

            <!-- Thumbnail Gallery -->
            <div class="grid grid-cols-4 sm:grid-cols-6 gap-2.5">
                <button type="button" @click="activeImage = '<?php echo e($vehicle->main_image); ?>'" 
                    class="aspect-[4/3] rounded-xl overflow-hidden border-2 transition" 
                    :class="activeImage === '<?php echo e($vehicle->main_image); ?>' ? 'border-red-600 ring-2 ring-red-600/30' : 'border-transparent opacity-70 hover:opacity-100'">
                    <img src="<?php echo e($vehicle->main_image); ?>" class="w-full h-full object-cover">
                </button>
                <?php if($vehicle->gallery): ?>
                    <?php $__currentLoopData = $vehicle->gallery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <button type="button" @click="activeImage = '<?php echo e($img); ?>'" 
                            class="aspect-[4/3] rounded-xl overflow-hidden border-2 transition"
                            :class="activeImage === '<?php echo e($img); ?>' ? 'border-red-600 ring-2 ring-red-600/30' : 'border-transparent opacity-70 hover:opacity-100'">
                            <img src="<?php echo e($img); ?>" class="w-full h-full object-cover">
                        </button>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php endif; ?>
            </div>

            <!-- Overview Description -->
            <div class="bg-white p-6 rounded-2xl border border-slate-200 space-y-4">
                <h3 class="text-base font-bold text-slate-900 border-b border-slate-100 pb-3">Vehicle Overview & Inspection Notes</h3>
                <p class="text-sm text-slate-600 leading-relaxed">
                    <?php echo e($vehicle->description ?? "Japanese reconditioned {$vehicle->full_name} in pristine condition. Mechanically certified, verified odometer, original auction sheet, and fully prepared for Bangladeshi road conditions."); ?>

                </p>

                <!-- Features Badges -->
                <?php if($vehicle->features_list): ?>
                    <div class="pt-2">
                        <h4 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Key Factory Equipment</h4>
                        <div class="flex flex-wrap gap-2">
                            <?php $__currentLoopData = $vehicle->features_list; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-100 text-slate-800 text-xs font-semibold">
                                    <i class="fa-solid fa-check text-emerald-600 text-[10px]"></i>
                                    <?php echo e($feature); ?>

                                </span>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Auction Sheet Verification Card -->
            <div class="bg-gradient-to-br from-slate-900 to-slate-800 text-white p-6 rounded-2xl border border-slate-700 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="space-y-1 text-center sm:text-left">
                    <span class="text-xs font-bold text-red-400 uppercase tracking-wider">100% Genuine Japanese Inspection</span>
                    <h4 class="text-lg font-bold">Verified Auction Sheet Available</h4>
                    <p class="text-xs text-slate-400">Chassis <?php echo e($vehicle->chassis_number); ?> verified by MotoSolution Tokyo inspection desk.</p>
                </div>
                <a href="<?php echo e(route('auction-sheet')); ?>?chassis=<?php echo e($vehicle->chassis_number); ?>" class="shrink-0 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-xl shadow transition flex items-center gap-2">
                    <i class="fa-solid fa-file-shield"></i>
                    <span>Verify Sheet Online</span>
                </a>
            </div>
        </div>

        <!-- Right 5 Cols: Price, Specifications Table, & CTA Card -->
        <div class="lg:col-span-5 space-y-6">
            <div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-xl space-y-6 sticky top-24">
                
                <!-- Title & Stock -->
                <div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-red-600 uppercase tracking-wider"><?php echo e($vehicle->make); ?></span>
                        <span class="text-xs font-mono text-slate-400 font-bold">Stock #<?php echo e($vehicle->stock_number); ?></span>
                    </div>
                    <h1 class="text-2xl font-extrabold text-slate-900 font-heading mt-1"><?php echo e($vehicle->full_name); ?></h1>
                    <p class="text-xs text-slate-500 mt-0.5"><?php echo e($vehicle->color); ?> • <?php echo e($vehicle->transmission); ?> • Grade <?php echo e($vehicle->auction_grade); ?></p>
                </div>

                <!-- Price Box -->
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between">
                    <div>
                        <span class="text-xs font-bold text-slate-400 uppercase block">Showroom Asking Price</span>
                        <span class="text-3xl font-extrabold text-slate-900 font-heading"><?php echo e($vehicle->formatted_price); ?></span>
                    </div>
                    <?php if($vehicle->discount_bdt > 0): ?>
                        <div class="text-right">
                            <span class="text-xs line-through text-slate-400">৳<?php echo e(number_format($vehicle->selling_price_bdt, 0)); ?></span>
                            <span class="block text-xs font-bold text-emerald-600 bg-emerald-100 px-2 py-0.5 rounded mt-0.5">
                                Save ৳<?php echo e(number_format($vehicle->discount_bdt / 1000)); ?>k
                            </span>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-2.5">
                    <button type="button" @click="testDriveOpen = true" class="w-full py-3.5 px-4 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl shadow-lg shadow-red-900/30 transition flex items-center justify-center gap-2">
                        <i class="fa-solid fa-key"></i>
                        <span>Book a Test Drive in Gulshan</span>
                    </button>

                    <div class="grid grid-cols-2 gap-2">
                        <a href="https://wa.me/<?php echo e(config('motosolution.contact.whatsapp')); ?>?text=Hello%20MotoSolution,%20I%20am%20interested%20in%20Ready%20Stock%20<?php echo e(urlencode($vehicle->full_name)); ?>%20(<?php echo e($vehicle->stock_number); ?>)." target="_blank" class="py-3 px-4 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl text-center shadow transition flex items-center justify-center gap-1.5">
                            <i class="fa-brands fa-whatsapp text-sm"></i>
                            <span>WhatsApp Us</span>
                        </a>
                        <a href="tel:<?php echo e(config('motosolution.contact.phone')); ?>" class="py-3 px-4 bg-slate-100 hover:bg-slate-200 text-slate-800 text-xs font-bold rounded-xl text-center transition flex items-center justify-center gap-1.5">
                            <i class="fa-solid fa-phone text-xs"></i>
                            <span>Call Showroom</span>
                        </a>
                    </div>
                </div>

                <!-- Complete Specifications Table -->
                <div class="border-t border-slate-100 pt-5">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Complete Vehicle Specifications</h3>
                    <div class="divide-y divide-slate-100 text-xs">
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Year of Manufacture</span><span class="font-bold text-slate-900"><?php echo e($vehicle->year); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Engine Displacement</span><span class="font-bold text-slate-900"><?php echo e($vehicle->engine_cc); ?> cc</span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Fuel Type</span><span class="font-bold text-slate-900"><?php echo e($vehicle->fuel_type); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Transmission</span><span class="font-bold text-slate-900"><?php echo e($vehicle->transmission); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Drive Type</span><span class="font-bold text-slate-900"><?php echo e($vehicle->drive_type); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Body Type</span><span class="font-bold text-slate-900"><?php echo e($vehicle->body_type); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Color</span><span class="font-bold text-slate-900"><?php echo e($vehicle->color); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Odometer Mileage</span><span class="font-bold text-slate-900"><?php echo e($vehicle->formatted_mileage); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Auction Overall Grade</span><span class="font-black text-amber-600">Grade <?php echo e($vehicle->auction_grade); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Interior / Exterior</span><span class="font-bold text-slate-900"><?php echo e($vehicle->interior_grade); ?> / <?php echo e($vehicle->exterior_grade); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Chassis Number</span><span class="font-mono font-bold text-slate-800"><?php echo e($vehicle->chassis_number); ?></span></div>
                        <div class="py-2 flex justify-between"><span class="text-slate-500">Location</span><span class="font-bold text-slate-900">Niketan Showroom, Dhaka</span></div>
                    </div>
                </div>

                <!-- Showroom Assurance Box -->
                <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 text-xs text-slate-600 space-y-1.5">
                    <p class="font-bold text-slate-900 flex items-center gap-1.5">
                        <i class="fa-solid fa-shield-halved text-emerald-600"></i> MotoSolution Purchase Assurance:
                    </p>
                    <p>• 100% Genuine Auction Sheet guarantee with original Japanese inspection certificate.</p>
                    <p>• Complete BRTA registration processing assistance and auto loan facilities.</p>
                </div>
            </div>
        </div>

    </div>

    <!-- Test Drive Booking Modal -->
    <div x-show="testDriveOpen" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" style="display: none;">
        <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative" @click.outside="testDriveOpen = false">
            <button @click="testDriveOpen = false" class="absolute top-4 right-4 text-slate-400 hover:text-slate-700">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
            <div class="text-center pb-4 border-b border-slate-100">
                <h3 class="text-lg font-bold text-slate-900">Schedule a Test Drive</h3>
                <p class="text-xs text-slate-500 mt-0.5">Experience this <?php echo e($vehicle->full_name); ?> at our Gulshan showroom.</p>
            </div>
            <form method="POST" action="<?php echo e(route('lead.store')); ?>" class="space-y-4 pt-4 text-xs">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="vehicle_id" value="<?php echo e($vehicle->id); ?>">
                <input type="hidden" name="interested_vehicle" value="<?php echo e($vehicle->full_name); ?> (Stock: <?php echo e($vehicle->stock_number); ?>)">
                <input type="hidden" name="source" value="test_drive_modal">

                <div>
                    <label class="block font-bold text-slate-700 uppercase mb-1">Your Full Name *</label>
                    <input type="text" name="name" required placeholder="e.g. Tanvir Ahmed" class="w-full bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 uppercase mb-1">Mobile Number (WhatsApp) *</label>
                    <input type="text" name="phone" required placeholder="e.g. 01712345678" class="w-full bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                </div>
                <div>
                    <label class="block font-bold text-slate-700 uppercase mb-1">Preferred Date & Time</label>
                    <input type="text" name="message" placeholder="e.g. Saturday 4:00 PM" class="w-full bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                </div>
                <button type="submit" class="w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow transition">
                    Confirm Test Drive Request
                </button>
            </form>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

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