<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const { t } = useI18n();
const modules = [Navigation, Pagination];
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
</script>

<template>
  <v-container fluid class="pa-0">
    <div class="video-background">
      <video autoplay muted loop>
        <source
          src="@/assets/img/setup-courses/tutorial/background.mp4"
          type="video/mp4"
        />
      </video>

      <!-- 垂直輪播 -->
      <swiper
        :direction="'vertical'"
        :navigation="navigation"
        :modules="modules"
        navigation
      >
        <swiper-slide>
          <div class="main-item">
            <img
              src="@/assets/img/setup-courses/tutorial/素材-13.png"
              alt="臺灣工藝學習平台"
            />
            <p class="ps-sm-10" v-html="t('tutorial.step')"></p>
          </div>
        </swiper-slide>

        <swiper-slide>
          <div class="step-item">
            <h3>{{ t("tutorial.step_1_title") }}</h3>
            <p>{{ t("tutorial.step_1_1") }}</p>
            <strong>{{ t("tutorial.step_1_2") }}</strong>

            <ul>
              <li>
                <p>{{ t("tutorial.step_1_2_1") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_1_2_2") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_1_2_3") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_1_2_4") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_1_2_5") }}</p>
              </li>
              <li>
                <p>{{ t("tutorial.step_1_2_6") }}<span class="mark">*</span></p>
              </li>
            </ul>

            <p v-html="t('tutorial.step_1_3')"></p>

            <div class="icon">
              <img
                src="@/assets/img/setup-courses/tutorial/素材-13.png"
                alt="臺灣工藝學習平台"
              />
            </div>
          </div>
        </swiper-slide>

        <swiper-slide>
          <div class="step-item">
            <h3>{{ t("tutorial.step_2_title") }}</h3>
            <p v-html="t('tutorial.step_2_1')"></p>
            <strong>{{ t("tutorial.step_2_2") }}</strong>

            <ul class="list">
              <li>
                <p>{{ t("tutorial.step_2_2_1") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_2") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_3") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_4") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_5") }}</p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_6") }}</p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_7") }}</p>
              </li>
              <li>
                <p>{{ t("tutorial.step_2_2_8") }}</p>
              </li>
            </ul>

            <p v-html="t('tutorial.step_2_3')"></p>

            <div>
              <img
                src="@/assets/img/setup-courses/tutorial/素材-14.png"
                alt="臺灣工藝學習平台"
              />
            </div>
          </div>
        </swiper-slide>

        <swiper-slide>
          <div class="step-item">
            <h3>{{ t("tutorial.step_3_title") }}</h3>
            <p v-html="t('tutorial.step_3_1')"></p>
            <strong>{{ t("tutorial.step_3_2") }}</strong>

            <ul class="list">
              <li>
                <p>{{ t("tutorial.step_3_2_1") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_2") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_3") }}</p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_4") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_5") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_6") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_7") }}<span class="mark">*</span></p>
              </li>
              <li>
                <p>{{ t("tutorial.step_3_2_8") }}<span class="mark">*</span></p>
              </li>
            </ul>

            <!-- <p>沒建立完成可以建立草稿、建立後仍可以編輯</p> -->

            <div>
              <img
                src="@/assets/img/setup-courses/tutorial/素材-15.png"
                alt="臺灣工藝學習平台"
              />
            </div>
          </div>
        </swiper-slide>

        <swiper-slide>
          <div class="main-item">
            <img
              src="@/assets/img/setup-courses/tutorial/素材-15.png"
              alt="臺灣工藝學習平台"
            />
            <section class="d-flex flex-column ps-sm-10">
              <h3 v-html="t('tutorial.step_4_title')"></h3>
              <p
                class="my-5 my-sm-10 text-center"
                v-html="t('tutorial.step_4_1')"
              ></p>
              <p class="text-center" v-html="t('tutorial.step_4_2')"></p>
            </section>
          </div>
        </swiper-slide>

        <!-- 左右箭頭 -->
        <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
        <div class="swiper-button-next" @click.stop="nextEl" />
      </swiper>
    </div>

    <div class="create-link">
      <router-link to="/setup-courses/create">
        {{ t("tutorial.create") }}
      </router-link>
    </div>
  </v-container>
</template>

<style lang="scss" scoped>
.v-container {
  position: relative;
  max-width: 100% !important;
}

.create-link {
  position: absolute;
  right: 3%;
  bottom: 5%;
  z-index: 100;
  font-size: 1.25em;
  letter-spacing: 0.125em;
  color: #636363;
  transition: all 0.3s;
  &:hover {
    opacity: 0.7;
  }
  @media (max-width: 600px) {
    font-size: 1em;
  }
}

h3,
h4,
p {
  color: var(--main-color);
}

h3 {
  font-weight: 500;
  font-size: 1.7em;
  line-height: 2.5em;
  letter-spacing: 0.125em;

  @media (max-width: 600px) {
    font-size: 1.3em;
    line-height: 1.5em;
  }
}

.video-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  @media (max-width: 960px) {
    padding: 0 1.25em;
  }

  @media (max-width: 490px) {
    padding: 0 0.625em;
  }

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .main-item {
    display: flex;
    align-items: center;

    @media (max-width: 600px) {
      flex-direction: column;
    }

    img {
      max-width: 25em;

      @media (max-width: 960px) {
        max-width: 30vw;
      }

      @media (max-width: 600px) {
        max-width: 50vw;
        margin-bottom: 1.25em;
      }

      @media (max-width: 490px) {
        max-width: 40vw;
      }
    }

    p {
      max-width: 37.5em;
      font-size: 1.125em;
      line-height: 2.25em;
      text-align: start;
      font-weight: 500;
      letter-spacing: 0.0625em;

      @media (max-width: 600px) {
        font-size: 1.125em;
        text-align: center;
      }

      @media (max-width: 490px) {
        font-size: 0.85em;
        line-height: 1.75em;
      }
    }
  }

  .step-item {
    h3 {
      margin-bottom: 3.75em;
      @media (max-width: 600px) {
        margin-bottom: 1.875em;
      }

      @media (max-width: 490px) {
        margin-bottom: 0.625em;
      }
    }

    p,
    li,
    strong {
      font-size: 1.125em;
      line-height: 1.625em;
      letter-spacing: 0.125em;

      @media (max-width: 490px) {
        font-size: .85em;
        line-height: 1.75em;
      }
    }

    strong {
      display: block;
      margin-top: 0.9375em;
      color: #779faa;
      font-weight: 400;
    }

    ul {
      max-width: 43.75em;
      margin: 2.5em auto 5em;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      @media (max-width: 760px) {
        margin: 2.5em auto;
      }

      @media (max-width: 490px) {
        margin: 1.25em auto;
      }

      li {
        margin: 0.625em 0.3125em;

        @media (max-width: 960px) {
          margin: 0.625em;
        }

        p {
          padding: 0.625em 0.9375em;
          color: #fff;
          border-radius: 0.3125em;
          background-color: var(--blue);
          font-size: 0.9em;
        }
      }
    }

    .icon {
      img {
        @media (max-width: 490px) {
          max-width: 5.625em;
        }
      }
    }

    .list {
      max-width: 50em;
    }

    img {
      max-width: 11.25em;
      height: 6.25em;
      left: 5%;
      bottom: 10%;
      position: absolute;
      z-index: 1000;
      overflow: unset;
      @media (max-width: 760px) {
        max-width: 15vw;
        bottom: 5vw;
      }

      @media (max-width: 490px) {
        max-width: 4.375em;
        bottom: 0.3125em;
      }
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    left: 50%;
    color: #fff;
    text-shadow: 0.0625em 0.0625em 0.3125em #9b9b9b;
    transform: rotate(90deg);
  }

  .swiper-button-next {
    height: 90%;
  }

  .swiper-button-prev {
    height: 20%;
    top: 0;
  }

  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled {
    opacity: 0;
  }
}

// Swiper
.background-image {
  background-image: url("@/assets/img/default.webp");
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  z-index: -1;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 1.125em;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
