<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complains Details - Dashboard</title>
    <link rel="stylesheet" href="./assets/css/all.min.css">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <!-- complete header section  -->
    <div class="head-Container">
        <?php include './includes/header.php'; ?>

        <div class="headBanner d-flex flex-wrap justify-content-between align-items-center mt-5 mb-5">
            <div class="banner-content">
                <h1>Complain Details</h1>
                <p>These Are The complains.</p>
            </div>

            <div class="bannerBtn d-flex gap-3">
                <button class="expoBtn d-flex gap-3 align-items-center"><i class="fa-solid fa-print"></i> Export
                    Report</button>
            </div>
        </div>
    </div>
    <!-- complete header section  -->

    <!-- complain details section  -->
    <div class="complain-detail d-flex flex-wrap justify-content-between">
        <div class="complainDetail-column complainBox">
            <div class="complainDetail-header d-flex flex-wrap align-items-center gap-3 mb-3">
                <h1>Vehicle Details</h1>
                <button class="history-btn">History <i class="fa-solid fa-eye"></i></button>
            </div>
            <div class="vehicle-detail-boxes">
                <div class="vehicleDetail-box">
                    <h5>Driver Name : </h5>
                    <p>John Carter</p>
                </div>
                <div class="vehicleDetail-box">
                    <h5>License Number:</h5>
                    <p>DLV-123456</p>
                </div>
                <div class="vehicleDetail-box">
                    <h5>Contact:</h5>
                    <p>+1 555-9876</p>
                </div>
                <div class="vehicleDetail-box">
                    <h5>Chassis Number:</h5>
                    <p>RMX1234567890</p>
                </div>
                <div class="vehicleDetail-box">
                    <h5>Registration Number:</h5>
                    <p>ABC-1234</p>
                </div>
                <div class="vehicleDetail-box">
                    <h5>Model No:</h5>
                    <p>2022</p>
                </div>
                <div class="vehicleDetail-box border-bottom">
                    <h5>Mileage</h5>
                    <p>10-15 kmpl</p>
                </div>
                <div class="vehicleDetail-box d-flex flex-wrap align-items-center gap-3 border-bottom">
                    <div class="detailColorBox">
                    </div>
                    <div>
                        <h5>Metallic Green Color</h5>
                        <p>#656F67</p>
                    </div>
                </div>
                <div class="vehicleDetail-box border-bottom">
                    <h5>Description</h5>
                    <p>Chery Tiggo 4 Pro is our new unit from last month. So far great performance and recomended for
                        long trips. *No smoking or pets please* If there is a smell of smoke or food/drink spilled in
                        the car, the renter will be charged a cleaning fee. Includes: gps navigation system,</p>
                </div>
                <div class="vehicleDetail-box">
                    <h5>Status</h5>
                    <button>Pending</button>
                </div>
            </div>
        </div>
        <div class="complainDetail-column-2">
            <div class="carousel-container">
                <div class="carousel-track">
                    <div class="carousel-slide"><img src="./assets/images/vehicle.png" /></div>
                    <div class="carousel-slide"><img src="./assets/images/vehicle.png" /></div>
                    <div class="carousel-slide"><img src="./assets/images/vehicle.png" /></div>
                </div>
            </div>
            <div class="carousel-indicators-c">
                <span class="dot active" data-slide="0"></span>
                <span class="dot" data-slide="1"></span>
                <span class="dot" data-slide="2"></span>
            </div>

            <div class="vehicleDetail-box">
                <h5>Location</h5>
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4300.187045202576!2d67.06783951879618!3d24.999712575174872!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1749752559997!5m2!1sen!2s"
                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>


        </div>
    </div>
    <!-- complain details section  -->

    <!-- footer here  -->
    <?php include './includes/footer.php'; ?>
    <!-- footer here  -->

    <!-- logout btn here  -->
     <?php include './includes/logout.php'; ?>
    <!-- logout btn here  -->


    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="./assets/js/bootstrap.bundle.min.js"></script>
    <script>
        // vehicle carousel here 
        const track = document.querySelector('.carousel-track');
        const dots = document.querySelectorAll('.dot');
        const slides = document.querySelectorAll('.carousel-slide');
        let currentSlide = 1;

        function updateCarousel(index) {
            const slideWidth = slides[0].offsetWidth + 20;
            const offset = slideWidth * index;
            track.style.transform = `translateX(-${offset}px)`;
            dots.forEach(dot => dot.classList.remove('active'));
            dots[index].classList.add('active');
        }

        updateCarousel(currentSlide);

        dots.forEach(dot => {
            dot.addEventListener('click', () => {
                const slideIndex = parseInt(dot.getAttribute('data-slide'));
                currentSlide = slideIndex;
                updateCarousel(slideIndex);
            });
        });

        window.addEventListener('resize', () => updateCarousel(currentSlide));
        // vehicle carousel here 

        // login-check.js
        if (localStorage.getItem("loggedIn") !== "true") {
            window.location.href = "./login/signin.php";
        }
    </script>
</body>

</html>