<!--
██╗  ██╗██╗  ██╗██████╗  ██████╗ ███╗   ██╗ ██████╗ ███████╗    ██████╗     ██████╗ 
██║ ██╔╝██║  ██║██╔══██╗██╔═══██╗████╗  ██║██╔═══██╗██╔════╝    ╚════██╗   ██╔═████╗
█████╔╝ ███████║██████╔╝██║   ██║██║╚██╗██║██║   ██║███████╗     █████╔╝   ██║██╔██║
██╔═██╗ ██╔══██║██╔══██╗██║   ██║██║╚██╗██║██║   ██║╚════██║    ██╔═══╝    ████╔╝██║
██║  ██╗██║  ██║██║  ██║╚██████╔╝██║ ╚████║╚██████╔╝███████║    ███████╗██╗╚██████╔╝
╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═══╝ ╚═════╝ ╚══════╝    ╚══════╝╚═╝ ╚═════╝ 
June 7, 2023
Raymond Brian D. Hernandez 
Carla Regine R. Hernandez

--------------------------------------------------------------------------------
REVISION HISTORY:
Date       | Author                | Description
--------------------------------------------------------------------------------
11/11/2024 | R. Hernandez          | Created `display_image.php` for retrieving images from the database.
                                     - Added error handling in `display_image.php` to ensure smooth image retrieval.
                                     - Included MIME type header adjustment based on image type.
                                     - Verified database connection and error handling.

11/11/2024 | R. Hernandez          | Updated HTML table to display images and handle click events.
                                     - Added inline styling for zoom effect on image hover.
                                     - JavaScript function `openImageInNewWindow(id)` created to open images in a new window when clicked.
                                     - Included error handling for missing images in `display_image.php`.

11/11/2024 | R. Hernandez          | Added final HTML and PHP integration checks.
                                     - Confirmed image rendering in the table from `display_image.php`.
                                     - Adjusted CSS for table formatting and consistency.

11/14/2024 | R. Hernandez          | Added new centered table for `SIZES` and measurement specs with ± note.
                                     - Enhanced the search functionality to filter `barongs` by color/material.
                                     - Integrated `zoom` effect and `open in new window` click action on images.
                                     - Introduced guest cart functionality using `localStorage`.
                                     - Added functionality for adding items to the cart and removing them.
                                     - Updated cart modal to show cart items dynamically.
                                     - Enhanced `complete order` functionality:
                                       - Integrated database insertion logic for orders.
                                       - Added email confirmation with order summary for the user.
                                       - Included Zelle QR code and calculated total for $30/item.
                                       - Admin notified via email upon successful order submission.
                                     - Adjusted cart modal for responsive design:
                                       - Scaled modal and table for better usability on mobile devices.
                                       - Improved `checkout` form layout for smaller screens.
                                     - Debugged search functionality:
                                       - Refactored `searchInput` event listener to filter rows correctly by color/material.
                                       - Fixed issues caused by JavaScript errors interrupting the search process.
--------------------------------------------------------------------------------
-->


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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Raymond's Barongs</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./stylesheets/styles.min.css"/>
    <link rel="stylesheet" href="./stylesheets/login.css"/>
    <style>
        /* Basic layout adjustments */
        body, html {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        header {
            width: 100%;
            max-width: none;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
            padding: 10px;
            box-sizing: border-box;
        }

        header nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
        }

        nav a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            margin: 0 10px;
        }

        main {
            margin-top: 60px; /* Offset for the fixed header */
            padding: 20px;
        }

        footer {
            margin-top: auto;
            background-color: #f8f9fa;
            padding: 10px;
            text-align: center;
            width: 100%;
        }

        .center-content {
            text-align: center;
            margin: 20px 0;
        }

        /* Table wrapper for centering and scrolling */
        .table-wrapper {
            display: block; /* Changed to block for universal compatibility */
            overflow-x: auto; /* Ensures horizontal scrolling */
            width: 100%; /* Ensures full width usage */
            -webkit-overflow-scrolling: touch; /* Enables momentum scrolling for iOS/Android */
        }

        table {
            width: 100%;
            max-width: 1200px; /* Limits the table width on larger screens */
            border-collapse: collapse;
            margin: 20px auto; /* Centers the table */
            border: 1px solid #ddd;
            text-align: center;
            table-layout: auto; /* Allows flexible column widths */
        }

        th, td {
            padding: 12px;
            border: 1px solid #ddd;
            white-space: nowrap; /* Prevents wrapping */
        }

        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        .zoom-img {
            width: 100px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .zoom-img.zoomed {
            transform: scale(4); /* Adjust scale as needed */
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            table {
                min-width: 600px; /* Prevents table shrinking too much */
            }

            th, td {
                font-size: 0.9em;
                padding: 8px;
            }

            nav a {
                font-size: 0.9em;
            }
        }

        @media (max-width: 576px) {
            table {
                min-width: 600px; /* Ensures horizontal scroll instead of hiding columns */
            }

            th, td {
                font-size: 0.85em;
                padding: 6px;
            }
        }

        /* Modal styling */
        #cartModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 600px;
            background-color: white;
            border: 1px solid #ddd;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            padding: 20px;
            z-index: 1000;
        }

        #cartModal .modal-content {
            padding: 20px;
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .close-modal {
            float: right;
            cursor: pointer;
            font-size: 1.2em;
            color: #555;
        }
    </style>
</head>

<body>

<header>
    <nav class="navbar navbar-dark navbar-expand-md bg-dark py-3">
    <div class="container">
        <img src="../img/khronos.gif" alt="logo" height="100">
        <a class="navbar-brand d-flex align-items-center" href="login">
            <span>Khro'nos Pro</span>
        </a>
        <button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5">
            <span class="visually-hidden">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navcol-5">
            <ul class="navbar-nav ms-auto font-weight-bold">
                <li class="nav-item dropdown">
                    <a class="nav-link active dropdown-toggle" href="#" id="quickLinksDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Quick Links
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="quickLinksDropdown">
                        <li><a class="dropdown-item" href="../public/barong">Raymond's Barong Collection</a></li>
                        <li><a class="dropdown-item" href="../public/barotsaya">Carla's Filipiniana Collection</a></li>
                        <li><a class="dropdown-item" href="../public/onesearch-public" target="_blank">One Search Tool</a></li>
                        <li><a class="dropdown-item" href="https://arbhie.com/projects/bible-game/" target="_blank">Logikos Trivia Game</a></li>
                        <li><a class="dropdown-item" href="https://emoji.khronos.pro" target="_blank">Bible Emoji Flashcards</a></li>
                        <li><a class="dropdown-item" href="https://api.khronos.pro">Khronos API</a></li>
                        <li><a class="dropdown-item active" href="../private/admin.php">Developer's Access</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link active" href="login.php">Login</a></li>
                <li class="nav-item"><a class="nav-link active" href="javascript:void(0);" onclick="openAboutUsWindow()">About Us</a></li>
            </ul>
        </div>
    </div>
</nav></header>

<main>
    <div class="center-content">
        <h2>Raymond's Barong Collection</h2>
        <!-- <h4><i>For Women's Collection, click <a href="barotsaya"> here </a></i></h4> -->
        <!-- <p>
            Barongs that my RP friend in Philippines sells.<br>
            If I can still fit it in my luggage I'll buy them for you.<br>
            Place order before November 22, 2024.<br><br>
            <a href="javascript:void(0);" onclick="openSquareWindow('barong_measurements.php')">View Barong Sizing and Materials Guide</a><br>
        </p> -->
        <p>This page is now closed - Raymond</p>
    </div>
 
    <div class="container mb-4">
        <h4>Search Form</h4>
        <input type="text" id="searchInput" class="form-control mt-4" placeholder="Search by color or material...">
    </div> 

    <!-- Button to open cart modal -->
    <div class="text-center my-3">
        <button class="btn btn-success" onclick="openCart()">View Cart</button>
        <!-- <p>Please complete ordering Men's barong collection before ordering women's section.</p> -->
    </div>

    <!-- <div class="table-wrapper">
        <table id='barongTable'>
            <tr>
                <th>ID</th>
                <th>Image</th>
                <th>Material</th>
                <th>Color</th>
                <th>Size</th>
                <th>Code</th>
                <th>Price (USD)</th>
                <th>Quantity</th>
                <th>Order</th>
            </tr>
            
            <tr data-price='30'>
                        <td>1</td>
                        <td><img src='display_image.php?id=1' class='zoom-img' onclick='openImageInNewWindow(1)'></td>
                        <td>Benson</td>
                        <td>Beige</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Beige</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(1, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>2</td>
                        <td><img src='display_image.php?id=2' class='zoom-img' onclick='openImageInNewWindow(2)'></td>
                        <td>Benson</td>
                        <td>Blue Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Blue Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(2, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>3</td>
                        <td><img src='display_image.php?id=3' class='zoom-img' onclick='openImageInNewWindow(3)'></td>
                        <td>Benson</td>
                        <td>Dark Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Dark Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(3, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>4</td>
                        <td><img src='display_image.php?id=4' class='zoom-img' onclick='openImageInNewWindow(4)'></td>
                        <td>Benson</td>
                        <td>Kuhler (Blue Green)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Kuhler</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(4, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>5</td>
                        <td><img src='display_image.php?id=5' class='zoom-img' onclick='openImageInNewWindow(5)'></td>
                        <td>Benson</td>
                        <td>Light Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Light Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(5, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>6</td>
                        <td><img src='display_image.php?id=6' class='zoom-img' onclick='openImageInNewWindow(6)'></td>
                        <td>Benson</td>
                        <td>Maroon</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Maroon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(6, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>7</td>
                        <td><img src='display_image.php?id=7' class='zoom-img' onclick='openImageInNewWindow(7)'></td>
                        <td>Benson</td>
                        <td>Mustard (Yellow)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Mustard</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(7, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>8</td>
                        <td><img src='display_image.php?id=8' class='zoom-img' onclick='openImageInNewWindow(8)'></td>
                        <td>Benson</td>
                        <td>Olive Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Olive Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(8, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>9</td>
                        <td><img src='display_image.php?id=9' class='zoom-img' onclick='openImageInNewWindow(9)'></td>
                        <td>Benson</td>
                        <td>Pink</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Pink</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(9, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>10</td>
                        <td><img src='display_image.php?id=10' class='zoom-img' onclick='openImageInNewWindow(10)'></td>
                        <td>Benson</td>
                        <td>Steel Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Benson Steel Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(10, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>11</td>
                        <td><img src='display_image.php?id=11' class='zoom-img' onclick='openImageInNewWindow(11)'></td>
                        <td>George</td>
                        <td>Dark Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>George Dark Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(11, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>12</td>
                        <td><img src='display_image.php?id=12' class='zoom-img' onclick='openImageInNewWindow(12)'></td>
                        <td>George</td>
                        <td>Khaki</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>George Khaki</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(12, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>13</td>
                        <td><img src='display_image.php?id=13' class='zoom-img' onclick='openImageInNewWindow(13)'></td>
                        <td>George</td>
                        <td>Pink</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>George Pink</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(13, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>14</td>
                        <td><img src='display_image.php?id=14' class='zoom-img' onclick='openImageInNewWindow(14)'></td>
                        <td>George</td>
                        <td>Teal Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>George Teal Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(14, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>15</td>
                        <td><img src='display_image.php?id=15' class='zoom-img' onclick='openImageInNewWindow(15)'></td>
                        <td>George</td>
                        <td>Violet</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>George Violet</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(15, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>16</td>
                        <td><img src='display_image.php?id=16' class='zoom-img' onclick='openImageInNewWindow(16)'></td>
                        <td>Jusi</td>
                        <td>Anchor Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Italian Jusi Anchor Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(16, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>17</td>
                        <td><img src='display_image.php?id=17' class='zoom-img' onclick='openImageInNewWindow(17)'></td>
                        <td>Jusi</td>
                        <td>Beige</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>2 Tone Jusi Beige</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(17, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>18</td>
                        <td><img src='display_image.php?id=18' class='zoom-img' onclick='openImageInNewWindow(18)'></td>
                        <td>Jusi</td>
                        <td>Brittany Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>2 Tone Jusi Brittany Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(18, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>19</td>
                        <td><img src='display_image.php?id=19' class='zoom-img' onclick='openImageInNewWindow(19)'></td>
                        <td>Jusi</td>
                        <td>Moss Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>2 Tone Jusi Moss Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(19, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>20</td>
                        <td><img src='display_image.php?id=20' class='zoom-img' onclick='openImageInNewWindow(20)'></td>
                        <td>Jusi</td>
                        <td>Navy Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>2 Tone Jusi Navy Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(20, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>21</td>
                        <td><img src='display_image.php?id=21' class='zoom-img' onclick='openImageInNewWindow(21)'></td>
                        <td>Jusi</td>
                        <td>Black</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Italian Jusi Black</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(21, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>22</td>
                        <td><img src='display_image.php?id=22' class='zoom-img' onclick='openImageInNewWindow(22)'></td>
                        <td>Jusi</td>
                        <td>Navy Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Italian Jusi Navy Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(22, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>23</td>
                        <td><img src='display_image.php?id=23' class='zoom-img' onclick='openImageInNewWindow(23)'></td>
                        <td>Jusi</td>
                        <td>Off White</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Italian Jusi Off White</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(23, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>24</td>
                        <td><img src='display_image.php?id=24' class='zoom-img' onclick='openImageInNewWindow(24)'></td>
                        <td>Jusi</td>
                        <td>Black</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Black</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(24, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>25</td>
                        <td><img src='display_image.php?id=25' class='zoom-img' onclick='openImageInNewWindow(25)'></td>
                        <td>Jusi</td>
                        <td>Dark Mocha</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Dark Mocha</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(25, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>26</td>
                        <td><img src='display_image.php?id=26' class='zoom-img' onclick='openImageInNewWindow(26)'></td>
                        <td>Jusi</td>
                        <td>Jade (Green)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Jade</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(26, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>27</td>
                        <td><img src='display_image.php?id=27' class='zoom-img' onclick='openImageInNewWindow(27)'></td>
                        <td>Jusi</td>
                        <td>Light Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Light Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(27, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>28</td>
                        <td><img src='display_image.php?id=28' class='zoom-img' onclick='openImageInNewWindow(28)'></td>
                        <td>Jusi</td>
                        <td>Maroon</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Maroon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(28, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>29</td>
                        <td><img src='display_image.php?id=29' class='zoom-img' onclick='openImageInNewWindow(29)'></td>
                        <td>Jusi</td>
                        <td>Minion (Yellow)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Minion Yellow</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(29, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>30</td>
                        <td><img src='display_image.php?id=30' class='zoom-img' onclick='openImageInNewWindow(30)'></td>
                        <td>Jusi</td>
                        <td>Pink</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Pink</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(30, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>31</td>
                        <td><img src='display_image.php?id=31' class='zoom-img' onclick='openImageInNewWindow(31)'></td>
                        <td>Jusi</td>
                        <td>Violet</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Violet</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(31, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>32</td>
                        <td><img src='display_image.php?id=32' class='zoom-img' onclick='openImageInNewWindow(32)'></td>
                        <td>Jusi</td>
                        <td>Watermelon (Red)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi Watermelon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(32, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>33</td>
                        <td><img src='display_image.php?id=33' class='zoom-img' onclick='openImageInNewWindow(33)'></td>
                        <td>Jusi</td>
                        <td>White</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Japan Jusi White</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(33, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>34</td>
                        <td><img src='display_image.php?id=34' class='zoom-img' onclick='openImageInNewWindow(34)'></td>
                        <td>Julia</td>
                        <td>Aqua Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Aqua Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(34, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>35</td>
                        <td><img src='display_image.php?id=35' class='zoom-img' onclick='openImageInNewWindow(35)'></td>
                        <td>Julia</td>
                        <td>Ash Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Ash Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(35, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>36</td>
                        <td><img src='display_image.php?id=36' class='zoom-img' onclick='openImageInNewWindow(36)'></td>
                        <td>Julia</td>
                        <td>Beige</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Beige</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(36, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>37</td>
                        <td><img src='display_image.php?id=37' class='zoom-img' onclick='openImageInNewWindow(37)'></td>
                        <td>Julia</td>
                        <td>Blue Jay</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Blue Jay</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(37, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>38</td>
                        <td><img src='display_image.php?id=38' class='zoom-img' onclick='openImageInNewWindow(38)'></td>
                        <td>Julia</td>
                        <td>Blush (Pink)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Blush Pink</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(38, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>39</td>
                        <td><img src='display_image.php?id=39' class='zoom-img' onclick='openImageInNewWindow(39)'></td>
                        <td>Julia</td>
                        <td>Charcoal Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Charcoal Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(39, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>40</td>
                        <td><img src='display_image.php?id=40' class='zoom-img' onclick='openImageInNewWindow(40)'></td>
                        <td>Julia</td>
                        <td>Choco Brown</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Choco Brown</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(40, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>41</td>
                        <td><img src='display_image.php?id=41' class='zoom-img' onclick='openImageInNewWindow(41)'></td>
                        <td>Julia</td>
                        <td>Cinnamon (Brown)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Cinnamon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(41, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>42</td>
                        <td><img src='display_image.php?id=42' class='zoom-img' onclick='openImageInNewWindow(42)'></td>
                        <td>Julia</td>
                        <td>Denim (Blue)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Denim</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(42, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>43</td>
                        <td><img src='display_image.php?id=43' class='zoom-img' onclick='openImageInNewWindow(43)'></td>
                        <td>Julia</td>
                        <td>Fuchsia Pink</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Fuchsia Pink</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(43, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>44</td>
                        <td><img src='display_image.php?id=44' class='zoom-img' onclick='openImageInNewWindow(44)'></td>
                        <td>Julia</td>
                        <td>India Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia India Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(44, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>45</td>
                        <td><img src='display_image.php?id=45' class='zoom-img' onclick='openImageInNewWindow(45)'></td>
                        <td>Julia</td>
                        <td>Light Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Light Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(45, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>46</td>
                        <td><img src='display_image.php?id=46' class='zoom-img' onclick='openImageInNewWindow(46)'></td>
                        <td>Julia</td>
                        <td>Magenta (Red)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Magenta</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(46, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>47</td>
                        <td><img src='display_image.php?id=47' class='zoom-img' onclick='openImageInNewWindow(47)'></td>
                        <td>Julia</td>
                        <td>Maroon</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Maroon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(47, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>48</td>
                        <td><img src='display_image.php?id=48' class='zoom-img' onclick='openImageInNewWindow(48)'></td>
                        <td>Julia</td>
                        <td>Mauve (Purple Lilac)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Mauve</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(48, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>49</td>
                        <td><img src='display_image.php?id=49' class='zoom-img' onclick='openImageInNewWindow(49)'></td>
                        <td>Julia</td>
                        <td>Mint Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Mint Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(49, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>50</td>
                        <td><img src='display_image.php?id=50' class='zoom-img' onclick='openImageInNewWindow(50)'></td>
                        <td>Julia</td>
                        <td>Mocha (Brown)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Mocha</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(50, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>51</td>
                        <td><img src='display_image.php?id=51' class='zoom-img' onclick='openImageInNewWindow(51)'></td>
                        <td>Julia</td>
                        <td>Mustard (Yellow)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Mustard</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(51, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>52</td>
                        <td><img src='display_image.php?id=52' class='zoom-img' onclick='openImageInNewWindow(52)'></td>
                        <td>Julia</td>
                        <td>Oxford Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Oxford Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(52, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>53</td>
                        <td><img src='display_image.php?id=53' class='zoom-img' onclick='openImageInNewWindow(53)'></td>
                        <td>Julia</td>
                        <td>Peach (Yellow)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Peach</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(53, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>54</td>
                        <td><img src='display_image.php?id=54' class='zoom-img' onclick='openImageInNewWindow(54)'></td>
                        <td>Julia</td>
                        <td>Pine Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Pine Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(54, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>55</td>
                        <td><img src='display_image.php?id=55' class='zoom-img' onclick='openImageInNewWindow(55)'></td>
                        <td>Julia</td>
                        <td>Red</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Red</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(55, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>56</td>
                        <td><img src='display_image.php?id=56' class='zoom-img' onclick='openImageInNewWindow(56)'></td>
                        <td>Julia</td>
                        <td>Royal Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Royal Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(56, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>57</td>
                        <td><img src='display_image.php?id=57' class='zoom-img' onclick='openImageInNewWindow(57)'></td>
                        <td>Julia</td>
                        <td>Rust (Red)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Rust</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(57, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>58</td>
                        <td><img src='display_image.php?id=58' class='zoom-img' onclick='openImageInNewWindow(58)'></td>
                        <td>Julia</td>
                        <td>Rusty (Orange)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Rusty</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(58, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>59</td>
                        <td><img src='display_image.php?id=59' class='zoom-img' onclick='openImageInNewWindow(59)'></td>
                        <td>Julia</td>
                        <td>Smoke Gray</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Smoke Gray</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(59, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>60</td>
                        <td><img src='display_image.php?id=60' class='zoom-img' onclick='openImageInNewWindow(60)'></td>
                        <td>Julia</td>
                        <td>Tan (Brown)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Tan</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(60, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>61</td>
                        <td><img src='display_image.php?id=61' class='zoom-img' onclick='openImageInNewWindow(61)'></td>
                        <td>Julia</td>
                        <td>Watermelon (Red)</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Watermelon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(61, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>62</td>
                        <td><img src='display_image.php?id=62' class='zoom-img' onclick='openImageInNewWindow(62)'></td>
                        <td>Julia</td>
                        <td>Wine Red</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Wine Red</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(62, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>63</td>
                        <td><img src='display_image.php?id=63' class='zoom-img' onclick='openImageInNewWindow(63)'></td>
                        <td>Julia</td>
                        <td>Yale Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Julia Yale Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(63, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>64</td>
                        <td><img src='display_image.php?id=64' class='zoom-img' onclick='openImageInNewWindow(64)'></td>
                        <td>Soft and Smooth</td>
                        <td>Sand Stone</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft and Smooth Sand Stone</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(64, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>65</td>
                        <td><img src='display_image.php?id=65' class='zoom-img' onclick='openImageInNewWindow(65)'></td>
                        <td>Soft and Smooth</td>
                        <td>Choco Brown</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft and Smooth Choco Brown</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(65, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>66</td>
                        <td><img src='display_image.php?id=66' class='zoom-img' onclick='openImageInNewWindow(66)'></td>
                        <td>Soft and Smooth</td>
                        <td>Maroon</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft and Smooth Maroon</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(66, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>67</td>
                        <td><img src='display_image.php?id=67' class='zoom-img' onclick='openImageInNewWindow(67)'></td>
                        <td>Soft and Smooth</td>
                        <td>Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft and Smooth Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(67, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>68</td>
                        <td><img src='display_image.php?id=68' class='zoom-img' onclick='openImageInNewWindow(68)'></td>
                        <td>Soft and Smooth</td>
                        <td>Red</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft and Smooth Red</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(68, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>69</td>
                        <td><img src='display_image.php?id=69' class='zoom-img' onclick='openImageInNewWindow(69)'></td>
                        <td>Peachtwill</td>
                        <td>Beige</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Peachtwill Beige</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(69, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>70</td>
                        <td><img src='display_image.php?id=70' class='zoom-img' onclick='openImageInNewWindow(70)'></td>
                        <td>Peachtwill</td>
                        <td>Minion Yellow</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Peachtwill Minion Yellow</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(70, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>71</td>
                        <td><img src='display_image.php?id=71' class='zoom-img' onclick='openImageInNewWindow(71)'></td>
                        <td>Marshanna</td>
                        <td>White Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Marshanna White Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(71, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>72</td>
                        <td><img src='display_image.php?id=72' class='zoom-img' onclick='openImageInNewWindow(72)'></td>
                        <td>Kingston</td>
                        <td>Light Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Kingston Light Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(72, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>73</td>
                        <td><img src='display_image.php?id=73' class='zoom-img' onclick='openImageInNewWindow(73)'></td>
                        <td>Kingston</td>
                        <td>Beige</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Kingston Beige</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(73, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>74</td>
                        <td><img src='display_image.php?id=74' class='zoom-img' onclick='openImageInNewWindow(74)'></td>
                        <td>Marshanna</td>
                        <td>Cream</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Marshanna Cream</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(74, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>75</td>
                        <td><img src='display_image.php?id=75' class='zoom-img' onclick='openImageInNewWindow(75)'></td>
                        <td>Linux</td>
                        <td>White Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Linux White Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(75, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>76</td>
                        <td><img src='display_image.php?id=76' class='zoom-img' onclick='openImageInNewWindow(76)'></td>
                        <td>Linux</td>
                        <td>Ice Blue</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Linux Ice Blue</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(76, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>77</td>
                        <td><img src='display_image.php?id=77' class='zoom-img' onclick='openImageInNewWindow(77)'></td>
                        <td>Jusilyn</td>
                        <td>Violet</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Mono Jusilyn Violet</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(77, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>78</td>
                        <td><img src='display_image.php?id=78' class='zoom-img' onclick='openImageInNewWindow(78)'></td>
                        <td>Linux</td>
                        <td>Peach</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Linux Peach</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(78, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>79</td>
                        <td><img src='display_image.php?id=79' class='zoom-img' onclick='openImageInNewWindow(79)'></td>
                        <td>Jusilyn</td>
                        <td>Brown</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Mono Jusilyn Brown</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(79, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>80</td>
                        <td><img src='display_image.php?id=80' class='zoom-img' onclick='openImageInNewWindow(80)'></td>
                        <td>Soft Linen</td>
                        <td>Moss Green</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft Linen Moss Green</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(80, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr><tr data-price='30'>
                        <td>81</td>
                        <td><img src='display_image.php?id=81' class='zoom-img' onclick='openImageInNewWindow(81)'></td>
                        <td>Soft Linen</td>
                        <td>Mustard</td>
                        <td>
                            <select class='form-select size-dropdown'>
                                <option value='XS'>XS</option>
                                <option value='S'>S</option>
                                <option value='M'>M</option>
                                <option value='L'>L</option>
                                <option value='XL'>XL</option>
                                <option value='2XL'>2XL</option>
                                <option value='3XL'>3XL</option>
                                <option value='4XL'>4XL</option>
                                <option value='5XL'>5XL</option>
                            </select>
                        </td>
                        <td>Soft Linen Mustard</td>
                        <td>$30</td>
                        <td><input type='number' class='form-control quantity-input' min='1' max='10' value='1'></td>
                        <td>
                            <button class='btn btn-primary' onclick='addToCart(81, this.parentNode.parentNode.querySelector(".size-dropdown").value, this.parentNode.parentNode.querySelector(".quantity-input").value)'>
                                Add to Order
                            </button>
                        </td>
                    </tr>        </table>
    </div> -->
    
    <!-- Modal Overlay -->
    <div class="modal-overlay" onclick="closeCart()"></div>

    <!-- Cart Modal -->
    <div id="cartModal" class="modal">
        <div class="modal-content">
            <span class="close-modal" onclick="closeCart()">&times;</span>
            <h3>Your Cart</h3>
            <div class="table-responsive">
                <table id="cartContainer" class="table">
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Color</th>
                            <th>Material</th>
                            <th>Size</th>
                            <th>Price (USD)</th>
                            <th>Quantity</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Cart items loaded here -->
                    </tbody>
                </table>
            </div>
            
            <h4>Checkout</h4>
            <form onsubmit="submitOrder(event)">
                <input type="text" id="name" placeholder="Your Name" required>
                <input type="email" id="email" placeholder="Your Email" required>
                <input type="tel" id="phone" placeholder="Your Phone" required>
                <button type="submit" class="btn btn-primary w-100">Complete Order</button>
            </form>
        </div>
    </div>

    <!-- Button to open cart modal -->
    <div class="text-center my-3">
        <button class="btn btn-success" onclick="openCart()">View Cart</button>
        <!-- <p>Please complete ordering Men's barong collection before ordering women's section.</p> -->
    </div>
</main>

<footer>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<footer class="text-center text-dark py-4 py-lg-5">
    <div class="container">
        <p class="mb-1">
            &copy; 2022 - 2025 Khronos Pro Rev 2.0.1 by 
            <a href="https://arbhie.com" target="_blank" class="text-decoration-none text-primary">arbhie.com</a>
        </p>
        <p class="small mb-0">
            <span class="text-muted">Developed by Raymond Hernandez</span> 
            | <a href="https://www.linkedin.com/in/raymond-brian-d-hernandez-msem-a0510a71/" target="_blank" class="text-decoration-none text-secondary">
                <i class="fab fa-linkedin"></i> Connect on LinkedIn
            </a>
            | <a href="mailto:raymond@arbhie.com" class="text-decoration-none text-secondary">
                <i class="fas fa-envelope"></i> Contact
            </a>
        </p>
    </div>
</footer>

</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Search function to filter table rows
    document.getElementById('searchInput').addEventListener('keyup', function () {
        const searchText = this.value.toLowerCase().trim();
        const rows = document.querySelectorAll('#barongTable tr:not(:first-child)');

        rows.forEach(row => {
            let match = false;

            // Iterate through all cells in the row
            Array.from(row.cells).forEach(cell => {
                if (cell.textContent.toLowerCase().includes(searchText)) {
                    match = true; // Set match to true if any cell contains the search text
                }
            });

            // Show or hide the row based on whether there's a match
            row.style.display = match ? '' : 'none';
        });
    });

    function openCart() {
        document.getElementById('cartModal').style.display = 'block';
        document.querySelector('.modal-overlay').style.display = 'block';
        loadCart();
    }

    function closeCart() {
        document.getElementById('cartModal').style.display = 'none';
        document.querySelector('.modal-overlay').style.display = 'none';
    }

    function addToCart(id, size, quantity) {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];

        // Find the row corresponding to the item
        const row = [...document.querySelectorAll('#barongTable tr')].find(
            (row) => row.cells[0] && row.cells[0].textContent == id
        );

        if (!row) {
            alert('Item not found!');
            return;
        }

        const color = row.cells[2].textContent.trim();
        const material = row.cells[3].textContent.trim();
        const image = row.cells[1].querySelector("img").src;
        const price = parseFloat(row.dataset.price) || 0; // Get the hidden price

        // Check if the item already exists in the cart
        const existingItem = cart.find((item) => item.id === id && item.size === size);
        if (existingItem) {
            existingItem.quantity += parseInt(quantity);
            existingItem.totalCost = existingItem.quantity * price;
        } else {
            cart.push({
                id,
                size,
                quantity: parseInt(quantity),
                color,
                material,
                image,
                price,
                totalCost: parseInt(quantity) * price,
            });
        }

        localStorage.setItem('cart', JSON.stringify(cart));
        alert('Item added to cart!');
    }

    function loadCart() {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        const cartContainer = document.getElementById('cartContainer');
        cartContainer.innerHTML = '<tr><th>Image</th><th>Material</th><th>Color</th><th>Price (USD)</th><th>Size</th><th>Quantity</th><th>Sub-Total (USD)</th><th>Action</th></tr>';

        let total = 0; // Initialize total cost

        cart.forEach(item => {
            const subtotal = item.quantity * item.price; // Calculate subtotal for this item
            total += subtotal; // Add to total cost

            const row = document.createElement('tr');
            row.innerHTML = `
                <td><img src="${item.image}" class="zoom-img" style="width: 50px;"></td>
                <td>${item.color}</td>
                <td>${item.material}</td>
                <td>\$${item.price.toFixed(2)}</td>
                <td>${item.size}</td>
                <td>${item.quantity}</td>
                <td>\$${subtotal.toFixed(2)}</td>
                <td><button onclick="removeFromCart(${item.id}, '${item.size}')">Remove</button></td>
            `;
            cartContainer.appendChild(row);
        });

        // Add a row for the total cost
        const totalRow = document.createElement('tr');
        totalRow.innerHTML = `
            <td colspan="5" style="text-align: right; font-weight: bold;">Total:</td>
            <td style="font-weight: bold;">\$${total.toFixed(2)}</td>
            <td></td>
        `;
        cartContainer.appendChild(totalRow);
    }

    function removeFromCart(id, size) {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        cart = cart.filter(item => !(item.id === id && item.size === size));
        localStorage.setItem('cart', JSON.stringify(cart));
        loadCart();
    }

    function submitOrder(event) {
        event.preventDefault();

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const cart = JSON.parse(localStorage.getItem('cart')) || [];

        fetch('submit_order.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, email, phone, cart })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Order submitted successfully! Please check your inbox/spam email.');
                localStorage.removeItem('cart');  // Clear cart from local storage
                closeCart();  // Close the modal
                loadCart();   // Refresh cart display
            } else {
                alert('Error submitting order: ' + (data.error || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while submitting your order.');
        });
    }

    // JavaScript to toggle zoom class on click
    document.addEventListener("DOMContentLoaded", function() {
        const images = document.querySelectorAll('.zoom-img');
        
        images.forEach(img => {
            img.addEventListener('click', function() {
                img.classList.toggle('zoomed');
            });
        });
    });

    function openSquareWindow(url) {
        // Define dimensions for the square window
        const size = Math.min(screen.width, screen.height) * 0.8; // 80% of the smaller screen dimension
        const width = size;
        const height = size;

        // Center the window
        const left = (screen.width - width) / 2;
        const top = (screen.height - height) / 2;

        // Open the new window
        window.open(
            url,
            '_blank',
            `width=${width},height=${height},top=${top},left=${left},resizable=yes,scrollbars=yes`
        );
    }
</script>

</body>
</html>