<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FShop</title>
  </head>
  <style>
    @charset "UTF-8";
    @import "https://fonts.googleapis.com/css?family=Poppins:200,400,500,600,700";
    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      user-select: none;
      overflow: hidden;
      font-family: "Poppins", sans-serif;
      /* z-index: 7; */
    }

    .storeall {
      height: 100%;
      background: linear-gradient(
        90deg,
        #d9dae1b1 0%,
        rgba(2, 4, 12, 0.199) 100%
      );
      background: radial-gradient(
        ellipse at center,
        rgba(2, 4, 12, 0.199),
        rgba(1, 1, 1, 0.336)
      );
    }

    .storecorner1 {
      position: fixed;
      width: 107px;
      height: 114px;
      left: 0px;
      top: -5px;
    }

    .storecorner2 {
      position: fixed;
      bottom: 190px;
      left: 0;
      width: 107px;
      height: 114px;
    }

    .storecorner4 {
      position: fixed;
      bottom: 190px;
      right: 180px;
      width: 107px;
      height: 114px;
    }

    .storetoptext {
      position: absolute;
      font-family: "Poppins", sans-serif;
      width: 50px;
      font-weight: 800;

      left: 2%;
      top: 3%;
      font-size: 32px;
    }

    .storetoptext2 {
      position: absolute;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      width: 90px;
      left: 2.1%;
      top: 10.4%;
      font-size: 24px;
      background: linear-gradient(97.1deg, #ffffff 0%, #929292 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }

    .storetoptext3 {
      position: absolute;
      font-family: "Poppins", sans-serif;
      width: 250px;

      font-weight: 500;

      left: 12%;
      top: 4.5%;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.25);
    }

    .storeleftmenu {
      /* position: absolute; */
      left: 7.5%;
      top: 15%;
      display: flex;
      flex-direction: row;
      white-space: normal;
      flex-wrap: wrap;
      height: max-content;
      margin-bottom: 1vh;
      margin-top: 1vh;
    }

    .storeleftmenu_item {
      width: 65px !important;
      height: 65px !important; /* border: 1px solid #FFFFFF0A; */
      background: #1414148a; /* border: 1px solid rgba(255, 255, 255, 0.04); */
      border-radius: 2px;
      cursor: pointer;
      overflow: hidden;
      margin-top: 5px;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .storeleftmenu_item:hover {
      background: #5296b9;
      border: 1px solid #5296b9;
    }

    .storeleftmenu_item_name {
      /* margin: 10px; */
      font-family: "Poppins", sans-serif;
      font-size: 9px;
      color: #ffffffc3;
      font-weight: 400;
      margin-bottom: 0.5vh;
    }

    .storeleftmenu_item_img {
      width: 42px;
      opacity: 1;
      z-index: -1;
    }

    .storeleftmenuclothingpart {
      left: 7.5%;
      top: 25%;
      display: flex;
      flex-direction: row;
      white-space: normal;
      flex-wrap: wrap;
      align-content: flex-start;
      width: 466px;
      height: 49vh;
      overflow: auto;
      justify-content: flex-start;
    }

    .storeleftmenuclothingpart_item {
      width: 107px !important;
      height: 107px !important;
      background: #1414148a;
      margin-top: 5px;
      margin-left: 6px;
      margin-bottom: -2px;
      border-radius: 2px;
      border: 1px solid #14141494;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
    }

    .storeleftmenuclothingpart_item img {
      width: 6vh;
      margin-top: 0.8vh;
    }

    .storeleftmenuclothingpart_item:hover {
      background: rgba(63, 62, 62, 0.442);
    }

    .storeleftmenuclothingpart_item_img {
      margin-left: 42px;
      margin-top: 25px;
      width: 70px;
      height: 60px;
      opacity: 1;
      z-index: -1;
    }

    .storeleftmenuclothingpart_item_text {
      width: 100%;

      font-family: "Poppins", sans-serif;
      font-size: 13px;
      color: #ffffffa3;
      font-weight: 400;

      text-align: center;
      margin-top: 20px;
    }

    .storeleftmenuclothingpart_item_bottom {
      position: relative;
      margin-top: 33px;
  
      width: 100%;
      height: 25px;
      display: flex;
      flex-direction: row;
    }

    /* width */
    ::-webkit-scrollbar {
      width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      width: 2px;
      background: rgba(0, 0, 0, 0.582);
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #ffffff9c;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #ffffff9c;
    }

    ::-webkit-scrollbar-track-piece:end {
      background: transparent;
    }

    ::-webkit-scrollbar-track-piece:start {
      background: transparent;

    }

    .storerightmenu {
      position: absolute;
      right: 1.5%;
      top: 9%;
      width: 320px;
      height: 700px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      display: none;
    }

    .storerightmenu_top {
      width: 100%;
      height: 58px;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1008) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 2px;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    }

    .storerightmenu_top_text {
      width: 50px;
      font-family: "Poppins", sans-serif;
      color: white;
      font-size: 15px;
      opacity: 1;
      margin-left: 20px;
      margin-top: 7px;
    }

    .storerightmenu_top_img {
      margin-left: 178px;
      margin-top: -15px;
    }

    .storerightmenu_center {
      width: 100%;
      height: 470px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin-top: 10px;
      overflow: auto;
    }

    .storerightmenu_center_item {
      width: 100%;
      height: 40px;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1008) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 2px;
      display: flex;
      flex-direction: row;
      margin-bottom: 8px;
    }

    .storerightmenu_center_item_img {
      width: 20px;
      margin: 10px;
      opacity: 1;
    }

    .storerightmenu_center_item_text {
      margin: 10px;
      font-family: "Poppins", sans-serif;
      color: white;
      font-size: 12px;
      opacity: 1;
      width: 60px;
    }

    .storerightmenu_center_item_text2 {
      margin: 10px;
      font-family: "Poppins", sans-serif;
      color: white;
      display: flex;
      font-size: 12px;
      opacity: 1;
      width: 100px;
    }

    .storerightmenu_center_item_remove {
      margin-left: 35px;
      margin-top: 7px;
      width: 25px;
      height: 25px;
      cursor: pointer;
      background: linear-gradient(
        45deg,
        rgba(6, 13, 41, 0.269) 0%,
        rgba(255, 6, 66, 0) 100%
      );
      border: 1px solid #0e29c45b;
      border-radius: 2px;
    }

    .storerightmenu_bottom1 {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      margin-top: 10px;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1008) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 2px;
    }

    .storerightmenu_bottom1_text {
      /* width: 50px; */
      font-family: "Poppins", sans-serif;
      color: white;
      font-size: 13px;
      opacity: 1;
      margin-left: 20px;
      margin-top: 15px;
    }

    .storerightmenu_bottom2_button1_img {
      width: 20px;
      margin-top: 15px;
      margin-left: 25px;
      opacity: 1;
    }

    .storerightmenu_bottom2_button1_text {
      font-family: "Poppins", sans-serif;
      color: white;
      font-size: 12px;
      opacity: 1;
      margin-top: 15px;
      margin-left: 15px;
    }

    .storetexture {
      position: absolute;
      left: 43%;
      top: 30px;
      width: 300px;
      height: 40px;
      display: flex;
      flex-direction: row;
    }

    .storetexture_lefticon {
      width: 70px;
      opacity: 10.;
      cursor: pointer;
    }

    .storetexture_centerinput {
      width: 100%;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1008) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 2px;
    }

    .storetexture_righticon {
      width: 70px;
      opacity: 1;
      cursor: pointer;
    }

    .storetexture_toptext {
      position: absolute;
      text-align: center;
      margin-left: 125px;
      margin-top: -27px;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 15px;
      text-transform: uppercase;
      background: linear-gradient(97.1deg, #ffffff 0%, #b3a5a5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }

    .storetoptext5 {
      position: absolute;
      font-family: "Poppins", sans-serif;
      width: 100px;
      font-weight: 500;
      left: 30px;
      top: 15%;
      font-size: 12px;
      color: rgb(255, 0, 0);
      display: flex;
      flex-direction: column;
      height: 78vh;
      align-content: center;
      align-items: center;
      background: rgba(2, 2, 2, 0.4);
    }

    .storetoptext5_1 {
      width: 10px;
      height: 10px;
      margin-left: 5px;
      cursor: pointer;
    }

    .storetoptext5_1 img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      object-position: center;
    }

    .storetoptext5_1 img:hover {
      transform: scale(1.2);
      transition: 0.1s;
    }

    @media screen and (max-width: 1600px) and (min-width: 1460px) and (max-height: 900px) {
      .storeleftmenu {
        zoom: 0.9;
      }

      .storeleftmenuclothingpart {
        zoom: 0.9;
      }

      .storerightmenu_bottom1 {
        zoom: 0.9;
      }

      .storerightmenu_bottom2 {
        zoom: 0.9;
      }

      .storetoptext5 {
        zoom: 0.9;
      }

      .storetoptext3 {
        zoom: 0.9;
      }

      .storetoptext2 {
        zoom: 0.9;
      }

      .storetoptext {
        zoom: 0.9;
      }

      .clothingrightclose {
        zoom: 0.9;
      }
    }

    @media screen and (max-width: 1440px) and (min-width: 1400px) {
      .storeleftmenu {
        zoom: 0.8;
      }

      .storeleftmenuclothingpart {
        zoom: 0.8;
      }

      .storerightmenu_bottom1 {
        zoom: 0.8;
      }

      .storerightmenu_bottom2 {
        zoom: 0.8;
      }

      .storetoptext5 {
        zoom: 0.8;
      }

      .storetoptext3 {
        zoom: 0.8;
      }

      .storetoptext2 {
        zoom: 0.8;
      }

      .storetoptext {
        zoom: 0.8;
      }

      .clothingrightclose {
        zoom: 0.8;
      }
    }

    @media screen and (max-width: 1366px) and (min-width: 1300px) {
      .storeleftmenu {
        zoom: 0.8;
      }

      .storeleftmenuclothingpart {
        zoom: 0.8;
      }

      .storerightmenu_bottom1 {
        zoom: 0.8;
      }

      .storerightmenu_bottom2 {
        zoom: 0.8;
      }

      .storetoptext5 {
        zoom: 0.8;
      }

      .storetoptext3 {
        zoom: 0.8;
      }

      .storetoptext2 {
        zoom: 0.8;
      }

      .storetoptext {
        zoom: 0.8;
      }

      .clothingrightclose {
        zoom: 0.8;
      }
    }

    .stroeredeiu {
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.011642156862745057) 90%
      );
      position: absolute;
      left: 7.5%;
      top: 15%;
      display: flex;
      flex-direction: column;
      width: 44.5vh;
      height: 78vh;
      justify-content: space-evenly;
    }

    .container--button {
      padding-left: 1vh;
      margin-top: 1vh;
    }

    .container--button button {
      border: none;
      font-family: "Poppins", sans-serif;
      font-size: 1.2vh;
      margin-right: 0.4vh;
      padding: 0.4vh 2vh;
      color: white;
      background: #696b74;
      cursor: pointer;
    }

    .container--button button:nth-child(1) {
      background: #b71c1e;
    }
    .container--button button:nth-child(3) {
      background: #275cd9;
    }
    .container--button button:nth-child(4) {
      background: rgba(0, 0, 0, 0.623);
    }

    .container--button button {
      transition: background-color 0.3s, transform 0.3s;
    }

    .container--button button:hover {
      border: 1px grey;
      transform: scale(1.05);
    }

    .container--button button:active {
      border: 1px grey;
      transform: scale(0.95);
    }

    .img--vetement {
      width: 45%;
    }

    .container--create--tenue {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 1vh;
    }
    .container--create--tenue span {
      color: white;
      font-family: "Poppins", sans-serif;
      font-size: 1.5vh;
      margin-bottom: 1vh;
    }
    .container--create--tenue input {
      color: white;
      font-size: 1.5vh;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.071642156862745057) 90%
      );
      border: none;
      padding: 0.5vh 1vh;
      width: 31vh;
    }

    .container--img {
      width: 7vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1vh;
      justify-content: space-evenly;
      height: 6vh;
      background: #5296b9;
      border-radius: 1px;
    }

    .container--img span {
      font-size: 0.9vh;
    }

    .container--logo {
      background: rgba(2, 2, 2, 0.4);
      position: absolute;
      left: 30px;
      width: 100px;
      height: 100px;
      top: 5%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container--logo .logo {
      width: 5.5vh;
    }

    .storeleftmenu_item img {
      width: 2vh;
      margin-top: 1.5vh;
    }

    .storeleftmenu_item:nth-child(3) img {
      width: 1.5vh;
    }

    .storeleftmenu_item:nth-child(4) img {
      width: 3vh;
    }

    .title--categorie {
      font-family: "Poppins", sans-serif;
      color: white;
      margin-top: 1vh;
      margin-bottom: 1vh;
      margin-left: 1.5vh;
      font-size: 2vh;
    }

    .container--span {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      flex-direction: row;
      padding-right: 0.5vh;
      margin-top: 0.2vh;
    }

    .container--span span {
      color: #3aff89;
      font-family: "Poppins", sans-serif;
      font-size: 0.9vh;
    }

    .storetexture {
                position: absolute;
                left: 43%;
                top: 30px;
                width: 300px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 20px;
            }
            
            .storetexture:not(:hover) {
                opacity: 0.9;
                transition: opacity 0.3s ease;
            }
            
            .storetexture:hover {
                opacity: 1;
            }
            
            .storetexture svg {
                stroke-linecap: round;
                stroke-linejoin: round;
            }
            
            .texture-title {
                position: absolute;
                top: -25px;
                color: white;
                font-family: 'Poppins', sans-serif;
                font-size: 14px;
                text-transform: uppercase;
                opacity: 0.7;
                width: 100%;
                text-align: center;
            }
            
            .texture-arrow {
                width: 40px;
                height: 40px;
              background: rgba(0, 0, 0, 0.4);
                   border-radius: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            
            .texture-arrow:hover {
              background: #3a6f8f;
            }
            
            .texture-arrow:active {
                transform: scale(0.95);
            }
            
            .texture-arrow svg {
                transition: transform 0.2s ease;
            }
            
            .texture-arrow:hover svg {
                transform: scale(1.1);
            }
            
            .texture-arrow.left:hover svg {
                transform: translateX(-2px);
            }
            
            .texture-arrow.right:hover svg {
                transform: translateX(2px);
            }
            
            .texture-arrow.disabled {
                pointer-events: none;
                opacity: 0.5;
                background: rgba(0, 0, 0, 0.2);
            }
            
            .texture-counter {
                color: white;
                font-family: 'Poppins', sans-serif;
                font-size: 16px;
                background: rgba(0, 0, 0, 0.4);
                padding: 8px 15px;
                border-radius: 3px;
                min-width: 80px;
                text-align: center;
            }
            
            .title--container {
                display: flex;
                align-items: center;
                gap: 10px;
                position: relative;
                padding: 10px;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 5px;
                margin-bottom: 15px;
            }
            
            
            
            .title--counter {
                position: absolute;
                right: 8px;
                color: rgba(255, 255, 255, 0.7);
                font-size: 14px;
                padding: 3px 8px;
                border-radius: 3px;
            }


@media screen and (min-width: 2560px) {
    .storeleftmenu {
        zoom: 1.3;
        left: 5%;
    }

    .storeleftmenuclothingpart {
        zoom: 1.3;
        width: 600px;
        height: 55vh;
    }

    .storetoptext {
        font-size: 42px;
        left: 3%;
    }

    .storetoptext2 {
        font-size: 32px;
        left: 3%;
        top: 11%;
        width: 120px;
    }

    .storetoptext3 {
        font-size: 16px;
        left: 15%;
        width: 300px;
    }

    .storetexture {
        left: 45%;
        top: 40px;
        width: 400px;
    }

    .texture-title {
        font-size: 18px;
        top: -30px;
    }

    .texture-counter {
        font-size: 20px;
        min-width: 100px;
    }

    .texture-arrow {
        width: 50px;
        height: 50px;
    }

    .container--button button {
        font-size: 1.5vh;
        padding: 0.6vh 2.5vh;
    }

    .container--create--tenue {
        padding: 1.5vh;
    }

    .container--create--tenue span {
        font-size: 1.8vh;
    }

    .container--create--tenue input {
        font-size: 1.8vh;
        width: 38vh;
    }

    .storetoptext5 {
        width: 120px;
        left: 40px;
    }

    .container--logo {
        width: 120px;
        height: 120px;
    }

    .title--categorie {
        font-size: 2.4vh;
        margin-left: 2vh;
    }
}

@media screen and (min-width: 3840px) {
    .storeleftmenu {
        zoom: 2;
        left: 4%;
    }

    .storeleftmenuclothingpart {
        zoom: 2;
        width: 800px;
        height: 60vh;
    }

    .storetoptext {
        font-size: 56px;
        left: 2.5%;
    }

    .storetoptext2 {
        font-size: 42px;
        left: 2.5%;
        top: 12%;
        width: 160px;
    }

    .storetoptext3 {
        font-size: 22px;
        left: 18%;
        width: 400px;
    }

    .storetexture {
        left: 47%;
        top: 50px;
        width: 500px;
    }

    .texture-title {
        font-size: 24px;
        top: -35px;
    }

    .texture-counter {
        font-size: 26px;
        min-width: 120px;
        padding: 12px 20px;
    }

    .texture-arrow {
        width: 60px;
        height: 60px;
    }

    .container--button button {
        font-size: 1.8vh;
        padding: 0.8vh 3vh;
    }

    .container--create--tenue {
        padding: 2vh;
    }

    .container--create--tenue span {
        font-size: 2.2vh;
    }

    .container--create--tenue input {
        font-size: 2.2vh;
        width: 45vh;
        padding: 0.8vh 1.5vh;
    }

    .storetoptext5 {
        width: 150px;
        left: 50px;
    }

    .container--logo {
        width: 150px;
        height: 150px;
    }

    .title--categorie {
        font-size: 3vh;
        margin-left: 2.5vh;
    }

    .container--img {
        width: 9vh;
        height: 8vh;
    }

    .container--img span {
        font-size: 1.2vh;
    }

    .container--span span {
        font-size: 1.2vh;
    }

    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
    }
}

@media screen and (min-aspect-ratio: 21/9) {
    .storeleftmenu {
        left: 3%;
    }

    .storetexture {
        left: 48%;
    }

    .storetoptext5 {
        left: 35px;
    }
}
  </style>
  <body>
    <div class="storeall" style="display: none">
      <div class="stroeredeiu">
        <div class="container--create--tenue">
          <span>Créer une tenue</span>
          <input type="text" placeholder="Nom de la tenue" />
        </div>
        <div class="storeleftmenu">
          <div
            class="storeleftmenu_item"
            id="torso"
            onclick="menuclick('torso')"
          >
            <img src="img/veste.png" alt="" />
            <div class="storeleftmenu_item_name">Vestes</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="tshirt"
            onclick="menuclick('tshirt')"
          >
            <img src="img/tshirt.png" alt="" />
            <div class="storeleftmenu_item_name">Tee shirts</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="pants"
            onclick="menuclick('pants')"
          >
            <img src="img/pantalon.png" alt="" />
            <div class="storeleftmenu_item_name">Pantalons</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="shoes"
            onclick="menuclick('shoes')"
          >
            <img src="img/shoes.png" alt="" />
            <div class="storeleftmenu_item_name">Chaussures</div>
          </div>

          <div class="storeleftmenu_item" id="arms" onclick="menuclick('arms')">
            <img src="img/bras.png" alt="" />
            <div class="storeleftmenu_item_name">Bras</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="decals"
            onclick="menuclick('decals')"
          >
            <img src="img/auto.png" alt="" />
            <div class="storeleftmenu_item_name">Autocollants</div>
          </div>

          <div class="storeleftmenu_item" id="mask" onclick="menuclick('mask')">
            <img src="img/mask.png" alt="" />
            <div class="storeleftmenu_item_name">Masques</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="helmet"
            onclick="menuclick('helmet')"
          >
            <img src="img/helmet.png" alt="" />
            <div class="storeleftmenu_item_name">Chapeaux</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="glasses"
            onclick="menuclick('glasses')"
          >
            <img src="img/glasses.png" alt="" />
            <div class="storeleftmenu_item_name">Lunettes</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="watches"
            onclick="menuclick('watches')"
          >
            <img src="img/watches.png" alt="" />
            <div class="storeleftmenu_item_name">Montres</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="earrings"
            onclick="menuclick('earrings')"
          >
            <img src="img/earrings.png" alt="" />
            <div class="storeleftmenu_item_name">Oreilles</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="bracelets"
            onclick="menuclick('bracelets')"
          >
            <img src="img/bracelets.png" alt="" />
            <div class="storeleftmenu_item_name">Bracelets</div>
          </div>

          <div class="storeleftmenu_item" id="bag" onclick="menuclick('bag')">
            <img src="img/bag.png" alt="" />
            <div class="storeleftmenu_item_name">Sacs</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="bproof"
            onclick="menuclick('bproof')"
          >
            <img src="img/bproof.png" alt="" />
            <div class="storeleftmenu_item_name">Gilets</div>
          </div>

          <div
            class="storeleftmenu_item"
            id="chain"
            onclick="menuclick('chain')"
          >
            <img src="img/accesoires.png" alt="" />
            <div class="storeleftmenu_item_name">Accessoires</div>
          </div>
        </div>

        <span class="title--categorie" id="name--cat"></span>

        <div class="storeleftmenuclothingpart"></div>

        <div class="container--button">
          <button onclick="exitstore()">Annuler</button>
          <button id="create">Créer $0</button>
          <button id="single-purchase">Achat unique</button>
          <button onclick="camerachange()">🙌</button>
        </div>
      </div>

      <div class="storetexture" style="display: none">
        <div class="texture-title">Variation</div>
        <div class="texture-arrow left" onclick="changetexture('left')">
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="white"
            stroke-width="2"
          >
            <path d="M15 18l-6-6 6-6" />
          </svg>
        </div>
        <div class="texture-counter">0/0</div>
        <div class="texture-arrow right" onclick="changetexture('right')">
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="white"
            stroke-width="2"
          >
            <path d="M9 18l6-6-6-6" />
          </svg>
        </div>
      </div>

      <div class="container--logo">
        <img class="logo" src="fshop.png" alt="" />
      </div>

      <div class="storetoptext5">
        <div class="container--img">
          <img class="img--vetement" src="img/tshirt.png" alt="" />
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    let currentcompanents;
let currentCategory = "";
let selectedItems = {};
let notifyon = false;
let wardrobeon = false;
let texturename, clothingvalue, clothingprice, texturemax;
let currentpaytype;
let price = 0;
let lastCameraIndex = 1;
let isMaskShop = false;

const CAMERA_POSITIONS = {
  torso: { zoom: 55.0, height: 0.4 },
  tshirt: { zoom: 55.0, height: 0.4 },
  pants: { zoom: 35.0, height: -0.2 },
  shoes: { zoom: 50.0, height: -0.9 },
  mask: { zoom: 70.0, height: 0.7 },
  glasses: { zoom: 70.0, height: 0.7 },
  helmet: { zoom: 70.0, height: 0.7 },
};

window.addEventListener("message", function (event) {
  if (event.data.action === "storeopen") {
    $(".storeall").fadeIn(100);

    isMaskShop = event.data.typeopen === "mask";

    setupInterface(event.data);

    currentcompanents = event.data.companents;

    setTimeout(() => {
      menuclick(event.data.typeopen);
    }, 100);
  }

  if (event.data.action === "closestore") {
    closeShop();
  }
});

function menuclick(data) {
  if (!data || !currentcompanents) return;

  currentCategory = data;

  if (CAMERA_POSITIONS[data]) {
    $.post(
      "https://clothshop/setCameraPosition",
      JSON.stringify({
        zoom: CAMERA_POSITIONS[data].zoom,
        height: CAMERA_POSITIONS[data].height,
      })
    );
  }

  $(".storeleftmenu_item").each(function () {
    $(this)
      .removeClass("selected active hover")
      .css({
        "background-color": "",
        transform: "",
        transition: "all 0.2s ease",
      })
      .off("mouseenter mouseleave mousedown mouseup");
  });

  $("#" + data)
    .addClass("selected")
    .css({
      "background-color": window.colors.primary,
      transform: "scale(1.05)",
      transition: "all 0.2s ease",
    });

  $(".storeleftmenu_item:not(.selected)").each(function () {
    $(this)
      .hover(
        function () {
          if (!$(this).hasClass("selected")) {
            $(this).css({
              "background-color": window.colors.primary,
              transform: "scale(1.05)",
              transition: "all 0.2s ease",
            });
          }
        },
        function () {
          if (!$(this).hasClass("selected")) {
            $(this).css({
              "background-color": "",
              transform: "",
              transition: "all 0.2s ease",
            });
          }
        }
      )
      .mousedown(function () {
        if (!$(this).hasClass("selected")) {
          $(this).css({
            "background-color": window.colors.primaryHover,
            transform: "scale(0.95)",
            transition: "all 0.1s ease",
          });
        }
      })
      .mouseup(function () {
        if (!$(this).hasClass("selected")) {
          $(this).css({
            "background-color": window.colors.primary,
            transform: "scale(1.05)",
            transition: "all 0.1s ease",
          });
        }
      });
  });

  const components = currentcompanents[data];
  if (!components || !Array.isArray(components)) return;

  const categoryNames = {
    torso: "Vestes",
    tshirt: "Tee shirts",
    pants: "Pantalons",
    shoes: "Chaussures",
    arms: "Bras",
    decals: "Autocollants",
    chain: "Accessoires",
    mask: "Masques",
    helmet: "Chapeaux",
    glasses: "Lunettes",
    watches: "Montres",
    earrings: "Oreilles",
    bracelets: "Bracelets",
    bag: "Sacs",
    bproof: "Gilets",
    barbe: "Barbe",
    coiffure: "Coiffures",
    sourcils: "Sourcils",
    maquillage: "Maquillages",
    tatouages: "Tatouages",
  };

  const selectedItem = selectedItems[data];
  const currentIndex = selectedItem
    ? components.findIndex(
        (c) => c.itemvalue === selectedItem.value.itemvalue
      ) + 2
    : 1;
  const total = components.length + 1;

  $("#name--cat").html(`
    <div class="title--container">
        <span>${categoryNames[data] || data}</span>
        <span class="title--counter">< ${currentIndex}/${total} ></span>
    </div>
`);

  let htmlString = "";

  htmlString += `
    <div class="storeleftmenuclothingpart_item" 
        id="-1" 
        data-kid="-1" 
        data-clothingvalues='{"itemname":"Aucun","itemvalue":-1,"itemprice":0,"itemvaluename":"${data}_1"}'>
        <div class="container--span">
        </div>
            <img src="./img/debut.png" alt="Aucun">
    </div>
`;

  components.forEach((element, index) => {
    if (element) {
      const isSelected =
        selectedItems[data] && selectedItems[data].id === index.toString();
      const selectedClass = isSelected ? "selected-item" : "";

      htmlString += `
            <div class="storeleftmenuclothingpart_item ${selectedClass}" 
                id="${index}" 
                data-kid="${index}" 
                data-clothingvalues='${JSON.stringify(element)}'>
                <div class="container--span">
                    <span>$${formatMoney(element.itemprice || 0)}</span>
                </div>
                <img src="${
                  element.itemimage ||
                  "https://fshop.ovh/imgtenue/inconnu.png"
                }" 
                    onerror="this.src='https://fshop.ovh/imgtenue/inconnu.png'" 
                    alt="${element.itemname || "Item"}"
                />
            </div>
        `;
    }
  });

  $(".storeleftmenuclothingpart").html(htmlString).fadeIn(200);

  clothingshow();

  if (selectedItems[data] && selectedItems[data].id) {
    $(`#${selectedItems[data].id}`).css(
      "background",
      window.colors.primary
    );
  }
}

function resetInterface() {
  $(".storeleftmenuclothingpart").empty();
  $(".storetexture").hide();

  $(".storeleftmenu_item").each(function () {
    $(this)
      .removeClass("selected active hover")
      .css({
        "background-color": "",
        transform: "",
        transition: "all 0.2s ease",
      })
      .off("mouseenter mouseleave mousedown mouseup");
  });

  $(".storeleftmenuclothingpart_item").css("background", "#1414148a");
  $(".color-swatch").removeClass("selected");

  $(".texture-counter").text("0/0");

  if (isMaskShop) {
    const buttonContainer = $(".container--button");
    const exitButton = $('button[onclick="exitstore()"]');
    const cameraButton = $('button[onclick="camerachange()"]');
    const purchaseButton = $("#single-purchase");

    $("#create").show();
    $(".container--create--tenue").show();
    exitButton.show();

    $(".img--vetement").attr("src", "img/tshirt.png");
    cameraButton.html("🙌").css("background-color", "");
    purchaseButton.text("Achat unique").css("background-color", "");
    buttonContainer.removeClass("mask-shop");
  }

  $("#create").text("Créer $0");
  $(".container--create--tenue input").val("");
  $("#totalinsert").html("$0");

  lastCameraIndex = 1;

  $(".notify").fadeOut(0);
  notifyon = false;

  selectedItems = {};
  currentCategory = "";
  texturename = null;
  clothingvalue = null;
  clothingprice = null;
  texturemax = null;
  currentpaytype = null;
  price = 0;
}

function setupInterface(data) {
  resetInterface();
  setupClothingInterface(data);
}

function handleRotation(direction) {
  $.post("https://clothshop/rotate", JSON.stringify({ key: direction }));
}

function closeShop() {
  $(".storeall").fadeOut(500);
  $(".storetexture").fadeOut(0);
  $(".askforsave").fadeOut(0);
  $(".storeleftmenuclothingpart").fadeOut(0);
  resetAll();
}

function resetAll() {
  selectedItems = {};
  currentCategory = "";
  price = 0;
  texturename = null;
  clothingvalue = null;
  clothingprice = null;
  currentpaytype = null;
  currentHairColor = 1;
  currentOpacity = 1.0;
  currentTattooZone = "head";

  $("#create").text("Créer $0");
  $(".container--create--tenue input").val("");
  $(".storeleftmenuclothingpart_item").css("background", "#1414148a");
  $("#opacitySlider").val(100);
  resetMenuItems();
}

function purchaseItem() {
  if (!selectedItems[currentCategory]) return;

  const purchaseData = {
    type: isInBarberShop
      ? "barber"
      : isInTattooShop
      ? "tattoo"
      : "clothing",
    item: selectedItems[currentCategory],
    price: selectedItems[currentCategory].price,
    color: isInBarberShop ? currentHairColor : undefined,
    opacity: currentOpacity,
    zone: isInTattooShop ? currentTattooZone : undefined,
  };

  $.post("https://clothshop/purchase", JSON.stringify(purchaseData));
}

window.addEventListener("keyup", function (event) {
  if (event.key === "Escape") {
    if (wardrobeon) {
      $(".wardrobe_all").fadeOut(300);
      $.post("https://clothshop/closenuiward", JSON.stringify({}));
      wardrobeon = false;
    } else {
      closeShop();
    }
  } else if (event.key === "q") {
    handleRotation("left");
  } else if (event.key === "d") {
    handleRotation("right");
  }
});

$(document).ready(function () {
  initializeEventListeners();
});

function initializeEventListeners() {
  $("#create").click(createOutfit);
  $("#single-purchase").click(singlePurchase);

  $('button[onclick="camerachange()"]').click(() => {
    $.post("https://clothshop/camerachange", JSON.stringify({}));
  });

  $(".rotation-controls button").click(function () {
    handleRotation($(this).data("direction"));
  });
}

function formatMoney(number, decPlaces, decSep, thouSep) {
  decPlaces = isNaN((decPlaces = Math.abs(decPlaces))) ? 2 : decPlaces;
  decSep = typeof decSep === "undefined" ? "." : decSep;
  thouSep = typeof thouSep === "undefined" ? "," : thouSep;
  var sign = number < 0 ? "-" : "";
  var i = String(
    parseInt((number = Math.abs(Number(number) || 0).toFixed(decPlaces)))
  );
  var j = (j = i.length) > 3 ? j % 3 : 0;

  return (
    sign +
    (j ? i.substr(0, j) + thouSep : "") +
    i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
    (decPlaces
      ? decSep +
        Math.abs(number - i)
          .toFixed(decPlaces)
          .slice(2)
      : "")
  );
}

function updateMaxTextures(clothingtype, value) {
  if (!clothingtype) return;

  $.post(
    "https://clothshop/getMaxTextures",
    JSON.stringify({
      component: clothingtype,
      value: value,
    }),
    function (maxTextures) {
      texturemax = maxTextures;
      $(".texture-counter").text(`0/${maxTextures}`);
    }
  );
}

function changetexture(type) {
  if (!texturename || !clothingvalue || !selectedItems[currentCategory])
    return;

  let currentValue =
    parseInt($(".texture-counter").text().split("/")[0]) || 0;
  const max = parseInt(texturemax) || 0;

  if (type === "left") {
    currentValue = currentValue > 0 ? currentValue - 1 : max;
  } else {
    currentValue = currentValue < max ? currentValue + 1 : 0;
  }

  $(".texture-counter").text(`${currentValue}/${max}`);

  selectedItems[currentCategory].value.texture = currentValue;

  $.post(
    "https://clothshop/texturechange",
    JSON.stringify({
      clothingtype: texturename,
      texturevalue: currentValue,
      clothingvalue: clothingvalue,
      isProp: isPropItem(texturename),
    })
  );

  $.post("https://clothshop/sosend", JSON.stringify(selectedItems));
}

function isPropItem(itemName) {
  return [
    "glasses_1",
    "helmet_1",
    "ears_1",
    "watches_1",
    "bracelets_1",
  ].includes(itemName);
}

function notifyfuntion(text, time) {
  if (!notifyon) {
    $(".notify").fadeIn(300);
    $(".notify").html("⚠️ " + text);
    notifyon = true;

    setTimeout(() => {
      $(".notify").fadeOut(300);
      notifyon = false;
    }, Number(time));
  }
}

function clothingshow() {
  let isProcessingClick = false;

  $(".storeleftmenuclothingpart_item").each(function () {
    $(this)
      .off("click")
      .on("click", function (e) {
        if (isProcessingClick) return;
        isProcessingClick = true;

        try {
          const data = $(this).data("clothingvalues");
          if (!data) {
            isProcessingClick = false;
            return;
          }

          $(".storeleftmenuclothingpart_item")
            .css({
              background: "#1414148a",
              transform: "",
              transition: "all 0.2s ease",
            })
            .removeClass("selected-item");

          const id = $(this).attr("data-kid");
          if (id === undefined) {
            isProcessingClick = false;
            return;
          }

          handleItemSelection(id, data, $(this));

          isProcessingClick = false;
        } catch (error) {
          console.error("Error in clothing item click:", error);
          isProcessingClick = false;
        }
      });
  });
}

function handleItemSelection(id, data, element) {
  texturename = data.itemvaluename;
  clothingvalue = data.itemvalue;
  clothingprice = data.itemprice || 0;

  if (id === "-1") {
    handleNoneSelection();
  } else {
    handleClothingSelection(id, data, element);
  }

  updateInterface();
  sendDataToServer(data);
}

function handleNoneSelection() {
  if (selectedItems[currentCategory]) {
    price -= selectedItems[currentCategory].price;
    delete selectedItems[currentCategory];
  }
}

function handleClothingSelection(id, data, element) {
  const wasSelected =
    selectedItems[currentCategory] &&
    selectedItems[currentCategory].id === id;

  if (selectedItems[currentCategory]) {
    price -= selectedItems[currentCategory].price;

    $(`#${selectedItems[currentCategory].id}`)
      .css("background", "#1414148a")
      .removeClass("selected-item");

    delete selectedItems[currentCategory];
  }

  if (!wasSelected) {
    if (isMaskShop) {
      $(".storeleftmenuclothingpart_item").each(function () {
        if ($(this).attr("id") !== id) {
          $(this)
            .css("background", "#1414148a")
            .removeClass("selected-item");
        }
      });

      Object.keys(selectedItems).forEach((key) => {
        if (key.includes("mask")) {
          price -= selectedItems[key].price;
          delete selectedItems[key];
        }
      });
    }

    element
      .css("background", window.colors.primary)
      .addClass("selected-item");
    selectedItems[currentCategory] = {
      id: id,
      name: data.itemvaluename,
      price: data.itemprice || 0,
      value: {
        ...data,
        texture: 0,
      },
    };
    price += data.itemprice || 0;

    initializeTextureCounter(data.itemvaluename, data.itemvalue);
  }
}

function updateInterface() {
  if (!isMaskShop) {
    $("#create").text(`Créer $${price}`);
  }
  $(".storetexture").fadeIn(200);

  const components = currentcompanents[currentCategory];
  const total = components.length + 1;
  const currentIndex = selectedItems[currentCategory]
    ? parseInt(selectedItems[currentCategory].id) + 2
    : 1;
  $(".title--counter").text(`< ${currentIndex}/${total} >`);
}

function sendDataToServer(data) {
  $.post(
    "https://clothshop/showthiscloth",
    JSON.stringify({
      ...data,
      image: data.itemimage || "./inconnu.png",
    })
  );
  $.post("https://clothshop/sosend", JSON.stringify(selectedItems));
}

function createOutfit() {
  const outfitName = $(".container--create--tenue input").val();
  if (!outfitName) {
    notifyfuntion("Entrez un nom pour la tenue", 2000);
    return;
  }

  if (Object.keys(selectedItems).length === 0) {
    notifyfuntion("Sélectionnez au moins un vêtement", 2000);
    return;
  }

  $.post(
    "https://clothshop/pay3",
    JSON.stringify({
      data: currentpaytype || "bank",
      wardrobename: outfitName,
    })
  );
}

function singlePurchase() {
  const itemCount = Object.keys(selectedItems).length;
  if (itemCount !== 1) {
    notifyfuntion(
      "Sélectionnez un seul vêtement pour l'achat unique",
      2000
    );
    return;
  }

  const selectedItem = Object.values(selectedItems)[0];
  if (!selectedItem) return;

  $.post(
    "https://clothshop/pay",
    JSON.stringify({
      data: "bank",
      items: {
        ...selectedItems,
        texture: selectedItem.value.texture,
      },
    })
  );
}

function controlmenu(data) {
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      const element = data[key];
      $("#" + key)[element ? "fadeIn" : "fadeOut"](0);
    }
  }
}

function ordercheck(data) {
  $(".storerightmenu_center").html("");
  data.forEach((element, i) => {
    $(".storerightmenu_center").append(`
        <div class="storerightmenu_center_item"> 
            <div class="storerightmenu_center_item_img"><img src="bill.svg" alt=""></div> 
            <div class="storerightmenu_center_item_text">${
              element.itemname
            }</div> 
            <div class="storerightmenu_center_item_text2">Price: <div style="color:#3AFF89; width: 100%; margin-left:5px; ">$ ${formatMoney(
              element.itemprice
            )}</div></div> 
            <div class="storerightmenu_center_item_remove" data-deleteorder="${
              i + 1
            }"> 
                <img src="remove.svg" alt="" style="margin: 5px;"> 
            </div> 
        </div>`);
  });
  deleteorder();
}

function deleteorder() {
  $(".storerightmenu_center_item_remove").click(function () {
    const data = $(this).data("deleteorder");
    $.post("https://clothshop/deleteorder", JSON.stringify(data));
  });
}

function setupClothingInterface(data) {
  resetInterface();

  if (isMaskShop) {
    setupMaskShop();
  } else {
    setupNormalClothingShop();
  }

  controlmenu(data.Statuts);
  ordercheck(data.orderlist);
  currentcompanents = data.companents;
  $("#totalinsert").html("$" + formatMoney(data.totalmoney));

  setupClothingEvents();
}

function setupMaskShop() {
  const buttonContainer = $(".container--button");
  const exitButton = $('button[onclick="exitstore()"]');
  const cameraButton = $('button[onclick="camerachange()"]');
  const purchaseButton = $("#single-purchase");

  $("#create").hide();
  $(".container--create--tenue").hide();
  exitButton.hide();

  cameraButton.detach().insertBefore(purchaseButton);

  $(".img--vetement").attr("src", "img/accesoires.png");

  // Styler le conteneur des boutons
  buttonContainer.addClass("mask-shop").css({
    display: "flex",
    "justify-content": "center", // Centre les boutons horizontalement
    width: "100%",
    padding: "0 20px", // Marge uniforme gauche/droite
    gap: "2px", // Espace entre les boutons
    margin: "0 auto", // Centre le conteneur lui-même
  });

  cameraButton.html("📷").css({
    "background-color": "#dc3545",
    transition: "all 0.3s ease",
  });

  purchaseButton.text("Acheter").css({
    "background-color": "#28a745",
    transition: "all 0.3s ease",
  });
}

function setupNormalClothingShop() {
  const buttonContainer = $(".container--button");
  const exitButton = $('button[onclick="exitstore()"]');
  const cameraButton = $('button[onclick="camerachange()"]');
  const purchaseButton = $("#single-purchase");

  $("#create").show();
  $(".container--create--tenue").show();
  exitButton.show();

  cameraButton.detach().insertAfter(purchaseButton);

  $(".img--vetement").attr("src", "img/tshirt.png");
  cameraButton.html("📷").css({
    "background-color": "#14141494",
    transition: "all 0.3s ease",
  });
  purchaseButton.text("Achat unique").css({
    "background-color": "#275cd9",
    transition: "all 0.3s ease",
  });
  buttonContainer.removeClass("mask-shop");
}

function setupClothingEvents() {
  $("#create")
    .off("click")
    .on("click", function () {
      handleCreateOutfit();
    });

  $("#single-purchase")
    .off("click")
    .on("click", function () {
      handleSinglePurchase();
    });

  $('button[onclick="camerachange()"]')
    .off("click")
    .on("click", function () {
      handleCameraChange();
    });
}

function handleCreateOutfit() {
  const outfitName = $(".container--create--tenue input").val();

  // Validation du nom de la tenue
  if (!outfitName || outfitName.trim() === "") {
    notifyfuntion("Entrez un nom pour la tenue", 2000);
    return;
  }

  // Vérification qu'il y a des items sélectionnés
  if (Object.keys(selectedItems).length === 0) {
    notifyfuntion("Sélectionnez au moins un vêtement", 2000);
    return;
  }

  // Création des données pour la requête
  const orderList = [];
  let totalPrice = 0;

  // Transformation des items sélectionnés
  for (const [category, item] of Object.entries(selectedItems)) {
    if (item && item.value) {
      orderList.push({
        itemname: item.value.itemname,
        itemvalue: item.value.itemvalue,
        itemprice: item.price,
        itemvaluename: item.value.itemvaluename,
        texture: item.value.texture || 0,
      });
      totalPrice += item.price;
    }
  }

  // Envoi au serveur
  $.post(
    "https://clothshop/pay3",
    JSON.stringify({
      data: currentpaytype || "bank",
      wardrobename: outfitName,
      items: orderList,
      totalPrice: totalPrice,
    })
  );

  // Réinitialisation de l'interface
  $(".container--create--tenue input").val("");
  $("#create").text("Créer $0");
}

function handleSinglePurchase() {
  const itemCount = Object.keys(selectedItems).length;
  if (itemCount !== 1) {
    notifyfuntion(
      "Sélectionnez un seul vêtement pour l'achat unique",
      2000
    );
    return;
  }

  const selectedItem = Object.values(selectedItems)[0];
  $.post(
    "https://clothshop/pay",
    JSON.stringify({
      data: "bank",
      items: {
        ...selectedItems,
        texture: selectedItem.value.texture,
      },
    })
  );
}

function handleCameraChange() {
  lastCameraIndex++;
  if (lastCameraIndex > Object.keys(CAMERA_POSITIONS).length) {
    lastCameraIndex = 1;
  }

  const currentPosition =
    Object.values(CAMERA_POSITIONS)[lastCameraIndex - 1];
  $.post(
    "https://clothshop/setCameraPosition",
    JSON.stringify(currentPosition)
  );
}

$(document).ready(function () {
  initializeEventListeners();
  setupKeyboardControls();
});

function setupKeyboardControls() {
  $(document).keyup(function (e) {
    if (e.key === "Escape") {
      if (wardrobeon) {
        $(".wardrobe_all").fadeOut(300);
        $.post("https://clothshop/closenuiward", JSON.stringify({}));
        wardrobeon = false;
      } else {
        exitstore();
      }
      resetAll();
    }
  });
}

function exitstore() {
  $(".storeall").fadeOut(500);
  $(".storetexture").fadeOut(0);
  $(".askforsave").fadeOut(0);
  $(".storeleftmenuclothingpart").fadeOut(0);

  resetAll();

  lastCameraIndex = 1;

  $.post("https://clothshop/exitstore", JSON.stringify({}));

  isMaskShop = false;

  selectedItems = {};
  currentCategory = "";

  texturename = null;
  clothingvalue = null;
  clothingprice = null;
  texturemax = null;

  price = 0;
  currentpaytype = null;
}

function resetMenuItems() {
  $(".storeleftmenu_item").each(function () {
    $(this).removeClass("selected active hover").css({
      "background-color": "",
      transform: "",
      transition: "all 0.2s ease",
    });

    $(this).off("mouseenter mouseleave mousedown mouseup");

    if (!$(this).hasClass("selected")) {
      $(this).hover(
        function () {
          $(this).css({
            "background-color": window.colors.primary,
            transform: "scale(1.05)",
            transition: "all 0.2s ease",
          });
        },
        function () {
          $(this).css({
            "background-color": "",
            transform: "",
            transition: "all 0.2s ease",
          });
        }
      );
    }

    $(this)
      .mousedown(function () {
        if (!$(this).hasClass("selected")) {
          $(this).css({
            "background-color": window.colors.primaryHover,
            transform: "scale(0.95)",
            transition: "all 0.1s ease",
          });
        }
      })
      .mouseup(function () {
        if (!$(this).hasClass("selected")) {
          $(this).css({
            "background-color": window.colors.primary,
            transform: "scale(1.05)",
            transition: "all 0.1s ease",
          });
        }
      });
  });

  $(".storeleftmenuclothingpart_item").each(function () {
    $(this)
      .css({
        background: "#1414148a",
        transform: "",
        transition: "all 0.2s ease",
      })
      .removeClass("selected-item");
  });

  if (
    currentCategory &&
    currentcompanents &&
    currentcompanents[currentCategory]
  ) {
    const total = currentcompanents[currentCategory].length + 1;
    $(".title--counter").text(`< 1/${total} >`);
  }

  $(".texture-counter").text("0/0");
  $("#name--cat").empty();
}

// Compteur normal
function updateItemCounter() {
  if (
    !currentCategory ||
    !currentcompanents ||
    !currentcompanents[currentCategory]
  )
    return;

  const components = currentcompanents[currentCategory];
  const total = components.length + 1;
  const currentIndex = selectedItems[currentCategory]
    ? parseInt(selectedItems[currentCategory].id) + 2
    : 1;

  $(".title--counter").text(`< ${currentIndex}/${total} >`);
}

function initializeTextureCounter(clothingtype, value) {
  if (!clothingtype) return;

  $.post(
    "https://clothshop/getMaxTextures",
    JSON.stringify({
      component: clothingtype,
      value: value,
      isProp: isPropItem(clothingtype),
    }),
    function (maxTextures) {
      texturemax = maxTextures;

      $(".texture-counter").text(`0/${maxTextures}`);

      if (maxTextures > 0) {
        $(".storetexture").fadeIn(200);
      } else {
        $(".storetexture").fadeOut(200);
      }
    }
  );
}


const styleSheet = document.createElement("style");
document.head.appendChild(styleSheet);

function camerachange() {
  $.post("https://clothshop/camerachange", JSON.stringify());
}

document.addEventListener('DOMContentLoaded', () => {
const root = document.documentElement;
root.style.setProperty('--primary-color', window.colors.primary);
});


function updateCSSColors() {
const styleElement = document.createElement('style');
styleElement.textContent = `
    :root {
        --primary-color: ${window.colors.primary};
        --primary-hover: ${window.colors.primaryHover};
    }

    .storeleftmenu_item:hover {
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    .texture-arrow:hover {
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    .selected-item {
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    .storeleftmenu_item.selected {
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    .container--img {
        width: 7vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1vh;
        justify-content: space-evenly;
        height: 6vh;
        background: var(--primary-color);
        border-radius: 1px;
    }
`;
document.head.appendChild(styleElement);

// Remplacer les couleurs dans les feuilles de style existantes
const styleSheets = document.styleSheets;
for (let sheet of styleSheets) {
    try {
        const rules = sheet.cssRules || sheet.rules;
        for (let rule of rules) {
            if (rule.style) {
                let cssText = rule.cssText;
                cssText = cssText.replace(/#5296b9/g, 'var(--primary-color)');
                cssText = cssText.replace(/#3a6f8f/g, 'var(--primary-hover)');
                cssText = cssText.replace(/border: 1px solid #5296b9/g, 'border: 1px solid var(--primary-color)');
                
                if (cssText !== rule.cssText) {
                    sheet.deleteRule(Array.prototype.indexOf.call(rules, rule));
                    sheet.insertRule(cssText, rules.length);
                }
            }
        }
    } catch (e) {
        console.warn('Unable to process stylesheet:', e);
    }
}
}

document.addEventListener('DOMContentLoaded', updateCSSColors);


// Responsive JS Functions
const ResponsiveManager = {
    // Configurations pour différentes résolutions
    breakpoints: {
        '1080p': {
            width: 1920,
            height: 1080,
            zoom: 1,
            menuScale: 1
        },
        '2k': {
            width: 2560,
            height: 1440,
            zoom: 1.3,
            menuScale: 1.2
        },
        '4k': {
            width: 3840,
            height: 2160,
            zoom: 2,
            menuScale: 1.5
        }
    },

    // Initialisation
    init() {
        this.updateResponsiveLayout();
        window.addEventListener('resize', () => this.updateResponsiveLayout());
        this.setupDynamicSizing();
    },

    // Mise à jour du layout responsive
    updateResponsiveLayout() {
        const width = window.innerWidth;
        const height = window.innerHeight;
        let currentBreakpoint = this.getCurrentBreakpoint(width);
        
        this.applyBreakpointStyles(currentBreakpoint);
        this.updateMenuScaling(currentBreakpoint);
        this.updateTextSizes(currentBreakpoint);
        this.updateLayoutPositions(currentBreakpoint);
    },

    // Obtenir le breakpoint actuel
    getCurrentBreakpoint(width) {
        if (width >= 3840) return this.breakpoints['4k'];
        if (width >= 2560) return this.breakpoints['2k'];
        return this.breakpoints['1080p'];
    },

    // Application des styles spécifiques au breakpoint
    applyBreakpointStyles(breakpoint) {
        const root = document.documentElement;
        root.style.setProperty('--base-zoom', breakpoint.zoom);
        root.style.setProperty('--menu-scale', breakpoint.menuScale);
        
        // Mise à jour des styles pour l'interface
        this.updateInterfaceStyles(breakpoint);
    },

    // Mise à jour du scaling des menus
    updateMenuScaling(breakpoint) {
        const menuElements = {
            leftMenu: document.querySelector('.storeleftmenu'),
            clothingPart: document.querySelector('.storeleftmenuclothingpart'),
            rightMenu: document.querySelector('.storerightmenu')
        };

        Object.values(menuElements).forEach(element => {
            if (element) {
                element.style.transform = `scale(${breakpoint.menuScale})`;
            }
        });
    },

    // Mise à jour des tailles de texte
    updateTextSizes(breakpoint) {
        const textElements = document.querySelectorAll([
            '.storetoptext',
            '.storetoptext2',
            '.storetoptext3',
            '.storeleftmenu_item_name',
            '.texture-title'
        ].join(','));

        textElements.forEach(element => {
            element.style.fontSize = `calc(var(--base-font-size) * ${breakpoint.zoom})`;
        });
    },

    // Mise à jour des positions du layout
    updateLayoutPositions(breakpoint) {
        const positions = {
            leftMenu: { left: '5%' },
            texture: { left: '45%' },
            rightMenu: { right: '2%' }
        };

        Object.entries(positions).forEach(([key, value]) => {
            const element = document.querySelector(`.store${key.toLowerCase()}`);
            if (element) {
                Object.entries(value).forEach(([prop, val]) => {
                    element.style[prop] = val;
                });
            }
        });
    },

    // Configuration du dimensionnement dynamique
    setupDynamicSizing() {
        const resizeObserver = new ResizeObserver(entries => {
            entries.forEach(entry => {
                if (entry.contentRect) {
                    this.updateResponsiveLayout();
                }
            });
        });

        resizeObserver.observe(document.body);
    },

    // Mise à jour des styles d'interface
    updateInterfaceStyles(breakpoint) {
        // Création et application des styles CSS dynamiques
        const dynamicStyles = `
            @media screen and (min-width: ${breakpoint.width}px) {
                .storeleftmenu {
                    zoom: ${breakpoint.zoom};
                    left: 5%;
                }

                .storeleftmenuclothingpart {
                    zoom: ${breakpoint.zoom};
                    width: ${600 * breakpoint.menuScale}px;
                    height: ${55 * breakpoint.menuScale}vh;
                }

                .storetoptext {
                    font-size: ${32 * breakpoint.zoom}px;
                }

                .storetoptext2 {
                    font-size: ${24 * breakpoint.zoom}px;
                }

                .storetexture {
                    width: ${300 * breakpoint.menuScale}px;
                }

                .texture-counter {
                    font-size: ${16 * breakpoint.zoom}px;
                }

                .container--button button {
                    font-size: ${1.2 * breakpoint.zoom}vh;
                    padding: ${0.4 * breakpoint.zoom}vh ${2 * breakpoint.zoom}vh;
                }

                .container--create--tenue input {
                    width: ${31 * breakpoint.zoom}vh;
                    font-size: ${1.5 * breakpoint.zoom}vh;
                }

                .container--img {
                    width: ${7 * breakpoint.zoom}vh;
                    height: ${6 * breakpoint.zoom}vh;
                }
            }

            @media screen and (min-aspect-ratio: 21/9) {
                .storeleftmenu {
                    left: 3%;
                }

                .storetexture {
                    left: 48%;
                }
            }
        `;

        // Application des styles
        let styleElement = document.getElementById('responsive-styles');
        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.id = 'responsive-styles';
            document.head.appendChild(styleElement);
        }
        styleElement.textContent = dynamicStyles;
    }
};

// Initialisation du gestionnaire responsive
document.addEventListener('DOMContentLoaded', () => {
    ResponsiveManager.init();
    
    // Gestion des événements de redimensionnement spécifiques aux éléments
    const resizeElements = document.querySelectorAll('.storeleftmenuclothingpart_item');
    resizeElements.forEach(element => {
        element.addEventListener('click', () => {
            ResponsiveManager.updateResponsiveLayout();
        });
    });
});

// CSS Variables pour le responsive
const cssVariables = `
:root {
    --base-font-size: 16px;
    --base-zoom: 1;
    --menu-scale: 1;
    --primary-color: var(--primary);
    --primary-hover: var(--primary-hover);
}

/* Responsive Base Styles */
.storeleftmenu,
.storerightmenu,
.storetexture {
    transform-origin: top left;
    transition: transform 0.3s ease;
}

.storeleftmenuclothingpart {
    transform-origin: top left;
    transition: all 0.3s ease;
}

/* Responsive Utilities */
.responsive-hidden {
    display: none !important;
}

.responsive-visible {
    display: block !important;
}

/* Touch Device Optimizations */
@media (hover: none) {
    .storeleftmenu_item:hover,
    .texture-arrow:hover {
        transform: none;
    }

    .container--button button {
        padding: calc(0.6 * var(--base-zoom))vh calc(2.5 * var(--base-zoom))vh;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .storeleftmenu_item img,
    .container--logo .logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
`;

// Ajout des styles CSS au document
const styleElement = document.createElement('style');
styleElement.textContent = cssVariables;
document.head.appendChild(styleElement);
  </script>
</html>
