<?php 
    include "../assets/folder_name.php"; 
    session_start(); 
    include('../db/connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>SkyBot - Drones</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="<?php echo $folder_name; ?>assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/plugins_old/bootstrap.min.css" rel="stylesheet">
    <script src="<?php echo $folder_name; ?>assets/plugins_old/jquery.min.js"></script>
    <script src="<?php echo $folder_name; ?>assets/plugins_old/popper.min.js"></script>
    <script src="<?php echo $folder_name; ?>assets/plugins_old/bootstrap.min.js"></script>

    <link href="<?php echo $folder_name; ?>assets/css/productTabContent.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/css/FeaturesQaReviewComm.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/css/imageslider.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/css/spareparts.css" rel="stylesheet">
    <link href="<?php echo $folder_name; ?>assets/css/trendingvehicles.css" rel="stylesheet">

    <style>
        @font-face {
            font-family: GilroyRegular;
            src: url(../assets/css/gilroy-regular.ttf);
        }
        @font-face {
            font-family: GilroyBold;
            src: url(../assets/css/gilroy-bold.ttf);
        }
        body {
            background-color: rgb(238, 238, 238);
            font-family: "GilroyRegular";
        }
        .directbodytext {
            font-size: 14px;
            padding: 0 20px;
            letter-spacing: 0.1rem;
            margin: 1.5rem 0;
        }

        .dropdown1:hover body :not(#popup1) {
            -webkit-filter: blur(2px);
            -moz-filter: blur(2px);
            -o-filter: blur(2px);
            -ms-filter: blur(2px);
            filter: blur(2px);
        }

        @media screen and (max-width: 500px) {
            .directbodytext {
                font-size: 0.8rem;
                padding: 0.5rem 2rem;
            }
        }
    </style>

</head>
<body>

    <?php
    $id = (isset($_GET['id'])) ? $_GET['id'] : '0';
    $new_drone_query = "SELECT V.id,V.variant,B.brand,M.model,V.price,M.drone_type,V.short_description, V.model as model_id, V.brand as brand_id FROM `variant` as V
                        left join model as M on M.model_id=V.model
                        left join Brand as B on B.brand_id=V.brand
                        left join type_of_drones as T on T.type_id=M.drone_type
                        left join type_drone_charactristics as C on C.drone_type=T.type_id
                        left join type_drone_usecase as U on U.drone_type=T.type_id
                        where V.deletion=0 and V.id='$id'";
    $new_drone_row = mysqli_query($conn, $new_drone_query);
    $new_drone_res = mysqli_fetch_assoc($new_drone_row);

    $image_query = "select images from drone_images where deletion=0 and type = 'image' and variant_id='$id'";
    $image_row = mysqli_query($conn, $image_query);
    $images = [];
    if ($image_row->num_rows > 0) {
        while ($row = mysqli_fetch_assoc($image_row)) {
            $images[] = $row;
        }
    }

    $spec_query = "select weight, dimensions, frame_material, take_off_Weight, payload_capacity, 
                        flight_time, max_speed, max_range, max_altitude, temp_range, wind_resistance_level, 
                        battery_type, battery_capacity, battery_voltage, charging_time, charger_type, 
                        GPS_GNSS, return_home, flight_modes, obstacle_avoidance, controller_type, mobile_app_support, 
                        camera_available, camera_resolution, video_resolution, gimbal_type, camera_sensors, FPV_support, 
                        transmission_frequency, live_video_range, signal_encryption, safety_features, AI_software_features, 
                        certifications, package_contents, warranty_support, area_spraying_rate, spray_tank_capacity, 
                        No_of_Nozzles, spray_width, spray_volume, GPS_accuracy, terrain_following 
                    from drone_specification 
                    where deletion=0 
                        and variant='$id'";
    $spec_row = mysqli_query($conn, $spec_query);
    $spec_res = mysqli_fetch_assoc($spec_row);
    ?>


    <!-- PATH -->
    <div class="directbodytext"><a href="index.php" target="_parent">Home</a> / <a href="newdrones.php" target="_parent">Listings</a> / Overview</div>

    <!-- BIKE DETAILS -->
    <div class="container-fluid" id="productTab">
        <div class="ul-wrap">
            <ul class="nav nav-tabs nav-justified" id="navTab">
                <li><a href="overview_main_load.php?id=<?php echo $id; ?>"><center>Drone</center></a></li>
                <li class="active"><a href="overview_spec_load.php?id=<?php echo $id; ?>"><center>Specifications</center></a></li>
                <li><a href="overview_variants_load.php?id=<?php echo $id; ?>"><center>Variants</center></a></li>
                <li><a href="overview_images_load.php?id=<?php echo $id; ?>"><center>Images</center></a></li>
                <li><a href="overview_videos_load.php?id=<?php echo $id; ?>"><center>Videos</center></a></li>
                <li><a href="overview_compare_load.php?id=<?php echo $id; ?>"><center>Compare</center></a></li>
                <li><a href="overview_main_load.php?id=<?php echo $id; ?>"><center>Q & A</center></a></li>
                <li><a href="overview_main_load.php?id=<?php echo $id; ?>"><center>User Reviews</center></a></li>
                <li><a href="overview_main_load.php?id=<?php echo $id; ?>"><center>Spare parts</center></a></li>
                <li><a href="overview_main_load.php?id=<?php echo $id; ?>"><center>Dealers</center></a></li>
            </ul>
        </div>
    </div>
    
    <div class="main-content">
        <div class="thisProductDiv">
            <div class="imageDiv">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <div class="carousel-indicators">
                        <?php foreach ($images as $i => $img) { ?>
                            <li
                                data-target="#carouselExampleIndicators"
                                data-slide-to="<?php echo $i; ?>"
                                class="<?php echo ($i === 0) ? 'active' : ''; ?>">
                            </li>
                        <?php } ?>
                    </div>
                    <div class="carousel-inner">
                        <?php
                        foreach ($images as $i => $img) {
                        ?>
                            <div class="carousel-item <?php echo ($i === 0) ? 'active' : ''; ?>">
                                <img src="../documents/new_drones/<?php echo $img['images']; ?>" alt="First slide" class="d-block w-100">
                            </div>
                        <?php
                        }
                        ?>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>

                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <div class="contentDiv">
                <div class="drone_name"><?php echo $new_drone_res['brand'] . " " . $new_drone_res['model'] . " " . $new_drone_res['variant']; ?></div>
                <div class="drone_rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
                <div class="write_reviews"><i class="fa-solid fa-pencil" style="color: rgb(162, 160, 160);"></i>&nbsp;Write Your Reviews</div>
                <div class="price_heading">Ex-Showroom Price</div>
                <div class="price_heading">Onroad Price</div>
                <div class="price_content">Rs. <?php $price = number_format($new_drone_res['price']); echo $price; ?></div>
                <div class="price_content">Rs. <?php $price = number_format($new_drone_res['price']); echo $price; ?></div>
                <div class="btnSection"><div class="contact_dealer">Contact Dealer</div></div>
            </div>
        </div>
        
        <div class="other-features">
            <div class="each-featureCont">
                <div class="heading">Flight Performance</div>
                <div class="each-feature">
                    <div class="feature1">Max Flight Time</div>
                    <div class="feature2"><?php echo $spec_res['flight_time']; ?> mins</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Max Speed</div>
                    <div class="feature2"><?php echo $spec_res['max_speed']; ?> m/sec</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Max Range</div>
                    <div class="feature2"><?php echo $spec_res['max_range']; ?> km</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Max Altitude</div>
                    <div class="feature2"><?php echo $spec_res['max_altitude']; ?> m</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Operating Temp Range</div>
                    <div class="feature2"><?php echo $spec_res['temp_range']; ?> C</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Wind Resistance Level</div>
                    <div class="feature2"><?php echo $spec_res['wind_resistance_level']; ?> m/sec</div>
                </div>
            </div>
            <div class="each-featureCont">
                <div class="heading">Power & Battery</div>
                <div class="each-feature">
                    <div class="feature1">Battery Type</div>
                    <div class="feature2"><?php echo $spec_res['battery_type']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Battery Capacity</div>
                    <div class="feature2"><?php echo $spec_res['battery_capacity']; ?> mAh</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Battery Voltage</div>
                    <div class="feature2"><?php echo $spec_res['battery_voltage']; ?> V</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Charging Time</div>
                    <div class="feature2"><?php echo $spec_res['charging_time']; ?> Hr</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Charger Type</div>
                    <div class="feature2"><?php echo $spec_res['charger_type']; ?></div>
                </div>
            </div>
            <div class="each-featureCont">
                <div class="heading">Navigation & Control</div>
                <div class="each-feature">
                    <div class="feature1">GPS/GNSS</div>
                    <div class="feature2"><?php echo $spec_res['GPS_GNSS']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Return to Home</div>
                    <div class="feature2"><?php echo $spec_res['return_home']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Flight Modes</div>
                    <div class="feature2"><?php echo $spec_res['flight_modes']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Obstacle Avoidance</div>
                    <div class="feature2"><?php echo $spec_res['obstacle_avoidance']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Controller Type</div>
                    <div class="feature2"><?php echo $spec_res['controller_type']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Mobile App Support</div>
                    <div class="feature2"><?php echo $spec_res['mobile_app_support']; ?></div>
                </div>
            </div>
            <div class="each-featureCont">
                <div class="heading">Camera & Sensors</div>
                <div class="each-feature">
                    <div class="feature1">Camera Available</div>
                    <div class="feature2"><?php echo $spec_res['camera_available']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Camera Resolutions</div>
                    <div class="feature2"><?php echo $spec_res['camera_resolution']; ?> MP</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Video Resolutions</div>
                    <div class="feature2"><?php echo $spec_res['video_resolution']; ?> px</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Gimbal Type</div>
                    <div class="feature2"><?php echo $spec_res['gimbal_type']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Camera Sensors</div>
                    <div class="feature2"><?php echo $spec_res['camera_sensors']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">FPV Support</div>
                    <div class="feature2"><?php echo $spec_res['FPV_support']; ?></div>
                </div>
            </div>
            <div class="each-featureCont">
                <div class="heading">Communication</div>
                <div class="each-feature">
                    <div class="feature1">Transmission Frequency</div>
                    <div class="feature2"><?php echo $spec_res['transmission_frequency']; ?> GHz</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Live Video Range</div>
                    <div class="feature2"><?php echo $spec_res['live_video_range']; ?> km</div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Signal Encryption</div>
                    <div class="feature2"><?php echo $spec_res['signal_encryption']; ?></div>
                </div>
            </div>
            <div class="each-featureCont">
                <div class="heading">Safety, Software, Compliance, Package, Warranty</div>
                <div class="each-feature">
                    <div class="feature1">Safety Features</div>
                    <div class="feature2"><?php echo $spec_res['safety_features']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">AI/Software Features</div>
                    <div class="feature2"><?php echo $spec_res['AI_software_features']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Certifications</div>
                    <div class="feature2"><?php echo $spec_res['certifications']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Package Contents</div>
                    <div class="feature2"><?php echo $spec_res['package_contents']; ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Warranty</div>
                    <div class="feature2"><?php echo $spec_res['warranty_support']; ?></div>
                </div>
            </div>
            <div class="each-featureCont">
                <div class="heading">Agricultural / Spraying Specifications</div>
                <div class="each-feature">
                    <div class="feature1">Area Spraying Rate</div>
                    <div class="feature2"><?php if($spec_res['area_spraying_rate']=="") { echo 'NA'; } else { echo $spec_res['area_spraying_rate'] . " Acres/Hr"; } ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Spray Tank Capacity</div>
                    <div class="feature2"><?php if($spec_res['spray_tank_capacity']=="") { echo 'NA'; } else { echo $spec_res['spray_tank_capacity'] . " L"; } ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">No. of Nozzles</div>
                    <div class="feature2"><?php if($spec_res['No_of_Nozzles']=="") { echo 'NA'; } else { echo $spec_res['No_of_Nozzles']; } ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Spray Width</div>
                    <div class="feature2"><?php if($spec_res['spray_width']=="") { echo 'NA'; } else { echo $spec_res['spray_width'] . " m"; } ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Spray Volume</div>
                    <div class="feature2"><?php if($spec_res['spray_volume']=="") { echo 'NA'; } else { echo $spec_res['spray_volume'] . " ml/min"; } ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">GPS Accuracy</div>
                    <div class="feature2"><?php if($spec_res['GPS_accuracy']=="") { echo 'NA'; } else { echo $spec_res['GPS_accuracy'] . " m"; } ?></div>
                </div>
                <div class="each-feature">
                    <div class="feature1">Terrain Following</div>
                    <div class="feature2"><?php if($spec_res['terrain_following']=="") { echo 'NA'; } else { echo $spec_res['terrain_following'] . " m"; } ?></div>
                </div>
            </div>
            <div class="line">
                <a href="#">Skydio Features</a>
            </div>
        </div>

        <!-- EV VARIANT LIST -->
        <div id="ev-variants">
            <h3><?php echo $new_drone_res['brand'] . " " . $new_drone_res['model']; ?> Drone Variant lists</h3>
            <div class="tbl">
                <table>
                    <?php
                        $new_drone_query2 = "SELECT id,variant,price 
                                            FROM variant
                                            where deletion = 0 
                                                and model='{$new_drone_res['model_id']}' 
                                                and brand='{$new_drone_res['brand_id']}'";
                        $new_drone_row2 = mysqli_query($conn, $new_drone_query2);
                    ?>
                    <tr style="background-color: gainsboro; height: 5rem;">
                        <td>Variant (<?php echo mysqli_num_rows($new_drone_row2); ?>)</td>
                        <td>Ex-Platform Price</td>
                        <td>Compare</td>
                    </tr>
                    <?php
                        if ($new_drone_row2 && mysqli_num_rows($new_drone_row2) > 0) {
                            while ($new_drone_res2 = mysqli_fetch_assoc($new_drone_row2)) {
                    ?>
                                <tr style="height: 12rem;">
                                    <td>
                                        <font style="color: darkcyan;"><?php echo $new_drone_res2['variant']; ?></font> <br> Automatic
                                    </td>
                                    <td>Rs. <?php echo $new_drone_res2['price']; ?> <br>
                                        <font style="color: darkcyan;">get other price</font>
                                    </td>
                                    <td><input type="checkbox" style="width: 2rem;"></td>
                                </tr>
                    <?php
                            }
                        }
                        
                    ?>
                </table>
            </div>
            <div class="line">
                <a href="#">Skydio Variants</a>
            </div>
        </div>

        <!-- SIMILAR VEHICLES -->
        <div class="slider">
            <h1><?php echo $new_drone_res['brand'] . " " . $new_drone_res['model']; ?> Drones Comparison with Similar Drones</h1>
            <div class="slider-container">
                <div class="slider-wrapper">
                    <div class="inner-wrapper" id="inner-wrapper1">
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 75%;">
                            <div class="inner-text">
                                <div class="caption1">Drone 1</div>
                                <div class="caption2"><b>Rs</b> 1.36 Lakh</div>
                                <div class="inner-btns"><button>View Details</button></div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 75%;">
                            <div class="inner-text">
                                <div class="caption1">Drone 2</div>
                                <div class="caption2"><b>Rs</b> 1.42 Lakh</div>
                                <div class="inner-btns"><button>View Details</button></div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQFO-XRKm6AjjevA9cmfUeGCkBc8xYZTU0OeDM3nfi-Ww-z0Sv_FRqZaY&s" style="width: 100%; height: 75%;">
                            <div class="inner-text">
                                <div class="caption1">Drone 3</div>
                                <div class="caption2"><b>Rs</b> 54,500</div>
                                <div class="inner-btns"><button>View Details</button></div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 75%;">
                            <div class="inner-text">
                                <div class="caption1">Drone 4</div>
                                <div class="caption2"><b>Rs</b> 58,500</div>
                                <div class="inner-btns"><button>View Details</button></div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 75%;">
                            <div class="inner-text">
                                <div class="caption1">Drone 5</div>
                                <div class="caption2"><b>Rs</b> 49,999</div>
                                <div class="inner-btns"><button>View Details</button></div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="button-prev" id="button-prev1">
                    <
                </button>
                <button class="button-next" id="button-next1">
                    >
                </button>
            </div>
        </div>

        <!-- Q/A SECTION -->
        <div id="qa">
            <div class="qa-img"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/faq.jpg" style="width: inherit; height: inherit;"></div>
            <div class="qa-content">
                <h3>Are You Confused?</h3>
                <h5>Ask anything & get answer very soon</h5>
                <input type="text">
                <button class="btn btn-secondary" style="width: 15rem; height: 4rem;">Ask a Question</button>
            </div>
        </div>

        <!-- COMMENTS SECTION -->
        <div id="comments">
            <h3>Write your Comment on <?php echo $new_drone_res['brand'] . " " . $new_drone_res['model'] . " " . $new_drone_res['variant']; ?></h3>
            <input type="text">
            <button class="btn btn-secondary">Post Your Comment</button>
        </div>

        <!-- MORE VEHICLES -->
        <div class="slider">
            <h1>More Drones Options to Consider</h1>
            <div class="slider-container" style="padding-bottom: 2rem;">
                <div class="slider-wrapper">
                    <div class="inner-wrapper" id="inner-wrapper3">
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 90%;">
                            <div class="inner-text">
                                <div class="caption1" style="text-align: center; color: black; padding: 0.5rem;">Drone 1</div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 90%;">
                            <div class="inner-text">
                                <div class="caption1" style="text-align: center; color: black; padding: 0.5rem;">Drone 2</div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQFO-XRKm6AjjevA9cmfUeGCkBc8xYZTU0OeDM3nfi-Ww-z0Sv_FRqZaY&s" style="width: 100%; height: 90%;">
                            <div class="inner-text">
                                <div class="caption1" style="text-align: center; color: black; padding: 0.5rem;">Drone 3</div>
                            </div>
                        </div>
                        <div class="minicon" style="position: relative;">
                            <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: 90%;">
                            <div class="inner-text">
                                <div class="caption1" style="text-align: center; color: black; padding: 0.5rem;">Drone 4</div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="button-prev" id="button-prev3">
                    <
                </button>
                <button class="button-next" id="button-next3">
                    >
                </button>
            </div>
        </div>

        <!-- TRENDING VEHICLES -->
        <div class="sidebar">
            <div id="trending">
                <div style="color: green; padding: 1rem 2rem; font-size: 2rem; font-weight: 550; background-color: lightgray;">Trending Drones</div>
                <ul class="nav nav-tabs nav-justified" id="trendingTab">
                    <li class="active"><a data-toggle="tab" href="#allmotorcycle">
                            <center>All Drones</center>
                        </a></li>
                    <li><a data-toggle="tab" href="#popular">
                            <center>Popular</center>
                        </a></li>
                    <li><a data-toggle="tab" href="#upcoming">
                            <center>Upcoming</center>
                        </a></li>
                </ul>

                <div class="trending-tab-content">
                    <div id="allmotorcycle" class="tab-pane fade in active">
                        <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                            <div style="display: inline-block; width: 35%; padding: 2rem;">
                                <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: inherit;">
                            </div>
                            <div style="display: inline-block; width: 63%; padding: 1rem; padding-left: 3rem;">
                                <h5>Drone 1</h5>
                                <h4 style="color: darkblue;">Rs. 1.12 Lakh</h4>
                            </div>
                        </div>

                        <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                            <div style="display: inline-block; width: 35%; padding: 2rem;">
                                <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: inherit;">
                            </div>
                            <div style="display: inline-block; width: 63%; padding: 1rem; padding-left: 3rem;">
                                <h5>Drone 2</h5>
                                <h4 style="color: darkblue;">Rs. 1.36 Lakh</h4>
                            </div>
                        </div>

                        <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                            <div style="display: inline-block; width: 35%; padding: 2rem;">
                                <img src="data:image/jpeg;base64, " style="width: 100%; height: inherit;">
                            </div>
                            <div style="display: inline-block; width: 63%; padding: 1rem; padding-left: 3rem;">
                                <h5>Drone 3</h5>
                                <h4 style="color: darkblue;">Rs. 3 Lakh</h4>
                            </div>
                        </div>

                        <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                            <div style="display: inline-block; width: 35%; padding: 2rem;">
                                <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: inherit;">
                            </div>
                            <div style="display: inline-block; width: 63%; padding: 1rem; padding-left: 3rem;">
                                <h5>Drone 1</h5>
                                <h4 style="color: darkblue;">Rs. 1.12 Lakh</h4>
                            </div>
                        </div>

                        <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                            <div style="display: inline-block; width: 35%; padding: 2rem;">
                                <img src="https://media.istockphoto.com/id/492683865/photo/drone-white-cloudy-dusk-sky.jpg?s=612x612&w=0&k=20&c=kzzV_fu9onBArhMKbE4sxRe4K22fpWK-bd1-PMiJ608=" style="width: 100%; height: inherit;">
                            </div>
                            <div style="display: inline-block; width: 63%; padding: 1rem; padding-left: 3rem;">
                                <h5>Drone 2</h5>
                                <h4 style="color: darkblue;">Rs. 1.36 Lakh</h4>
                            </div>
                        </div>

                        <div class="line" style="position: absolute; bottom: 0.5rem; border-top: 1px solid gainsboro; padding: 1rem; width: 100%;">
                            <center><a href="#">View All Motorcycle</a></center>
                        </div>
                    </div>
                    <div id="popular" class="tab-pane fade"></div>
                    <div id="upcoming" class="tab-pane fade"></div>
                </div>
            </div>
        </div>

    </div>

    <script>
        $(document).ready(function() {

            //POPUP DISPLAY
            $('#myTab li a').hover(function() {
                $(this).click();
            });


            //TRENDING SECTION
            var sidebar = $(".sidebar");
            var stickyTop = sidebar.offset().top;

            $(window).scroll(function() {
                var windowTop = $(window).scrollTop();
                if (windowTop > stickyTop) {
                    sidebar.addClass("sticky");
                    if (windowTop > 2500) {
                        $('.sticky').addClass("stickydown");
                    } else {
                        $('.sticky').removeClass("stickydown");
                    }
                } else {
                    sidebar.removeClass("sticky");
                }
            });



            //IMAGE SLIDERS ACCORDING TO SCREEN WIDTH
            function handleScreenWidth() {
                var screenWidth = window.innerWidth;

                if (screenWidth <= 500) {
                    //similar vehicles slider
                    x1 = 0;
                    $('#button-next1').click(function() {
                        x1 = (x1 <= 120) ? (x1 + 50.25) : 0;
                        $('#inner-wrapper1').css('left', -x1 + "%");
                    });
                    $('#button-prev1').click(function() {
                        x1 = (x1 >= 20) ? (x1 - 50.25) : 150;
                        $('#inner-wrapper1').css('left', -x1 + "%");
                    });

                    //ev images slider
                    x2 = 0;
                    $('#button-next2').click(function() {
                        x2 = (x2 <= 120) ? (x2 + 50.25) : 0;
                        $('#inner-wrapper2').css('left', -x2 + "%");
                    });
                    $('#button-prev2').click(function() {
                        x2 = (x2 >= 20) ? (x2 - 50.25) : 150;
                        $('#inner-wrapper2').css('left', -x2 + "%");
                    });

                    //more vehicles slider
                    x3 = 0;
                    $('#button-next3').click(function() {
                        x3 = (x3 <= 90) ? (x3 + 50.25) : 0;
                        $('#inner-wrapper3').css('left', -x3 + "%");
                    });
                    $('#button-prev3').click(function() {
                        x3 = (x3 >= 20) ? (x3 - 50.25) : 101;
                        $('#inner-wrapper3').css('left', -x3 + "%");
                    });

                    //best vehicles slider
                    x4 = 0;
                    $('#button-next4').click(function() {
                        x4 = (x4 <= 180) ? (x4 + 50.25) : 0;
                        $('#inner-wrapper4').css('left', -x4 + "%");
                    });
                    $('#button-prev4').click(function() {
                        x4 = (x4 >= 20) ? (x4 - 50.25) : 200;
                        $('#inner-wrapper4').css('left', -x4 + "%");
                    });

                    //dealers info slider
                    x5 = 0;
                    $('#button-next5').click(function() {
                        x5 = (x5 <= 120) ? (x5 + 50.25) : 0;
                        $('#inner-wrapper5').css('left', -x5 + "%");
                    });
                    $('#button-prev5').click(function() {
                        x5 = (x5 >= 20) ? (x5 - 50.25) : 150;
                        $('#inner-wrapper5').css('left', -x5 + "%");
                    });
                } else {
                    //similar vehicles slider
                    x1 = 0;
                    $('#button-next1').click(function() {
                        x1 = (x1 <= 50) ? (x1 + 33.5) : 0;
                        $('#inner-wrapper1').css('left', -x1 + "%");
                    });
                    $('#button-prev1').click(function() {
                        x1 = (x1 >= 20) ? (x1 - 33.5) : 67;
                        $('#inner-wrapper1').css('left', -x1 + "%");
                    });

                    //ev images slider
                    x2 = 0;
                    $('#button-next2').click(function() {
                        x2 = (x2 <= 50) ? (x2 + 33.5) : 0;
                        $('#inner-wrapper2').css('left', -x2 + "%");
                    });
                    $('#button-prev2').click(function() {
                        x2 = (x2 >= 20) ? (x2 - 33.5) : 67;
                        $('#inner-wrapper2').css('left', -x2 + "%");
                    });

                    //more vehicles slider
                    x3 = 0;
                    $('#button-next3').click(function() {
                        x3 = (x3 <= 33.4) ? (x3 + 33.5) : 0;
                        $('#inner-wrapper3').css('left', -x3 + "%");
                    });
                    $('#button-prev3').click(function() {
                        x3 = (x3 >= 20) ? (x3 - 33.5) : 33.5;
                        $('#inner-wrapper3').css('left', -x3 + "%");
                    });

                    //best vehicles slider
                    x4 = 0;
                    $('#button-next4').click(function() {
                        x4 = (x4 <= 100) ? (x4 + 33.5) : 0;
                        $('#inner-wrapper4').css('left', -x4 + "%");
                    });
                    $('#button-prev4').click(function() {
                        x4 = (x4 >= 20) ? (x4 - 33.5) : 100.1;
                        $('#inner-wrapper4').css('left', -x4 + "%");
                    });

                    //dealers info slider
                    x5 = 0;
                    $('#button-next5').click(function() {
                        x5 = (x5 <= 50) ? (x5 + 33.5) : 0;
                        $('#inner-wrapper5').css('left', -x5 + "%");
                    });
                    $('#button-prev5').click(function() {
                        x5 = (x5 >= 20) ? (x5 - 33.5) : 67;
                        $('#inner-wrapper5').css('left', -x5 + "%");
                    });
                }
            }
            // Call the function initially and whenever the window is resized
            handleScreenWidth();
            window.addEventListener('resize', handleScreenWidth);


        });
    </script>

    <script>
        function resizeIframe() {
            const height = document.body.scrollHeight;
            window.parent.postMessage(
                { iframeHeight: height },
                "*"
            );
        }

        window.addEventListener("load", resizeIframe);
        window.addEventListener("resize", resizeIframe);

        document.addEventListener("click", function () {
            window.parent.postMessage({ closeHeaderMenu: true }, "*");
        });
    </script>

</body>
</html>