create searchBox section

2024-06-10 13:18:04 +03:30
parent 5310ec4dbc
commit c8bfc3c177
22 changed files with 1124 additions and 596 deletions
@@ -2,6 +2,23 @@
    
    <NuxtLoadingIndicator color="#ffbe33" :duration="1" :throttle="0"/>
    <NuxtLayout />
-    <NuxtPage />
+    <div @click="showSearchBox = false">
+        <NuxtPage />
+    </div>
    <NuxtLayout name="footer"/>
 </template>
+
+<script setup>
+const showSearchBox = useState("showSearchBox");
+watch(showSearchBox, ()=>{
+if (process.client) {
+    if (showSearchBox.value === true) {
+     document.body.classList.add('overflow-hidden')   
+    }else{
+        document.body.classList.remove('overflow-hidden') 
+    }
+}
+})
+
+
+</script>
@@ -92,7 +92,7 @@
                </div>
                <div class="flex justify-between">
                 
-                    <NuxtLink :to="`${props.course?.id}`"
+                    <NuxtLink :to="`${props.course?._id}`"
                        class="font-[500] mt-[0.5vw] flex items-center justify-center gap-[0.417vw]  md:h-[2.292vw] px-[4.103vw] md:px-0 py-[2.308vw] md:py-[0.521vw] bg-primaryGreen text-white text-[3.19vw] md:text-[0.833vw] rounded-[2.564vw] md:rounded-[0.521vw] md:w-[7.917vw]">
                        شروع دوره
                        <svg
@@ -129,7 +129,7 @@
                                </linearGradient>
                            </defs>
                        </svg>
-                        <span class="absolute top-[0.9vw] left-[0.9vw] text-[#383E43] font-bold thin text-[0.833vw]">{{props.course.satisfactionLevel}}</span>
+                        <span class="absolute top-[0.9vw] w-[1.5vw] text-center left-[0.4vw] text-[#383E43] font-bold thin text-[0.833vw]">{{props.course.averageRating}}</span>
                    </span>
                </div>

@@ -141,9 +141,7 @@
 <script setup>
 import { useToast } from 'vue-toastification'
 const props = defineProps(['course']);
-const MyArray = ['Salam','Man','Sadegh','Hastam'];
 const toast = useToast()
-console.log(props);
 function hideEndOfString(inputString) {
    const words = inputString.split(' ');
    if (words.length > 8) {
@@ -21,7 +21,8 @@

    <!-- comment 1 -->
    <div
-      class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
+    v-for="item in props.props" :key="item.id"
+      class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
    >
      <img
        src="/public/images/client1.png"
@@ -29,7 +30,7 @@
        class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
      />

-      <div class="ps-[3vw] md:ps-[1vw]">
+      <div class="ps-[3vw] md:ps-[1vw] w-full">
        <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
          علی مصلحی
        </p>
@@ -40,10 +41,8 @@
          <p
            class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
          >
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
-            در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
-            نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
+          {{ item.text }}
+
          </p>
        </div>
      </div>
@@ -73,7 +72,7 @@
    </div>

    <!-- comment 2 -->
-    <div
+    <!-- <div
      class="mt-[4vw] md:mt-[1vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
    >
      <div class="flex justify-between relative p-[4vw] md:p-[1.55vw]">
@@ -179,5 +178,10 @@
          />
        </svg>
      </div>
-    </div>
-</template>
+    </div> -->
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+
+</script>
@@ -61,8 +61,9 @@
        class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
      >
        <div
-:class="`w-[${props.props.completionPercentage}%]`"
-          class=" rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
+          :class="`w-[${props.props.completionPercentage}%]`"
+          
+          class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
        >
      <!-- {{props.props.completionPercentage}} -->
      </div>
@@ -74,6 +75,8 @@
 <script setup>
 const adad = 2;
 const props = defineProps(['props'])
+
+
 </script>
 <style scoped>
 #progressbar {
@@ -84,7 +87,6 @@ const props = defineProps(['props'])
  #progressbar > div {
    background-color: #0d3f40;
    float: left;
-  
    left: 0;
  }
 </style>
@@ -1,201 +1,215 @@
 <template>
-    <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
-        <NuxtImg
-        :placeholder="[30, 20]"
-          :src="props.props.image"
-          alt="html"
-          class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
-        />
-        <div class="mt-[14vw] ms-[9.5vw] z-[1] text-white">
-          <h1
-            class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
+  <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
+    <NuxtImg
+      :placeholder="[30, 20]"
+      :src="props.props.image"
+      alt="html"
+      class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
+    />
+    <div class="mt-[14vw] ms-[9.5vw] z-[1] text-white">
+      <h1 class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]">
+        {{ props.props.name }}
+      </h1>
+      <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
+        {{ props.props.categories[0].name }}
+      </p>
+      <p
+        class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
+      >
+        {{ props.props.description }}
+      </p>
+      <p
+        class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
+      >
+        مدرس دوره :
+        <span class="text-[3.59vw] md:text-[1.055vw] text-white ms-[1vw]"
+          >حمیدرضا عبادی</span
+        >
+      </p>
+      <div
+        class="w-[39.896vw] mt-[3.2vw] flex flex-col md:flex-row justify-between absolute left-0 bottom-[8vw] md:bottom-auto md:relative space-y-[2vw] md:space-y-0"
+      >
+        <div class="flex gap-[1vw] items-center">
+          <svg
+            class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
+            viewBox="0 0 37 37"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
          >
-           {{ props.props.name }} 
-          </h1>
-          <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
-            {{props.props.categories[0].name}}
-          </p>
-          <p
-            class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
+            <path
+              d="M12.3335 3.08331V7.70831"
+              stroke="white"
+              stroke-width="2"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M24.6665 3.08331V7.70831"
+              stroke="white"
+              stroke-width="2"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M5.396 14.0137H31.6043"
+              stroke="white"
+              stroke-width="2"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M32.375 13.1041V26.2083C32.375 30.8333 30.0625 33.9166 24.6667 33.9166H12.3333C6.9375 33.9166 4.625 30.8333 4.625 26.2083V13.1041C4.625 8.47915 6.9375 5.39581 12.3333 5.39581H24.6667C30.0625 5.39581 32.375 8.47915 32.375 13.1041Z"
+              stroke="white"
+              stroke-width="2"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M24.196 21.1209H24.2098"
+              stroke="white"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M24.196 25.7459H24.2098"
+              stroke="white"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M18.4928 21.1209H18.5067"
+              stroke="white"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M18.4928 25.7459H18.5067"
+              stroke="white"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M12.7873 21.1209H12.8011"
+              stroke="white"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M12.7873 25.7459H12.8011"
+              stroke="white"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div class="space-y-[0.3vw]">
+            <p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
+            <p class="text-[2.518vw] md:text-[0.741vw]">
+        {{ shamsi[2] }} / {{ shamsi[1] }} / {{ shamsi[0] }}
+            </p>
+          </div>
+        </div>
+        <div class="border-l"></div>
+        <div class="flex gap-[1vw] items-center">
+          <svg
+            class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
+            viewBox="0 0 37 37"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
          >
-       {{props.props.description}}
-          </p>
-          <p
-            class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
+            <path
+              d="M33.9168 18.5C33.9168 27.01 27.0102 33.9166 18.5002 33.9166C9.99016 33.9166 3.0835 27.01 3.0835 18.5C3.0835 9.98998 9.99016 3.08331 18.5002 3.08331C27.0102 3.08331 33.9168 9.98998 33.9168 18.5Z"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M24.2197 23.4025L19.4405 20.5504C18.608 20.0571 17.9297 18.87 17.9297 17.8988V11.5779"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+
+          <div class="space-y-[0.3vw]">
+            <p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
+            <p class="text-[2.518vw] md:text-[0.741vw]">
+              {{ props.props.duration }} ساعت
+            </p>
+          </div>
+        </div>
+        <div class="border-l"></div>
+        <div class="flex gap-[1vw] items-center">
+          <svg
+            class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
+            viewBox="0 0 37 37"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
          >
-            مدرس دوره :
-            <span class="text-[3.59vw] md:text-[1.055vw] text-white ms-[1vw]"
-              >حمیدرضا عبادی</span
-            >
-          </p>
-          <div
-            class="w-[39.896vw] mt-[3.2vw] flex flex-col md:flex-row justify-between absolute left-0 bottom-[8vw] md:bottom-auto md:relative space-y-[2vw] md:space-y-0"
-          >
-            <div class="flex gap-[1vw] items-center">
-              <svg
-                class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
-                viewBox="0 0 37 37"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12.3335 3.08331V7.70831"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M24.6665 3.08331V7.70831"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M5.396 14.0137H31.6043"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M32.375 13.1041V26.2083C32.375 30.8333 30.0625 33.9166 24.6667 33.9166H12.3333C6.9375 33.9166 4.625 30.8333 4.625 26.2083V13.1041C4.625 8.47915 6.9375 5.39581 12.3333 5.39581H24.6667C30.0625 5.39581 32.375 8.47915 32.375 13.1041Z"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M24.196 21.1209H24.2098"
-                  stroke="white"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M24.196 25.7459H24.2098"
-                  stroke="white"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M18.4928 21.1209H18.5067"
-                  stroke="white"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M18.4928 25.7459H18.5067"
-                  stroke="white"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M12.7873 21.1209H12.8011"
-                  stroke="white"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M12.7873 25.7459H12.8011"
-                  stroke="white"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-              <div class="space-y-[0.3vw]">
-                <p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.createdAt}}</p>
-              </div>
-            </div>
-            <div class="border-l"></div>
-            <div class="flex gap-[1vw] items-center">
-              <svg
-                class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
-                viewBox="0 0 37 37"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M33.9168 18.5C33.9168 27.01 27.0102 33.9166 18.5002 33.9166C9.99016 33.9166 3.0835 27.01 3.0835 18.5C3.0835 9.98998 9.99016 3.08331 18.5002 3.08331C27.0102 3.08331 33.9168 9.98998 33.9168 18.5Z"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M24.2197 23.4025L19.4405 20.5504C18.608 20.0571 17.9297 18.87 17.9297 17.8988V11.5779"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-  
-              <div class="space-y-[0.3vw]">
-                <p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.duration}} ساعت</p>
-              </div>
-            </div>
-            <div class="border-l"></div>
-            <div class="flex gap-[1vw] items-center">
-              <svg
-                class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
-                viewBox="0 0 37 37"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M14.1215 16.7579C13.9673 16.7425 13.7823 16.7425 13.6127 16.7579C9.94353 16.6346 7.02979 13.6283 7.02979 9.92831C7.02979 6.15123 10.0823 3.08331 13.8748 3.08331C17.6519 3.08331 20.7198 6.15123 20.7198 9.92831C20.7044 13.6283 17.7906 16.6346 14.1215 16.7579Z"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M25.2986 6.16669C28.2894 6.16669 30.6944 8.5871 30.6944 11.5625C30.6944 14.4763 28.3819 16.8504 25.499 16.9584C25.3756 16.9429 25.2369 16.9429 25.0981 16.9584"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M6.41336 22.4467C2.68253 24.9442 2.68253 29.0142 6.41336 31.4963C10.6529 34.3329 17.6059 34.3329 21.8454 31.4963C25.5763 28.9988 25.5763 24.9288 21.8454 22.4467C17.6213 19.6254 10.6684 19.6254 6.41336 22.4467Z"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M28.2739 30.8333C29.3839 30.6021 30.4323 30.155 31.2956 29.4921C33.7006 27.6883 33.7006 24.7129 31.2956 22.9091C30.4477 22.2616 29.4148 21.83 28.3202 21.5833"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-  
-              <div class="space-y-[0.3vw]">
-                <p class="text-[3.59vw] md:text-[1.055vw]">{{props.props.studentsCount}}</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
-              </div>
-            </div>
+            <path
+              d="M14.1215 16.7579C13.9673 16.7425 13.7823 16.7425 13.6127 16.7579C9.94353 16.6346 7.02979 13.6283 7.02979 9.92831C7.02979 6.15123 10.0823 3.08331 13.8748 3.08331C17.6519 3.08331 20.7198 6.15123 20.7198 9.92831C20.7044 13.6283 17.7906 16.6346 14.1215 16.7579Z"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M25.2986 6.16669C28.2894 6.16669 30.6944 8.5871 30.6944 11.5625C30.6944 14.4763 28.3819 16.8504 25.499 16.9584C25.3756 16.9429 25.2369 16.9429 25.0981 16.9584"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M6.41336 22.4467C2.68253 24.9442 2.68253 29.0142 6.41336 31.4963C10.6529 34.3329 17.6059 34.3329 21.8454 31.4963C25.5763 28.9988 25.5763 24.9288 21.8454 22.4467C17.6213 19.6254 10.6684 19.6254 6.41336 22.4467Z"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M28.2739 30.8333C29.3839 30.6021 30.4323 30.155 31.2956 29.4921C33.7006 27.6883 33.7006 24.7129 31.2956 22.9091C30.4477 22.2616 29.4148 21.83 28.3202 21.5833"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+
+          <div class="space-y-[0.3vw]">
+            <p class="text-[3.59vw] md:text-[1.055vw]">
+              {{ props.props.studentsCount }}
+            </p>
+            <p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
          </div>
        </div>
      </div>
+    </div>
+  </div>
 </template>

 <script setup>
-const props = defineProps(['props'])
+const props = defineProps(["props"]);
+const isoDateString = props.props.createdAt;
+const dateObject = new Date(isoDateString);
+const year = dateObject.getFullYear();
+const month = dateObject.getMonth() + 1;
+const day = dateObject.getDate();
+const hours = dateObject.getHours();
+const minutes = dateObject.getMinutes();
+const seconds = dateObject.getSeconds();

+
+const shamsi = gregorian_to_jalali(year,month,day)
 </script>
@@ -18,18 +18,21 @@
    >
  </div>
  <div class="mt-[6vw] md:mt-[2.1vw] space-y-[3vw] md:space-y-[1vw] thin">
-    <div
-      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
+    <div 
+    v-for="headline in props.props.courseHeadlines" :key="headline.id"
+      class="px-[3vw] md:px-[0.4vw] flex items-center bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
    >
-      <div class="flex items-center relative">
+      <div class="flex items-center relative basis-5/6 md:basis-3/6 w-full">
        <span
-          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
+          class=" border-b-[0.15vw] border-[#878787] px-[1vw] md:px-[0.5vw] ms-[0.3vw] me-[2vw] md:me-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
        >
-          1
+          {{ props.props.courseHeadlines.indexOf(headline)+1 }}
        </span>
-        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
+        <h2 class="border-r ps-[2.2vw]">{{ headline.headline }}</h2>
      </div>
-      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
+
+
+      <div class="hidden md:flex items-center text-[0.833vw] w-full  md:basis-2/6">
        <span>08:55</span>
        <svg
          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
@@ -54,97 +57,7 @@
        </svg>
      </div>

-      <div class="flex gap-[1vw] pe-[1vw]">
-        <svg
-          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9 11V17L11 15"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M9 17L7 15"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-
-        <svg
-          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-miterlimit="10"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>
-    </div>
-    <div
-      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
-    >
-      <div class="flex items-center relative">
-        <span
-          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
-        >
-          1
-        </span>
-        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
-      </div>
-      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
-        <span>08:55</span>
-        <svg
-          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>
-
-      <div class="flex gap-[1vw] pe-[1vw]">
+      <div class="flex gap-[1vw] basis-1/6  md:basis-1/6 w-full text-end justify-end md:pe-[2vw]">
        <svg
          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
          viewBox="0 0 24 24"
@@ -199,106 +112,52 @@
      </div>
    </div>

-    <div
-      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
-    >
-      <div class="flex items-center relative">
-        <span
-          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
-        >
-          1
-        </span>
-        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
-      </div>
-      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
-        <span>08:55</span>
-        <svg
-          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>

-      <div class="flex gap-[1vw] pe-[1vw]">
-        <svg
-          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9 11V17L11 15"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M9 17L7 15"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>

-        <svg
-          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-miterlimit="10"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>
-    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
  </div>
 </template>

+
+
+
+<script setup>
+const props = defineProps(['props'])
+
+</script>
+
+
+
+
+
 <style scoped>
 .borderb::before {
    content: "";
    position: absolute;
    bottom: 0;
-    right: 1.1vw;
-    width: 1vw;
+    right: 1vw;
+    width: 1.5vw;
    background: #878787;
    height: 0.208vw;
    border-radius: 20vw;
@@ -76,7 +76,11 @@
        <div
          class="relative navigator flexBox gap-[2.2vw] text-[0.938vw] text-[#383E43] font-medium"
        >
-          <div id="searchBox" class="hidden absolute right-0 w-full">
+          <div
+            v-if="showSearchBox"
+            id="searchBox"
+            class="absolute right-0 w-full"
+          >
            <svg
              class="h-[1.406vw] w-[1.406vw] absolute top-[0.5vw] right-[1vw]"
              viewBox="0 0 26 27"
@@ -100,14 +104,21 @@
            </svg>

            <input
+              autofocus
+              id="searchElement"
+              v-model="search"
+              @click="logClick(true)"
+              @blur="logClick(false)"
              type="text"
              placeholder="نام آموزش، دوره و... را وارد کنید"
              class="thin w-full h-[2.604vw] rounded-[0.521vw] bg-[#F5F5F5] text-[#878787] text-[0.658vw] ps-[3vw]"
            />
          </div>

-
-          <div class="border-e pe-[0.8vw] cursor-pointer" @click="openSearchBox">
+          <div
+            class="border-e pe-[0.8vw] cursor-pointer"
+            @click="openSearchBox"
+          >
            <svg
              width="1.458vw"
              height="1.406vw"
@@ -145,7 +156,7 @@
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M6.94 2.5H18.05C21.61 2.5 22.5 3.39 22.5 6.94V13.27C22.5 16.83 21.61 17.71 18.06 17.71H6.94C3.39 17.72 2.5 16.83 2.5 13.28V6.94C2.5 3.39 3.39 2.5 6.94 2.5Z"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -153,7 +164,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M12.5 17.72V22.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -161,7 +172,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M2.5 13.5H22.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -169,7 +180,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                  d="M8 22.5H17"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -182,8 +193,9 @@
            </span>
          </nuxt-link>
          <nuxt-link to="/courses">
-            <span class="flexBox gap-[0.6vw]"
-            :class="{ 'text-primaryGreen': $route.path === '/courses' }"
+            <span
+              class="flexBox gap-[0.6vw]"
+              :class="{ 'text-primaryGreen': $route.path === '/courses' }"
            >
              <svg
                width="1.302vw"
@@ -193,7 +205,7 @@
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                  d="M10.55 3.03004L4.53002 6.96004C2.60002 8.22004 2.60002 11.04 4.53002 12.3L10.55 16.23C11.63 16.94 13.41 16.94 14.49 16.23L20.48 12.3C22.4 11.04 22.4 8.23004 20.48 6.97004L14.49 3.04004C13.41 2.32004 11.63 2.32004 10.55 3.03004Z"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -201,7 +213,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                  d="M6.13012 13.58L6.12012 18.27C6.12012 19.54 7.10012 20.9 8.30012 21.3L11.4901 22.36C12.0401 22.54 12.9501 22.54 13.5101 22.36L16.7001 21.3C17.9001 20.9 18.8801 19.54 18.8801 18.27V13.63"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -209,7 +221,7 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                  d="M21.8999 15.5V9.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -219,12 +231,11 @@
              </svg>
              دوره های آموزشی
            </span>
-
          </nuxt-link>
-          <nuxt-link to="/about-us"
-          >
-            <span class="flexBox gap-[0.6vw]"
-            :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
+          <nuxt-link to="/about-us">
+            <span
+              class="flexBox gap-[0.6vw]"
+              :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
            >
              <svg
                width="1.302vw"
@@ -234,7 +245,9 @@
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  :class="{
+                    'stroke-primaryGreen': $route.path === '/about-us',
+                  }"
                  d="M12.5 22.5C18 22.5 22.5 18 22.5 12.5C22.5 7 18 2.5 12.5 2.5C7 2.5 2.5 7 2.5 12.5C2.5 18 7 22.5 12.5 22.5Z"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -242,7 +255,9 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  :class="{
+                    'stroke-primaryGreen': $route.path === '/about-us',
+                  }"
                  d="M12.5 8.5V13.5"
                  stroke="#383E43"
                  stroke-width="1.5"
@@ -250,7 +265,9 @@
                  stroke-linejoin="round"
                />
                <path
-                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  :class="{
+                    'stroke-primaryGreen': $route.path === '/about-us',
+                  }"
                  d="M12.4946 16.5H12.5036"
                  stroke="#383E43"
                  stroke-width="2"
@@ -258,7 +275,7 @@
                  stroke-linejoin="round"
                />
              </svg>
-  
+
              درباره ما</span
            >
          </nuxt-link>
@@ -266,36 +283,126 @@

        <nuxt-link to="/account" v-if="authUser">
          <img
-            src="/images/Profile.png"
+            :src="authUser?.avatarMedia"
            alt="profile"
            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
          />
        </nuxt-link>
        <nuxt-link to="/login" v-else>
-          <svg 
-          class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
-          viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path opacity="0.4" d="M13.5 2.25C10.5525 2.25 8.15625 4.64625 8.15625 7.59375C8.15625 10.485 10.4175 12.825 13.365 12.9262C13.455 12.915 13.545 12.915 13.6125 12.9262C13.635 12.9262 13.6462 12.9262 13.6687 12.9262C13.68 12.9262 13.68 12.9262 13.6912 12.9262C16.5712 12.825 18.8325 10.485 18.8437 7.59375C18.8437 4.64625 16.4475 2.25 13.5 2.25Z" fill="#878787"/>
-            <path d="M19.2151 15.9187C16.0763 13.8262 10.9576 13.8262 7.79633 15.9187C6.36758 16.875 5.58008 18.1687 5.58008 19.5525C5.58008 20.9362 6.36758 22.2187 7.78508 23.1637C9.36008 24.2212 11.4301 24.75 13.5001 24.75C15.5701 24.75 17.6401 24.2212 19.2151 23.1637C20.6326 22.2075 21.4201 20.925 21.4201 19.53C21.4088 18.1462 20.6326 16.8637 19.2151 15.9187Z" fill="#878787"/>
-            </svg>
-
+          <svg
+            class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
+            viewBox="0 0 27 27"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              opacity="0.4"
+              d="M13.5 2.25C10.5525 2.25 8.15625 4.64625 8.15625 7.59375C8.15625 10.485 10.4175 12.825 13.365 12.9262C13.455 12.915 13.545 12.915 13.6125 12.9262C13.635 12.9262 13.6462 12.9262 13.6687 12.9262C13.68 12.9262 13.68 12.9262 13.6912 12.9262C16.5712 12.825 18.8325 10.485 18.8437 7.59375C18.8437 4.64625 16.4475 2.25 13.5 2.25Z"
+              fill="#878787"
+            />
+            <path
+              d="M19.2151 15.9187C16.0763 13.8262 10.9576 13.8262 7.79633 15.9187C6.36758 16.875 5.58008 18.1687 5.58008 19.5525C5.58008 20.9362 6.36758 22.2187 7.78508 23.1637C9.36008 24.2212 11.4301 24.75 13.5001 24.75C15.5701 24.75 17.6401 24.2212 19.2151 23.1637C20.6326 22.2075 21.4201 20.925 21.4201 19.53C21.4088 18.1462 20.6326 16.8637 19.2151 15.9187Z"
+              fill="#878787"
+            />
+          </svg>
        </nuxt-link>
-          
-          
      </div>
    </nav>
+    <div
+      v-if="showSearchBox"
+      class="z-[10] w-[28vw] pt-[0.5vw] pb-[2vw] flex flex-col absolute mt-[8vw] rounded-[0.521vw] bg-[#F5F5F5] border shadow-md"
+    >
+      <span
+        class="text-[0.vw] w-full text-end pe-[0.8vw] cursor-pointer"
+        @click="closeSearchBox"
+        >بستن</span
+      >
+
+      <div class="flexBox mt-[1vw] text-[0.8vw]" v-if="search?.length < 3">
+        برای جستجو حداقل 3 کلمه وارد کنید...
+      </div>
+
+      <div v-else>
+        <p v-if="data.courses.length < 1" class="flexBox mt-[1vw] text-[0.8vw]">
+          دوره ای یافت نشد !!!
+        </p>
+
+        <div v-else class="cursor-pointer px-[1vw] pt-[2vw] space-y-[1.5vw]">
+          <div
+          @click="goToCourse(item?._id)"
+            v-for="item in data.courses"
+            :key="item.id"
+            class="flex justify-between items-center"
+          >
+            <div class="flex gap-[0.5vw]">
+              <img :src="item.image" alt="" class="h-[2.5vw] rounded-[0.2vw]" />
+              <div>
+                <p class="text-[0.8vw]">
+                  {{ item.name }}
+                </p>
+                <p class="text-[0.6vw]">{{ item.categories[0].name }}</p>
+              </div>
+            </div>
+            <p class="text-[0.7vw]">مشاهده دوره</p>
+          </div>
+        </div>
+      </div>
+      <!-- <div v-for="item in data.courses" :key="item.id">{{ item.name }}</div> -->
+    </div>
  </div>
 </template>


 <script setup>
 const { authUser } = useAuth();
-  const openSearchBox = () =>{
-   
-    if (process.client) {
-      document.getElementById('searchBox').classList.add('!block')
-    }
+const showSearchBox = useState("showSearchBox", () => false);
+const search = ref(null);
+const openSearchBox = () => {
+  search.value = "";
+  showSearchBox.value = true;
+  if (process.client) {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
  }
-onMounted(() => {
-  })
+};
+const router = useRouter();
+const goToCourse = (val) =>{
+  router.push({
+    path: `/${val}`,
+  });
+  showSearchBox.value = false;
+
+} 
+const closeSearchBox = () => {
+  showSearchBox.value = false;
+  if (process.client) {
+    document.body.classList.remove("overflow-hidden");
+  }
+};
+
+const query = ref({});
+const { data, refresh, pending } = await useFetch(() => "/api/course", {
+  method: "POST",
+  query: query,
+});
+watch(search, () => {
+  query.value = { name: search.value };
+  refresh();
+  console.log("data", data.value.courses.length);
+  //// console.log(search.value.length);
+});
+// watch(showSearchBox.value === false, () =>{
+//   // showSearchBox.value = null
+//   console.log('s');
+// })
+
+// function logClick(isInside) {
+//   if (isInside) {
+//     console.log("لاگ صحیح: داخل input کلیک شد.");
+//   } else {
+//     showSearchBox.value = false;
+//   }
+// }
 </script>
@@ -10,14 +10,17 @@ export default defineNuxtConfig({
    '@nuxtjs/tailwindcss',
    '@nuxt/image',
    'vue3-carousel-nuxt',
-    "@formkit/nuxt"
+    "@formkit/nuxt",
  ],
+  
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: '~/tailwind.config.js',
  },
-  
+
  build: {
    transpile: ["vue-toastification"],
+    
+    
 },
 })
@@ -5,10 +5,17 @@
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
+    "start": "PORT=5805 HOST=127.0.0.1 node .output/server/index.mjs",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
+
+
+
+
+
+  
  "dependencies": {
    "@formkit/nuxt": "^1.6.5",
    "@nuxt/image": "^1.7.0",
@@ -1,6 +1,6 @@
 <template>
  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
-    <product-page-course-detailsHeader :props="data.course"/>
+    <product-page-course-detailsHeader :props="data.course" />
    <div
      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
    >
@@ -8,25 +8,236 @@
        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
      >
        <product-page-course-detailsDescription :props="data.course" />
-        <product-page-course-detailsHeadlines :props="data.course"/>
-        <product-page-course-detailsComments :props="data.course"/>
+        test
+        <product-page-course-detailsHeadlines :props="data.course" />
+
+        <!-- <product-page-course-detailsComments :props="data.comments" /> -->
+        <div
+          class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
+        >
+          <svg
+            class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+            viewBox="0 0 10 53"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+              fill="#0D3F40"
+            />
+          </svg>
+          <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
+            >نظرات</span
+          >
+        </div>
+
+        <!-- comment 1 -->
+        <div
+          v-for="item in data.comments"
+          :key="item.id"
+          class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
+        >
+          <img
+            src="/public/images/client1.png"
+            alt="profile"
+            class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+          />
+
+          <div class="ps-[3vw] md:ps-[1vw] w-full">
+            <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+              علی مصلحی
+            </p>
+            <div class="thin">
+              <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+                1402/09/14
+              </p>
+              <p
+                class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+              >
+                {{ item.text }}
+              </p>
+            </div>
+
+            <div
+              v-for="reply in item.replies"
+              :key="reply.id"
+              class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
+            >
+              <img
+                src="/public/images/client3.png"
+                alt="profile"
+                class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+              />
+
+              <div class="ps-[3vw] md:ps-[1vw] w-full">
+                <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                  علی مصلحی
+                </p>
+                <div class="thin">
+                  <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+                    1402/09/14
+                  </p>
+                  <p
+                    class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+                  >
+                 {{ reply.text }}
+                  </p>
+                </div>
+              </div>
+
+              <!-- <svg
+                @click="sendReplay(reply.id)"
+                class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg> -->
+            </div>
+
+
+
+       
+          </div>
+
+          <svg
+            @click="sendReplay(item.id)"
+            class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+              stroke="#383E43"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+              stroke="#383E43"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
      </div>
      <div class="w-full md:w-[23.438vw] text-[#383E43]">
-        <product-page-course-detailsCourse-status :props="data.course"/>
-        <product-page-course-detailsCourse-information :props="data.course"/>
+        <product-page-course-detailsCourse-status :props="data.course" />
+        <product-page-course-detailsCourse-information :props="data.course" />
+      </div>
+    </div>
+
+    <div
+      class="w-[63.438vw] bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]"
+    >
+      <div class="space-y-[5vw] md:space-y-[1vw]">
+        <div class="flex gap-[1vw]">
+          <img
+            src="/public/images/client1.png"
+            alt=""
+            class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
+          />
+          <div
+            class="space-y-[4vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0"
+          >
+            <p class="text-[3.59vw] md:text-[0.938vw]">علی مصلحی</p>
+            <p
+              v-if="replayTarget === null"
+              class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+            >
+              پرسش جدید
+            </p>
+            <p v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+              پاسخ به علی مصلحی
+            </p>
+          </div>
+        </div>
+        <textarea
+          v-model="comment"
+          class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
+          name=""
+          id=""
+          cols="30"
+          rows="10"
+        ></textarea>
+        <div
+          class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white"
+        >
+          <button
+            @click="deleteComment"
+            class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
+          >
+            حذف
+          </button>
+          <button
+            @click="sendComment"
+            class="cursor-pointer h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-primaryGreen"
+          >
+            ثبت
+          </button>
+        </div>
      </div>
    </div>
  </div>
 </template>

 <script setup>
+import { useToast } from "vue-toastification";
+const toast = useToast();
 const route = useRoute();
-const  {data}  = await useFetch("/api/productId", {
-    method: "POST",
-      body: {
-        id: route.params.product,
-      },
-  })
-console.log(data.value.course);
+const replayTarget = ref(null);
+const { data, refresh } = await useFetch("/api/productId", {
+  method: "POST",
+  body: {
+    id: route.params.product,
+  },
+});
+console.log(data.value.comments[0]);
+const comment = ref(null);

+const sendComment = async () => {
+  if (comment.value === "" || comment.value === null) {
+    return toast.error("متن خود را وارد کنید");
+  }
+  const comments = await useFetch("/api/comments/sendcomment", {
+    method: "POST",
+    query: {
+      id: data.value.course._id,
+    },
+    body: {
+      text: comment.value,
+      parent: replayTarget.value,
+    },
+  });
+  comment.value = null;
+  toast.success("نظر شما با موفقیت ثبت شد");
+  refresh();
+};
+
+const sendReplay = (id) => {
+  replayTarget.value = id;
+};
+const deleteComment = () => {
+  replayTarget.value = null;
+  comment.value = null;
+};
 </script>
@@ -1,148 +1,191 @@
 <template>
  <div class="flex justify-between flex-col text-[#383E43]">
+   
    <div class="relative">
      <img
-        src="/public/images/client3.png"
+        :src="authUser?.avatarMedia"
        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
        alt=""
      />
-      <svg
-        class="h-[10.769vw] md:h-[2.188vw] w-[10.769vw] md:w-[2.188vw] absolute -bottom-[0.2vw] right-[4vw] md:right-[0.7vw]"
-        viewBox="0 0 42 42"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="21" cy="21" r="21" fill="#0D3F40" />
-        <path
-          d="M10.167 19.9167V17.75C10.167 13.9583 12.3337 12.3333 15.5837 12.3333H26.417C29.667 12.3333 31.8337 13.9583 31.8337 17.75V24.25C31.8337 28.0417 29.667 29.6667 26.417 29.6667H21.0003"
-          stroke="white"
-          stroke-width="2"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M21.0003 23.7083C22.4961 23.7083 23.7087 22.4958 23.7087 21C23.7087 19.5042 22.4961 18.2917 21.0003 18.2917C19.5046 18.2917 18.292 19.5042 18.292 21C18.292 22.4958 19.5046 23.7083 21.0003 23.7083Z"
-          stroke="white"
-          stroke-width="2"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M28.042 18.2917V23.7083"
-          stroke="white"
-          stroke-width="2"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M10.167 24.7917H15.952C16.6454 24.7917 17.2087 25.355 17.2087 26.0483V27.435"
-          stroke="white"
-          stroke-width="1.5"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M11.4886 23.47L10.167 24.7917L11.4886 26.1133"
-          stroke="white"
-          stroke-width="1.5"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M17.2087 30.5117H11.4236C10.7303 30.5117 10.167 29.9483 10.167 29.255V27.8683"
-          stroke="white"
-          stroke-width="1.5"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M15.8887 31.8337L17.2103 30.512L15.8887 29.1903"
-          stroke="white"
-          stroke-width="1.5"
-          stroke-miterlimit="10"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-    <FormKit type="form" @submit="edit" :incomplete-message="false" :actions="false">
-    <div class="relative items-center gap-[5vw] md:gap-0 grid grid-cols-1 md:grid-cols-2 mt-[2vw] w-full md:w-[65%]">
-      <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
-        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
-        <input type="text" name="name"
-         :value="authUser?.phone"
-         readonly
-         class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
-        />
-      </div>
-      <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
-        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
-          >نام و نام خانوادگی</label
+      <label for="file-upload" class="custom-file-upload">
+        <svg
+          class="h-[10.769vw] md:h-[2.188vw] w-[10.769vw] md:w-[2.188vw] absolute -bottom-[0.2vw] right-[4vw] md:right-[0.7vw]"
+          viewBox="0 0 42 42"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
        >
+          <circle cx="21" cy="21" r="21" fill="#0D3F40" />
+          <path
+            d="M10.167 19.9167V17.75C10.167 13.9583 12.3337 12.3333 15.5837 12.3333H26.417C29.667 12.3333 31.8337 13.9583 31.8337 17.75V24.25C31.8337 28.0417 29.667 29.6667 26.417 29.6667H21.0003"
+            stroke="white"
+            stroke-width="2"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M21.0003 23.7083C22.4961 23.7083 23.7087 22.4958 23.7087 21C23.7087 19.5042 22.4961 18.2917 21.0003 18.2917C19.5046 18.2917 18.292 19.5042 18.292 21C18.292 22.4958 19.5046 23.7083 21.0003 23.7083Z"
+            stroke="white"
+            stroke-width="2"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M28.042 18.2917V23.7083"
+            stroke="white"
+            stroke-width="2"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M10.167 24.7917H15.952C16.6454 24.7917 17.2087 25.355 17.2087 26.0483V27.435"
+            stroke="white"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M11.4886 23.47L10.167 24.7917L11.4886 26.1133"
+            stroke="white"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M17.2087 30.5117H11.4236C10.7303 30.5117 10.167 29.9483 10.167 29.255V27.8683"
+            stroke="white"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M15.8887 31.8337L17.2103 30.512L15.8887 29.1903"
+            stroke="white"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </label>
+      <input type="file" id="file-upload" @change="changePhoto" />
+    </div>
+
+
+    <FormKit
+      type="form"
+      @submit="edit"
+      :incomplete-message="false"
+      :actions="false"
+    >
+      <div
+        class="relative items-center gap-[5vw] md:gap-0 grid grid-cols-1 md:grid-cols-2 mt-[2vw] w-full md:w-[65%]"
+      >
+        <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
+          <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
+            >شماره موبایل</label
+          >
+          <input
+            type="text"
+            name="name"
+            :value="authUser?.phone"
+            readonly
+            class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
+          />
+        </div>
+        <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
+          <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
+            >نام و نام خانوادگی</label
+          >
+          <FormKit
+            name="name"
+            :value="authUser?.name"
+            type="text"
+            input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
+          />
+        </div>
+        <div class="flex flex-col space-y-[0.2vw]">
+          <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
+            >نام کاربری</label
+          >
+          <FormKit
+            name="userName"
+            :value="authUser?.userName"
+            type="text"
+            input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
+          />
+        </div>
+        <div class="flex flex-col space-y-[0.2vw]">
+          <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
+            >ایمیل</label
+          >
+          <FormKit
+            name="email"
+            :value="authUser?.email"
+            type="text"
+            input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
+          />
+        </div>
        <FormKit
-        name="name"
-        :value="authUser?.name"
-          type="text"
-          input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
-        />
-      </div>
-      <div class="flex flex-col space-y-[0.2vw]">
-        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">نام کاربری</label>
-        <FormKit
-        name="userName"
-        :value="authUser?.userName"
-          type="text"
-          input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
-        />
-      </div>
-      <div class="flex flex-col space-y-[0.2vw]">
-        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">ایمیل</label>
-        <FormKit
-        name="email"
-        :value="authUser?.email"
-          type="text"
-          input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
-        />
-      </div>
-      <FormKit
-      input-class="
+          input-class="
      text-[3.59vw] md:text-[0.833vw] absolute md:left-[1vw] top-[80vw] md:top-[11vw] greenButton h-[13.59vw]
      md:h-[2.813vw] w-full md:w-[8.438vw] rounded-[2.564vw] md:rounded-[0.521vw] flexBox px-0
      "
-      type="submit">
-        ویرایش
-    </FormKit>
-    </div>
+          type="submit"
+        >
+          ویرایش
+        </FormKit>
+      </div>
    </FormKit>
  </div>
 </template>


 <script setup>
-import { useToast } from 'vue-toastification'
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();
 const { authUser } = useAuth();
-const loading = ref(false)
+const loading = ref(false);
+const edit = async (formData) => {
+  try {
+    loading.value = true;
+    await $fetch("/api/user/update", {
+      method: "PUT",
+      body: formData,
+    });
+    location.reload();
+  } catch (error) {
+    toast.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+const changePhoto = async (val) => {
+  const fd = new FormData('hi')
+  fd.append('name', 'hi')
+  console.log('fd', fd);
+  // const data = await useFetch("/api/uploader", {
+  //   method: "POST",
+  //   body: {
+  //     file: val.target.value,
+  //     directoryName: "profileAvatar",
+  //   },
+  // });
+  // console.log("done", data);
+};
+</script>

-const edit = async(formData) => {
-    try {
-        loading.value = true;
-        await $fetch('/api/user/update', {
-            method: 'PUT',
-            body: formData
-        })
-         location.reload()
-      } catch (error) {
-     toast.error(error)
-    } finally {
-        loading.value = false;
-    }
+<style scoped>
+input[type="file"] {
+  display: none;
 }

-</script>
+.custom-file-upload {
+  cursor: pointer;
+}
+</style>
@@ -17,20 +17,28 @@
            <div class="flex flex-col flex-col-reverse pb-[10vw]">
              <ul
                class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
-                v-for="ticket in tickets"
+                v-for="(ticket, index) in tickets"
                :key="ticket.id"
              >
            
-              <li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
-                  <p
+              <li class="flex justify-between pt-[1.5vw] md:pt-0">
+             
+             
+                <p
                  @click="openTicket(ticket.id)"
-                  class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                  class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
                    {{ ticket.subject }}
                  </p>
-                  <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    {{ ticket.createdAt }}
+          
+          
+                  <p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
+                    <span v-show="num === index"
+                    v-for="(item, num) in jalali" :key="num"
+                    >{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
                  </p>
-                  <div class="flex items-center gap-[1vw]">
+             
+             
+                  <div class="basis-2/6 flex items-center justify-end gap-[1vw]">
                    <button
                      @click="openTicket(ticket.id)"
                      class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
@@ -52,7 +60,7 @@
                  <div class="flex flex-col flex-col-reverse">
                    <div v-if="loading" class="loadingText">درحال دریافت اطلاعات...</div>
                    <div
-                      class="justify-self-start mt-[5vw] md:mt-0"
+                      class="grid mt-[5vw] md:mt-0"
                      v-for="(message, index) in ticketMessages[0]
                        ?.ticketMessages"
                      :key="index"
@@ -60,13 +68,20 @@
                  
                    
                      <div
-                        class="rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
+                      class="justify-self-start rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
+                        :class="{ 'justify-self-end rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] !bg-[#F4FDFD]  mb-[1vw] text-[#383E43]' :  message.createdBy.roles[0] === 'Admin' }"
+                        
                      >
                        <p class="text-[3.59vw] md:text-[1.055vw]">
-                          {{ message.createdBy && "کاربر مهمان" }}
+                          {{ message.createdBy && "کاربر مهمان" }} {{ }}
                        </p>
-                        <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
+                        <!-- <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
                          {{ message.createdAt }}
+                        </p> -->
+                        <p  class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
+                          <span v-show="num === index"
+                          v-for="(item, num) in jalali" :key="num"
+                          >{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
                        </p>
                        <p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
                          {{ message.content }}
@@ -252,6 +267,7 @@
                        <p class="text-[3.59vw] md:text-[1.055vw]">
                          {{ message.createdBy && "کاربر مهمان" }}
                        </p>
+                        
                        <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
                          {{ message.createdAt }}
                        </p>
@@ -365,6 +381,35 @@ const subject = ref(null);
 const content = ref(null);
 const ticketMessages = ref([]);
 const update = ref(null)
+const day = ref([])
+const month = ref([])
+const year = ref([])
+const shamsi = ref([])
+
+tickets.value.map(item =>{
+ item = new Date(item.createdAt)  
+year.value.push(item.getFullYear())
+month.value.push(item.getMonth() + 1)
+day.value.push(item.getDate())
+})
+
+const combinedItems = year.value.map((year, index) => ({
+    year,
+    month: month.value[index],
+    day: day.value[index],
+}));
+
+
+const values = combinedItems.map(item =>(
+  Object.values(item)
+))
+const jalali = ref([])
+const shamsis = values.map(item => (
+  jalali.value.push(gregorian_to_jalali(item[0],item[1],item[2]))
+
+))
+
+


 const sendTicket = async () => {
@@ -377,9 +422,10 @@ const sendTicket = async () => {
      subject: subject.value,
    },
  });
-  load()
+  // load()
  addTicketForm.value = false;
  subject.value = null;
+  location.reload()

 };

@@ -390,7 +436,7 @@ const openTicket = async (data) => {
    const slides = document.getElementsByClassName("close");
    for (let i = 0; i < slides.length; i++) {
      if (slides[i].id === data) {
-        slides[i].style.maxHeight = (slides[i].scrollHeight * 2) + "px";
+        slides[i].style.maxHeight = slides[i].scrollHeight + "vh";
      } else {
        slides[i].style.maxHeight = null;
      }
@@ -406,7 +452,6 @@ const openTicket = async (data) => {
  ticketMessages.value.push(single.value);
  reload()
  loading.value = false;
-
 };
 const sendMessage = async (data, reload) => {
  if (content.value === null || '') {
@@ -424,6 +469,7 @@ const sendMessage = async (data, reload) => {
  openTicket().reload()
 };

+
 const tab1 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
    <svg 
    class="hidden md:block  w-[1.406vw] h-[1.406vw]"
@@ -51,15 +51,15 @@
                                    </svg>
                            </div>
                            <p class="w-full text-end text-[4.544vw] md:text-[1.055vw]">
-                                60,000 
+                                {{ data }},000 
                                <span class="text-[2.836vw] md:text-[0.741vw] font-[400]"> 
                                    تومان        
                                </span>
                            </p>
                            <div class="pt-[10vw] md:pt-0 space-y-[3vw] md:space-y-[1vw]">
                                <p class="text-[3.19vw] md:text-[0.833vw] text-[#383E43]">مبلغ مورد نظر</p>
-                                <input type="number" placeholder="تومان" class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]">
-                                <button class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]">شارژ حساب</button>
+                                <input v-model="price" type="number" placeholder="تومان" class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]">
+                                <button @click="charge" class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]">شارژ حساب</button>
                            </div>
                        </div>
                    </div>
@@ -79,6 +79,35 @@

 <script setup>
 import {Tabs, Tab} from 'vue3-tabs-component';
+
+const {data, refresh} = await useFetch('/api/user/balance')
+const price = ref(null)
+const charge = async () =>{
+    console.log(price.value);
+    const toPay = await useFetch("/api/user/add", {
+    method: "POST",
+    body: {
+      amount: price.value,
+    }
+  });
+  refresh()
+  price.value = null
+  console.log(toPay);
+}
+console.log('wallet,' , data.value);
+
+
+
+
+
+
+
+
+
+
+
+
+
 const tab1 =
 `<p 
 class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
@@ -61,6 +61,8 @@
            </svg>

            <input
+            v-model="search"
+            @change="searchHandler"
              class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
              type="text"
              placeholder="نام آموزش ، دوره و ... را وارد کنید"
@@ -450,6 +452,7 @@ function prevPage(){
  if (pageNumber.value > 1) {
    pageNumber.value -= 1
    query.value = { ...route.query, page: pageNumber };
+    
  router.push({
    path: "/courses",
    query: query.value,
@@ -482,12 +485,16 @@ function removeCategory(){
  }
  if (query.value.hasOwnProperty("price")) {
    delete query.value.price;
+  }
+  if (query.value.hasOwnProperty("name")) {
+    delete query.value.name;
  }
    router.push({
    path: "/courses",
    query: query.value,
  });
  pageNumber.value = 1
+  search.value = null
  refresh()
 }

@@ -499,6 +506,7 @@ const categories = categoryLis.data.value;

 function selectCategory(id) {
  query.value = { ...route.query, category: id };
+  
  if (query.value.hasOwnProperty("page")) {
    delete query.value.page;
  }
@@ -514,9 +522,9 @@ function selectCategory(id) {
  });
  pageNumber.value = 1
  refresh();
-  watch(data , () => {
-  paginationLength.value = Math.ceil(data.value.count / 2); 
-})
+//   watch(data , () => {
+//   paginationLength.value = Math.ceil(data.value.count / 2); 
+// })
 }


@@ -565,8 +573,26 @@ const closeSortOptions = () => {
  }
 };

+const search = ref(null)
+// watch(search, () =>{
+//  if (search.value.length > 2) {

-
+//  }
+// })
+const searchHandler = () =>{
+  query.value = { ...route.query, name: search.value };
+  if (query.value.hasOwnProperty("page")) {
+      delete query.value.page;
+    }
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+ refresh();
+}
+watch(data , () => {
+ paginationLength.value = Math.ceil(data.value.count / 2); 
+})


 </script>
@@ -269,4 +269,11 @@
  </div>
    </div>
  </div>
-</template>
+  <!-- <Markdown :source="source" /> -->
+  
+</template>
+
+<script setup>
+// import Markdown from 'vue3-markdown-it';
+// const source = 'The *quick* brown fox, jumped **over** the lazy [dog](https://en.wikipedia.org/wiki/Dog)'
+</script>
@@ -0,0 +1,25 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    const body = await readBody(event);
+    const query = getQuery(event);
+    console.log('c s',body);
+    console.log(query);
+
+    try {
+        const data = await $fetch(`${apiBase}/course/${query.id}/comment`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body
+        });
+        console.log('ser com', data);
+        return data;
+    } catch (error) {
+
+        return error;
+    }
+
+})
@@ -6,8 +6,9 @@ export default defineEventHandler(async (event) => {
    let page = query.hasOwnProperty('page') ? `page=${query.page}` : '';
  // let sortBy = query.hasOwnProperty('sortBy') ? `price=${query.price}` : '';
    let price = query.hasOwnProperty('price') ? `price=${query.price}` : '';
+    let name = query.hasOwnProperty('name') ? `name=${query.name}` : '';
    try {
-        const data = await $fetch(`${apiBase}/course?${category}&${page}&pageSize=2&${price}`, {
+        const data = await $fetch(`${apiBase}/course?${category}&${page}&pageSize=2&${price}&${name}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
@@ -17,7 +18,6 @@ export default defineEventHandler(async (event) => {
        });
        return data;
    } catch (error) {
-        console.log('err :', error);
        return error;
    }

@@ -0,0 +1,24 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+
+     const query = getQuery(event);
+
+
+    //     let page = query.hasOwnProperty('page') ? `page=${query.page}` : '';
+//   // let sortBy = query.hasOwnProperty('sortBy') ? `price=${query.price}` : '';
+//     let price = query.hasOwnProperty('price') ? `price=${query.price}` : '';
+    try {
+        const courseHeadline = await $fetch(`${apiBase}/courseHeadline?courseId=${query.id}`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'content-type': 'application/json'
+            }
+        });
+        console.log(courseHeadline);
+        return courseHeadline;
+    } catch (error) {
+        return error;
+    }
+
+});
@@ -0,0 +1,34 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    const body = await readBody(event);
+    console.log(body);
+    try {
+        const data = await $fetch(`${apiBase}/uploader`, {
+            method: 'POST',
+            headers: {
+              //  'Accept': 'multipart/form-data',
+                'Content-Type': 'multipart/form-data',
+                'Authorization': `Bearer ${token}`
+            },
+             body: {
+                file: body.file,
+                directoryName: body.directoryName
+             }
+        });
+        console.log('uploader data', data);
+        return data;
+    } catch (error) {
+        console.log(error.data);
+        // if (error.statusCode == 401) {
+        //     setCookie(event, 'token', '', {
+        //         httpOnly: true,
+        //         secure: true,
+        //         maxAge: new Date(0),
+        //         path: '/'
+        //     })
+        // }
+        return error;
+    }
+
+})
@@ -0,0 +1,21 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    const body = await readBody(event);
+    console.log(body);
+    try {
+        const data = await $fetch(`${apiBase}/user/add`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body
+        });
+        return data;
+    } catch (error) {
+
+        return error;
+    }
+
+})
@@ -0,0 +1,19 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    try {
+        const data = await $fetch(`${apiBase}/user/balance`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+        });
+
+        return data;
+    } catch (error) {
+
+        return error;
+    }
+
+})
@@ -0,0 +1,32 @@
+function gregorian_to_jalali(gy, gm, gd) {
+    
+    var g_d_m, jy, jm, jd, gy2, days;
+    g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
+    gy2 = gm > 2 ? gy + 1 : gy;
+    days =
+      355666 +
+      365 * gy +
+      ~~((gy2 + 3) / 4) -
+      ~~((gy2 + 99) / 100) +
+      ~~((gy2 + 399) / 400) +
+      gd +
+      g_d_m[gm - 1];
+    jy = -1595 + 33 * ~~(days / 12053);
+    days %= 12053;
+    jy += 4 * ~~(days / 1461);
+    days %= 1461;
+    if (days > 365) {
+      jy += ~~((days - 1) / 365);
+      days = (days - 1) % 365;
+    }
+    if (days < 186) {
+      jm = 1 + ~~(days / 31);
+      jd = 1 + (days % 31);
+    } else {
+      jm = 7 + ~~((days - 186) / 30);
+      jd = 1 + ((days - 186) % 30);
+    }
+    return [jy, jm, jd];
+  }
+
+  export {gregorian_to_jalali}