<template>
  <div
    id="brightnessFilter"
    class="flex justify-center -mt-[12vw] mb-[25vw] md:my-[5.9vw]"
  >
    <div class="courses">
      <div>
        <div class="category">
          <h3
            v-if="$route.path === '/'"
            class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
          >
            انتخاب گسترده ای از دوره ها
          </h3>
          <div
            class="flex flex-col md:flex-row items-start justify-between md:items-center"
            v-else
          >
            <h3
              class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
            >
              حرفه آینده را کشف کنید
            </h3>
            <span
              class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
            >
              {{ data?.count }}
              ویدیو آموزشی</span
            >
          </div>
          <p
            class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
          >
            انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید
            که هر ماه منتشر می شود
          </p>
          <div
            v-show="$route.path === '/courses'"
            class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
          >
            <svg
              class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
              viewBox="0 0 28 28"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
                stroke="#878787"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M25.6668 25.6667L23.3335 23.3333"
                stroke="#878787"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>

            <input
            v-model="search"
            @change="searchHandler"
              class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
              type="text"
              placeholder="نام آموزش ، دوره و ... را وارد کنید"
            />
          </div>


          <div class="mt-[10vw] md:mt-[2.5vw] md:px-[1.6vw] w-full flex gap-[1vw] md:gap-[0.5vw] scrol relative overflow-auto whitespace-nowrap">
            <p
            :class="{'bg-primaryGreen text-white'  :  !route.query.hasOwnProperty('category')}"
            @click="removeCategory()"
            class="flexBox cursor-pointer
            py-[2.051vw] md:py-[0.625vw] rounded-[2.051vw] md:rounded-[0.521vw] 
            border-[1px] border-primaryGreen text-primaryGreen
            text-[3.59vw] md:text-[1.055vw]
            px-[3.5vw] md:px-[1.5vw] font-semibold thin
            ">همه دسته بندی ها</p>
            <p class="flexBox cursor-pointer
            py-[2.051vw] md:py-[0.625vw] rounded-[2.051vw] md:rounded-[0.521vw] 
            border-[1px] border-primaryGreen text-primaryGreen
            text-[3.59vw] md:text-[1.055vw]
            px-[3.5vw] md:px-[1.5vw] font-semibold thin
            "
            :class="{'bg-primaryGreen text-white'  :  route.query.hasOwnProperty('category') && route.query.category == slide.id }"
            v-for="slide in categories"
            :key="slide.id"
            @click="selectCategory(slide.id)"
            >{{slide.name}}</p>

          </div>
          


          <!-- <div
            class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]"
          >
            <svg
              @click="this.$refs.carousel.next()"
              class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
              viewBox="0 0 30 30"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                class="fill-[#878787] hover:fill-[#383E43]"
                d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
              />
            </svg>



            <Carousel
              dir="rtl"
              :items-to-show="2"
              ref="carousel"
              :wrapAround="false"
              class="w-full flex"
            >
      
              <Slide
                v-for="slide in categories"
                :key="slide.id"
                @click="selectCategory(slide.id)"
              >
                <p 
                class="categoriesOption cursor-pointer"
                :class="{'bg-primaryGreen text-white'  :  route.query.hasOwnProperty('category') && route.query.category == slide.id }"
                >{{ slide.name }}</p>
              </Slide>
            </Carousel>

            <svg
              @click="this.$refs.carousel.prev()"
              class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
              viewBox="0 0 30 30"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
                class="fill-[#878787] hover:fill-[#383E43]"
              />
            </svg>
          </div> -->
        </div>

        <div
          class="suggestions px-[1vw] md:px-[1.042vw] mt-[5vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
        >
          <div
            class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
          >
            <span
              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]"
                viewBox="0 0 24 25"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3 7.5H21"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-linecap="round"
                />
                <path
                  d="M6 12.5H18"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-linecap="round"
                />
                <path
                  d="M10 17.5H14"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-linecap="round"
                />
              </svg>
              <span class="hidden md:block"> مرتب سازی بر اساس: </span>
              <span
                class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
                @click="openSortOptions"
                >مرتب سازی</span
              >
            </span>
            <ul class="gap-x-[1vw] items-center hidden md:flex">
              <li class="pb-[0.681vw] cursor-pointer"
              :class="{'relative text-primaryGreen active' : !route.query.hasOwnProperty('price') || route.query.price == '' }"
              @click="sortByHandler('')">
                همه دوره ها
              </li>
              <li class="pb-[0.681vw] cursor-pointer"
              :class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'free' }"
              @click="sortByHandler('free')">دوره های رایگان</li>
             
              <li class="pb-[0.681vw] cursor-pointer"
              :class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'low_to_high' }"
              @click="sortByHandler('low_to_high')"
              >ارزان ترین</li>
              <li class="pb-[0.681vw] cursor-pointer" 
              :class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'high_to_low' }"
              @click="sortByHandler('high_to_low')">گران ترین</li>
            </ul>
          </div>
          <div
            class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
          >
   
            <Loading v-if="pending"/>
            <Loading v-if="pending"/>
            <Loading v-if="pending"/>
            <Loading v-if="pending"/>
            <div v-else v-for="(course, index) in data.courses" :key="index">
              <Card :course="course" />
            </div>


          </div>
          <p
          class="flexBox min-h-[8vw]"
          v-if="data?.count < 1">محصولی جهت نمایش وجود ندارد !!!</p>
        </div>

        <div class="flexBox py-[5vw] md:py-[2vw]" dir="ltr">
          <ul
          v-if="paginationLength > 2"
            class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]"
          >
            <li class="w-[1.5vw]">
              
              <svg
              @click="prevPage"
                class="cursor-pointer w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                :class="{'stroke-slate-300': route.query.hasOwnProperty('page') && route.query.page == 1 }"
                  d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
                  stroke="#292D32"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </li>
            <!-- <li
              v-for="(page, index) in paginationLength"
              :key="index"
              @click="changePage(page)"
              class="cursor-pointer"
              :class="{
                'flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]':
                  $route.query.page == page,
              }"
            >
              {{ page }}
            </li> -->
            <li
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength) || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 4}}</li>

            <li
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength - 1) || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 3}}</li>

            <li
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength - 2) || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 2}}</li>

            <li 
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page == 1 || !route.query.hasOwnProperty('page')}"
            class="w-[1.5vw] cursor-pointer" @click="prevPage">{{pageNumber - 1}}</li>
           


            <li class="w-[1.5vw] cursor-pointer flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">{{pageNumber}}</li>

            <li
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= paginationLength}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{parseInt(pageNumber) + 1}}</li>
          

            <li
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= 2}"
            class="w-[1.5vw] cursor-pointer" @click="nextPage(2)">{{parseInt(pageNumber) + 2}}</li>
          

            
            <li class="w-[1.5vw]" v-if="pageNumber < (paginationLength - 2)">...</li>
       
            
           


            <li
            class="w-[1.5vw]"
            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > (paginationLength - 2)}" @click="nextPage"
            >{{paginationLength}}</li>

            


            <li class="w-[1.5vw]">

              <svg
              @click="nextPage(1)"
                class="cursor-pointer w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                :class="{'stroke-slate-300': route.query.hasOwnProperty('page') && route.query.page == paginationLength }"
                  d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
                  stroke="#292D32"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </li>
          </ul>

        </div>

      </div>
    </div>
  </div>




  <div
  id="filters"
  class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
>
  <div class="flex items-center justify-between w-full">
    <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
    <svg
      @click="closeSortOptions"
      class="w-[5.641vw] h-[5.641vw]"
      viewBox="0 0 22 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
        stroke="#878787"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>

  <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
    <li
    @click="() => {sortByHandler(''); closeSortOptions()}"
    class="border-b py-[4vw] flex justify-between items-center">
      <span>
          همه ی دوره ها
      </span>
      <svg 
      class="hidden w-[6.154vw] h-[6.154vw]"
      :class="{'!block' : !route.query.hasOwnProperty('price') || route.query.price == '' }"
      viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
  </li>
    <li class="border-b py-[4vw] flex justify-between items-center" @click="() => {sortByHandler('free'); closeSortOptions()}">
      <span>
        دوره های رایگان
    </span>
    <svg 
    class="hidden w-[6.154vw] h-[6.154vw]"
    :class="{'!block' : route.query.price == 'free' }"
    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </li>
    <li class="border-b py-[4vw] flex justify-between items-center"  @click="() => {sortByHandler('low_to_high'); closeSortOptions()}">
      <span>
        ارزان ترین
    </span>
    <svg 
    class="hidden w-[6.154vw] h-[6.154vw]"
    :class="{'!block' : route.query.price == 'low_to_high' }"
    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </li>
    <li class="py-[4vw] flex justify-between items-center"  @click="() => {sortByHandler('high_to_low'); closeSortOptions()}">
      <span>
        ارزان ترین
    </span>
    <svg 
    class="hidden w-[6.154vw] h-[6.154vw]"
    :class="{'!block' : route.query.price == 'high_to_low' }"
    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>

    </li>
  </ul>
</div>
</template>



<script setup>
import Loading from "./../../components/Loading.vue";
const query = ref({});
const router = useRouter();
const route = useRoute();
const pageNumber = ref(0);

const paginationLength = ref(0);
query.value = route.query;
pageNumber.value = route.query.hasOwnProperty('page') ? route.query.page : 1
const { data, refresh, pending } = await useFetch(() => "/api/course", {
  method: "POST",
  query: query,
});





paginationLength.value = Math.ceil(data.value.count / 2);
function changePage(page) {
  pageNumber.value = page;
  query.value = { ...route.query, page: pageNumber };

  router.push({
    path: "/courses",
    query: query.value,
  });
  refresh();
}
function prevPage(){
  if (pageNumber.value > 1) {
    pageNumber.value -= 1
    query.value = { ...route.query, page: pageNumber };
    
  router.push({
    path: "/courses",
    query: query.value,
  });
  refresh();
  }
}
function nextPage(num){
  if (pageNumber.value < paginationLength.value) {
    pageNumber.value++
    query.value = { ...route.query, page: pageNumber };
  
  router.push({
    path: "/courses",
    query: query.value,
  });
  refresh();
    
  }
}



function removeCategory(){
  if (query.value.hasOwnProperty("category")) {
      delete query.value.category;
    }
    if (query.value.hasOwnProperty("page")) {
    delete query.value.page;
  }
  if (query.value.hasOwnProperty("price")) {
    delete query.value.price;
  }
  if (query.value.hasOwnProperty("name")) {
    delete query.value.name;
  }
    router.push({
    path: "/courses",
    query: query.value,
  });
  pageNumber.value = 1
  search.value = null
  refresh()
}




const categoryLis = await useFetch("/api/category");
const categories = categoryLis.data.value;

function selectCategory(id) {
  query.value = { ...route.query, category: id };
  
  if (query.value.hasOwnProperty("page")) {
    delete query.value.page;
  }
  if (id === '') {
    if (query.value.hasOwnProperty("category")) {
      delete query.value.category;
    }
 
  }
  router.push({
    path: "/courses",
    query: query.value,
  });
  pageNumber.value = 1
  refresh();
//   watch(data , () => {
//   paginationLength.value = Math.ceil(data.value.count / 2); 
// })
}





function sortByHandler(param){
  query.value = { ...route.query, price: param };

  if (param === '') {
    if (query.value.hasOwnProperty("price")) {
      delete query.value.price;
    }
    
  }
  
  router.push({
    path: "/courses",
    query: query.value,
  });
  refresh();
}



const openSortOptions = () => {
  if (process.client) {
    document
      .getElementById("filters")
      .classList.remove("translate-y-[80.769vw]");
    document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
    document.getElementById("brightnessFilter").style.filter =
      "brightness(50%)";
    document.getElementById("brightnessFilter").style.backdropFilter =
      "brightness(90%)";
  }
};
const closeSortOptions = () => {
  if (process.client) {
    document.getElementById("brightnessFilter").style.filter = "none";
    document.getElementById("brightnessFilter").style.backdropFilter = "none";
    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
    document
      .getElementsByTagName("html")[0]
      .classList.remove("overflow-hidden");
  }
};

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

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


</script>

<style>
.active::before {
  content: "";
  position: absolute;
  background-color: #0d3f40;
  width: 100%;
  height: 0.01vw;
  top: 2vw;
}
.scrol::-webkit-scrollbar {
  display: none;
}
.scrol {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

</style>