<?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="">
    
    <!-- Favicons -->
    <link href="<?php echo $folder_name; ?>documents/img/favicon.png" rel="icon">
    <link href="<?php echo $folder_name; ?>documents/img/apple-touch-icon.png" rel="apple-touch-icon">
    
    <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">
    <script src="<?php echo $folder_name; ?>assets/plugins/jquery/jquery.min.js"></script>

    <link href="<?php echo $folder_name; ?>assets/css/index_styles.css" rel="stylesheet">

</head>
<body style="background-color: white;">    
    
    <?php include "header.php"; ?>

    <div class="main_Banner">
        <div class="banner_img_Container">
            <img src="<?php echo $folder_name; ?>documents/img/banner_image1.webp" alt="">
            <img src="<?php echo $folder_name; ?>documents/img/banner_image2.jpg" alt="">
            <img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg" alt="">
            <img src="<?php echo $folder_name; ?>documents/img/banner_image.jpeg" alt="">
        </div>
        <div class="banner_Content">
            <div class="simpleSearchDiv">
                <input type="text" class="form-control simplesearchInput" placeholder="Search">
            </div>
        </div>
    </div>

    <div class="container">

        <div class="featuresGrids">
            <div class="row">
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/newev.png" alt=""></div>
                    <div class="captions">New Drone</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/usedev.png" alt=""></div>
                    <div class="captions">Used Drone</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/sell.png" alt=""></div>
                    <div class="captions">Sell Drone</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/evconversion.png" alt=""></div>
                    <div class="captions">Repair</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/evmech.png" alt=""></div>
                    <div class="captions">Drone Service</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/chargepoint.png" alt=""></div>
                    <div class="captions">Locations</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/worldev.png" alt=""></div>
                    <div class="captions">World Drones</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/evservice.png" alt=""></div>
                    <div class="captions">Spares</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/training.png" alt=""></div>
                    <div class="captions">Training</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/job-search.png" alt=""></div>
                    <div class="captions">Job Search</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/chargepoint.png" alt=""></div>
                    <div class="captions">Startup</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/youtuber.png" alt=""></div>
                    <div class="captions">Youtuber Revies</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/news.png" alt=""></div>
                    <div class="captions">News</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/evmech.png" alt=""></div>
                    <div class="captions">User Reviews</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/news.png" alt=""></div>
                    <div class="captions">Brands</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/worldev.png" alt=""></div>
                    <div class="captions">Dealers</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/multimedia.png" alt=""></div>
                    <div class="captions">Videos</div>
                </div>
                <div class="col-2 features" data-page="index.php">
                    <div class="gridsImg"><img src="<?php echo $folder_name; ?>documents/img/homeicon/evservice.png" alt=""></div>
                    <div class="captions">Complaints</div>
                </div>
            </div>
        </div>

        <div class="byBrands">
            <div class="col-12">
                <div class="byBrandsCaptions">View Drones By Brands</div>
                <ul class="nav-tabs">
                    <li><a href="#tab1" class="tab-links active">By Airframe/Design</a></li>
                    <li><a href="#tab2" class="tab-links">By Power Source</a></li>
                    <li><a href="#tab3" class="tab-links">By Size/Payload</a></li>
                    <li><a href="#tab4" class="tab-links">By Range/Altitude</a></li>
                    <li><a href="#tab5" class="tab-links">By Control/Autonomy</a></li>
                </ul>
                <div class="byBrandscontent">
                    <div id="tab1" class="tab-content active">
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                    </div>
                    <div id="tab2" class="tab-content">
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                    </div>
                    <div id="tab3" class="tab-content">
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                    </div>
                    <div id="tab4" class="tab-content">
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                    </div>
                    <div id="tab5" class="tab-content">
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                        <div class="eachTabContent">
                            <div class="brandImg"><img src="<?php echo $folder_name; ?>documents/img/skybot_logo.png" alt=""></div>
                            <div class="brandName">Skydio</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sliderLeft">
            <div class="col-12">
                <div class="sliderLeftCaptions">Best Drones</div>
                <div class="sliderViewallBtn" data-page="index.php">View More</div>
                <button class="prev-btn"><i class="fa-solid fa-arrow-left"></i></button>
                <button class="next-btn"><i class="fa-solid fa-arrow-right"></i></button>
                <div class="sliderWrapper">
                    <div class="slider">
                        <div class="slides jobslides">
                            <div class="slideImg"><img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg"></div>
                            <div class="slideDesc">
                                <div class="slideJobTitle">Drone 1</div>
                                <div class="slideJobCmpy">Rs. 1 Lakh</div>
                            </div>
                        </div>
                        <div class="slides jobslides">
                            <div class="slideImg"><img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg"></div>
                            <div class="slideDesc">
                                <div class="slideJobTitle">Drone 1</div>
                                <div class="slideJobCmpy">Rs. 1 Lakh</div>
                            </div>
                        </div>
                        <div class="slides jobslides">
                            <div class="slideImg"><img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg"></div>
                            <div class="slideDesc">
                                <div class="slideJobTitle">Drone 1</div>
                                <div class="slideJobCmpy">Rs. 1 Lakh</div>
                            </div>
                        </div>
                        <div class="slides jobslides">
                            <div class="slideImg"><img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg"></div>
                            <div class="slideDesc">
                                <div class="slideJobTitle">Drone 1</div>
                                <div class="slideJobCmpy">Rs. 1 Lakh</div>
                            </div>
                        </div>
                        <div class="slides jobslides">
                            <div class="slideImg"><img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg"></div>
                            <div class="slideDesc">
                                <div class="slideJobTitle">Drone 1</div>
                                <div class="slideJobCmpy">Rs. 1 Lakh</div>
                            </div>
                        </div>
                        <div class="slides jobslides">
                            <div class="slideImg"><img src="<?php echo $folder_name; ?>documents/img/banner_image3.jpg"></div>
                            <div class="slideDesc">
                                <div class="slideJobTitle">Drone 1</div>
                                <div class="slideJobCmpy">Rs. 1 Lakh</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php include "footer.php"; ?>
    
    <script>
            
        function initSlider($sliderWrapper, $prevBtn, $nextBtn) {
            const $slider = $sliderWrapper.find('.slider');

            // Prevent re-init
            if ($slider.hasClass('initialized')) return;
            $slider.addClass('initialized');

            const $slides = $slider.children('.slides');
            const slideWidth = $slides.outerWidth(true);
            const visibleSlides = Math.floor($sliderWrapper.width() / slideWidth);

            // Clone
            const $firstClone = $slides.first().clone();
            const $lastClone  = $slides.last().clone();

            $slider.prepend($lastClone);
            $slider.append($firstClone);

            let slideIndex = 1; // IMPORTANT
            const totalSlides = $slider.children('.slides').length;

            // Initial position
            $slider.css({
                transition: 'none',
                transform: `translateX(${-slideWidth * slideIndex}px)`
            });

            function moveSlider() {
                $slider.css({
                    transition: 'transform 0.3s ease',
                    transform: `translateX(${-slideWidth * slideIndex}px)`
                });

                // Infinite loop correction
                if (slideIndex === 0) {
                    setTimeout(() => {
                        $slider.css('transition', 'none');
                        slideIndex = totalSlides - visibleSlides - 1;
                        $slider.css('transform', `translateX(${-slideWidth * slideIndex}px)`);
                    }, 300);
                }

                if (slideIndex === totalSlides - visibleSlides) {
                    setTimeout(() => {
                        $slider.css('transition', 'none');
                        slideIndex = 1;
                        $slider.css('transform', `translateX(${-slideWidth * slideIndex}px)`);
                    }, 300);
                }
            }

            $nextBtn.on('click', function () {
                slideIndex++;
                moveSlider();
            });

            $prevBtn.on('click', function () {
                slideIndex--;
                moveSlider();
            });
        }

        $(document).ready(function() {

            $('.sliderWrapper').each(function () {
                const $wrapper = $(this);
                const $prevBtn = $wrapper.siblings('.prev-btn');
                const $nextBtn = $wrapper.siblings('.next-btn');
                initSlider($wrapper, $prevBtn, $nextBtn);
                // if ($(window).width() >= 992) {
                //     initSlider($wrapper, $prevBtn, $nextBtn);
                // } else {
                //     $prevBtn.hide();
                //     $nextBtn.hide();
                //     $wrapper.find('.slider').css('transform', '');
                // }
            });

            function showTab(tabId, parentContainer) {
                parentContainer.find('.tab-links').removeClass('active');
                parentContainer.find('.tab-content').removeClass('active');
                parentContainer.find('.tab-links[href="#' + tabId + '"]').addClass('active');
                parentContainer.find('#' + tabId).addClass('active');
            }

            $('.byBrands').each(function() {
                const $byBrands = $(this); // Context-specific container

                $byBrands.find('.tab-links').on('click', function(e) {
                    e.preventDefault();
                    const targetTabId = $(this).attr('href').substring(1);
                    showTab(targetTabId, $byBrands); 
                });
            });

        });
    
    </script>


</body>
</html>