<?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;
            }
        }
        .tab-content {
            position: relative;
        }
        .thisProductDiv {
            position: relative;
            display: inline-flex;
            padding: 0;
            width: 28rem;
            height: 30rem;
            justify-content: center;
            align-items: start;
            background: white;
            box-shadow: 0px 0px 4px 2px gainsboro;
            flex-wrap: wrap;
            margin: 0.5rem 1.5rem 0.5rem 0;
        }
        .thisProductDiv .imageDiv {
            position: relative;
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .thisProductDiv .contentDiv {
            width: 100%;
            height: 50%;
            padding: 1.5rem;
            display: flex;
            flex-wrap: wrap;
        }

        .addCompareBox {
            position: relative;
            display: inline-flex;
            padding: 0;
            width: 28rem;
            height: 30rem;
            justify-content: center;
            align-items: center;
            background: white;
            box-shadow: 0px 0px 4px 2px gainsboro;
            flex-wrap: wrap;
            margin: 0.5rem 1.5rem 0.5rem 0;
        }
        .addCompareBox .addContent {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: cornflowerblue;
            font-size: 2rem;
            border: 2px solid gainsboro;
            border-radius: 7px;
            border-style: dashed;
            padding: 3rem;
        }
        .addCompareBox .addContent i {
            color: rgb(189, 187, 187);
            font-size: 5rem;
            margin-bottom: 1rem;
        }
        .addCompareBox form {
            width: 90%;
        }
        .addCompareBox .closeAddBox {
            position: absolute;
            top: 10px;
            right: 15px;
            cursor: pointer;
            font-size: 20px;
        }
        .comparisonTable table th {
            background:#000;
            color:#fff;
            text-align:center;
        }
        .comparisonTable td {
            vertical-align:middle;
        }
        .comparisonTable tr td:first-child {
            font-weight:600;
            width:250px;
        }
        .group-header:hover {
            background:#ffeaea !important;
        }

    </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;
        }
    }

    $video_query = "select images from drone_images where deletion=0 and type='video' and variant_id='$id'";
    $video_row = mysqli_query($conn, $video_query);
    $videos = [];
    if ($video_row->num_rows > 0) {
        while ($row = mysqli_fetch_assoc($video_row)) {
            $videos[] = $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><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 class="active"><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 style="display: flex; padding: 0; margin: 0;">
            <div id="compareSection">
                <div id="compareContainer" style="display:flex; flex-wrap:wrap;">
                    <!-- First product auto loaded -->
                    <div class="compareProduct" data-variant="<?php echo $id; ?>">
                        <div class="thisProductDiv">
                            <div class="imageDiv">
                            <?php
                                foreach ($images as $i => $img) {
                                    if ($i === 0) {
                            ?>
                                        <img src="../documents/new_drones/<?php echo $img['images']; ?>" alt="First slide" style="width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain;">
                            <?php
                                    }
                                }
                            ?>
                            </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="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>

                    <!-- Plus Add Box -->
                    <div class="addCompareBox" id="addCompareBox">
                        <div class="addContent">
                            <i class="fa fa-plus"></i>
                            <div>Add Drone</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

            <div style="text-align:center; margin-top:20px; width: 100%;">
                <button id="compareNowBtn" class="btn btn-primary">Compare Now</button>
            </div>

        <div id="compareResultSection" style="margin-top:40px;"></div>
    </div>

    <div class="main-content">

        <!-- EV FEATURES -->
        <div class="specs-features">
            <h3>Features</h3>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/frame_material.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Frame Material</div>
                <div class="feature3"><?php echo $spec_res['frame_material']; ?></div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/nozzle.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Nozzles</div>
                <div class="feature3"><?php echo $spec_res['No_of_Nozzles']; ?></div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/camera.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Onboard Camera</div>
                <div class="feature3"><?php echo $spec_res['camera_available']; ?></div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/weight.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Weight</div>
                <div class="feature3"><?php echo $spec_res['weight']; ?> kg</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/dimensions.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Dimensions (L*W*H)</div>
                <div class="feature3"><?php echo $spec_res['dimensions']; ?> mm</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/mobile_app.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Mobile App Support</div>
                <div class="feature3"><?php echo $spec_res['mobile_app_support']; ?></div>
            </div>
            <div class="line">
                <a href="overview_spec_load.php?id=<?php echo $id; ?>">View All Features</a>
            </div>
        </div>

        <!-- EV SPECIFICATIONS -->
        <div class="specs-features">
            <h3>Specifications</h3>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/payload.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Payload Capacity</div>
                <div class="feature3"><?php echo $spec_res['payload_capacity']; ?> g</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/speed.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Max Speed</div>
                <div class="feature3"><?php echo $spec_res['max_speed']; ?> m/sec</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/voltage.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Battery Voltage</div>
                <div class="feature3"><?php echo $spec_res['battery_voltage']; ?> V</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/takeoff.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Max Takeoff Weight</div>
                <div class="feature3"><?php echo $spec_res['take_off_Weight']; ?> g</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/time.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Flight Time</div>
                <div class="feature3"><?php echo $spec_res['flight_time']; ?> mins</div>
            </div>
            <div class="each-feature">
                <center>
                    <div class="feature1"><img src="<?php echo $folder_name; ?>documents/img/overviewicon/battery.png" style="width: inherit; height: inherit;"></div>
                </center>
                <div class="feature2">Battery Type</div>
                <div class="feature3"><?php echo $spec_res['battery_type']; ?></div>
            </div>
            <div class="line">
                <a href="overview_spec_load.php?id=<?php echo $id; ?>">View All Specifications</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() {

            $(document).on("click", "#addCompareBox", function(){
                // Prevent re-click if already opened
                if ($(this).hasClass("opened")) return;
                $(this).addClass("opened");
                var formHtml = `
                    <div class="closeAddBox"><i class="fa fa-times"></i></div>
                    <form>
                        <select id="brandSelect" class="form-control mb-2">
                            <option value="">Select Brand</option>
                        </select>

                        <select id="modelSelect" class="form-control mb-2">
                            <option value="">Select Model</option>
                        </select>

                        <select id="variantSelect" class="form-control mb-2">
                            <option value="">Select Variant</option>
                        </select>

                        <button type="button" class="btn btn-success w-100" id="addDroneBtn">
                            Add Drone
                        </button>
                    </form>
                `;
                $(this).html(formHtml);
                
                $.get("get_brands.php", function(data){
                    $("#brandSelect").html('<option value="">Select Brand</option>'+data);
                });
            });

            $(document).on("change", "#brandSelect", function(){
                var brand_id=$(this).val();
                $.get("get_models.php?brand_id="+brand_id,function(data){
                    $("#modelSelect").html('<option value="">Select Model</option>'+data);
                });
            });

            $(document).on("change", "#modelSelect", function(){
                var model_id=$(this).val();
                $.get("get_variants.php?model_id="+model_id,function(data){
                    $("#variantSelect").html('<option value="">Select Variant</option>'+data);
                });
            });

            $(document).on("click", "#addDroneBtn", function(){
                var variant_id=$("#variantSelect").val();
                if(!variant_id){
                    alert("Please select variant");
                    return;
                }
                $.get("overview_comparecard_load.php?variant_id="+variant_id,function(data){
                    $("#addCompareBox").remove();
                    $("#compareContainer").append('<div class="compareProduct" data-variant="'+variant_id+'">'+data+'</div>');
                    $("#compareContainer").append(`
                        <div class="addCompareBox" id="addCompareBox">
                            <div class="addContent">
                                <i class="fa fa-plus"></i>
                                <div>Add Drone</div>
                            </div>
                        </div>
                    `);
                });
            });

            $(document).on("click", "#compareNowBtn", function(){
                var ids = [];
                $(".compareProduct").each(function(){
                    var id = $(this).attr("data-variant"); // safer than .data()
                    if(id && id !== "undefined"){
                        ids.push(id);
                    }
                });
                if(ids.length < 2){
                    alert("Please add at least 2 drones to compare");
                    return;
                }
                $.get("overview_comparespecs_load.php", { ids: ids.join(",") }, function(response){
                    $("#compareResultSection").html(response);
                });
            });

            $(document).on("click", ".closeAddBox", function(e){
                e.stopPropagation();

                $("#addCompareBox")
                    .removeClass("opened")
                    .html(`
                        <div class="addContent">
                            <i class="fa fa-plus"></i>
                            <div>Add Drone</div>
                        </div>
                    `);
            });

            $(document).on("click", ".group-header", function(){
                var group = $(this).data("group");
                $(".group-" + group).slideToggle(200);
            });

        });
    </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>