From fd5b06c2d7892f9501a78c4f7dceffd13e743ad6 Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Wed, 29 May 2024 22:31:05 +0330
Subject: [PATCH] api / tickets

---
 assets/css/tailwind.css                       |  16 +
 components/Card copy.vue                      | 182 +++++++
 components/Card.vue                           |  17 +-
 components/courses-page/Courses-list.vue      |  66 +--
 components/login-page/Check-otp.vue           |  16 +-
 components/login-page/Login-form.vue          |  13 +-
 components/product-page/Course-detail.vue     |   9 +-
 .../product-page/course-details/Header.vue    |  10 +-
 pages/[product]/index.vue                     |  11 +-
 pages/account/profile.vue                     |   1 -
 pages/account/tickets.vue                     | 511 ++++++++++++++----
 server/api/auth/login-step-two.post.js        |   1 -
 server/api/auth/login.post.js                 |   2 -
 server/api/auth/me.get.js                     |   1 -
 server/api/course.get.js                      |  15 +
 server/api/productId.js                       |  17 +
 server/api/ticket/id.js                       |  22 +
 server/api/ticket/index.get.js                |  27 +
 server/api/ticket/index.post.js               |  22 +
 server/api/ticket/message.post.js             |  30 +
 20 files changed, 810 insertions(+), 179 deletions(-)
 create mode 100644 components/Card copy.vue
 create mode 100644 server/api/course.get.js
 create mode 100644 server/api/productId.js
 create mode 100644 server/api/ticket/id.js
 create mode 100644 server/api/ticket/index.get.js
 create mode 100644 server/api/ticket/index.post.js
 create mode 100644 server/api/ticket/message.post.js

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 518b5ff..8e812bd 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -26,6 +26,7 @@ body {
     }
 }
 @layer components {
+
     .loginInput{
         @apply bg-white rounded-[2.564vw] md:rounded-[1.563vw] text-[3.59vw] md:text-[0.833vw] w-full h-[13.59vw] md:h-[2.917vw] ps-[3vw] md:ps-[1.2vw]
     }
@@ -45,6 +46,21 @@ body {
         margin: 0 !important;
         font-family: 'thinSans';
     }
+    .emptyText{
+        @apply font-semibold text-[4vw] md:text-[1vw] my-[3vw] w-full text-center
+    }
+    .loadingText{
+       @apply min-h-[10vw] font-semibold text-[4vw] md:text-[1vw] my-[3vw] w-full text-center
+    }
+    .close{
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.7s ease-out;
+          
+    }
+}
+.chat{
+    transition: max-height 0.7s ease-out;
 }
 @media (max-width: 768px) { 
     .tabs-component .tabs-component-tab .is-active::before{
diff --git a/components/Card copy.vue b/components/Card copy.vue
new file mode 100644
index 0000000..69a3fc6
--- /dev/null
+++ b/components/Card copy.vue	
@@ -0,0 +1,182 @@
+<template>
+    <div class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
+
+
+        <!-- <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
+            <p
+                class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
+                540,000
+                <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
+            </p>
+            <NuxtImg style="object-fit: cover;" src="/images/course.png" alt="laravel"
+            :placeholder="[30, 20]"
+                class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]" />
+             
+        </div> -->
+
+
+
+        <div class="flexBox flex-col">
+            <div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]">
+                <NuxtLink to="/ترفندهای-پایتون"
+                    class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
+                    ترفند های کاربردی
+                    پایتون
+               </NuxtLink>
+                <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
+                    <p class="flex items-center text-[#878787]">
+                        <svg 
+                        class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
+                        viewBox="0 0 19 19" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M17.4163 13.2525V3.69713C17.4163 2.74713 16.6405 2.04255 15.6984 2.12171H15.6509C13.9884 2.26421 11.463 3.1113 10.0538 3.99796L9.91926 4.08505C9.68967 4.22755 9.30967 4.22755 9.08009 4.08505L8.88217 3.9663C7.47301 3.08755 4.95551 2.24838 3.29301 2.1138C2.35092 2.03463 1.58301 2.74713 1.58301 3.68921V13.2525C1.58301 14.0125 2.20051 14.725 2.96051 14.82L3.19009 14.8517C4.90801 15.0813 7.56009 15.9521 9.08009 16.7834L9.11176 16.7992C9.32551 16.918 9.66592 16.918 9.87176 16.7992C11.3918 15.96 14.0518 15.0813 15.7776 14.8517L16.0388 14.82C16.7988 14.725 17.4163 14.0125 17.4163 13.2525Z"
+                                fill="#E5E5E5" stroke="#E5E5E5" stroke-width="1.5"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M9.5 4.34619V16.2212" stroke="white" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            <path d="M6.13574 6.72119H4.35449" stroke="white" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            <path d="M6.72949 9.09619H4.35449" stroke="white" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+    
+                        <span class="md:ms-[0.2vw]">بک اند</span>
+                    </p>
+                    <p class="flex items-center text-[#878787]">
+                        <svg 
+                        class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
+                        viewBox="0 0 19 19" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M7.12467 1.58337C5.05051 1.58337 3.36426 3.26962 3.36426 5.34379C3.36426 7.37837 4.95551 9.02504 7.02967 9.09629C7.09301 9.08837 7.15634 9.08837 7.20384 9.09629C7.21967 9.09629 7.22759 9.09629 7.24342 9.09629C7.25134 9.09629 7.25134 9.09629 7.25926 9.09629C9.28592 9.02504 10.8772 7.37837 10.8851 5.34379C10.8851 3.26962 9.19884 1.58337 7.12467 1.58337Z"
+                                fill="#E5E5E5" />
+                            <path
+                                d="M11.1468 11.202C8.93801 9.72953 5.33592 9.72953 3.11134 11.202C2.10592 11.8749 1.55176 12.7854 1.55176 13.7591C1.55176 14.7329 2.10592 15.6354 3.10342 16.3004C4.21176 17.0445 5.66842 17.4166 7.12509 17.4166C8.58176 17.4166 10.0384 17.0445 11.1468 16.3004C12.1443 15.6274 12.6984 14.7249 12.6984 13.7433C12.6905 12.7695 12.1443 11.867 11.1468 11.202Z"
+                                fill="#E5E5E5" />
+                            <path
+                                d="M15.8259 5.81083C15.9526 7.34666 14.8601 8.6925 13.348 8.87458C13.3401 8.87458 13.3401 8.87458 13.3321 8.87458H13.3084C13.2609 8.87458 13.2134 8.87458 13.1738 8.89041C12.4059 8.93 11.7013 8.68458 11.1709 8.23333C11.9863 7.505 12.4534 6.4125 12.3584 5.225C12.303 4.58375 12.0813 3.99791 11.7488 3.49916C12.0496 3.34875 12.398 3.25375 12.7542 3.22208C14.3059 3.0875 15.6913 4.24333 15.8259 5.81083Z"
+                                fill="#E5E5E5" />
+                            <path
+                                d="M17.4085 13.1337C17.3452 13.9017 16.8544 14.5667 16.031 15.0179C15.2394 15.4533 14.2419 15.6592 13.2523 15.6354C13.8223 15.1208 14.1548 14.4796 14.2181 13.7987C14.2973 12.8171 13.8302 11.875 12.896 11.1229C12.3656 10.7033 11.7481 10.3708 11.0752 10.1254C12.8248 9.61874 15.0256 9.95915 16.3794 11.0517C17.1077 11.6375 17.4798 12.3737 17.4085 13.1337Z"
+                                fill="#E5E5E5" />
+                        </svg>
+    
+                        <span class="md:ms-[0.2vw]">825 دانشجو</span>
+                    </p>
+                    <p class="flex items-center text-[#878787]">
+                        <svg
+                        class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
+                        viewBox="0 0 19 19" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M9.49967 1.58337C5.13759 1.58337 1.58301 5.13796 1.58301 9.50004C1.58301 13.8621 5.13759 17.4167 9.49967 17.4167C13.8618 17.4167 17.4163 13.8621 17.4163 9.50004C17.4163 5.13796 13.8618 1.58337 9.49967 1.58337ZM12.9434 12.3263C12.8326 12.5163 12.6347 12.6192 12.4288 12.6192C12.3259 12.6192 12.223 12.5955 12.128 12.5321L9.67384 11.0675C9.06426 10.7034 8.61301 9.90379 8.61301 9.19921V5.95337C8.61301 5.62879 8.88217 5.35962 9.20676 5.35962C9.53134 5.35962 9.80051 5.62879 9.80051 5.95337V9.19921C9.80051 9.48421 10.038 9.90379 10.2834 10.0463L12.7376 11.5109C13.0226 11.6771 13.1176 12.0413 12.9434 12.3263Z"
+                                fill="#E5E5E5" />
+                        </svg>
+    
+                        <span class="md:ms-[0.2vw]">00:28</span>
+                    </p>
+                </div>
+                <div class="flex justify-between">
+                    <button
+                        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
+                        class="w-[4.575vw] md:w-[0.833vw] h-[4.575vw] md:h-[0.833vw]"
+                        viewBox="0 0 16 16" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M10.0002 13.28L5.65355 8.93331C5.14022 8.41997 5.14022 7.57997 5.65355 7.06664L10.0002 2.71997"
+                                stroke="white" stroke-width="1.5" stroke-miterlimit="10"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+    
+                    </button>
+                    <span @click="change">
+                        <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
+                            fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M22.4035 2C19.8297 2 17.2812 2.50851 14.9033 3.4965C12.5255 4.48448 10.365 5.9326 8.54504 7.75816C6.72512 9.58372 5.28149 11.751 4.29656 14.1362C3.31163 16.5214 2.80469 19.0778 2.80469 21.6596C2.80469 24.2413 3.31163 26.7978 4.29656 29.183C5.28149 31.5682 6.72512 33.7354 8.54504 35.561C10.365 37.3866 12.5255 38.8347 14.9033 39.8227C17.2812 40.8106 19.8297 41.3191 22.4035 41.3191L22.4035 21.6596V2Z"
+                                fill="white" stroke="url(#paint0_linear_7_1513)" stroke-width="3" />
+                            <path
+                                d="M22.4035 2.00019C25.3093 2.00019 28.1788 2.64834 30.8041 3.89773C33.4295 5.14712 35.745 6.96647 37.5831 9.22406C39.4212 11.4817 40.7358 14.121 41.4318 16.951C42.1278 19.781 42.1877 22.7308 41.6073 25.5869C41.0268 28.443 39.8205 31.1338 38.0756 33.4647C36.3308 35.7955 34.0911 37.708 31.5186 39.0637C28.9462 40.4193 26.1055 41.1842 23.2021 41.303C20.2987 41.4218 17.4052 40.8914 14.7313 39.7504L22.4035 21.6598L22.4035 2.00019Z"
+                                fill="white" stroke="#ABDCDD" stroke-width="3" stroke-linecap="round"
+                                stroke-dasharray="6 6" />
+                            <ellipse cx="22.4002" cy="21.1915" rx="18.2553" ry="17.7322"
+                                transform="rotate(-90 22.4002 21.1915)" fill="white" />
+                            <path
+                                d="M10.6786 30.0149L12.0474 32.761C12.234 33.1433 12.7318 33.5099 13.1518 33.5801L15.6327 33.9936C17.2193 34.2589 17.5926 35.4135 16.4493 36.5525L14.5206 38.4872C14.1939 38.8149 14.015 39.4468 14.1161 39.8993L14.6683 42.2943C15.1039 44.1901 14.1006 44.9234 12.4285 43.9326L10.1031 42.5518C9.68309 42.3021 8.99091 42.3021 8.56316 42.5518L6.23774 43.9326C4.5734 44.9234 3.56235 44.1823 3.99788 42.2943L4.55007 39.8993C4.65117 39.4468 4.4723 38.8149 4.14565 38.4872L2.21688 36.5525C1.0814 35.4135 1.44693 34.2589 3.0335 33.9936L5.51445 33.5801C5.92665 33.5099 6.4244 33.1433 6.61105 32.761L7.97986 30.0149C8.72648 28.5248 9.93974 28.5248 10.6786 30.0149Z"
+                                fill="#0D3F40" />
+                            <path
+                                d="M19.5137 27.3618C19.5244 27.0738 19.5297 26.6471 19.5297 26.0818C19.5297 24.3645 19.4391 22.8125 19.2577 21.4258C19.0231 19.6551 18.6284 18.1351 18.0737 16.8658L19.8497 15.7938C20.0311 16.1671 20.2071 16.6045 20.3777 17.1058C20.5484 17.5538 20.7031 17.9005 20.8417 18.1458C20.9911 18.3911 21.1831 18.5885 21.4177 18.7378C21.6524 18.8765 21.9617 18.9458 22.3457 18.9458C23.3697 18.9458 23.8817 18.2791 23.8817 16.9458C23.8817 16.7005 23.8657 16.4338 23.8337 16.1458L25.5137 15.8098C25.6097 16.2685 25.6577 16.7325 25.6577 17.2018C25.6577 17.9485 25.5351 18.6365 25.2897 19.2658C25.0444 19.8845 24.6711 20.3858 24.1697 20.7698C23.6791 21.1431 23.0817 21.3298 22.3777 21.3298C21.9617 21.3298 21.5671 21.2445 21.1937 21.0738V21.1218C21.3217 22.3271 21.3857 23.8311 21.3857 25.6338C21.3857 26.4018 21.3804 26.9778 21.3697 27.3618H19.5137Z"
+                                fill="#383E43" />
+                            <defs>
+                                <linearGradient id="paint0_linear_7_1513" x1="20.8356" y1="1.21362"
+                                    x2="22.4054" y2="1.99611" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#22A4A6" stop-opacity="0.6" />
+                                    <stop offset="1" stop-color="#22A4A6" stop-opacity="0" />
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </span>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+const change = () =>{
+    toast.error('متن تست')
+}
+</script>
+<style scoped>
+.post::before {
+    content: "";
+    position: absolute;
+    top: -8.1vw;
+    left: 0vw;
+    width: 3vw;
+    height: 8.1vw;
+    border-bottom-left-radius: 0.781vw;
+    box-shadow: -0.03vw 0.8vw 0 -0.026vw rgb(255, 255, 255);
+}
+.post::after {
+    content: "";
+    position: absolute;
+    top: 0.15vw;
+    left: 100%;
+    width: 3.083vw;
+    height: 2.083vw;
+    border-bottom-left-radius: 0.781vw;
+    box-shadow: -0.26vw 1.042vw 0 0.026vw rgb(255, 255, 255);
+}
+
+
+
+@media (max-width: 768px) {
+    .post::before {
+        content: "";
+        position: absolute;
+        top: -8.1vw;
+        left: 0vw;
+        width: 3vw;
+        height: 8.1vw;
+        border-bottom-left-radius: 3.59vw;
+        box-shadow: -0.03vw 2.8vw 0 -0.026vw rgb(255, 255, 255) ;
+    }
+    .post::after {
+        content: "";
+        position: absolute;
+        top: 3.4vw;
+        left: 100%;
+        width: 5.083vw;
+        height: 6.083vw;
+        border-bottom-left-radius: 3.59vw;
+        box-shadow: -1vw 2vw 0 0.026vw rgb(255, 255, 255) ;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/components/Card.vue b/components/Card.vue
index 9bbb778..c383250 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -1,15 +1,14 @@
 <template>
-    <div class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
-
-
+    <div  class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
         <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
             <p
                 class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
                 540,000
                 <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
             </p>
-            <NuxtImg style="object-fit: cover;" src="/images/course.png" alt="laravel"
+            <NuxtImg style="object-fit: cover;" :src="props.course?.image"  alt="laravel"
             :placeholder="[30, 20]"
+            :format="webp"
                 class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]" />
              
         </div>
@@ -20,8 +19,7 @@
             <div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]">
                 <NuxtLink to="/ترفندهای-پایتون"
                     class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
-                    ترفند های کاربردی
-                    پایتون
+                 {{props.course?.name}}
                </NuxtLink>
                 <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
                     <p class="flex items-center text-[#878787]">
@@ -78,7 +76,8 @@
                     </p>
                 </div>
                 <div class="flex justify-between">
-                    <button
+                 
+                    <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
@@ -91,7 +90,7 @@
                                 stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
     
-                    </button>
+                    </NuxtLink>
                     <span @click="change">
                         <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
                             fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -124,9 +123,11 @@
             </div>
         </div>
     </div>
+   
 </template>
 <script setup>
 import { useToast } from 'vue-toastification'
+const props = defineProps(['course'])
 const toast = useToast()
 const change = () =>{
     toast.error('متن تست')
diff --git a/components/courses-page/Courses-list.vue b/components/courses-page/Courses-list.vue
index 1149810..f44cb6e 100644
--- a/components/courses-page/Courses-list.vue
+++ b/components/courses-page/Courses-list.vue
@@ -9,8 +9,7 @@
         class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
       >
         <svg
-        class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
-    
+          class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
           viewBox="0 0 24 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -42,9 +41,7 @@
         >
       </span>
       <ul class="gap-x-[1vw] items-center hidden md:flex">
-        <li
-          class="relative pb-[0.681vw] text-primaryGreen active"
-        >
+        <li class="relative pb-[0.681vw] text-primaryGreen active">
           همه دوره ها
         </li>
         <li class="pb-[0.681vw]">دوره های رایگان</li>
@@ -52,50 +49,20 @@
         <li class="pb-[0.681vw]">گران ترین</li>
       </ul>
     </div>
-    <div v-if="loading"
+    <div
       class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
+      v-for="(course, index) in data.data.value"
+      :key="index"
     >
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-<Card />
-  </div>
-  <div v-else
-  class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
-  >
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  <Loading />
-  </div>
-
+      <Card :course="course" />
+    </div>
   </div>
 </template>
 
 <script setup>
 // const pages = 17 / 16
 // console.log(Math.ceil(pages));
+const data = await useFetch("/api/course");
 const openSortOptions = () => {
   if (process.client) {
     document
@@ -108,22 +75,19 @@ const openSortOptions = () => {
       "brightness(90%)";
   }
 };
-const loading = ref(false)
-console.log(loading.value);
+const loading = ref(false);
 onMounted(() => {
   setTimeout(() => {
-  loading.value = true 
-  console.log(loading.value); 
-  }, 5000);
-})
-
+    loading.value = true;
+  }, 2000);
+});
 </script>
 
 <style>
-.active::before{
-  content: '';
+.active::before {
+  content: "";
   position: absolute;
-  background-color: #0D3F40;
+  background-color: #0d3f40;
   width: 100%;
   height: 0.01vw;
   top: 2vw;
diff --git a/components/login-page/Check-otp.vue b/components/login-page/Check-otp.vue
index 59c6532..308bcfd 100644
--- a/components/login-page/Check-otp.vue
+++ b/components/login-page/Check-otp.vue
@@ -132,10 +132,10 @@ const phoneNumber = useState("phoneNumber");
 const timer = ref(5);
 
   async function checkOtp() {
-    console.log(code);
     if (code.value == null) {
       errors.value = [];
-      return errors.value.push("وارد کردن کد ورود الزامی است");
+      // return errors.value.push("وارد کردن کد ورود الزامی است");
+      return toast.error("وارد کردن کد ورود الزامی است")
     }
 
     try {
@@ -155,9 +155,9 @@ const timer = ref(5);
       }
       loading.value = false;
     } catch (error) {
-      console.log("client err :", error);
       loading.value = false;
-      return errors.value.push(error.data.data.error);
+      return toast.error(error.data.data.error)
+      // errors.value.push(error.data.data.error);
     }
   };
 
@@ -177,7 +177,8 @@ async function resendSMS() {
     options.value = false;
   } catch (error) {
     loading.value = false;
-    return errors.value.push(error.data.data.error);
+    return toast.error(error.data.data.error)
+    // return errors.value.push(error.data.data.error);
   }
 }
 
@@ -197,10 +198,9 @@ async function resendCall() {
     options.value = false;
     loading.value = false;
   } catch (error) {
-       console.log('errrrr :',error.data.data.message)
-      console.log('errrrr :', error.data.data.error)
     loading.value = false;
-    return errors.value.push(error.data.data.error);
+    // return errors.value.push(error.data.data.error);
+    return toast.error(error.data.data.error)
   }
 }
 onMounted(() => {
diff --git a/components/login-page/Login-form.vue b/components/login-page/Login-form.vue
index f53e8b7..dda77b8 100644
--- a/components/login-page/Login-form.vue
+++ b/components/login-page/Login-form.vue
@@ -55,15 +55,17 @@ const loading = ref(false);
 const FormStatus = useState("showCheckOtpForm");
 async function login() {
      if (phone.value == null) {
-        errors.value = []
-        return errors.value.push("شماره موبایل الزامی است")
+     return toast.error("شماره موبایل الزامی است")
+        // errors.value = []
+        // return errors.value.push("شماره موبایل الزامی است")
     }
 
     const pattern = /^(\+98|0)?9\d{9}$/;
 
     if (!pattern.test(phone.value)) {
-      errors.value = []
-       return errors.value.push("فرمت شماره موبایل معتبر نیست")
+     return toast.error("فرمت شماره موبایل معتبر نیست")
+      // errors.value = []
+      //  return errors.value.push("فرمت شماره موبایل معتبر نیست")
     };
 
   try {
@@ -84,7 +86,8 @@ async function login() {
     loading.value = false;
   } catch (error) {
   loading.value = false;
-  return errors.value.push(error.data.data.error)
+  return toast.error("عملیات ناموفق، لطفا کمی بعد تلاش کنید")
+  // return errors.value.push(error.data.data.error)
   }
 }
 </script>
diff --git a/components/product-page/Course-detail.vue b/components/product-page/Course-detail.vue
index 8a82162..04688df 100644
--- a/components/product-page/Course-detail.vue
+++ b/components/product-page/Course-detail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
-    <product-page-course-detailsHeader />
+    <product-page-course-detailsHeader :props="props"/>
     <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]"
     >
@@ -18,4 +18,9 @@
     </div>
   </div>
 </template>
-  
+
+
+<script setup>
+const props = defineProps(['slug'])
+
+</script>
\ No newline at end of file
diff --git a/components/product-page/course-details/Header.vue b/components/product-page/course-details/Header.vue
index 548007b..188d1c2 100644
--- a/components/product-page/course-details/Header.vue
+++ b/components/product-page/course-details/Header.vue
@@ -2,7 +2,7 @@
     <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
         <NuxtImg
         :placeholder="[30, 20]"
-          src="/images/html.png"
+          :src="props.props.slug.value.image"
           alt="html"
           class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
         />
@@ -10,7 +10,7 @@
           <h1
             class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
           >
-            آموزش HTML رایگان مقدماتی تا پیشرفته
+           {{ props.props.slug.value.name }} 
           </h1>
           <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
             برنامه نویسی
@@ -195,4 +195,8 @@
           </div>
         </div>
       </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+</script>
\ No newline at end of file
diff --git a/pages/[product]/index.vue b/pages/[product]/index.vue
index 715ba24..872cda2 100644
--- a/pages/[product]/index.vue
+++ b/pages/[product]/index.vue
@@ -1,8 +1,17 @@
 <template>
   <product-pageAttended-course v-if="paidCourse" />
-  <product-pageCourse-detail v-else/>
+  <product-pageCourse-detail :slug="data.data" v-else/>
 </template>
 
 <script setup>
+const route = useRoute();
+const data = await useFetch("/api/productId", {
+    method: "POST",
+      body: {
+        id: route.params.product,
+      },
+  })
 const paidCourse = useState('paidStatus', () => false)
+
+
 </script>
\ No newline at end of file
diff --git a/pages/account/profile.vue b/pages/account/profile.vue
index 3881187..c8988fc 100644
--- a/pages/account/profile.vue
+++ b/pages/account/profile.vue
@@ -110,5 +110,4 @@
 
 <script setup>
 const { authUser } = useAuth();
-console.log('user :', authUser.value);
 </script>
\ No newline at end of file
diff --git a/pages/account/tickets.vue b/pages/account/tickets.vue
index 77ddbde..b01dcd0 100644
--- a/pages/account/tickets.vue
+++ b/pages/account/tickets.vue
@@ -1,28 +1,217 @@
 <template>
-  <div>
+  <div class="relative">
     <tabs
       nav-item-active-class="text-primaryGreen relative"
       nav-class="scrolBar flex  gap-[2vw] md:gap-[0.8vw] md:border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]"
       :options="{ useUrlFragment: false }"
     >
-    <div class="flex flex-col md:flex-col-reverse">
-  
+      <div class="flex flex-col md:flex-col-reverse">
         <div class="border-b md:border-0 py-[8vw] md:py-0">
           <p
             class="text-[4.038vw] md:text-[1.335vw] border-b border-b-[0.144vw] pb-[0.7vw]"
           >
             تیکت ها
           </p>
-  
-          <tab :name="tab1">
-            <div>
-              <ul class="space-y-[0.5vw] mt-[0.5vw]">
-                <li class="flex justify-between items-center">
-                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
-                    طراحی سایت
+
+           <tab :name="tab1">
+            <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"
+                :key="ticket.id"
+              >
+            
+              <li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
+                  <p
+                  @click="openTicket(ticket.id)"
+                  class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                    {{ ticket.subject }}
                   </p>
                   <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    1402,09,12
+                    {{ ticket.createdAt }}
+                  </p>
+                  <div class="flex items-center 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]"
+                    >
+                      مشاوره
+                    </button>
+                    <button
+                      class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                    >
+                      پاسخ داده شده
+                    </button>
+                  </div>
+                </li>
+                <div class="chatBox">
+                  <div
+                    class=" grid justify-items-stretch w-full close"
+                    :id="ticket.id"
+                  >
+                  <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"
+                      v-for="(message, index) in ticketMessages[0]
+                        ?.ticketMessages"
+                      :key="index"
+                    >
+                  
+                    
+                      <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]"
+                      >
+                        <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>
+                        <p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
+                          {{ message.content }}
+                        </p>
+                      </div>
+                     
+                    </div>
+                    <div
+                    class="emptyText"
+                    v-if="ticketMessages[0]
+                    ?.ticketMessages.length < 1">
+                      گفتگویی جهت نمایش وجود ندارد
+                    </div>
+                  </div>
+                    <div
+                      class="justify-self-end flex flex-col w-full mt-[8vw] md:mt-[1vw] grid justify-items-stretch"
+                    >
+                      <textarea
+                        v-model="content"
+                    placeholder="متن تیکت خود را بنویسید..."
+                        class="textPlaceholer p-[4vw] md:p-[2vw] w-full bg-[#F5F5F5] rounded-[5.128vw] md:rounded-[1.042vw]"
+                        name="message"
+                        cols="30"
+                        rows="10"
+                      ></textarea>
+                      <button
+                        class="greenButton text-[3.59vw] rounded-[2.564vw] md:rounded-[0.521vw] md:text-[0.833vw] w-full md:w-[10vw] float-left mt-[5vw] md:mt-[1vw] mb-[5vw] justify-self-end h-[12vw] md:h-[2.9vw]"
+                        @click="sendMessage(ticket.id)"
+                      >
+                        ارسال
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </ul>
+            </div>
+          </tab> 
+
+           <tab :name="tab2">
+            <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"
+                :key="ticket.id"
+                v-show="ticket.status === 'active'"
+              >
+                <li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
+                  <p 
+                  @click="openTicket(ticket.id)"
+                  class="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>
+                  <div class="flex items-center 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]"
+                    >
+                      مشاوره
+                    </button>
+                    <button
+                      class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                    >
+                      پاسخ داده شده
+                    </button>
+                  </div>
+                </li>
+                <div class="chatBox">
+                  <div
+                    class="grid justify-items-stretch w-full close"
+                    :id="ticket.id"
+                  >
+                  <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"
+                      v-for="(message, index) in ticketMessages[0]
+                        ?.ticketMessages"
+                      :key="index"
+                    >
+                      <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]"
+                      >
+                        <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>
+                        <p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
+                          {{ message.content }}
+                        </p>
+                      </div>
+                     
+                    </div>
+                    <div
+                    class="emptyText"
+                    v-if="ticketMessages[0]
+                    ?.ticketMessages.length < 1">
+                      محتوایی جهت نمایش وجود ندارد
+                    </div>
+                  </div>
+                    <div
+                      class="justify-self-end flex flex-col w-full mt-[8vw] md:mt-[1vw] grid justify-items-stretch"
+                    >
+                      <textarea
+                      v-model="content"
+                      placeholder="متن تیکت خود را بنویسید..."
+                       
+                      class="p-[4vw] md:p-[2vw] w-full bg-[#F5F5F5] rounded-[5.128vw] md:rounded-[1.042vw]"
+                        name="message"
+                        cols="30"
+                        rows="10"
+                      ></textarea>
+                      <button
+                        class="greenButton text-[3.59vw] rounded-[2.564vw] md:rounded-[0.521vw] md:text-[0.833vw] w-full md:w-[10vw] float-left mt-[5vw] md:mt-[1vw] mb-[5vw] justify-self-end h-[12vw] md:h-[2.9vw]"
+                        @click="sendMessage(ticket.id)"
+                      >
+                        ارسال
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </ul>
+            </div>
+          </tab> 
+
+          <tab :name="tab3">
+            <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"
+                :key="ticket.id"
+                v-show="ticket.status !== 'active'"
+              >
+
+                <li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
+                
+                  <p class="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>
                   <div class="flex items-center gap-[1vw]">
                     <button
@@ -37,110 +226,240 @@
                     </button>
                   </div>
                 </li>
-                <li class="flex justify-between items-center">
-                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
-                    طراحی سایت
-                  </p>
-                  <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    1402,09,12
-                  </p>
-                  <div class="flex items-center gap-[1vw]">
-                    <button
-                      class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
+                <div class="chatBox">
+                  
+                  <div
+                    class="grid justify-items-stretch w-full hidden close"
+                    :id="ticket.id"
+                  >
+                  <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"
+                      v-for="(message, index) in ticketMessages[0]
+                        ?.ticketMessages"
+                      :key="index"
                     >
-                      مشاوره
-                    </button>
-                    <button
-                      class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
-                    >
-                      پاسخ داده شده
-                    </button>
+                    <div
+                    class="emptyText"
+                    v-if="ticketMessages[0]
+                    ?.ticketMessages.length < 1">
+                      محتوایی جهت نمایش وجود ندارد
+                    </div>
+                      <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]"
+                      >
+                        <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>
+                        <p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
+                          {{ message.content }}
+                        </p>
+                      </div>
+                     
+                    </div>
+                    
                   </div>
-                </li>
-                <li class="flex justify-between items-center">
-                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
-                    طراحی سایت
-                  </p>
-                  <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    1402,09,12
-                  </p>
-                  <div class="flex items-center gap-[1vw]">
-                    <button
-                      class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
+                    <div
+                      class="justify-self-end flex flex-col w-full mt-[8vw] md:mt-[1vw] grid justify-items-stretch"
                     >
-                      مشاوره
-                    </button>
-                    <button
-                      class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
-                    >
-                      پاسخ داده شده
-                    </button>
+                      <textarea
+                        v-model="content"
+                        placeholder="پاسخ"
+                        class="p-[4vw] md:p-[2vw] w-full bg-[#F5F5F5] rounded-[5.128vw] md:rounded-[1.042vw]"
+                        name="message"
+                        cols="30"
+                        rows="10"
+                      ></textarea>
+                      <button
+                        class="greenButton text-[3.59vw] rounded-[2.564vw] md:rounded-[0.521vw] md:text-[0.833vw] w-full md:w-[10vw] float-left mt-[5vw] md:mt-[1vw] mb-[5vw] justify-self-end h-[12vw] md:h-[2.9vw]"
+                        @click="sendMessage(ticket.id)"
+                      >
+                        ارسال
+                      </button>
+                    </div>
                   </div>
-                </li>
+                </div>
               </ul>
             </div>
           </tab>
-          <tab :name="tab2"> محتوا دوم </tab>
-          <tab :name="tab3"> محتوا سوم </tab>
         </div>
-        <button
-        class="flexBox items-center greenButton py-[5vw] md:py-0 my-[6vw] md:my-[3vw] rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw] w-full md:w-[15.479vw]"
-      >
-        <svg
-          class="w-[5.641vw] md:w-[1.406vw] h-[5.641vw] md:h-[1.406vw]"
-          viewBox="0 0 27 27"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.1196 4.5H7.86961C3.56086 4.5 2.35711 5.535 2.25586 9.5625C4.42711 9.5625 6.18211 11.3287 6.18211 13.5C6.18211 15.6712 4.42711 17.4262 2.25586 17.4375C2.35711 21.465 3.56086 22.5 7.86961 22.5H19.1196C23.6196 22.5 24.7446 21.375 24.7446 16.875V10.125C24.7446 5.625 23.6196 4.5 19.1196 4.5Z"
-            stroke="white"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M10.1177 4.5V8.4375"
-            stroke="white"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M10.1177 18.5625V22.5"
-            stroke="white"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M16.903 10.4962L17.6005 11.9025C17.668 12.0375 17.803 12.1387 17.9493 12.1612L19.5018 12.3862C19.8843 12.4425 20.0418 12.915 19.7605 13.185L18.6355 14.2762C18.523 14.3775 18.478 14.535 18.5005 14.6925L18.7705 16.2337C18.838 16.6162 18.433 16.9087 18.0955 16.7287L16.7118 15.9975C16.5768 15.93 16.408 15.93 16.273 15.9975L14.8893 16.7287C14.5405 16.9087 14.1468 16.6162 14.2143 16.2337L14.4843 14.6925C14.5068 14.535 14.4618 14.3887 14.3493 14.2762L13.2355 13.185C12.9543 12.915 13.1118 12.4425 13.4943 12.3862L15.0468 12.1612C15.2043 12.1387 15.328 12.0487 15.3955 11.9025L16.0818 10.4962C16.2393 10.1475 16.7343 10.1475 16.903 10.4962Z"
-            stroke="white"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-        تیکت جدید
-      </button>
-    </div>
-  
-  
-  
+<div class="flex flex-col md:flex-row justify-between">
+  <button
+    @click="addTicketForm = true"
+    class="flexBox items-center greenButton py-[5vw] md:py-0 my-[6vw] md:my-[3vw] rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw] w-full md:w-[15.479vw] h-[12vw] md:h-[3vw]"
+  >
+    <svg
+      class="w-[5.641vw] md:w-[1.406vw] h-[5.641vw] md:h-[1.406vw]"
+      viewBox="0 0 27 27"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.1196 4.5H7.86961C3.56086 4.5 2.35711 5.535 2.25586 9.5625C4.42711 9.5625 6.18211 11.3287 6.18211 13.5C6.18211 15.6712 4.42711 17.4262 2.25586 17.4375C2.35711 21.465 3.56086 22.5 7.86961 22.5H19.1196C23.6196 22.5 24.7446 21.375 24.7446 16.875V10.125C24.7446 5.625 23.6196 4.5 19.1196 4.5Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.1177 4.5V8.4375"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.1177 18.5625V22.5"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.903 10.4962L17.6005 11.9025C17.668 12.0375 17.803 12.1387 17.9493 12.1612L19.5018 12.3862C19.8843 12.4425 20.0418 12.915 19.7605 13.185L18.6355 14.2762C18.523 14.3775 18.478 14.535 18.5005 14.6925L18.7705 16.2337C18.838 16.6162 18.433 16.9087 18.0955 16.7287L16.7118 15.9975C16.5768 15.93 16.408 15.93 16.273 15.9975L14.8893 16.7287C14.5405 16.9087 14.1468 16.6162 14.2143 16.2337L14.4843 14.6925C14.5068 14.535 14.4618 14.3887 14.3493 14.2762L13.2355 13.185C12.9543 12.915 13.1118 12.4425 13.4943 12.3862L15.0468 12.1612C15.2043 12.1387 15.328 12.0487 15.3955 11.9025L16.0818 10.4962C16.2393 10.1475 16.7343 10.1475 16.903 10.4962Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    تیکت جدید
+  </button>
+  <div class="flex flex-col md:flex-row items-center gap-[0.5vw]" v-if="addTicketForm">
+    <input
+    v-model="subject"
+    class="w-full items-center md:h-[3vw] py-[5vw] md:py-0 my-[6vw] md:my-[3vw] rounded-[2.564vw] md:rounded-[0.781vw] border text-[4.038vw] md:text-[0.938vw] ps-[3vw] md:ps-[2vw] md:pe-[10vw]"
+    type="text" placeholder="موضوع تیکت را وارد کنید">
+<button
+ class="h-[12vw] w-full md:w-auto md:h-[3vw] px-[1.5vw] greenButton rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw]
+"
+@click="sendTicket"
+>ثبت</button>
+<button class="mt-[1vw] md:mt-0 h-[12vw] w-full md:w-auto md:h-[3vw] px-[1.5vw] bg-red-500 md:h-[3vw] text-white rounded-[2.564vw] md:rounded-[0.781vw] text-[4.038vw] md:text-[0.938vw]
+"
+@click="addTicketForm = false"
+>انصراف</button>
+  </div>
+
+</div>
+      </div>
     </tabs>
+    <!-- <div
+      v-if="addTicketForm"
+      class="backdrop-blur-xl bg-white/30 absolute px-[5vw] py-[8vw] 
+      w-full top-0 space-y-[5vw] md:space-y-[2vw] border rounded-[1vw] shadow-md h-[80vw] md:h-auto"
+    >
+      <p class="text-[3vw] md:text-[1vw] font-semibold text-primaryGreen">موضوع تیکت :</p>
+      <div class="flex flex-col md:flex-row gap-[5vw] md:gap-[1vw]">
+        <input
+          class="h-[10vw] md:h-[3vw] rounded-[1vw] px-[1vw] md:w-[40vw] border"
+          type="text"
+          placeholder="موضوع تیکت را وارد کنید"
+          v-model="subject"
+        />
+        <button
+          class="text-[3vw] md:text-[0.7vw] greenButton rounded-[1vw] px-[1.5vw] h-[10vw] md:h-[3vw]"
+          @click="sendTicket"
+        >
+          ثبت
+        </button>
+        <button
+          class="text-[3vw] md:text-[0.7vw]  bg-red-400 rounded-[1vw] text-white px-[1vw] h-[10vw] md:h-[3vw]"
+          @click="addTicketForm = false"
+        >
+          انصراف
+        </button>
+      </div>
+    </div> -->
   </div>
 </template>
 
 
 <script setup>
-import { Tabs, Tab } from "vue3-tabs-component";
+import {Tabs, Tab} from 'vue3-tabs-component';
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+
+const { data: tickets, refresh: load } = await useFetch("/api/ticket");
+console.log('cli tick', tickets);
+const loading = ref(false);
+const addTicketForm = ref(false);
+const subject = ref(null);
+const content = ref(null);
+const ticketMessages = ref([]);
+const update = ref(null)
+
+
+const sendTicket = async () => {
+  if (subject.value === null) {
+    return toast.error("موضوع تیکت را وارد کنید")
+  }
+  const data = await useFetch("/api/ticket", {
+    method: "POST",
+    body: {
+      subject,
+    },
+  });
+  subject.value = '';
+  addTicketForm.value = false;
+  load()
+
+};
+
+const openTicket = async (data) => {
+  loading.value = true;
+  ticketMessages.value = [];
+  if (process.client) {
+    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";
+      } else {
+        slides[i].style.maxHeight = null;
+      }
+ 
+    }
+  }
+
+
+
+  const {data: single, refresh: reload} = await useFetch("/api/ticket/id", {
+    method: "POST",
+    body: {
+      id: data,
+    },
+  });
+  ticketMessages.value.push(single.value);
+  reload()
+  loading.value = false;
+
+};
+const sendMessage = async (data, reload) => {
+  if (content.value === null || '') {
+    return toast.error("متن تیکت را وارد کنید")
+  }
+  const message = await useFetch("/api/ticket/message", {
+    method: "POST",
+    body: {
+      content: content.value,
+      ticketId: data,
+    },
+  });
+  content.value = "";
+  toast.success("تیکت جدید با موفقیت ثبت")
+  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]"
     viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.9375 14.0625C21.9375 12.51 23.1975 11.25 24.75 11.25V10.125C24.75 5.625 23.625 4.5 19.125 4.5H7.875C3.375 4.5 2.25 5.625 2.25 10.125V10.6875C3.8025 10.6875 5.0625 11.9475 5.0625 13.5C5.0625 15.0525 3.8025 16.3125 2.25 16.3125V16.875C2.25 21.375 3.375 22.5 7.875 22.5H19.125C23.625 22.5 24.75 21.375 24.75 16.875C23.1975 16.875 21.9375 15.615 21.9375 14.0625Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.25 4.5L11.25 22.5" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5"/>
+<path d="M21.9375 14.0625C21.9375 12.51 23.1975 11.25 24.75 11.25V10.125C24.75 5.625 23.625 4.5 19.125 4.5H7.875C3.375 4.5 2.25 5.625 2.25 10.125V10.6875C3.8025 10.6875 5.0625 11.9475 5.0625 13.5C5.0625 15.0525 3.8025 16.3125 2.25 16.3125V16.875C2.25 21.375 3.375 22.5 7.875 22.5H19.125C23.625 22.5 24.75 21.375 24.75 16.875C23.1975 16.875 21.9375 15.615 21.9375 14.0625Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.25 4.5L11.25 22.5" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5"/>
 </svg>
 
 همه تیکت ها
diff --git a/server/api/auth/login-step-two.post.js b/server/api/auth/login-step-two.post.js
index 2850760..b8be856 100644
--- a/server/api/auth/login-step-two.post.js
+++ b/server/api/auth/login-step-two.post.js
@@ -17,7 +17,6 @@ export default defineEventHandler(async (event) => {
         })
              return data;
     } catch (err) {
-      console.log('server err :', err);
       return err
     }
 
diff --git a/server/api/auth/login.post.js b/server/api/auth/login.post.js
index ed09c60..c20fef7 100644
--- a/server/api/auth/login.post.js
+++ b/server/api/auth/login.post.js
@@ -9,10 +9,8 @@ export default defineEventHandler(async (event) => {
                 'Accept': 'application/json',
             }
         });
-        console.log('code sended !!!!');
              return data;
     } catch (err) {
-      console.log(err.data);
       return err
     }
 
diff --git a/server/api/auth/me.get.js b/server/api/auth/me.get.js
index e2b4857..d16a840 100644
--- a/server/api/auth/me.get.js
+++ b/server/api/auth/me.get.js
@@ -22,7 +22,6 @@ export default defineEventHandler(async (event) => {
         //         path: '/'
         //     })
         // }
-        console.log(error);
         return error;
     }
 
diff --git a/server/api/course.get.js b/server/api/course.get.js
new file mode 100644
index 0000000..89e89d9
--- /dev/null
+++ b/server/api/course.get.js
@@ -0,0 +1,15 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+    try {
+        const data = await $fetch(`${apiBase}/course`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+            }
+        });
+        return data;
+    } catch (error) {
+        return error;
+    }
+
+})
\ No newline at end of file
diff --git a/server/api/productId.js b/server/api/productId.js
new file mode 100644
index 0000000..14fa3db
--- /dev/null
+++ b/server/api/productId.js
@@ -0,0 +1,17 @@
+
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+     const body = await readBody(event);
+    try {
+        const data = await $fetch(`${apiBase}/course/${body.id}`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+            }
+        });
+        return data;
+    } catch (error) {
+        return error;
+    }
+
+})
\ No newline at end of file
diff --git a/server/api/ticket/id.js b/server/api/ticket/id.js
new file mode 100644
index 0000000..f99fead
--- /dev/null
+++ b/server/api/ticket/id.js
@@ -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', body.id);
+    try {
+        const data = await $fetch(`${apiBase}/ticket/${body.id}`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            id: body.id
+        });
+        console.log('tttt :', data);
+        return data;
+    } catch (error) {
+        return error;
+    }
+
+})
\ No newline at end of file
diff --git a/server/api/ticket/index.get.js b/server/api/ticket/index.get.js
new file mode 100644
index 0000000..e17eb58
--- /dev/null
+++ b/server/api/ticket/index.get.js
@@ -0,0 +1,27 @@
+export default defineEventHandler(async (event) => {
+
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+
+    try {
+        const data = await $fetch(`${apiBase}/ticket`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return data;
+    } catch (error) {
+        // if (error.statusCode == 401) {
+        //     setCookie(event, 'token', '', {
+        //         httpOnly: true,
+        //         secure: true,
+        //         maxAge: new Date(0),
+        //         path: '/'
+        //     })
+        // }
+        return error;
+    }
+
+})
\ No newline at end of file
diff --git a/server/api/ticket/index.post.js b/server/api/ticket/index.post.js
new file mode 100644
index 0000000..1b069f6
--- /dev/null
+++ b/server/api/ticket/index.post.js
@@ -0,0 +1,22 @@
+export default defineEventHandler(async (event) => {
+
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    const body = await readBody(event);
+
+    try {
+        const data = await $fetch(`${apiBase}/ticket`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body
+        });
+        return data;
+    } catch (error) {
+
+        return error;
+    }
+
+})
\ No newline at end of file
diff --git a/server/api/ticket/message.post.js b/server/api/ticket/message.post.js
new file mode 100644
index 0000000..595bda9
--- /dev/null
+++ b/server/api/ticket/message.post.js
@@ -0,0 +1,30 @@
+export default defineEventHandler(async (event) => {
+
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    const body = await readBody(event);
+console.log('bod' , body);
+    try {
+        const data = await $fetch(`${apiBase}/ticket/message`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+             body
+        });
+        console.log('new :', data);
+        return data;
+    } catch (error) {
+        // if (error.statusCode == 401) {
+        //     setCookie(event, 'token', '', {
+        //         httpOnly: true,
+        //         secure: true,
+        //         maxAge: new Date(0),
+        //         path: '/'
+        //     })
+        // }
+        return error;
+    }
+
+})
\ No newline at end of file