update

2024-06-19 21:03:07 +03:30
parent 3f9e0d7615
commit 607ead8528
20 changed files with 869 additions and 298 deletions
@@ -44,7 +44,7 @@
 </template>
 <script setup>
 const props = defineProps(['item']);
-console.log(props.item);
+
 </script>

 <style scoped>
@@ -6,24 +6,466 @@
      <div
        class="w-full md:w-[56.354vw] text-[#383E43] text-[1.055vw] leading-[1.582vw]"
      >
+        <!-- video -->
+        <div
+          class="absolute top-[5vw] md:top-0 right-0 px-[3vw] md:px-0 md:relative"
+        >
+          <div class="flex items-center gap-[3vw] md:gap-[0.7vw]">
+            <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.69vw] text-[#383E43] font-bold -tracking-[0.05vw]"
+              >آموزش HTML رایگان مقدماتی تا پیشرفته</span
+            >
+          </div>
+
+          <video
+            id="myVideo"
+            ref="video"
+            controls
+            class="mt-[4vw] md:mt-[1.8vw] w-full"
+          >
+            <source :src="url" type="video/mp4" />
+          </video>
+          <div
+            class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
+          >
+            {{ activeHead?.headline }}
+            <div class="absolute gap-[2vw] flex md:hidden left-0">
+              <svg
+                class="h-[5.641vw] w-[5.641vw]"
+                viewBox="0 0 24 22"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g clip-path="url(#clip0_1_6600)">
+                  <path
+                    d="M16.96 5.65576C18.96 6.92993 20.34 8.95576 20.62 11.2933"
+                    stroke="#878787"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M3.48999 11.3392C3.74999 9.01083 5.10999 6.98499 7.08999 5.70166"
+                    stroke="#878787"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M8.19 19.1951C9.35 19.7359 10.67 20.0384 12.06 20.0384C13.4 20.0384 14.66 19.7634 15.79 19.2592"
+                    stroke="#878787"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12.06 7.05834C13.5954 7.05834 14.84 5.91741 14.84 4.51C14.84 3.1026 13.5954 1.96167 12.06 1.96167C10.5247 1.96167 9.28003 3.1026 9.28003 4.51C9.28003 5.91741 10.5247 7.05834 12.06 7.05834Z"
+                    stroke="#878787"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M4.82999 18.26C6.36534 18.26 7.60999 17.1191 7.60999 15.7117C7.60999 14.3043 6.36534 13.1633 4.82999 13.1633C3.29464 13.1633 2.04999 14.3043 2.04999 15.7117C2.04999 17.1191 3.29464 18.26 4.82999 18.26Z"
+                    stroke="#878787"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M19.17 18.26C20.7054 18.26 21.95 17.1191 21.95 15.7117C21.95 14.3043 20.7054 13.1633 19.17 13.1633C17.6347 13.1633 16.39 14.3043 16.39 15.7117C16.39 17.1191 17.6347 18.26 19.17 18.26Z"
+                    stroke="#878787"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_1_6600">
+                    <rect width="24" height="22" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+
+              <svg
+                class="h-[5.641vw] w-[5.641vw]"
+                viewBox="0 0 22 22"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g clip-path="url(#clip0_1_6599)">
+                  <path
+                    d="M8.54333 10.7068L10.89 13.0535L13.2367 10.7068"
+                    stroke="#383E43"
+                    stroke-width="1.5"
+                    stroke-miterlimit="10"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M10.89 3.66675V12.9892"
+                    stroke="#383E43"
+                    stroke-width="1.5"
+                    stroke-miterlimit="10"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M18.3334 11.165C18.3334 15.2167 15.5834 18.4984 11 18.4984C6.41669 18.4984 3.66669 15.2167 3.66669 11.165"
+                    stroke="#383E43"
+                    stroke-width="1.5"
+                    stroke-miterlimit="10"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_1_6599">
+                    <rect width="22" height="22" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <!-- downloadBox -->
+        <div class="hidden md:flex justify-between items-center mt-[3.3vw]">
+          <a
+            :href="url"
+            class="greenButton flexBox p-0 w-[8.177vw] h-[2.656vw] rounded-[0.521vw] text-[0.938vw]"
+          >
+            دانلود
+            <svg
+              class="w-[1.25vw] h-[1.302vw]"
+              viewBox="0 0 24 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.32007 12.18L11.8801 14.74L14.4401 12.18"
+                stroke="white"
+                stroke-width="1.5"
+                stroke-miterlimit="10"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M11.8799 4.5V14.67"
+                stroke="white"
+                stroke-width="1.5"
+                stroke-miterlimit="10"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M20 12.68C20 17.1 17 20.68 12 20.68C7 20.68 4 17.1 4 12.68"
+                stroke="white"
+                stroke-width="1.5"
+                stroke-miterlimit="10"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+          <div class="flexBox text-[#878787] text-[0.833vw] gap-[1vw]">
+            <span>اشتراک گذاری :</span>
+            <a href="https://telegram.me/share/url?url=<url>&text=<TEXT>">
+              <svg
+                class="w-[1.25vw] h-[1.042vw]"
+                viewBox="0 0 24 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M1.64987 8.56244C8.09231 5.75558 12.3883 3.90512 14.5378 3.01107C20.675 0.45837 21.9503 0.0149404 22.7815 0.000141954C22.9643 -0.00292234 23.3731 0.0423843 23.6379 0.257234C23.8614 0.438648 23.9229 0.683713 23.9524 0.855714C23.9818 1.02771 24.0185 1.41954 23.9893 1.7257C23.6567 5.22014 22.2177 13.7002 21.4856 17.6141C21.1758 19.2702 20.5658 19.8254 19.9753 19.8798C18.6919 19.9979 17.7174 19.0317 16.4744 18.2169C14.5294 16.9419 13.4305 16.1482 11.5425 14.904C9.36064 13.4662 10.7751 12.6759 12.0185 11.3844C12.344 11.0464 17.9985 5.90319 18.1079 5.43662C18.1216 5.37827 18.1343 5.16076 18.0051 5.04591C17.8759 4.93105 17.6851 4.97033 17.5475 5.00156C17.3524 5.04584 14.2452 7.0996 8.22584 11.1628C7.34386 11.7685 6.54499 12.0636 5.82924 12.0481C5.04017 12.0311 3.52233 11.602 2.39397 11.2352C1.00999 10.7853 -0.0899675 10.5474 0.00581422 9.7834C0.0557033 9.38545 0.603724 8.97846 1.64987 8.56244Z"
+                  fill="#878787"
+                />
+              </svg>
+            </a>
+            <a href="https://twitter.com/share?text=<text>&url=<url>">
+              <svg
+                class="h-[1.25vw] w-[1.25vw]"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 2.16867C15.1807 2.16867 15.6145 2.16867 16.9157 2.16867C18.0723 2.16867 18.6506 2.45783 19.0843 2.60241C19.6627 2.89157 20.0964 3.03615 20.5301 3.46988C20.9639 3.90362 21.253 4.33735 21.3976 4.91566C21.5422 5.3494 21.6867 5.92771 21.8313 7.08434C21.8313 8.38554 21.8313 8.6747 21.8313 12C21.8313 15.3253 21.8313 15.6145 21.8313 16.9157C21.8313 18.0723 21.5422 18.6506 21.3976 19.0843C21.1084 19.6627 20.9639 20.0964 20.5301 20.5301C20.0964 20.9639 19.6627 21.253 19.0843 21.3976C18.6506 21.5422 18.0723 21.6867 16.9157 21.8313C15.6145 21.8313 15.3253 21.8313 12 21.8313C8.6747 21.8313 8.38554 21.8313 7.08434 21.8313C5.92771 21.8313 5.3494 21.5422 4.91566 21.3976C4.33735 21.1084 3.90362 20.9639 3.46988 20.5301C3.03615 20.0964 2.74699 19.6627 2.60241 19.0843C2.45783 18.6506 2.31325 18.0723 2.16867 16.9157C2.16867 15.6145 2.16867 15.3253 2.16867 12C2.16867 8.6747 2.16867 8.38554 2.16867 7.08434C2.16867 5.92771 2.45783 5.3494 2.60241 4.91566C2.89157 4.33735 3.03615 3.90362 3.46988 3.46988C3.90362 3.03615 4.33735 2.74699 4.91566 2.60241C5.3494 2.45783 5.92771 2.31325 7.08434 2.16867C8.38554 2.16867 8.81928 2.16867 12 2.16867ZM12 0C8.6747 0 8.38554 0 7.08434 0C5.78313 0 4.91566 0.289157 4.19277 0.578314C3.46988 0.867471 2.74699 1.30121 2.0241 2.0241C1.30121 2.74699 1.01205 3.3253 0.578314 4.19277C0.289157 4.91566 0.144578 5.78313 0 7.08434C0 8.38554 0 8.81928 0 12C0 15.3253 0 15.6145 0 16.9157C0 18.2169 0.289157 19.0843 0.578314 19.8072C0.867471 20.5301 1.30121 21.253 2.0241 21.9759C2.74699 22.6988 3.3253 22.988 4.19277 23.4217C4.91566 23.7108 5.78313 23.8554 7.08434 24C8.38554 24 8.81928 24 12 24C15.1807 24 15.6145 24 16.9157 24C18.2169 24 19.0843 23.7108 19.8072 23.4217C20.5301 23.1325 21.253 22.6988 21.9759 21.9759C22.6988 21.253 22.988 20.6747 23.4217 19.8072C23.7108 19.0843 23.8554 18.2169 24 16.9157C24 15.6145 24 15.1807 24 12C24 8.81928 24 8.38554 24 7.08434C24 5.78313 23.7108 4.91566 23.4217 4.19277C23.1325 3.46988 22.6988 2.74699 21.9759 2.0241C21.253 1.30121 20.6747 1.01205 19.8072 0.578314C19.0843 0.289157 18.2169 0.144578 16.9157 0C15.6145 0 15.3253 0 12 0Z"
+                  fill="#878787"
+                />
+                <path
+                  d="M12 5.78313C8.53012 5.78313 5.78313 8.53012 5.78313 12C5.78313 15.4699 8.53012 18.2169 12 18.2169C15.4699 18.2169 18.2169 15.4699 18.2169 12C18.2169 8.53012 15.4699 5.78313 12 5.78313ZM12 16.0482C9.83133 16.0482 7.95181 14.3133 7.95181 12C7.95181 9.83133 9.68675 7.95181 12 7.95181C14.1687 7.95181 16.0482 9.68675 16.0482 12C16.0482 14.1687 14.1687 16.0482 12 16.0482Z"
+                  fill="#878787"
+                />
+                <path
+                  d="M18.3614 7.08434C19.1599 7.08434 19.8072 6.43704 19.8072 5.63856C19.8072 4.84007 19.1599 4.19277 18.3614 4.19277C17.563 4.19277 16.9157 4.84007 16.9157 5.63856C16.9157 6.43704 17.563 7.08434 18.3614 7.08434Z"
+                  fill="#878787"
+                />
+              </svg>
+            </a>
+
+            <svg
+              @click="copyUrl"
+              class="cursor-pointer h-[1.25vw] w-[1.25vw]"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"
+                fill="#878787"
+              />
+              <path
+                d="M17.1 2H12.9C9.81693 2 8.37099 3.09409 8.06975 5.73901C8.00673 6.29235 8.465 6.75 9.02191 6.75H11.1C15.3 6.75 17.25 8.7 17.25 12.9V14.9781C17.25 15.535 17.7077 15.9933 18.261 15.9303C20.9059 15.629 22 14.1831 22 11.1V6.9C22 3.4 20.6 2 17.1 2Z"
+                fill="#878787"
+              />
+            </svg>
+          </div>
+        </div>


-   <product-page-attended-coursesVideo />
-   <product-page-attended-coursesDownload-box />
-   <product-page-attended-coursesChats />

-  
-    
-    
-    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        <!-- comments -->
+      
+        <div class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[15vw] md:mt-[7vw]">
+          <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>
+        <div class="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 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
+                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="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>

      <div class="w-full md:w-[23.438vw]">
-        <product-page-attended-coursesHeadlines />
+        <!-- headlines -->
+        <div
+          class="mt-[82vw] md:mt-[4.6vw] min-h-[87.692vw] md:min-h-[29.635vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow space-y-[2vw] thin"
+        >
+          <div class="flexBox w-full flex-col text-[0.938vw] text-[#878787]">
+            <label
+              v-for="item in data"
+              :key="item.id"
+              :class="{ 'bg-[#F4FDFD]': item === activeHead }"
+              class="cursor-pointer text-[#383E43] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
+            >
+              <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                <input
+                  type="radio"
+                  @click="chengeVideo(item)"
+                  :checked="item.headline === activeHead.headline"
+                  class="accent-primaryGreen"
+                />
+                {{ item.headline }}
+              </div>
+              <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                02:24
+                <svg
+                  class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+                  viewBox="0 0 19 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g clip-path="url(#clip0_1_896)">
+                    <path
+                      d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                      stroke="#383E43"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                      stroke="#383E43"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_1_896">
+                      <rect
+                        width="19"
+                        height="19"
+                        fill="white"
+                        transform="translate(0 0.5)"
+                      />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </div>
+            </label>
+          </div>
+        </div>
        <product-page-attended-coursesProgress-bar />
-
-
      </div>
    </div>
  </div>
 </template>

+<script setup>
+import { useToast } from "vue-toastification";
+const route = useRoute();
+const router = useRouter();
+const activeHead = ref(null);
+const video = ref(null);
+const url = ref(null);
+const query = ref({});
+const toast = useToast();
+const comment = ref(null)
+query.value = route.query;
+const { data, refresh } = await useFetch("/api/courseHeadlines", {
+  query: {
+    id: route.params.product,
+  },
+});
+
+
+
+
+
+
+
+const sendComment = () => {
+  const comments = useFetch('/api/comments/courseHeadline',{
+    method: 'POST',
+    body: {
+      id: activeHead.value.id,
+      text: comment.value
+    }
+  })
+}
+
+console.log('s',activeHead);
+function copyUrl() {
+  navigator.clipboard.writeText(window.location.href);
+  toast.success("آدرس صفحه کپی شد");
+}
+
+
+if (query.value.hasOwnProperty("episode")) {
+  const fimd = data.value.find((items) => items.id === query.value.episode);
+  activeHead.value = fimd;
+  url.value = fimd.videoUrl;
+  refresh();
+} else {
+  activeHead.value = data.value[0];
+  url.value = data.value[0].videoUrl;
+}
+
+const chengeVideo = (item) => {
+  query.value = { ...route.query, episode: item.id };
+  activeHead.value = item;
+  url.value = item.videoUrl;
+  video.value.load();
+  router.push({
+    query: query.value,
+  });
+  refresh();
+};
+</script>
+
+
+
+<style scoped>
+video {
+  border-radius: 0.781vw;
+}
+@media (max-width: 768px) {
+  video {
+    border-radius: 3.846vw;
+  }
+}
+</style>
@@ -143,4 +143,9 @@
      </label>
    </div>
  </div> 
-</template>
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+console.log('props', props);
+</script>
@@ -19,7 +19,9 @@
        </div>

        <video controls class="mt-[4vw] md:mt-[1.8vw] w-full">
-          <source src="/public/video/test.mp4" type="video/mp4" />
+          <source 
+          
+          src="/public/video/test.mp4" type="video/mp4" />
        </video>
        <div
          class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
@@ -1,5 +1,5 @@
 <template>
-    <div
+  <div
    class="mt-[5vw] md:mt-[1vw] rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[0.4vw] thin"
  >
    <h2
@@ -40,9 +40,7 @@
    <div
      class="flexBox w-full flex-col text-[3.59vw] md:text-[0.938vw] text-[#878787]"
    >
-      <div
-        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
-      >
+      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
@@ -74,11 +72,11 @@
          </svg>
          تعداد ویدیو ها
        </p>
-        <p class="text-[#383E43] font-semibold">{{props.props.countOfVideos}}</p>
+        <p class="text-[#383E43] font-semibold">
+          {{ props.props[0].countOfVideos }}
+        </p>
      </div>
-      <div
-        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
-      >
+      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
@@ -114,11 +112,11 @@

          حجم فایل ها
        </p>
-        <p class="text-[#383E43] font-semibold">{{props.props.totalFileSize}}</p>
+        <p class="text-[#383E43] font-semibold">
+          {{ props.props[0].totalFileSize }}
+        </p>
      </div>
-      <div
-        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
-      >
+      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
@@ -150,11 +148,9 @@
          </svg>
          سطح دوره
        </p>
-        <p class="text-[#383E43] font-semibold">{{props.props.level}}</p>
+        <p class="text-[#383E43] font-semibold">{{ props.props[0].level }}</p>
      </div>
-      <div
-        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
-      >
+      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
@@ -201,29 +197,31 @@

          زبان
        </p>
-        <p class="text-[#383E43] font-semibold">{{props.props.language}}</p>
+        <p class="text-[#383E43] font-semibold">{{ props.props[0].language }}</p>
      </div>
-      <div
-        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
-      >
+      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
-        <p class="text-[#383E43] font-semibold">{{props.props.satisfactionLevel}}</p>
+        <p class="text-[#383E43] font-semibold">
+          {{ props.props[0].satisfactionLevel }}
+        </p>
      </div>

-      <h2 v-if="props.props.price > 0"
+      <h2
+        v-if="props.props[0].price > 0"
        class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
      >
-        {{numberFormat(props.props.price)}}
+        {{ numberFormat(props.props[0].price) }}
        <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
      </h2>
-      <h2 v-else
+      <h2
+        v-else
        class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
      >
-       رایگان
+        رایگان
      </h2>
      <button
        class="greenButton h-[11.795vw] md:h-auto w-full flexBox text-[4.038vw] md:text-[1.055vw] rounded-[2.564vw] md:rounded-[0.521vw]"
-        @click="paidStatus = true"
+        @click="paymentHandler(props.props[0]._id)"
      >
        <svg
          class="h-[5.641vw] md:h-[1.458vw] w-[5.641vw] md:w-[1.458vw]"
@@ -253,13 +251,36 @@
            stroke-linejoin="round"
          />
        </svg>
-        شرکت در دوره
+      {{ props.props[1] ? 'مشاهده دوره' : 'شرکت در دوره' }}
      </button>
    </div>
-  </div> 
+  </div>
 </template>


 <script setup>
-const props = defineProps(['props'])
+import { useToast } from "vue-toastification";
+const props = defineProps(["props"], ["access"]);
+const toast = useToast()
+const paymentHandler = (id) => {
+
+    const data = useFetch("/api/user/registerCourse", {
+      method: "POST",
+      body: {
+        courseId: id,
+        code: "",
+      },
+    });
+    
+    if (data.data.value?.status === 406 || data.data.value?.status === 500) {
+      toast.error(data.data.value.message
+
+      )
+    } else {
+toast.success('ثبت نام انجام شد')
+
+    }
+ 
+
+};
 </script>
@@ -397,19 +397,8 @@ const { data, refresh, pending } = await useFetch(() => "/api/course", {
 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>
@@ -1,10 +1,30 @@
 <template>
-  <div class="flex w-full justify-center">
-    <main
-      class="flex flex-col md:flex-row justify-between mt-0 md:mt-[10.521vw] w-full md:w-[81.55vw]"
+  <div
+  class="flex w-full justify-center">
+   
+  
+  <main
+  :class="{'md:mt-[10.521vw]' : 
+  $route.path === '/account' ||
+  $route.path === '/account/my-courses' ||
+  $route.path === '/account/tickets' ||
+  $route.path === '/account/wallet' ||
+    $route.path === '/account/profile'
+}"
+      class="flex flex-col md:flex-row justify-between mt-0  w-full md:w-[81.55vw]"
    >
+
+
+
      <div
-        class="borderBottom relative flexBox flex-row md:flex-col md:w-[18.75vw] h-[20.256vw] md:h-[31.771vw] md:bg-[#FAFDFD] rounded-[0.781vw] pinkShadow"
+      :class="{'!flex' : 
+      $route.path === '/account' ||
+      $route.path === '/account/my-courses' ||
+      $route.path === '/account/tickets' ||
+      $route.path === '/account/wallet' ||
+        $route.path === '/account/profile'
+    }"
+        class="borderBottom relative hidden justify-center items-center flex-row md:flex-col md:w-[18.75vw] h-[20.256vw] md:h-[31.771vw] md:bg-[#FAFDFD] rounded-[0.781vw] pinkShadow"
      >
        <svg
          class="hidden md:block mt-[1vw] h-[6.458vw] w-[6.458vw]"
@@ -240,8 +260,27 @@
        </ul>
      </div>

-      <div class="w-[87.692vw] mx-auto md:mx-0 md:w-[61.6vw] min-h-[40vw] pb-[25vw] md:pb-0">
-        <div class="flex justify-between mb-[2.6vw]">
+
+
+
+      <div
+      :class="{'w-[87.692vw] md:w-[61.6vw]' : 
+      $route.path === '/account' ||
+      $route.path === '/account/my-courses' ||
+      $route.path === '/account/tickets' ||
+      $route.path === '/account/wallet' ||
+        $route.path === '/account/profile'
+    }"
+      class=" mx-auto md:mx-0 min-h-[40vw] pb-[25vw] md:pb-0">
+        <div
+        :class="{'!flex' : 
+        $route.path === '/account' ||
+        $route.path === '/account/my-courses' ||
+        $route.path === '/account/tickets' ||
+        $route.path === '/account/wallet' ||
+          $route.path === '/account/profile'
+      }"
+        class="hidden justify-between mb-[2.6vw]">
          <p
            class="py-[2vw] md:py-0 text-[17.72px] md:text-[1.502vw] text-[#383E43] mt-[0.417vw]"
          >
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
+  <div v-if="!access" class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
    <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]"
@@ -142,7 +142,7 @@
      </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-information :props="[data.course, access]" />
      </div>
    </div>

@@ -198,6 +198,9 @@
      </div>
    </div>
  </div>
+  <div v-else>
+    <product-pageAttended-course />
+  </div>
 </template>

 <script setup>
@@ -205,13 +208,22 @@ import { useToast } from "vue-toastification";
 const toast = useToast();
 const route = useRoute();
 const replayTarget = ref(null);
+const access = ref(false)
 const { data, refresh } = await useFetch("/api/productId", {
  method: "POST",
  body: {
    id: route.params.product,
  },
 });
-console.log(data.value.comments[0]);
+const myCourses = await useFetch('/api/auth/me')
+myCourses.data.value.course.forEach(element => {
+  if (element.id === route.params.product) {
+    access.value = true
+  }else{
+    access.value = false
+  }
+
+});
 const comment = ref(null);

 const sendComment = async () => {
@@ -1,203 +1,195 @@
 <template>
-  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
-    <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]"
-    >
-      <div
-        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" />
-        test
-        <product-page-course-detailsHeadlines :props="data.course" />
-
-        <!-- <product-page-course-detailsComments :props="data.comments" /> -->
+  <div class="flex w-full flex-col pb-[30vw] md:pb-[7vw]">
+    <template>
+      <div class="flex items-center flex-col pb-[25vw] md:pb-[6vw]">
        <div
-          class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
+          class="flex flex-col gap-[1vw] flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-full mt-[8.2vw]"
        >
-          <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
+            class="w-full md:w-[56.354vw] text-[#383E43] text-[1.055vw] leading-[1.582vw]"
          >
+    
+    
+       <product-page-attended-coursesVideo />
+       <product-page-attended-coursesDownload-box />
+       <product-page-attended-coursesChats />
+    
+      
+        
+        
        </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 class="w-full md:w-[23.438vw]">
+            

            <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"
+            class="mt-[82vw] md:mt-[4.6vw] min-h-[87.692vw] md:min-h-[29.635vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow space-y-[2vw] thin"
+          >
+            <div class="flexBox w-full flex-col text-[0.938vw] text-[#878787]">
+              <label
+              v-for="item in data.course.courseHeadlines" :key="item.id"
+                class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
              >
-                <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 class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                  <input type="radio" class="accent-primaryGreen" />
+                 {{ item.headline }}
+                </div>
+                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                  02:24
+                  <svg
+                    class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+                    viewBox="0 0 19 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g clip-path="url(#clip0_1_896)">
+                      <path
+                        d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                        stroke="#383E43"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                        stroke="#383E43"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_1_896">
+                        <rect
+                          width="19"
+                          height="19"
+                          fill="white"
+                          transform="translate(0 0.5)"
+                        />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </div>
+              </label>
+        
+              <!-- <label
+                class="bg-[#FDF4FB] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
+              >
+                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                  <input
+                    type="radio"
+                    checked="checked"
+                    class="accent-primaryGreen"
+                  />
+                  آشنایی با ساختار صفحات
+                </div>
+                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                  08:44
+                  <svg
+                    class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+                    viewBox="0 0 19 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g clip-path="url(#clip0_1_896)">
+                      <path
+                        d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                        stroke="#383E43"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                        stroke="#383E43"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_1_896">
+                        <rect
+                          width="19"
+                          height="19"
+                          fill="white"
+                          transform="translate(0 0.5)"
+                        />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </div>
+              </label>
+        
+              <label
+                class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
+              >
+                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                  <input type="radio" class="accent-primaryGreen" />
+                  تگ های Heading
+                </div>
+                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+                  07:41
+                  <svg
+                    class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+                    viewBox="0 0 19 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g clip-path="url(#clip0_1_896)">
+                      <path
+                        d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                        stroke="#383E43"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                        stroke="#383E43"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_1_896">
+                        <rect
+                          width="19"
+                          height="19"
+                          fill="white"
+                          transform="translate(0 0.5)"
+                        />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </div>
+              </label> -->
            </div>
+          </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" />
-      </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>
+
+
+
+
+
+
+            <product-page-attended-coursesProgress-bar />
+    
+    
          </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>
+    </template>
+    
  </div>
+  
+
+
 </template>

 <script setup>
@@ -211,7 +203,14 @@ const { data, refresh } = await useFetch("/api/productId", {
    id: route.params.product,
  },
 });
-console.log(data.value.comments[0]);
+const courseHeadline = await useFetch("/api/courseHeadlines", {
+method: 'POST',
+  query: {
+    id: route.params.product
+  }
+})
+
+console.log(courseHeadline.data.value);
 const comment = ref(null);

 const sendComment = async () => {
@@ -241,4 +240,5 @@ const deleteComment = () => {
  comment.value = null;
 };

-</script>
+</script>
+
@@ -219,7 +219,7 @@
        </nuxt-link>
      </div>

-      <div class="lastTickets mt-[20vw] md:mt-[2.917vw]">
+      <div v-if="lastTickets.length > 0" class="lastTickets mt-[20vw] md:mt-[2.917vw]">
        <div class="flex flex-col">
          <div class="flex justify-between items-center border-b pb-[0.733vw]">
            <p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
@@ -260,15 +260,15 @@
            :key="ticket.id"
            class="flex justify-between items-center mt-[1.25vw] px-2"
          >
-            <p class="text-[3.19vw] md:text-[0.833vw] text-[#000]">
+            <p class="basis-2/6 text-[3.19vw] md:text-[0.833vw] text-[#000]">
              {{ ticket.subject }}
            </p>
-            <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
+            <p class="basis-2/6 text-[3.19vw] md:text-[0.833vw] text-[#878787]">
              {{ jDate(ticket.createdAt) }}
            </p>
            <nuxt-link
              to="/account/tickets"
-              class="flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
+              class=" flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
            >
              مشاهده
            </nuxt-link>
@@ -289,7 +289,7 @@
        </div>
      </div>

-      <div class="lastCources mt-[20vw] md:mt-[2.917vw] mb-8">
+      <div v-if="lastCourses.length > 0" class="lastCources mt-[20vw] md:mt-[2.917vw] mb-8">
        <div class="flex flex-col">
          <div class="flex justify-between items-center border-b pb-[0.833vw]">
            <p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
@@ -338,11 +338,11 @@
      </div>
    </div>

-    <div class="w-full md:w-[23.385vw]">
+    <nuxt-link to="/account/profile" class="w-full md:w-[23.385vw]">
      <div
-        class="bg-white mb-[1.25vw] pinkShadow p-[5vw] md:p-[1.25vw] flex flex-col profile w-full md:w-[23.385vw] h-[108.872vw] md:h-[26.25vw] rounded-[3.846vw] md:rounded-[0.781vw] space-y-[7vw] md:space-y-[1.5vw]"
+        class="bg-white mb-[1.25vw] pinkShadow p-[5vw] md:p-[1.25vw] flex flex-col profile w-full md:w-[23.385vw] h-[70.872vw] md:h-[20.25vw] rounded-[3.846vw] md:rounded-[0.781vw] space-y-[7vw] md:space-y-[1.5vw]"
      >
-        <div class="flex justify-between items-center">
+        <div class="flex justify-between items-center mt-[1vw]">
          <p
            class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold"
          >
@@ -373,23 +373,31 @@

        <div class="flex justify-center items-center flex-col mt-[1.823vw]">
          <img
-            src="/public/images/client1.png"
+          v-if="authUser.avatarMedia"
+            :src="authUser?.avatarMedia"
            class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
            alt=""
          />
+          <img
+          v-else
+            src="/public/images/alt.png"
+            class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
+            alt=""
+          />
+          
          <p
            class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold mt-[1.25vw]"
          >
-            علی مصلحی
+           {{ authUser.name ? authUser.name : 'کاربر مهمان' }}
          </p>
          <p
            class="font-[400] text-[3.19vw] md:text-[0.833vw] text-[#878787] mt-[0.417vw]"
          >
-            alimoslehi@
+           {{ authUser.userName ?  authUser.userName + '@' : 'نام کاربری'}}
          </p>
        </div>

-        <div class="flex justify-between mt-[2.083vw]">
+        <!-- <div class="flex justify-between mt-[2.083vw]">
          <svg
            class="w-[4.615vw] md:w-[1.25vw] h-[4.615vw] md:h-[1.25vw]"
            viewBox="0 0 24 24"
@@ -424,8 +432,8 @@
              stroke-linejoin="round"
            />
          </svg>
-        </div>
-        <div
+        </div> -->
+        <!-- <div
          class="grid grid-cols-5 md:grid-cols-7 mt-[0.833vw] justify-center"
        >
          <div class="hidden md:flex flex-col items-center">
@@ -514,9 +522,9 @@
              چهار شنبه
            </p>
          </div>
-        </div>
+        </div> -->
      </div>
-    </div>
+    </nuxt-link>
  </div>
 </template>

@@ -527,7 +535,8 @@ const lastTickets = tickets.data.value.slice(-2);
 const myCourses = await useFetch("/api/auth/me");
 const lastCourses = myCourses.data.value.course.slice(-2);
 const  balance = await useFetch("/api/user/balance");
-console.log(balance.data);
+const { authUser } = useAuth();
+
 definePageMeta({
  middleware: "auth",
 });
@@ -27,7 +27,7 @@
 import ProgressCard from './../../../components/ProgressCard.vue'
 import {Tabs, Tab} from 'vue3-tabs-component';
 const myCourses = await useFetch('/api/auth/me')
-console.log(myCourses.data.value.course);
+
 const tab1 =
 `<p 
 class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
@@ -171,26 +171,26 @@ const edit = async (formData) => {
  }
 };
 async function changePhoto(val) {
-  console.log("image", val.target.files[0]);
+ 
  const formData = new FormData();
  formData.append('file', val.target.files[0]);
  formData.append('directoryName', name.value);
-  console.log('keys', formData.values());
+ 
  try {
-    await $fetch("/api/uploader", {
+   const dataa = await $fetch("/api/uploader", {
      method: "POST",
-      body: formData,
+      body: formData
    });
+    console.log('dataa',dataa);
  } catch (error) {
-    console.log('error client', error);
+    console.log('error client', error.data.data.message);
  }
  //        console.log('ss', formData);

-  // const data = await useFetch("/api/uploader", {
-  //   method: "POST",
-  //   body: formData
-  // });
-  //  console.log("done", data.data);
+//  const data = await useFetch("api/uploader", {
+//     method: 'POST',
+//     body: formData
+//   });
 }
 </script>

@@ -10,11 +10,14 @@
          <div class="w-full">
            <tab :name="tab1">
              <ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
-                <li
+                <!-- <p v-if="payments.data = null" class="p-[1vw] text-[0.8vw] underline">تراکنشی وجود ندارد !!!</p>
+                -->
+               <li
                  v-for="(item, index) in payments.data.value"
                  :key="index"
                  class="flex justify-between items-center"
                >
+                
                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
                    {{ item.reason }}
                  </p>
@@ -184,14 +187,14 @@ import { Tabs, Tab } from "vue3-tabs-component";
 const { data, refresh } = await useFetch("/api/user/balance");
 const payments = await useFetch("/api/user/payments");

-
+const payNum = Math.random()
 const price = ref(null);
 const charge = async () => {
  const toPay = await useFetch("/api/user/add", {
    method: "POST",
    body: {
      amount: price.value,
-      paymentNumber: "411",
+      paymentNumber: payNum * Math.random(),
      reason: "deposit",
    },
  });
@@ -0,0 +1,22 @@
+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}/courseHeadlineComment/create`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body
+        });
+    console.log(data);
+        return data;
+    } catch (error) {
+
+        return error;
+    }
+
+})
@@ -3,8 +3,6 @@ export default defineEventHandler(async (event) => {
    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`, {
@@ -15,7 +13,7 @@ export default defineEventHandler(async (event) => {
            },
            body
        });
-        console.log('ser com', data);
+    
        return data;
    } catch (error) {

@@ -1,22 +1,15 @@
 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}`, {
+        const data = await $fetch(`${apiBase}/courseHeadline?courseId=${query.id}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'content-type': 'application/json'
            }
        });
-        console.log(courseHeadline);
-        return courseHeadline;
+        return data;
    } catch (error) {
        return error;
    }
@@ -11,22 +11,25 @@ export default defineEventHandler(async (event) => {
    })

 
-    let formDat = new FormData();
-    formDat.append('file',  fs.createReadStream(files.file[0].filepath));
+    var formDat = new FormData();
    formDat.append('directoryName',  fields.directoryName[0]);
+    formDat.append('file',  fs.createReadStream(files.file[0].filepath));
+    // console.log('path',files.file[0].filepath);
+    // console.log('text',fields.directoryName[0]);
    try {
            const data = await $fetch(`${apiBase}/uploader`, {
                method: 'POST',
                 body: formDat,
                headers: {
                    'Accept': 'application/json',
+                    //'Content-Type': 'multipart/form-data',
                    'Authorization': `Bearer ${token}`
                },
            });
-            console.log('uploader data', data);
+       console.log('uplodar',data);
            return data;
    } catch (error) {
-        console.log('error', error);
+ 
        return error;
    }

@@ -2,7 +2,7 @@ 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',
@@ -9,7 +9,7 @@ export default defineEventHandler(async (event) => {
                'Authorization': `Bearer ${token}`
            },
        });
-console.log('server', payments);
+
        return payments;
    } catch (error) {

@@ -0,0 +1,33 @@
+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/registerCourse`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body
+        });
+        console.log(data);
+        return data;
+    } catch (error) {
+console.log('errors',error.data);
+if (error.status === 406) {
+    return{
+        status: 406,
+        message: 'شما در این دوره شرکت کرده اید !!!'
+    }
+}else{
+    return{
+        status: 500,
+        message: 'عملیات با مشکل مواجه شد، کمی بعد تلاش کنید.'
+    }
+}
+        return error;
+    }
+
+})