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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cart</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <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="shortcut icon" href="./assets/images/nav-logo.png" type="image/x-icon">
</head>

<body>
    <!-- navbar here -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid res-nav">
            <a class="navbar-brand nav-logo" href="./index.php">
                <img src="./assets/images/nav-logo.png" alt="Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse nav-gap" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="./index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./about.php">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./menu.php">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./contact.php">Contact</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="./feedback.php">Feedback</a>
                    </li>
                </ul>
                <button class="nav-btn" type="button"><i class="fa-solid fa-cart-shopping"></i> | <i
                        class="fa-solid fa-user"></i></button>
            </div>
        </div>
    </nav>
    <!-- navbar here -->

    <!-- cart header content here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>6" ITALIAN BEEF (With Fries & Can Pop)</h1>
            <p>French Bread Dipped In Italian Gravy, Topped With Mild Giardiniera Peppers.</p>
            <p>Served With Fries & Can Pop</p>
        </div>
    </div>
    <!-- cart header content here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>PREPARATION (Required)</h1>
            <p>Required*</p>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field2 my-div">
                    <div class="item">DIP</div>
                </div>

                <div class="field2 my-div">
                    <div class="item">DIP Light</div>
                </div>

                <div class="field2 my-div">
                    <div class="item">DIP Well</div>
                </div>

                <div class="field2 my-div">
                    <div class="item">No DIP</div>
                </div>

                <div class="field my-div">
                    <div class="item">American Cheese (2 Slice)</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mozzarella Cheese (shredded)</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Nacho Cheese (Cheddar)</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field2 my-div">
                    <div class="item">Giardiniera Peppers</div>
                </div>

                <div class="field2 my-div">
                    <div class="item">Hot peppers oil</div>
                </div>

                <div class="field my-div">
                    <div class="item">Gravy Cup Side</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Chopped Meat</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>ADD EXTRA CHEESE (optional)</h1>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field my-div">
                    <div class="item">American Cheese (2 slice)</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mozzarella Cheese (shredded)</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Nacho Cheese (Cheddar)</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>ADD EXTRA MEAT (optional)</h1>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field my-div">
                    <div class="item">Add Gyro Meat</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Sausage</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Italian Beef</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Chicken</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Classic Steak</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Philly Steak</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Corned Beef</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Ground Beef</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Ham</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Turkey</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Gym Shoe Meat</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>ADD ONS (optional)</h1>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field my-div">
                    <div class="item">Add Extra Lettuce</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Extra Onions</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Extra Tomatoes</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Extra Pickles</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Giardiniera Peppers</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Green Peppers</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Banana Peppers</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Jalapeno Peppers</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Ketchup</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Add Extra Mustard</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mayonaise</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Gyro Sauce</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Hot Sauce</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mild Sauce</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Honey Barbeque</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Buffalo Sauce</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Ranch</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Sriracha</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Dipped</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Gravy Cup Side</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Sour Cream</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>ON FRIES (required)</h1>
            <p>Required*</p>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field my-div">
                    <div class="item">Nothing on fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">S+P+M on Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">LP + M On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Salt On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Pepper On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">
                        Lemon Pepper On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mild Sauce On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Hot Sauce On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Ketchup On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Extra lemon pepper on fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Extra Mild On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Extra Hot On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mayo on fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Light Mayo on fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Honey BBQ On Fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Cheese on fries</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">No Fries</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>SAUCES/PEPPERS ON SIDE (optional)</h1>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field my-div">
                    <div class="item">CUP OF MILD SAUCE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF HOT SAUCE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">KETCHUP PACKS</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF GYRO SAUCE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF TARTER SAUCE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">
                        CUP OF MAYO</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF RANCH</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF HONEY BBQ</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF NACHO CHEESE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF BLUE CHEESE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF GIARDINERA</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF BANANA</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF JALAPENO</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF MARINARA</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF PICKLE</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">CUP OF CHILLI SAUCE</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- cart fields start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>CAN DRINK CHOICE</h1>
            <p>Please select up to 1</p>
        </div>

        <div class="container mt-5">
            <div class="cart-fields">
                <div class="field my-div">
                    <div class="item">Pepsi</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">RC</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Orange</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Strawberry</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Grape</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">
                        7 UP</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Stary</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Ginger Ale</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Brisk Ice Tea</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Fruit Punch</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Root Beer</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Hawaiian Punch</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mountain Dew</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Cherry Pepsi</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Squirt</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Dr. Pepper</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Grape</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Berry Lemonade</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Strawberry Lemonade</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Diet Pepsi</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">7Up Zero Sugar</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Peach Crush</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Water</div>
                    <div class="price">+1.00$</div>
                </div>

                <div class="field my-div">
                    <div class="item">Mountain Dew (code red)</div>
                    <div class="price">+1.00$</div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart fields start here  -->

    <!-- add to cart start here  -->
    <div class="main-cart">
        <div class="cart-content">
            <h1>Special Instructions</h1>
        </div>

        <div class="instruction">
            <textarea rows="4"
                placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy"></textarea>
            <div class="flex-cart">
                <div class="quantity">
                    <button class="button" onclick="decrement()">-</button>
                    <div class="value" id="value">1</div>
                    <button class="button" onclick="increment()">+</button>
                </div>

                <div class="mt-3">
                    <a class="addToCartBtn2" href="./check-out.php">
                        <button id="addToCartBtn" class="btn btn-primary">Add to Cart <span
                                id="totalPrice">$0.00</span></button></a>
                </div>
            </div>
        </div>
    </div>
    <!-- add to cart start here  -->

    <!-- footer here  -->
    <footer>
        <div class="footer-logo">
            <img src="./assets/images/Footer.png">
        </div>

        <form class="footer-content footer-form">
            <h3>Sign up for Pita Inn promos, news and more delivered straight to your inbox.</h3>
            <input type="email" placeholder="Email Address" required>
            <button>Subscribe</button>
        </form>

        <div class="footer-content">
            <ul>
                <li><a href="#">ORDER NOW</a></li>
                <li><a href="#">BUY A GIFT CARD</a></li>
                <li><a href="#">FIND OUR HUMMUS</a></li>
            </ul>
        </div>

        <div class="footer-content">
            <p><a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i
                        class="fa-brands fa-facebook"></i></a></p>
            <h3>Star Gyros 2024 
                Site by BatesMeron</h3>
        </div>
    </footer>
    <!-- footer here  -->

    <script src="./assets/js/bootstrap.bundle.min.js"></script>

    <!-- cart javascript here  -->
    <script>
        $(document).ready(function() {
            var totalPrice = 0.00;

            function updateTotalPrice(price) {
                totalPrice += price;
                $('#totalPrice').text('$' + totalPrice.toFixed(2));
            }

            $('.field').click(function() {
                var price = parseFloat($(this).find('.price').text().replace('$', ''));
                updateTotalPrice(price);
            });
        });
    </script>
    <!-- cart javascript here  -->

    <!-- cart quantity js here  -->
    <script>
        let value = 1;

        function updateValue() {
            document.getElementById('value').textContent = value;
        }

        function increment() {
            if (value < 10) {
                value++;
                updateValue();
            }
        }

        function decrement() {
            if (value > 1) {
                value--;
                updateValue();
            }
        }
    </script>
    <!-- cart quantity js here  -->

    <!-- select outline  -->
    <script>
        document.querySelectorAll('.my-div').forEach(div => {
            div.addEventListener('click', function() {
                document.querySelectorAll('.my-div').forEach(div => div.classList.remove('outlined'));
                this.classList.add('outlined');
            });
        });
    </script>
    <!-- select outline  -->
</body>

</html>