<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Car rent</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/css/style.css" rel="stylesheet">
        <script src="/js/menu-toggle.js" type="module"></script>
        <style>
            .car-button-active {
                border-bottom: 3px solid var(--black) !important;
            }
        </style>
    </head>
    <body>

        <%- include('partials/main-header') %>

        <main>
            <section id="home-section" class="flex flex-wrap flex-space-between">
                <div id="main-title" class="flex flex-column justify-content-center">
                    <p>100% Trusted car rentel platform in the Bangladesh</p>
                    <h1>Fast and easy way to rent a car</h1>
                    <p>
                        Our car rental online booking system designed to meet the specific
                        needs of car rental busines owners. This easy-to-use car rental software
                        will let you manage...
                    </p>
                    <div>
                        <a class="button" href="#">Booking now</a>
                        <a class="link-black" href="#">See all cars</a>
                    </div>
                </div>
                <div id="main-image">
                    <img src="images/main-image.jpg"/>
                </div>
            </section>
            <section id="pick-up-section">
                <form id="pick-up-card" class="flex flex-wrap flex-space-between align-items-center">
                    <div>
                        <h3>Pick-up</h3>
                        <div class="flex flex-wrap flex-space-between">
                            <div>
                                <label for="location-pick-up">Location:</label>
                                <br>
                                <select name="location-pick-up">
                                    <option value="test">Test</option>
                                </select>
                            </div>
                            <div>
                                <label for="date-pick-up">Date:</label>
                                <br>
                                <input type="date" name="date-pick-up">
                            </div>
                            <div>
                                <label for="time-pick-up">Time:</label>
                                <br>
                                <input type="time" name="time-pick-up">
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3>Drop-off</h3>
                        <div class="flex flex-wrap flex-space-between">
                            <div>
                                <label for="location-drop-off">Location:</label>
                                <br>
                                <select name="location-drop-off">
                                    <option value="test">Test</option>
                                </select>
                            </div>
                            <div>
                                <label for="date-drop-off">Date:</label>
                                <br>
                                <input type="date" name="date-drop-off">
                            </div>
                            <div>
                                <label for="time-drop-off">Time:</label>
                                <br>
                                <input type="time" name="time-drop-off">
                            </div>
                        </div>
                    </div>
                    <div id="search-pick-up" class="flex justify-content-center">
                        <input class="button" type="submit" name="submit" value="Search">
                    </div>
                </form>
            </section>
            <section id="how-it-works-section" class="background-white">
                <div class="flex justify-content-center">
                    <div class="width-max-50ch flex flex-column align-items-center">
                        <h2 class="text-align-center">How it works</h2>
                        <p class="text-align-center">A heigh performing web-based car rental system for any rent-a-car company and website</p>
                    </div>
                </div>
                <div class="how-it-works-cards-container flex">
                    <div class="how-it-works-card flex flex-column align-items-center">
                        <div class="large-icon-background">
                            <img class="icon-image" src="images/location.svg" />
                        </div>
                        <div>
                            <h3 class="text-align-center">Chose location</h3>
                            <p class="text-align-center">Aliquam erat volutpat. Integer malesuada</p>
                        </div>
                    </div>
                    <img class="how-it-works-line" src="images/curve_line.svg" />
                    <div class="how-it-works-card flex flex-column align-items-center">
                        <div class="large-icon-background">
                            <img class="icon-image" src="images/location.svg" />
                        </div>
                        <div>
                            <h3 class="text-align-center">Chose location</h3>
                            <p class="text-align-center">Aliquam erat volutpat. Integer malesuada</p>
                        </div>
                    </div>
                    <img class="how-it-works-line" src="images/curve_line.svg" />
                    <div class="how-it-works-card flex flex-column align-items-center">
                        <div class="large-icon-background">
                            <img class="icon-image" src="images/location.svg" />
                        </div>
                        <div>
                            <h3 class="text-align-center">Chose location</h3>
                            <p class="text-align-center">Aliquam erat volutpat. Integer malesuada</p>
                        </div>
                    </div>
                </div>
            </section>
            <section id="deals-section" class="flex flex-column align-items-center justify-content-center">
                <div id="deals-section-title" class="width-max-50ch flex flex-column align-items-center">
                    <h2 class="text-align-center">Most popular car rental deals</h2>
                    <p class="text-align-center">
                    A high-performing web-based car rental system for any
                    rent-a-car company and website
                    </p>
                </div>
                <div id="deals-type-selection">
                    <div id="popular-car-button" class="car-button-active">
                        <h3 class="text-align-center">Popular</h3>
                    </div>
                    <div id="small-car-button">
                        <h3 class="text-align-center">Small</h3>
                    </div>
                    <div id="big-car-button">
                        <h3 class="text-align-center">Big</h3>
                    </div>
                    <div id="exclusive-car-button">
                        <h3 class="text-align-center">Exclusive</h3>
                    </div>
                </div>
                <div class="car-cards-container popular-car">
                    <% popular_cars.forEach((car) => { %>
                    <div class="car-card">
                        <div>
                            <h3><a href="/deal/<%= car.id %>" target="_blank" class="link-black"><%= car.title %></a></h3>
                        </div>
                        <img class="car-card-image" src="images/main-image.jpg" />
                        <div class="flex flex-space-between align-items-center">
                            <h4>$<%= car.price %>/day</h4>
                            <a class="button" href="#">Rent now</a>
                        </div>
                    </div>
                    <% }) %>
                </div>
                <div class="car-cards-container small-car display-none">
                    <% small_cars.forEach((car) => { %>
                    <div class="car-card">
                        <div>
                            <h3><a href="/deal/<%= car.id %>" target="_blank" class="link-black"><%= car.title %></a></h3>
                        </div>
                        <img class="car-card-image" src="images/main-image.jpg" />
                        <div class="flex flex-space-between align-items-center">
                            <h4>$<%= car.price %>/day</h4>
                            <a class="button" href="#">Rent now</a>
                        </div>
                    </div>
                    <% }) %>
                </div>
                <div class="car-cards-container big-car display-none">
                    <% big_cars.forEach((car) => { %>
                    <div class="car-card">
                        <div>
                            <h3><a href="/deal/<%= car.id %>" target="_blank" class="link-black"><%= car.title %></a></h3>
                        </div>
                        <img class="car-card-image" src="images/main-image.jpg" />
                        <div class="flex flex-space-between align-items-center">
                            <h4>$<%= car.price %>/day</h4>
                            <a class="button" href="#">Rent now</a>
                        </div>
                    </div>
                    <% }) %>
                </div>
                <div class="car-cards-container exclusive-car display-none">
                    <% exclusive_cars.forEach((car) => { %>
                    <div class="car-card">
                        <div>
                            <h3><a href="/deal/<%= car.id %>" target="_blank" class="link-black"><%= car.title %></a></h3>
                        </div>
                        <img class="car-card-image" src="images/main-image.jpg" />
                        <div class="flex flex-space-between align-items-center">
                            <h4>$<%= car.price %>/day</h4>
                            <a class="button" href="#">Rent now</a>
                        </div>
                    </div>
                    <% }) %>
                </div>
                <div class="flex justify-content-center align-items-center">
                    <a class="button" href="#">Show more cars</a>
                    <p id="number-of-cars"><%= car_count %> cars</p>
                </div>
            </section>
            <section id="why-choose-us-section">
                <div class="flex justify-content-center">
                    <div class="width-max-50ch flex flex-column">
                        <h2 class="text-align-center">Why choose us</h2>
                        <p class="text-align-center">
                        A high-performing web-based car rental system for any
                        rent-a-car company and website
                        </p>
                    </div>
                </div>
                <div id="why-choose-us-content">
                    <div class="width-100 flex justify-content-center">
                        <img id="why-choose-us-image" src="images/main-image.jpg" />
                    </div>
                    <div id="why-choose-us-text">
                        <div class="flex">
                            <div class="small-icon-background">
                                <img class="icon-image" src="images/location.svg" />
                            </div>
                            <div class="flex flex-column justify-content-center">
                                <h3>Customer support</h3>
                                <p>
                                A high-performing web-based car rental system for any
                                rent-a-car company and website
                                </p>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="small-icon-background">
                                <img class="icon-image" src="images/location.svg" />
                            </div>
                            <div class="flex flex-column justify-content-center">
                                <h3>Customer support</h3>
                                <p>
                                A high-performing web-based car rental system for any
                                rent-a-car company and website
                                </p>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="small-icon-background">
                                <img class="icon-image" src="images/location.svg" />
                            </div>
                            <div class="flex flex-column justify-content-center">
                                <h3>Customer support</h3>
                                <p>
                                A high-performing web-based car rental system for any
                                rent-a-car company and website
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section id="example-images">
                <div class="width-100 flex justify-content-center">
                    <img class="example-section-image" src="images/main-image.jpg" />
                </div>
                <div class="width-100 flex justify-content-center">
                    <img class="example-section-image" src="images/main-image.jpg" />
                </div>
            </section>
            <section id="testimonial-section">
                <div class="flex justify-content-center">
                    <div class="width-max-50ch flex flex-column">
                        <h2 class="text-align-center">Trusted by thousands of happy customers</h2>
                        <p class="text-align-center">
                        A high-performing web-based car rental system for any
                        rent-a-car company and website
                        </p>
                    </div>
                </div>
                <div id="comments-cards-container">
                    <div class="flex width-100 justify-content-center">
                        <div class="comment-card">
                            <div class="comment-card-title">
                                <div class="comment-card-title-image"></div>
                                <div class="user-title-comment-card flex flex-column">
                                    <h3>Viezh Robert</h3>
                                    <p>Warsaw, Poland</p>
                                </div>
                            </div>
                            <p>
                            A high-performing web-based car rental system for any
                            rent-a-car company and website
                            </p>
                        </div>
                    </div>
                    <div class="flex width-100 justify-content-center">
                        <div class="comment-card">
                            <div class="comment-card-title">
                                <div class="comment-card-title-image"></div>
                                <div class="user-title-comment-card flex flex-column">
                                    <h3>Viezh Robert</h3>
                                    <p>Warsaw, Poland</p>
                                </div>
                            </div>
                            <p>
                            A high-performing web-based car rental system for any
                            rent-a-car company and website
                            </p>
                        </div>
                    </div>
                    <div class="flex width-100 justify-content-center">
                        <div class="comment-card">
                            <div class="comment-card-title">
                                <div class="comment-card-title-image"></div>
                                <div class="user-title-comment-card flex flex-column">
                                    <h3>Viezh Robert</h3>
                                    <p>Warsaw, Poland</p>
                                </div>
                            </div>
                            <p>
                            A high-performing web-based car rental system for any
                            rent-a-car company and website
                            </p>
                        </div>
                    </div>
                    <div class="flex width-100 justify-content-center">
                        <div class="comment-card">
                            <div class="comment-card-title">
                                <div class="comment-card-title-image"></div>
                                <div class="user-title-comment-card flex flex-column">
                                    <h3>Viezh Robert</h3>
                                    <p>Warsaw, Poland</p>
                                </div>
                            </div>
                            <p>
                            A high-performing web-based car rental system for any
                            rent-a-car company and website
                            </p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-space-between padding-2rem">
                    <div></div>
                    <div>
                        <button id="back-comment-button" class="button-black">Back</button>
                        <button id="next-comment-button" class="button-black">Next</button>
                    </div>
                </div>
            </section>
        </main>

        <%- include('partials/footer') %>

        <script>
            const popular_btn = document.querySelector('#popular-car-button')
            const small_btn = document.querySelector('#small-car-button')
            const big_btn = document.querySelector('#big-car-button')
            const exclusive_btn = document.querySelector('#exclusive-car-button')

            const popular_cars = document.querySelectorAll('.popular-car')
            const small_cars = document.querySelectorAll('.small-car')
            const big_cars = document.querySelectorAll('.big-car')
            const exclusive_cars = document.querySelectorAll('.exclusive-car')

            popular_btn.addEventListener('click', () => {
                makeActive(popular_btn)
                makeInActive(small_btn)
                makeInActive(big_btn)
                makeInActive(exclusive_btn)
                show(popular_cars)
                hide(small_cars)
                hide(big_cars)
                hide(exclusive_cars)
            })

            small_btn.addEventListener('click', () => {
                makeActive(small_btn)
                makeInActive(popular_btn)
                makeInActive(big_btn)
                makeInActive(exclusive_btn)
                show(small_cars)
                hide(popular_cars)
                hide(big_cars)
                hide(exclusive_cars)
            })

            big_btn.addEventListener('click', () => {
                makeActive(big_btn)
                makeInActive(popular_btn)
                makeInActive(small_btn)
                makeInActive(exclusive_btn)
                show(big_cars)
                hide(popular_cars)
                hide(small_cars)
                hide(exclusive_cars)
            })

            exclusive_btn.addEventListener('click', () => {
                makeActive(exclusive_btn)
                makeInActive(popular_btn)
                makeInActive(small_btn)
                makeInActive(big_btn)
                show(exclusive_cars)
                hide(popular_cars)
                hide(small_cars)
                hide(big_cars)
            })

            function makeActive(button) {
                button.classList.add('car-button-active')
            }

            function makeInActive(button) {
                button.classList.remove('car-button-active')
            }

            function show(cards) {
                cards.forEach((card) => {
                    card.classList.remove('display-none')
                })
            }

            function hide(cards) {
                cards.forEach((card) => {
                    card.classList.add('display-none')
                })
            }
        </script>
        <script>
            const comments_container = document.querySelector('#comments-cards-container')
            const back_button = document.querySelector('#back-comment-button')
            const next_button = document.querySelector('#next-comment-button')
            const gap = 32

            comments_container.scrollLeft = 0
            comments_container.style.scrollBehavior = 'smooth'

            back_button.addEventListener('click', () => {
                comments_container.scrollLeft -= comments_container.firstElementChild.offsetWidth + gap
            })

            next_button.addEventListener('click', () => {
                comments_container.scrollLeft += comments_container.firstElementChild.offsetWidth + gap
            })
        </script>

    </body>
</html>
