#I LOVE YOU EVERDAY#

<?php 
require_once 'includes/header.php'; 
require_once 'includes/bike_models.php';

$searched_model = $_GET['model_name'] ?? '';
$bikes_available = [];
if ($searched_model) {
    $stmt = $pdo->prepare("SELECT b.*, 
        (SELECT image_url FROM bike_images WHERE bike_id = b.id AND is_main = TRUE LIMIT 1) as main_image 
        FROM bikes b 
        WHERE b.status = 'available' AND b.model_name = ? 
        ORDER BY b.created_at DESC");
    $stmt->execute([$searched_model]);
    $bikes_available = $stmt->fetchAll();
}
?>

<section class="hero-section position-relative d-flex align-items-center" style="min-height: 80vh; background: radial-gradient(circle at center, #222222 0%, #121212 100%); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.05);">
    
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; background-image: linear-gradient(0deg, transparent 24%, #fff 25%, #fff 26%, transparent 27%, transparent 74%, #fff 75%, #fff 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, #fff 25%, #fff 26%, transparent 27%, transparent 74%, #fff 75%, #fff 76%, transparent 77%, transparent); background-size: 50px 50px; z-index: 0;"></div>
    
    <div class="container py-4" style="position: relative; z-index: 1;">
        
        <div class="row justify-content-center text-center mb-4" id="hero-intro-text">
            <div class="col-lg-8 fade-up">
                <h1 class="display-4 fw-bold text-white mb-2">Find Your Pre-Owned <span class="text-re-red">Royal Enfield</span></h1>
                <p class="text-muted mb-0 fs-5">Explore our premium selection of certified, inspected motorcycles.</p>
            </div>
        </div>

<div class="row justify-content-center mt-3" id="hero-search-wrapper">
            <div class="col-lg-12">
                <div class="search-filter-bar fade-up">
                    <form id="hero-filter-form" class="row g-2 align-items-end">
                        
                        <div class="col-md-3">
                            <label class="form-label">How much CC you are looking for?</label>
                            <select name="cc" id="filter-cc" class="form-select form-select-sm bg-dark text-white border-secondary">
                                <option value="">Any CC</option>
                                <option value="350">350 CC</option>
                                <option value="411">411 CC</option>
                                <option value="450">450 CC</option>
                                <option value="500">500 CC</option>
                                <option value="535">535 CC</option>
                                <option value="650">650 CC</option>
                            </select>
                        </div>
                        
                        
                        <div class="col-md-4">
                            <label class="form-label">Segment</label>
                            <select name="segment" id="filter-segment" class="form-select form-select-sm bg-dark text-white border-secondary">
                                <option value="">All Segments</option>
                                <?php foreach (array_keys($bike_categories) as $category): ?>
                                    <option value="<?php echo htmlspecialchars($category); ?>">
                                        <?php echo htmlspecialchars($category); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

<div class="col-md-3">
                            <label class="form-label">Whats your Budget?</label>
                            <select name="budget" id="filter-budget" class="form-select form-select-sm bg-dark text-white border-secondary">
                                <option value="">Any Budget</option>
                                <option value="below-1">Below 1 Lakh</option>
                                <option value="1-2">1 - 2 Lakh</option>
                                <option value="2-3">2 - 3 Lakh</option>
                                <option value="above-3">Above 3 Lakh</option>
                            </select>
                        </div>

<div class="col-md-2">
                            <button type="submit" class="btn btn-primary btn-sm w-100 d-flex align-items-center justify-content-center" style="height: 38px; border-radius: 4px;">
                                <i class="fas fa-search me-2"></i>Find Ride
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

<div class="row justify-content-center mt-3 d-none mb-4" id="model-chips-wrapper">
            <div class="col-lg-12">
                <div class="d-flex align-items-center justify-content-center flex-wrap gap-2" id="model-chips-container">
                    
                </div>
            </div>
        </div>

<div class="row justify-content-center d-none mb-4" id="hero-results-container">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3 class="mb-0 text-white"><span class="text-re-red">Available</span> Matches</h3>
                    <button id="close-results-btn" class="btn btn-sm btn-outline-light" style="padding: 6px 15px;"><i class="fas fa-times me-2"></i>Clear Search</button>
                </div>
                <div id="hero-results-grid" class="row g-3 overflow-y-auto" style="max-height: 45vh; padding-right: 5px;">
                    
                </div>
            </div>
        </div>

<div class="row justify-content-center d-none mb-4" id="hero-details-container">
            
        </div>
    </div>
</section>

<?php if ($searched_model): ?>
<section class="py-5">
    <div class="container py-5">
        <div class="text-center mb-5 fade-up">
            <h2 class="display-5 fw-bold mb-3">Available <span class="text-re-red">Bikes</span></h2>
            <p class="text-muted">Showing available results for <strong><?php echo htmlspecialchars($searched_model); ?></strong></p>
        </div>

<div class="row g-4 fade-up">
            <?php if (count($bikes_available) > 0): ?>
                <?php foreach ($bikes_available as $bike): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="glass-card h-100">
                        <div class="position-relative">
                            <?php $imgSrc = $bike['main_image'] ? $bike['main_image'] : 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?q=80&w=800'; ?>
                            <img src="<?php echo htmlspecialchars($imgSrc); ?>" class="w-100" style="height: 250px; object-fit: cover;" alt="<?php echo htmlspecialchars($bike['model_name']); ?>">
                            <div class="position-absolute top-0 end-0 bg-re-red text-white px-3 py-1 m-2 fw-bold" style="border-radius: 4px;">₹ <?php echo number_format($bike['price']); ?></div>
                        </div>
                        <div class="p-4">
                            <h4 class="mb-2"><?php echo htmlspecialchars($bike['model_name']); ?></h4>
                            <div class="d-flex justify-content-between text-muted mb-3 fs-6">
                                <span><i class="fas fa-calendar-alt me-1"></i> <?php echo htmlspecialchars($bike['year']); ?></span>
                                <span><i class="fas fa-road me-1"></i> <?php echo number_format($bike['km_driven']); ?> KM</span>
                                <span><i class="fas fa-user me-1"></i> <?php echo htmlspecialchars($bike['ownership'] ?? '1st'); ?> Owner</span>
                            </div>
                            <p class="text-muted mb-4"><i class="fas fa-map-marker-alt me-1 text-re-red"></i> <?php echo htmlspecialchars($bike['location']); ?></p>
                            <a href="bike-details.php?id=<?php echo $bike['id']; ?>" class="btn btn-outline-light w-100">View Details</a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="col-12 text-center py-5">
                    <i class="fas fa-motorcycle text-muted fa-3x mb-3 opacity-50"></i>
                    <p class="text-muted fs-5">No available bikes found for this model at the moment.</p>
                    <a href="book-inspection.php" class="btn btn-outline-danger mt-3">Book general inspection / enquiry</a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="py-5 bg-dark">
    <div class="container py-5">
        <div class="text-center mb-5 fade-up">
            <h2 class="display-5 fw-bold mb-3">Why <span class="text-re-red">ReOwn?</span></h2>
            <p class="text-muted">The best place to buy or sell a pre-owned Royal Enfield.</p>
        </div>
        <div class="row g-4 fade-up">
            <div class="col-lg-4 col-md-6 text-center">
                <div class="glass-card p-5 h-100">
                    <i class="fas fa-check-circle text-re-red fa-3x mb-4"></i>
                    <h4 class="mb-3">Certified Inspection</h4>
                    <p class="text-muted mb-0">Every bike undergoes a rigorous multi-point inspection by certified Royal Enfield experts.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 text-center">
                <div class="glass-card p-5 h-100">
                    <i class="fas fa-rupee-sign text-re-red fa-3x mb-4"></i>
                    <h4 class="mb-3">Transparent Pricing</h4>
                    <p class="text-muted mb-0">No hidden fees or surprises. You get the best market value for buying or selling.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 text-center">
                <div class="glass-card p-5 h-100">
                    <i class="fas fa-file-signature text-re-red fa-3x mb-4"></i>
                    <h4 class="mb-3">Easy Ownership Transfer</h4>
                    <p class="text-muted mb-0">We handle all the tedious paperwork and documentation for a seamless experience.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container py-5 text-center">
        <div class="mb-5 fade-up">
            <h2 class="display-5 fw-bold mb-3">Follow Our <span class="text-re-red">Journey</span></h2>
            <p class="text-muted"><a href="<?php echo htmlspecialchars(get_setting('instagram_url', 'https://www.instagram.com/avahanreown')); ?>" target="_blank" class="text-white text-decoration-none">@ReOwn_Avahan</a></p>
        </div>
        <div class="row g-3 justify-content-center fade-up">
            <?php
            try {
                // Fetch the latest gallery images (up to 4)
                $galleryStmt = $pdo->query("SELECT * FROM homepage_gallery ORDER BY created_at DESC LIMIT 4");
                $gallery = $galleryStmt->fetchAll();
            } catch (PDOException $e) {
                $gallery = [];
            }

if (!empty($gallery)):
                foreach($gallery as $img):
            ?>
            <div class="col-md-3 col-6">
                <a href="<?php echo htmlspecialchars(get_setting('instagram_url', 'https://www.instagram.com/avahanreown')); ?>" target="_blank" class="d-block position-relative overflow-hidden rounded insta-post" style="aspect-ratio: 1 / 1;">
                    <img src="<?php echo htmlspecialchars($img['image_url']); ?>" class="w-100 h-100" style="object-fit: cover; transition: transform 0.4s ease;" alt="Instagram Post">
                    <div class="insta-overlay position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-50 d-flex justify-content-center align-items-center opacity-0" style="transition: opacity 0.3s ease;">
                        <span class="text-white fw-bold fs-6">
                            <i class="fas fa-heart text-re-red me-1"></i> <?php echo htmlspecialchars($img['likes_count']); ?> &nbsp;&nbsp; 
                            <i class="fas fa-comment me-1 text-white-50"></i> <?php echo htmlspecialchars($img['comments_count']); ?>
                        </span>
                    </div>
                </a>
            </div>
            <?php 
                endforeach;
            else:
                // Fallback to default images if gallery is empty
                $default_images = [
                    ["url" => "https://images.unsplash.com/photo-1558981403-c5f9899a28bc?q=80&w=400&auto=format&fit=crop", "likes" => "4.2k", "comments" => "180"],
                    ["url" => "https://images.unsplash.com/photo-1558980394-4c7c9299fe96?q=80&w=400&auto=format&fit=crop", "likes" => "3.1k", "comments" => "95"],
                    ["url" => "https://images.unsplash.com/photo-1558981408-db0ecd8a1ee4?q=80&w=400&auto=format&fit=crop", "likes" => "5.6k", "comments" => "220"],
                    ["url" => "https://images.unsplash.com/photo-1605810731210-909289260c6c?q=80&w=400&auto=format&fit=crop", "likes" => "2.8k", "comments" => "110"]
                ];
                foreach($default_images as $img):
            ?>
            <div class="col-md-3 col-6">
                <a href="<?php echo htmlspecialchars(get_setting('instagram_url', 'https://www.instagram.com/avahanreown')); ?>" target="_blank" class="d-block position-relative overflow-hidden rounded insta-post" style="aspect-ratio: 1 / 1;">
                    <img src="<?php echo $img['url']; ?>" class="w-100 h-100" style="object-fit: cover; transition: transform 0.4s ease;" alt="Instagram Post">
                    <div class="insta-overlay position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-50 d-flex justify-content-center align-items-center opacity-0" style="transition: opacity 0.3s ease;">
                        <span class="text-white fw-bold fs-6">
                            <i class="fas fa-heart text-re-red me-1"></i> <?php echo $img['likes']; ?> &nbsp;&nbsp; 
                            <i class="fas fa-comment me-1 text-white-50"></i> <?php echo $img['comments']; ?>
                        </span>
                    </div>
                </a>
            </div>
            <?php 
                endforeach;
            endif; 
            ?>
        </div>
        <div class="mt-4 fade-up">
            <a href="<?php echo htmlspecialchars(get_setting('instagram_url', 'https://www.instagram.com/avahanreown')); ?>" target="_blank" class="btn btn-outline-light"><i class="fab fa-instagram me-2"></i> Follow Us on Instagram</a>
        </div>
    </div>
</section>

const segmentModels = <?php echo json_encode($bike_categories); ?>;

let currentBikes = [];

function triggerSearch() {
        const cc = document.getElementById('filter-cc').value;
        const segment = filterSegment.value;
        const budget = document.getElementById('filter-budget').value;

// Build query string
        const params = new URLSearchParams({
            cc: cc,
            segment: segment,
            budget: budget
        });

// Fetch matched bikes via AJAX
        fetch(`api/get_bikes.php?${params.toString()}`)
            .then(response => response.json())
            .then(res => {
                if (res.success && res.data) {
                    currentBikes = res.data;
                    renderBikes(currentBikes);
                    
                    // Populate/update model chips
                    updateModelChips(segment);

// Smooth transition to show results
                    heroIntroText.classList.add('d-none');
                    heroDetailsContainer.classList.add('d-none');
                    heroResultsContainer.classList.remove('d-none');
                } else {
                    alert('Error retrieving search results.');
                }
            })
            .catch(err => {
                console.error('Search error:', err);
                alert('An error occurred. Please try again.');
            });
    }

// Generate chips for models under selected segment
    function updateModelChips(segment) {
        if (!segment || !segmentModels[segment]) {
            modelChipsWrapper.classList.add('d-none');
            modelChipsContainer.innerHTML = '';
            return;
        }

modelChipsContainer.innerHTML = '';
        modelChipsWrapper.classList.remove('d-none');

// 1. Render "All Models" Chip
        const allChip = document.createElement('button');
        allChip.className = 'filter-chip active';
        allChip.textContent = `All ${segment}s`;
        allChip.setAttribute('data-model', '');
        modelChipsContainer.appendChild(allChip);

// 2. Render individual model chips
        segmentModels[segment].forEach(model => {
            const chip = document.createElement('button');
            chip.className = 'filter-chip';
            chip.textContent = model.replace('Royal Enfield ', '');
            chip.setAttribute('data-model', model);
            modelChipsContainer.appendChild(chip);
        });
    }

// Handle clicking on model chips
    modelChipsContainer.addEventListener('click', function(e) {
        const chip = e.target.closest('.filter-chip');
        if (chip) {
            // Mark active
            const siblings = modelChipsContainer.querySelectorAll('.filter-chip');
            siblings.forEach(s => s.classList.remove('active'));
            chip.classList.add('active');

const selectedModel = chip.getAttribute('data-model');
            if (selectedModel === '') {
                // Show all segment bikes
                renderBikes(currentBikes);
            } else {
                // Filter down to the selected model
                const filtered = currentBikes.filter(b => b.model_name === selectedModel);
                renderBikes(filtered);
            }
        }
    });

// Auto-trigger search when user selects options from the dropdowns
    filterSegment.addEventListener('change', triggerSearch);
    document.getElementById('filter-cc').addEventListener('change', triggerSearch);
    document.getElementById('filter-budget').addEventListener('change', triggerSearch);

// Handle form submit
    heroFilterForm.addEventListener('submit', function(e) {
        e.preventDefault();
        triggerSearch();
    });

// Handle close results
    closeResultsBtn.addEventListener('click', function() {
        heroResultsContainer.classList.add('d-none');
        heroDetailsContainer.classList.add('d-none');
        modelChipsWrapper.classList.add('d-none');
        heroIntroText.classList.remove('d-none');
        heroSearchWrapper.classList.remove('d-none');
        heroFilterForm.reset();
    });

// Intercept View Details button click for SPA details view
    heroResultsGrid.addEventListener('click', function(e) {
        const btn = e.target.closest('.view-details-btn');
        if (btn) {
            e.preventDefault();
            const bikeId = parseInt(btn.getAttribute('data-id'));
            
            // Fetch detailed specifications, gallery, and video
            fetch(`api/get_bike_details.php?id=${bikeId}`)
                .then(response => response.json())
                .then(res => {
                    if (res.success) {
                        showBikeDetails(res);
                        
                        // Hide search bar, chips, and matches list, show details view
                        heroIntroText.classList.add('d-none');
                        heroSearchWrapper.classList.add('d-none');
                        modelChipsWrapper.classList.add('d-none');
                        heroResultsContainer.classList.add('d-none');
                        heroDetailsContainer.classList.remove('d-none');
                    } else {
                        alert('Could not load bike details: ' + (res.message || 'Unknown error'));
                    }
                })
                .catch(err => {
                    console.error('Error fetching bike details:', err);
                    alert('An error occurred while loading details.');
                });
        }
    });

// Render result cards inside Hero results grid
    function renderBikes(bikes) {
        heroResultsGrid.innerHTML = '';
        if (bikes.length === 0) {
            heroResultsGrid.innerHTML = `
                <div class="col-12 text-center py-5">
                    <i class="fas fa-motorcycle fa-3x mb-3 text-muted"></i>
                    <p class="fs-5 text-white">No bikes found matching your criteria.</p>
                    <p class="text-muted">Try adjusting your filters or search options.</p>
                </div>
            `;
            return;
        }

bikes.forEach(bike => {
            const formattedPrice = new Intl.NumberFormat('en-IN', {
                style: 'currency',
                currency: 'INR',
                maximumFractionDigits: 0
            }).format(bike.price);

// Render SPA Bike Details View in same screen
    function showBikeDetails(res) {
        const bike = res.bike;
        const formattedPrice = new Intl.NumberFormat('en-IN', {
            style: 'currency',
            currency: 'INR',
            maximumFractionDigits: 0
        }).format(bike.price);

const conditions = {
            engine: bike.engine_condition || 'Excellent',
            tyres: bike.tyres_condition || 'Good',
            brakes: bike.brakes_condition || 'Good',
            battery: bike.battery_condition || 'Excellent',
            suspension: bike.suspension_condition || 'Good'
        };

function getPillClass(cond) {
            if (cond === 'Excellent') return 'condition-pill excellent';
            if (cond === 'Good') return 'condition-pill good';
            return 'condition-pill average';
        }

heroDetailsContainer.innerHTML = `
            <div class="col-lg-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <button id="back-to-results-btn" class="btn btn-sm btn-outline-light" style="padding: 6px 15px;">
                        <i class="fas fa-arrow-left me-2"></i>Back to Search Results
                    </button>
                    <span class="badge bg-re-red p-2 fs-6">Ref ID: ${bike.reference_id}</span>
                </div>
                
                <div class="row g-5">
                    
                    <div class="col-lg-7">
                        
                        <div class="glass-card d-flex flex-column position-relative media-card-container animate-fade-in">
                            
                            <div class="px-3 py-2 border-bottom border-secondary border-opacity-25" style="background: rgba(0, 0, 0, 0.35);">
                                <ul class="nav nav-pills gap-2" id="mediaTabsDynamic" role="tablist">
                                    ${res.has360 ? `
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active media-tab-btn" id="viewer360-tab-dynamic" data-bs-toggle="pill" data-bs-target="#viewer360-dynamic" type="button" role="tab"><i class="fas fa-sync-alt me-2"></i>360° View</button>
                                    </li>
                                    ` : ''}
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link ${!res.has360 ? 'active' : ''} media-tab-btn" id="gallery-tab-dynamic" data-bs-toggle="pill" data-bs-target="#gallery-dynamic" type="button" role="tab"><i class="fas fa-images me-2"></i>Images</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link media-tab-btn" id="video-tab-dynamic" data-bs-toggle="pill" data-bs-target="#video-dynamic" type="button" role="tab"><i class="fas fa-video me-2"></i>Video</button>
                                    </li>
                                </ul>
                            </div>

<div class="tab-content flex-grow-1 position-relative media-active-view" id="mediaTabContentDynamic">
                                ${res.has360 ? `
                                <div class="tab-pane fade show active h-100" id="viewer360-dynamic" role="tabpanel">
                                    
                                    <div id="threesixty-container-dynamic" style="width: 100%; height: 100%; overflow: hidden; cursor: grab;" class="d-flex align-items-center justify-content-center position-relative">
                                        <div class="text-center" id="viewer-loader" style="z-index: 3;">
                                            <div class="spinner-border text-re-red mb-2" role="status"></div>
                                            <p class="small text-muted">Loading 360° View...</p>
                                        </div>
                                        
                                        <img src="" id="viewer-bg-image" class="position-absolute start-50 top-50 translate-middle w-100 h-100" style="display: none; object-fit: cover; filter: blur(20px); opacity: 0.4; z-index: 1;" alt="360 view background">
                                        
                                        <img src="" id="viewer-image" class="w-100 h-100 position-relative" style="display: none; object-fit: contain; z-index: 2;" alt="360 view">
                                    </div>
                                    
                                    
                                    <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3 d-flex gap-2" style="z-index: 3;">
                                        <button class="btn btn-dark bg-black bg-opacity-50 text-white rounded-circle p-2" id="btn-auto-rotate" title="Auto Rotate"><i class="fas fa-play"></i></button>
                                    </div>
                                    <div class="position-absolute top-0 end-0 mt-3 me-3" style="z-index: 3;">
                                        <span class="badge bg-re-red p-2 fs-6" style="font-size: 0.75rem !important;"><i class="fas fa-hand-pointer me-2"></i>Drag to rotate</span>
                                    </div>
                                </div>
                                ` : ''}

<div class="tab-pane fade ${!res.has360 ? 'show active' : ''} h-100" id="gallery-dynamic" role="tabpanel">
                                    
                                    <div class="swiper mainGallerySwiper h-100 position-relative">
                                        <div class="swiper-wrapper">
                                            ${res.gallery.map(g => `
                                            <div class="swiper-slide position-relative overflow-hidden">
                                                <img src="${g}" class="position-absolute start-50 top-50 translate-middle w-100 h-100" style="object-fit: cover; filter: blur(20px); opacity: 0.4; z-index: 1;" alt="Bike Background">
                                                <img src="${g}" class="position-relative w-100 h-100" style="object-fit: contain; z-index: 2;" alt="Bike">
                                            </div>
                                            `).join('')}
                                            ${res.gallery.length === 0 ? `
                                            <div class="swiper-slide position-relative overflow-hidden">
                                                <img src="https://images.unsplash.com/photo-1558981806-ec527fa84c39?q=80&w=1000" class="position-absolute start-50 top-50 translate-middle w-100 h-100" style="object-fit: cover; filter: blur(20px); opacity: 0.4; z-index: 1;" alt="Bike Background">
                                                <img src="https://images.unsplash.com/photo-1558981806-ec527fa84c39?q=80&w=1000" class="position-relative w-100 h-100" style="object-fit: contain; z-index: 2;" alt="Bike">
                                            </div>
                                            ` : ''}
                                        </div>
                                        <div class="swiper-button-next text-white" style="z-index: 10;"></div>
                                        <div class="swiper-button-prev text-white" style="z-index: 10;"></div>
                                        
                                        ${res.has360 ? `
                                        
                                        <div class="position-absolute start-50 translate-middle-x z-3" style="bottom: 25px;">
                                            <button type="button" class="btn btn-dark bg-black bg-opacity-75 text-white border border-secondary rounded-pill px-4 py-2 shadow-lg d-flex align-items-center gap-2 hover-scale" id="btn-switch-360" style="transition: transform 0.2s, background-color 0.2s;">
                                                <i class="fas fa-sync text-re-red spin-slow"></i>
                                                <span class="fw-bold text-uppercase" style="letter-spacing: 1.5px; font-size: 0.75rem;">360° View</span>
                                            </button>
                                        </div>
                                        ` : ''}
                                    </div>
                                </div>
                                
                                <div class="tab-pane fade h-100" id="video-dynamic" role="tabpanel">
                                    ${res.video ? `
                                        <div class="w-100 h-100 position-relative bg-black">
                                            <video src="${res.video}" controls class="w-100 h-100" style="object-fit: contain;"></video>
                                        </div>
                                    ` : `
                                    <div class="d-flex align-items-center justify-content-center h-100" style="background: #000;">
                                        <p class="text-muted"><i class="fas fa-video-slash fa-3x mb-3 d-block mx-auto text-center"></i>No video available for this bike.</p>
                                    </div>
                                    `}
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="mt-4 text-start">
                            <span class="text-uppercase text-re-red fw-bold mb-1 d-block animate-fade-in" style="font-size: 0.75rem; letter-spacing: 1.5px; opacity: 0.95;">FOR LOCATION</span>
                            <a href="${res.resolved_map_url}" target="_blank" class="d-inline-block text-decoration-none text-white store-location-link">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="fs-4 fw-bold pb-1" style="border-bottom: 1px dashed rgba(255,255,255,0.4); letter-spacing: 0.5px; transition: border-color 0.3s;">${res.loc_title}</span>
                                    <span class="arrow-icon" style="font-size: 1.5rem; color: #a82e2e; transition: transform 0.3s; line-height: 1;">&#x2197;</span>
                                </div>
                                ${res.loc_subtitle ? `
                                <div class="text-muted mt-1 fs-6" style="letter-spacing: 0.3px;">${res.loc_subtitle}</div>
                                ` : ''}
                            </a>
                        </div>
                    </div>

<div class="col-lg-5 text-start">
                        <div class="glass-card py-3 px-4 h-100 d-flex flex-column">
                            <h2 class="fw-bold mb-1 text-white">${bike.model_name}</h2>
                            <p class="text-muted mb-2">
                                <i class="fas fa-map-marker-alt me-1 text-re-red"></i> 
                                <a href="${res.resolved_map_url}" target="_blank" class="text-muted text-decoration-none hover-red" style="transition: color 0.3s;">
                                    ${bike.location}
                                </a>
                            </p>
                            
                            <h1 class="text-re-red fw-bold mb-3">${formattedPrice}</h1>

<div class="row g-2 mb-3">
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">Registration Year</span>
                                        <span class="fw-bold fs-6 text-white">${bike.year}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">KM Driven</span>
                                        <span class="fw-bold fs-6 text-white">${new Intl.NumberFormat('en-IN').format(bike.km_driven)}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">Ownership</span>
                                        <span class="fw-bold fs-6 text-white">${bike.ownership || '1st'}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">Fuel Type</span>
                                        <span class="fw-bold fs-6 text-white">${bike.fuel_type || 'Petrol'}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">Fuel Tank</span>
                                        <span class="fw-bold fs-6 text-white">${bike.fuel_tank_capacity || 'N/A'}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">Insurance</span>
                                        <span class="fw-bold fs-6 text-white">${bike.insurance_status || 'N/A'}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">RC Status</span>
                                        <span class="fw-bold fs-6 text-white">${bike.rc_status || 'N/A'}</span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="py-2 px-3 bg-dark bg-opacity-50 rounded border border-secondary border-opacity-25 h-100">
                                        <span class="text-muted d-block fs-7 text-uppercase" style="font-size: 0.75rem;">RTO</span>
                                        <span class="fw-bold fs-6 text-white">${bike.rto_code || 'N/A'}</span>
                                    </div>
                                </div>
                            </div>

<div class="d-grid gap-2 mb-3 mt-auto">
                                <a href="book-inspection.php?bike=${bike.id}" class="btn btn-primary w-100 py-2"><i class="fas fa-search me-2"></i>Book Inspection</a>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <a href="https://wa.me/919961091654" target="_blank" class="btn btn-outline-light w-100 py-2" style="font-size: 0.95rem;"><i class="fab fa-whatsapp text-success me-2"></i>WhatsApp</a>
                                    </div>
                                    <div class="col-6">
                                        <a href="tel:+919961091654" class="btn btn-outline-light w-100 py-2" style="font-size: 0.95rem;"><i class="fas fa-phone-alt me-2"></i>Call Now</a>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between border-top border-secondary border-opacity-50 pt-2 text-white">
                                <button class="btn btn-link text-white text-decoration-none p-0" id="btn-wishlist-dynamic" data-bike-id="${bike.id}">
                                    <i class="${res.is_wishlisted ? 'fas' : 'far'} fa-heart me-1 text-re-red" id="wishlist-icon-dynamic"></i> 
                                    <span id="wishlist-text-dynamic">${res.is_wishlisted ? 'Saved to Wishlist' : 'Add to Wishlist'}</span>
                                </button>
                                
                                <button class="btn btn-link text-white text-decoration-none p-0" id="btn-share-dynamic">
                                    <i class="fas fa-share-alt me-1"></i> Share
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

<div class="row mt-5 text-start">
                    <div class="col-12">
                        <ul class="nav nav-tabs border-secondary mb-4" id="detailsTabsDynamic" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active text-white bg-transparent border-0 border-bottom border-3 border-danger rounded-0 fs-5 pb-3" id="specs-tab-dynamic" data-bs-toggle="tab" data-bs-target="#specs-dynamic" type="button" role="tab">Specifications</button>
                            </li>
                            <li class="nav-item ms-4" role="presentation">
                                <button class="nav-link text-white bg-transparent border-0 rounded-0 fs-5 pb-3" id="inspection-tab-dynamic" data-bs-toggle="tab" data-bs-target="#inspection-dynamic" type="button" role="tab">Inspection Report</button>
                            </li>
                        </ul>

<div class="tab-content glass-card p-4 border-top-0 rounded-top-0" id="detailsTabContentDynamic">
                            <div class="tab-pane fade show active" id="specs-dynamic" role="tabpanel">
                                <h4 class="mb-4 text-white">Bike Details</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-dark table-borderless table-striped">
                                            <tbody>
                                                <tr><th class="text-muted w-50">Model Name</th><td class="text-white">${bike.model_name}</td></tr>
                                                <tr><th class="text-muted">Color</th><td class="text-white">${bike.colour || 'N/A'}</td></tr>
                                                <tr><th class="text-muted">Engine Capacity</th><td class="text-white">${bike.engine_capacity || 'N/A'} CC</td></tr>
                                                <tr><th class="text-muted">Insurance Status</th><td class="text-white">${bike.insurance_status || 'N/A'}</td></tr>
                                                <tr>
                                                    <th class="text-muted">Insurance Valid Upto</th>
                                                    <td class="text-white">${bike.insurance_valid_upto || 'N/A'}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-md-6">
                                        <table class="table table-dark table-borderless table-striped">
                                            <tbody>
                                                <tr><th class="text-muted w-50">Location</th><td class="text-white">${bike.location}</td></tr>
                                                <tr><th class="text-muted">Reference ID</th><td class="text-white">${bike.reference_id}</td></tr>
                                                <tr><th class="text-muted">Fuel Tank Capacity</th><td class="text-white">${bike.fuel_tank_capacity || 'N/A'}</td></tr>
                                                <tr><th class="text-muted">RC Status</th><td class="text-white">${bike.rc_status || 'N/A'}</td></tr>
                                                <tr><th class="text-muted">RTO Code</th><td class="text-white">${bike.rto_code || 'N/A'}</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <h4 class="mt-4 mb-3 text-white">Description</h4>
                                <p class="text-muted" style="line-height: 1.6;">${bike.description}</p>
                            </div>
                            
                            <div class="tab-pane fade" id="inspection-dynamic" role="tabpanel">
                                <h4 class="mb-4 text-white">150-Point Certified Inspection</h4>
                                <div class="row g-4">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-success bg-opacity-25 text-success rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;"><i class="fas fa-check"></i></div>
                                            <div>
                                                <h6 class="mb-0 text-white">Engine Condition</h6>
                                                <small class="text-success fw-bold">${bike.engine_condition || 'Good'}</small>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-success bg-opacity-25 text-success rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;"><i class="fas fa-check"></i></div>
                                            <div>
                                                <h6 class="mb-0 text-white">Tyres</h6>
                                                <small class="text-success fw-bold">${bike.tyres_condition || 'Good'}</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-success bg-opacity-25 text-success rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;"><i class="fas fa-check"></i></div>
                                            <div>
                                                <h6 class="mb-0 text-white">Brakes</h6>
                                                <small class="text-success fw-bold">${bike.brakes_condition || 'Good'}</small>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-success bg-opacity-25 text-success rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;"><i class="fas fa-check"></i></div>
                                            <div>
                                                <h6 class="mb-0 text-white">Battery</h6>
                                                <small class="text-success fw-bold">${bike.battery_condition || 'Good'}</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="bg-success bg-opacity-25 text-success rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;"><i class="fas fa-check"></i></div>
                                            <div>
                                                <h6 class="mb-0 text-white">Suspension</h6>
                                                <small class="text-success fw-bold">${bike.suspension_condition || 'Good'}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

// Wire up back button event
        document.getElementById('back-to-results-btn').addEventListener('click', function() {
            heroDetailsContainer.classList.add('d-none');
            heroSearchWrapper.classList.remove('d-none');
            // If segment is chosen, make sure chips are shown
            if (filterSegment.value !== '') {
                modelChipsWrapper.classList.remove('d-none');
            }
            heroResultsContainer.classList.remove('d-none');
        });

// Initialize Swiper for dynamic container
        new Swiper('#hero-details-container .mainGallerySwiper', {
            navigation: {
                nextEl: '#hero-details-container .swiper-button-next',
                prevEl: '#hero-details-container .swiper-button-prev',
            },
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            observer: true,
            observeParents: true,
        });

// Switch to 360 Tab event
        const btnSwitch360 = document.getElementById('btn-switch-360');
        if (btnSwitch360) {
            btnSwitch360.addEventListener('click', function() {
                const tabEl = document.getElementById('viewer360-tab-dynamic');
                if (tabEl) {
                    const tab = new bootstrap.Tab(tabEl);
                    tab.show();
                }
            });
        }

// Custom Tab logic for details section
        const dynTabs = document.querySelectorAll('#detailsTabsDynamic .nav-link');
        dynTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                dynTabs.forEach(t => t.classList.remove('border-bottom', 'border-3', 'border-danger'));
                this.classList.add('border-bottom', 'border-3', 'border-danger');
            });
        });

// Wishlist Logic
        const btnWishlistDyn = document.getElementById('btn-wishlist-dynamic');
        if (btnWishlistDyn) {
            btnWishlistDyn.addEventListener('click', function() {
                const bikeId = this.getAttribute('data-bike-id');
                const icon = document.getElementById('wishlist-icon-dynamic');
                const text = document.getElementById('wishlist-text-dynamic');
                
                fetch('api/toggle_wishlist.php', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    body: 'bike_id=' + bikeId
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'added') {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        text.innerText = 'Saved to Wishlist';
                    } else if (data.status === 'removed') {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        text.innerText = 'Add to Wishlist';
                    } else if (data.status === 'unauthorized') {
                        window.location.href = 'login.php';
                    }
                });
            });
        }

// Share Logic
        const btnShareDyn = document.getElementById('btn-share-dynamic');
        if (btnShareDyn) {
            btnShareDyn.addEventListener('click', function() {
                const shareUrl = window.location.origin + window.location.pathname + '?model_name=' + encodeURIComponent(bike.model_name);
                if (navigator.share) {
                    navigator.share({
                        title: bike.model_name,
                        text: 'Check out this certified pre-owned Royal Enfield!',
                        url: shareUrl
                    }).catch(err => console.log('Error sharing:', err));
                } else {
                    navigator.clipboard.writeText(shareUrl).then(() => {
                        alert('Link copied to clipboard!');
                    });
                }
            });
        }

// Initialize 360 viewer if active
        if (res.has360 && typeof init360Viewer === 'function') {
            init360Viewer('threesixty-container-dynamic', res.images360);
        }
    }
});
</script>

<?php require_once 'includes/footer.php'; ?>