<!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;
    /* max-width: 40%; */
    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%;
    /* height: 10px; */
    /* background-color: red; */
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #ffffffa3;
    font-weight: 400;
    /* margin-left: 45px; */
    text-align: center;
    margin-top: 20px;
  }

  .storeleftmenuclothingpart_item_bottom {
    position: relative;
    margin-top: 33px;
    /* border: 1px solid #FFFFFF0A; */
    /* 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; */
    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;

    /* margin-top: 10px; */
  }

  .storerightmenu {
    position: absolute;
    right: 1.5%;
    top: 9%;
    width: 320px;
    height: 700px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* background-color: blue; */
    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;
    /* background-color: red; */
    /* 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: 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;
    /* 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;
    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;
  }
  .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 {
    /* margin-bottom: -0.5vh; */
    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 {
    /* border: 2px solid white; */
    width: 7vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1vh;
    /* padding: 1vh 0; */
    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 Query pour 2K (2560x1440) */
          @media screen and (min-width: 2560px) {
            
            .storetoptext {
              font-size: 42px;
              left: 3%;
            }
          
            .storetoptext2 {
              font-size: 32px;
              left: 3.1%; 
              top: 11.4%;
            }
          
            .storetoptext3 {
              font-size: 16px;
              left: 13%;
            }
            
            .storeleftmenu {
              left: 8.5%;
              gap: 15px;
            }
          
            .storeleftmenu_item {
              width: 85px !important;
              height: 85px !important;
            }
          
            .storeleftmenu_item_name {
              font-size: 12px;
            }
          
            .storeleftmenu_item img {
              width: 3vh;
              margin-top: 2vh;
            }
          
            .storeleftmenuclothingpart {
              width: 600px;
              height: 55vh;
            }
          
            .storeleftmenuclothingpart_item {
              width: 140px !important;
              height: 140px !important;
            }
          
            .storeleftmenuclothingpart_item_text {
              font-size: 16px;
              margin-top: 25px;
            }
          
            .container--button button {
              font-size: 1.4vh;
              padding: 0.6vh 2.5vh;
            }
          
            .container--create--tenue input {
              width: 38vh;
              font-size: 1.8vh;
            }
          
            .container--create--tenue span {
              font-size: 1.8vh;
            }
          
            .title--categorie {
              font-size: 2.4vh;
            }
          
            .texture-counter {
              font-size: 18px;
              min-width: 100px;
            }
          
            .texture-arrow svg {
              width: 24px;
              height: 24px;
            }
          }
          
          /* Media Query pour 4K (3840x2160) */
          @media screen and (min-width: 3840px) {
          
            .storetoptext {
              font-size: 56px;
              left: 4%;
            }
          
            .storetoptext2 {
              font-size: 42px;
              left: 4.1%;
              top: 12.4%;
            }
          
            .storetoptext3 {
              font-size: 20px;
              left: 14%;
            }
          
            .storeleftmenu {
              left: 9.5%;
              gap: 20px;
            }
          
            .storeleftmenu_item {
              width: 110px !important;
              height: 110px !important;
            }
          
            .storeleftmenu_item_name {
              font-size: 14px;
            }
          
            .storeleftmenu_item img {
              width: 4vh;
              margin-top: 2.5vh;
            }
          
            .storeleftmenuclothingpart {
              width: 800px;
              height: 60vh;
            }
          
            .storeleftmenuclothingpart_item {
              width: 180px !important;
              height: 180px !important;
            }
          
            .storeleftmenuclothingpart_item_text {
              font-size: 18px;
              margin-top: 30px;
            }
          
            .container--button button {
              font-size: 1.6vh;
              padding: 0.8vh 3vh;
            }
          
            .container--create--tenue input {
              width: 45vh;
              font-size: 2vh;
            }
          
            .container--create--tenue span {
              font-size: 2vh;
            }
          
            .title--categorie {
              font-size: 2.8vh;
            }
          
            .texture-counter {
              font-size: 22px;
              min-width: 120px;
            }
          
            .texture-arrow svg {
              width: 28px; 
              height: 28px;
            }
          
            .container--img {
              width: 9vh;
              height: 8vh;
            }
          
            .container--img span {
              font-size: 1.1vh;
            }
          
            .container--logo {
              width: 130px;
              height: 130px;
            }
          
            .container--logo .logo {
              width: 7vh;
            }
          
            .storetexture {
              left: 45%;
              width: 400px;
            }
          }
          
          /* Variables CSS communes */
          :root {
            --transition-speed: 0.3s;
            --border-radius: 3px;
          }
          
          /* Transitions fluides */
          .storeleftmenu_item,
          .container--button button,
          .texture-arrow,
          .storeleftmenuclothingpart_item {
            transition: all var(--transition-speed) ease;
          }
          
          /* Optimisations de performance */
          .storeleftmenuclothingpart {
            will-change: transform;
            backface-visibility: hidden;
          }
          
          /* Support écrans Retina */
          @media
          (-webkit-min-device-pixel-ratio: 2),
          (min-resolution: 192dpi) {
            .storeleftmenu_item img,
            .container--logo .logo,
            .storeleftmenuclothingpart_item img {
              image-rendering: -webkit-optimize-contrast;
            }
          }

                    /* Ajouts pour écrans 2K */
          @media screen and (min-width: 2560px) {
            /* Ajouts manquants */
            .storerightmenu {
              width: 400px;
              right: 2%;
            }
          
            .storerightmenu_center_item {
              height: 50px;
            }
          
            .storerightmenu_center_item_text,
            .storerightmenu_center_item_text2 {
              font-size: 14px;
            }
          
            .storerightmenu_bottom1_text,
            .storerightmenu_bottom2_button1_text {
              font-size: 16px;
            }
          
            .stroeredeiu {
              width: 52vh;
              height: 82vh;
            }
          
            .texture-arrow {
              width: 50px;
              height: 50px;
            }
          }
          
          /* Ajouts pour écrans 4K */
          @media screen and (min-width: 3840px) {
            /* Ajouts manquants */ 
            .storerightmenu {
              width: 500px;
              right: 2.5%;
            }
          
            .storerightmenu_center_item {
              height: 60px;
            }
          
            .storerightmenu_center_item_text,
            .storerightmenu_center_item_text2 {
              font-size: 16px;
            }
          
            .storerightmenu_bottom1_text,
            .storerightmenu_bottom2_button1_text {
              font-size: 18px;
            }
          
            .stroeredeiu {
              width: 60vh;
              height: 85vh;
            }
          
            /* Ajustements des boutons de texture */
            .texture-arrow {
              width: 60px;
              height: 60px;
            }
          
            .texture-title {
              font-size: 18px;
              top: -30px;
            }
          
            /* Ajustements notifications */
            .notify {
              font-size: 16px;
              padding: 15px 25px;
            }
          }
          
          /* Ajout de variables pour une meilleure cohérence */
          :root {
            --menu-padding: 1.5vh;
            --menu-border-radius: 5px;
            --menu-background: rgba(0, 0, 0, 0.4);
          }
          
</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 {
        background: var(--primary-color);
    }
`;

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);
</script>
</html>
