<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>ClothingShop's Clothing Store</title>
</head>
<body>
    <div id="clotheshop" class="clotheshop hide">
        <div class="background-fade"></div>

        <input type="text" class="askserialnumber-input" id="askserialnumber-input" placeholder="Acheter un preset">

        <div id="payment-cat" class="payment-cat">
            <div class="payment-background">
                <span id="payment-price" class="payment-price">0$</span>
                <span class="payment-title">Prix total</span>

                <div onclick="payClothes()" class="payment-card">
                    <img style="margin-left: -1px;" src="imgs/cart_2.svg" alt="" class="payment-img">
                </div>

                <span id="payment-outift-text" class="payment-outift-text">Acheter la tenue complete</span>
                <span id="payment-price-outift" class="payment-price-outift">3000$</span>

                <div onclick="buyOutfit()" class="payment-card-outfit">
                    <img style="margin-left: -1px;" src="imgs/cart_2.svg" alt="" class="payment-img-outfit">
                </div>
            </div>

            <div id="payment-articles" class="payment-articles"></div>
        </div>

        <span class="title">Magasins de vêtements</span>
        <div class="title-liner"></div>

        <div id="clothes-ctg" class="clothes-ctg">
            <div onclick="changeCat('tshirt', '\T-Shirt')" class="clothe" id="tshirt">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/tshirt.svg" alt="">
            </div>
            
            <div onclick="changeCat('torso', '\Torses')" class="clothe" id="torso">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/jacket.svg" alt="">
            </div>

            <div onclick="changeCat('arms', '\Gants')" class="clothe" id="arms">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/arms.svg" alt="">
            </div>

            <div onclick="changeCat('pants', '\Pantalons')" class="clothe" id="pants">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/pants.svg" alt="">
            </div>
            
            <div onclick="changeCat('shoes', '\Chaussures')" class="clothe" id="shoes">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/shoes.svg" alt="">
            </div>

            <div onclick="changeCat('bags', '\Sac à dos')" class="clothe" id="bags">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/bag.svg" alt="">
            </div>

            <div onclick="changeCat('glasses', '\Lunettes')" class="clothe" id="glasses">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/glasses.svg" alt="">
            </div>

            <div onclick="changeCat('helmet', '\Casque')" class="clothe" id="helmet">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/hat.svg" alt="">
            </div>

            <div onclick="changeCat('mask', '\Masque')" class="clothe" id="mask">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/mask.svg" alt="">
            </div>
        
            <div onclick="changeCat('ears', '\Ears')" class="clothe" id="ears">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/ears.svg" alt="">
            </div>

            <div onclick="changeCat('chain', '\Chaine')" class="clothe" id="chain">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/collar.svg" alt="">
            </div>

            <div onclick="changeCat('watches', '\Montre')" class="clothe" id="watches">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/watch.svg" alt="">
            </div>

            <div onclick="changeCat('bproof', '\Gilet par balle')" class="clothe" id="bproof">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/blp.svg" alt="">
            </div>

            <div onclick="changeCat('bracelets', '\Bracelets')" class="clothe" id="bracelets">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/bracelets.svg" alt="">
            </div>

            <div onclick="changeCat('decals', '\Calques')" class="clothe" id="decals">
                <img src="imgs/cloth-background.svg" alt="">
                <img class="clothe-item" src="imgs/decals.svg" alt="">
            </div>
        </div>

        <div class="search">
            <span id="search-text" class="search-bar-text">Filtrer par un numéro</span>

            <input id="search-input" type="number" class="search-bar">

            <div class="search-button-background">
                <img style="position: absolute; margin-top: -2px;" src="imgs/search.svg" alt="" class="search-button">
            </div>
        </div>

        <div class="clothes-popup hide" id="askserialnumber-container">
            <span class="askserialnumber-span">Voulez vous faire un preset ?</span>
            <button class="clothes-popup-accept" id="askserialnumber-accept">Oui</button>
            <button class="clothes-popup-decline" id="askserialnumber-decline">Non</button>
        </div>

        <div id="clothes-list" class="clothes-list"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>