#I LOVE YOU EVERDAY#

<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';

$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if (!$id) { redirect('buy-bikes.php'); }

$stmt = $pdo->prepare("SELECT * FROM bikes WHERE id = ?");
$stmt->execute([$id]);
$bike = $stmt->fetch();
if (!$bike) { redirect('buy-bikes.php'); }

$resolved_map_url = !empty($bike['map_url']) ? $bike['map_url'] : 'https://www.google.com/maps/place/AVAHAN+MOTORS+PRIVATE+LIMITED/@13.0228511,77.6444219,318m/data=!3m1!1e3!4m14!1m7!3m6!1s0x3bae172fa4140de5:0xcad36f1771fbd60e!2sAVAHAN+MOTORS+PRIVATE+LIMITED!8m2!3d13.0228409!4d77.6461109!16s%2Fg%2F11ks6jzl4c!3m5!1s0x3bae172fa4140de5:0xcad36f1771fbd60e!8m2!3d13.0228409!4d77.6461109!16s%2Fg%2F11ks6jzl4c';

$loc_parts = explode(',', $bike['location'], 2);
$loc_title = trim($loc_parts[0]);
$loc_subtitle = isset($loc_parts[1]) ? trim($loc_parts[1]) : '';

// Fetch Gallery Images
$imgStmt = $pdo->prepare("SELECT image_url FROM bike_images WHERE bike_id = ? ORDER BY is_main DESC");
$imgStmt->execute([$id]);
$gallery = $imgStmt->fetchAll(PDO::FETCH_COLUMN);

// Fetch Video
$vidStmt = $pdo->prepare("SELECT video_url FROM bike_videos WHERE bike_id = ? LIMIT 1");
$vidStmt->execute([$id]);
$video = $vidStmt->fetchColumn();

// Fetch 360 Images
$threeStmt = $pdo->prepare("SELECT folder_path, frame_count FROM bike_360_images WHERE bike_id = ? LIMIT 1");
$threeStmt->execute([$id]);
$three60Data = $threeStmt->fetch(PDO::FETCH_ASSOC);

$images360 = [];
$has360 = false;
if ($three60Data) {
    $has360 = true;
    $folder = $three60Data['folder_path'];
    if (is_dir($folder)) {
        $files = scandir($folder);
        $localFiles = [];
        foreach ($files as $file) {
            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
            if (in_array($ext, ['jpg', 'jpeg', 'png', 'webp'])) {
                $localFiles[] = $folder . $file;
            }
        }
        if ($localFiles) {
            natsort($localFiles);
            foreach ($localFiles as $file) {
                $images360[] = $file;
            }
        }
    }
}

// Fallback to gallery images for 360 degree spin view if no dedicated folder is uploaded
if (!$has360 && !empty($gallery)) {
    $has360 = true;
    $images360 = $gallery;
}

$is_wishlisted = false;
if (is_customer_logged_in()) {
    $wStmt = $pdo->prepare("SELECT id FROM wishlist WHERE customer_id = ? AND bike_id = ?");
    $wStmt->execute([$_SESSION['customer_id'], $id]);
    if ($wStmt->fetch()) {
        $is_wishlisted = true;
    }
}

require_once 'includes/header.php';
?>

<section class="py-5 mt-4">
    <div class="container">
        
        <nav aria-label="breadcrumb" class="mb-4 fade-up">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.php" class="text-re-red text-decoration-none">Home</a></li>
                <li class="breadcrumb-item"><a href="buy-bikes.php" class="text-re-red text-decoration-none">Bikes</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page"><?php echo htmlspecialchars($bike['model_name']); ?></li>
            </ol>
        </nav>

<div class="row g-5">
            
            <div class="col-lg-7 fade-up">
                
                <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="mediaTabs" role="tablist">
                            <?php if($has360): ?>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active media-tab-btn" id="viewer360-tab" data-bs-toggle="pill" data-bs-target="#viewer360" type="button" role="tab"><i class="fas fa-sync-alt me-2"></i>360° View</button>
                            </li>
                            <?php endif; ?>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link <?php echo !$has360 ? 'active' : ''; ?> media-tab-btn" id="gallery-tab" data-bs-toggle="pill" data-bs-target="#gallery" 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" data-bs-toggle="pill" data-bs-target="#video" 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="mediaTabContent">
                        <?php if($has360): ?>
                        <div class="tab-pane fade show active h-100" id="viewer360" role="tabpanel">
                            
                            <div id="threesixty-container" 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>
                                <button class="btn btn-dark bg-black bg-opacity-50 text-white rounded-circle p-2" id="btn-fullscreen" title="Full Screen"><i class="fas fa-expand"></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>
                        <?php endif; ?>

<div class="tab-pane fade <?php echo !$has360 ? 'show active' : ''; ?> h-100" id="gallery" role="tabpanel">
                            
                            <div class="swiper mainGallerySwiper h-100 position-relative">
                                <div class="swiper-wrapper">
                                    <?php foreach($gallery as $g): ?>
                                    <div class="swiper-slide position-relative overflow-hidden">
                                        
                                        <img src="<?php echo htmlspecialchars($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="<?php echo htmlspecialchars($g); ?>" class="position-relative w-100 h-100" style="object-fit: contain; z-index: 2;" alt="Bike">
                                    </div>
                                    <?php endforeach; ?>
                                    <?php if(empty($gallery)): ?>
                                    <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>
                                    <?php endif; ?>
                                </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>
                                
                                <?php if($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" onclick="switchTo360Tab()" 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>
                                <?php endif; ?>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade h-100" id="video" role="tabpanel">
                            <?php if($video): ?>
                                <div class="w-100 h-100 position-relative bg-black">
                                    <video src="<?php echo htmlspecialchars($video); ?>" controls class="w-100 h-100" style="object-fit: contain;"></video>
                                </div>
                            <?php else: ?>
                            <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>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                
                <div class="mt-4">
                    <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="<?php echo htmlspecialchars($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;"><?php echo htmlspecialchars($loc_title); ?></span>
                            <span class="arrow-icon" style="font-size: 1.5rem; color: #a82e2e; transition: transform 0.3s; line-height: 1;">&#x2197;</span>
                        </div>
                        <?php if($loc_subtitle): ?>
                        <div class="text-muted mt-1 fs-6" style="letter-spacing: 0.3px;"><?php echo htmlspecialchars($loc_subtitle); ?></div>
                        <?php endif; ?>
                    </a>
                </div>
            </div>

<div class="col-lg-5 fade-up">
                <div class="glass-card py-3 px-4 h-100 d-flex flex-column">
                    <h2 class="fw-bold mb-1">Royal Enfield <?php echo htmlspecialchars($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="<?php echo htmlspecialchars($resolved_map_url); ?>" target="_blank" class="text-muted text-decoration-none hover-red" style="transition: color 0.3s;">
                            <?php echo htmlspecialchars($bike['location']); ?>
                        </a>
                    </p>
                    
                    <h1 class="text-re-red fw-bold mb-3">₹ <?php echo number_format($bike['price']); ?></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"><?php echo htmlspecialchars($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"><?php echo number_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"><?php echo htmlspecialchars($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"><?php echo htmlspecialchars($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"><?php echo htmlspecialchars($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 d-block">
                                    <?php
                                    $insurance_status_label = 'Expired';
                                    if (!empty($bike['insurance_valid_upto'])) {
                                        $valid_date = strtotime($bike['insurance_valid_upto']);
                                        if ($valid_date && $valid_date >= strtotime('today')) {
                                            $insurance_status_label = 'Running';
                                        }
                                    }
                                    echo htmlspecialchars($insurance_status_label);
                                    ?>
                                </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"><?php echo htmlspecialchars($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"><?php echo htmlspecialchars($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=<?php echo $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">
                        <?php if(is_customer_logged_in()): ?>
                            <button class="btn btn-link text-white text-decoration-none p-0" id="btn-wishlist" data-bike-id="<?php echo $id; ?>">
                                <i class="<?php echo $is_wishlisted ? 'fas' : 'far'; ?> fa-heart me-1 text-re-red" id="wishlist-icon"></i> 
                                <span id="wishlist-text"><?php echo $is_wishlisted ? 'Saved to Wishlist' : 'Add to Wishlist'; ?></span>
                            </button>
                        <?php else: ?>
                            <a href="login.php" class="btn btn-link text-white text-decoration-none p-0">
                                <i class="far fa-heart me-1 text-re-red"></i> Add to Wishlist
                            </a>
                        <?php endif; ?>
                        
                        <button class="btn btn-link text-white text-decoration-none p-0" id="btn-share" onclick="shareBike()">
                            <i class="fas fa-share-alt me-1"></i> Share
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="row mt-5 fade-up">
            <div class="col-12">
                <ul class="nav nav-tabs border-secondary mb-4" id="detailsTabs" 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" data-bs-toggle="tab" data-bs-target="#specs" 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" data-bs-toggle="tab" data-bs-target="#inspection" type="button" role="tab">Inspection Report</button>
                    </li>
                </ul>

<div class="tab-content glass-card p-4 border-top-0 rounded-top-0" id="detailsTabContent">
                    <div class="tab-pane fade show active" id="specs" role="tabpanel">
                        <h4 class="mb-4">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><?php echo htmlspecialchars($bike['model_name']); ?></td></tr>
                                        <tr><th class="text-muted">Color</th><td><?php echo htmlspecialchars($bike['colour'] ?? 'N/A'); ?></td></tr>
                                        <tr><th class="text-muted">Engine Capacity</th><td><?php echo htmlspecialchars($bike['engine_capacity'] ?? 'N/A'); ?></td></tr>
                                        <tr><th class="text-muted">Insurance Status</th><td><?php echo htmlspecialchars($bike['insurance_status'] ?? 'N/A'); ?></td></tr>
                                        <tr>
                                            <th class="text-muted">Insurance Valid Upto</th>
                                            <td>
                                                <?php
                                                if (!empty($bike['insurance_valid_upto'])) {
                                                    $date = strtotime($bike['insurance_valid_upto']);
                                                    echo $date ? date('d/m/Y', $date) : htmlspecialchars($bike['insurance_valid_upto']);
                                                } else {
                                                    echo '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><?php echo htmlspecialchars($bike['location']); ?></td></tr>
                                        <tr><th class="text-muted">Reference ID</th><td><?php echo htmlspecialchars($bike['reference_id']); ?></td></tr>
                                        <tr><th class="text-muted">Fuel Tank Capacity</th><td><?php echo htmlspecialchars($bike['fuel_tank_capacity'] ?? 'N/A'); ?></td></tr>
                                        <tr><th class="text-muted">RC Status</th><td><?php echo htmlspecialchars($bike['rc_status'] ?? 'N/A'); ?></td></tr>
                                        <tr><th class="text-muted">RTO Code</th><td><?php echo htmlspecialchars($bike['rto_code'] ?? 'N/A'); ?></td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <h4 class="mt-4 mb-3">Description</h4>
                        <p class="text-muted"><?php echo nl2br(htmlspecialchars($bike['description'] ?? 'No description provided.')); ?></p>
                    </div>
                    
                    <div class="tab-pane fade" id="inspection" role="tabpanel">
                        <h4 class="mb-4">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">Engine Condition</h6>
                                        <small class="text-success fw-bold"><?php echo htmlspecialchars($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">Tyres</h6>
                                        <small class="text-success fw-bold"><?php echo htmlspecialchars($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">Brakes</h6>
                                        <small class="text-success fw-bold"><?php echo htmlspecialchars($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">Battery</h6>
                                        <small class="text-success fw-bold"><?php echo htmlspecialchars($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">Suspension</h6>
                                        <small class="text-success fw-bold"><?php echo htmlspecialchars($bike['suspension_condition'] ?? 'Good'); ?></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

/* Responsive aspect ratio for media section */
.media-card-container {
    width: 100%;
    background: #0a0a0a !important;
    border-radius: 8px;
    overflow: hidden;
}
.media-active-view {
    width: 100%;
    aspect-ratio: 16 / 10;
}
@media (min-width: 992px) {
    .media-active-view {
        height: 420px; /* Fixed height on desktop */
        aspect-ratio: auto;
    }
}

/* Custom Swiper Controls with Red Glowing Accent */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.4);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: #a82e2e;
    color: #fff !important;
    border-color: #a82e2e;
    box-shadow: 0 0 10px rgba(168, 46, 46, 0.5);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 1.1rem !important;
    font-weight: 800;
}

/* Tab buttons styling */
.media-tab-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 6px 18px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 4px !important;
}
.media-tab-btn:hover {
    border-color: #a82e2e !important;
    color: #fff !important;
}
.media-tab-btn.active {
    background-color: #a82e2e !important;
    border-color: #a82e2e !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(168, 46, 46, 0.3);
}

.hover-red:hover {
    color: #A32020 !important;
    text-decoration: underline !important;
}
.store-location-link:hover span {
    border-bottom-color: #a82e2e !important;
    color: #a82e2e !important;
}
.store-location-link:hover .arrow-icon {
    transform: translate(3px, -3px);
}
@keyframes spinSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin-slow {
    animation: spinSlow 8s linear infinite;
}
.hover-scale:hover {
    transform: translateX(-50%) scale(1.05) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gallery Swiper
    const swiper = new Swiper('.mainGallerySwiper', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        observer: true,
        observeParents: true,
    });

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

// Wishlist Logic
    const btnWishlist = document.getElementById('btn-wishlist');
    if (btnWishlist) {
        btnWishlist.addEventListener('click', function() {
            const bikeId = this.getAttribute('data-bike-id');
            const icon = document.getElementById('wishlist-icon');
            const text = document.getElementById('wishlist-text');
            
            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
function shareBike() {
    if (navigator.share) {
        navigator.share({
            title: '<?php echo htmlspecialchars(addslashes($bike['model_name'])); ?>',
            text: 'Check out this certified pre-owned Royal Enfield!',
            url: window.location.href
        }).catch(err => console.log('Error sharing:', err));
    } else {
        navigator.clipboard.writeText(window.location.href).then(() => {
            alert('Link copied to clipboard!');
        });
    }
}

// Switch to 360 Tab
function switchTo360Tab() {
    const tabEl = document.getElementById('viewer360-tab');
    if (tabEl) {
        const tab = new bootstrap.Tab(tabEl);
        tab.show();
    }
}
</script>

<?php if($has360): ?>
<script src="assets/js/360viewer.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const images360 = <?php echo json_encode($images360); ?>;
        if(typeof init360Viewer === 'function') {
            init360Viewer('threesixty-container', images360);
        }
    });
</script>
<?php endif; ?>

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