<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";

const { t } = useI18n();
const router = useRouter();
const store = useMainStore();
const token = store.token;
console.log("token", token);

let step = ref(1);
let stepTitle = ref("");
let stepDescription = ref("");
let loading = ref(false);

const computedTitle = computed(() => {
  switch (step.value) {
    case 1:
      stepTitle.value = "select_location";
      stepDescription.value = "before_opening_course";
      break;
    case 2:
      stepTitle.value = "select_course_instructor";
      stepDescription.value = "craft_resume_intro";
      break;
    case 3:
      stepTitle.value = "create_course";
      stepDescription.value = "course_creation_bridge";
      break;
    case 4:
      stepTitle.value = "congratulations_course_creation";
      stepDescription.value = "";
      break;
  }
  return { stepTitle: stepTitle.value, stepDescription: stepDescription.value };
});

let date = reactive({
  start_date: "", // 起始日期
  start_time: "", // 起始時間
  end_date: "", // 結束日期
  end_time: "", // 結束時間
  registration_start_date: "", // 報名起始日期
  registration_start_time: "", // 報名起始時間
  registration_end_date: "", // 報名截止日期
  registration_end_time: "", // 報名截止時間
});

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.create_course",
    disabled: false,
    href: "/setup-courses",
  },
  {
    title: "tutorial.create",
    disabled: true,
  },
]);

// // Google Map
// const states = reactive({
//   google: null,
//   map: null,
//   markers: null,
// });

// const initMap = async () => {
//   const loader = new Loader({
//     apiKey: "AIzaSyClxiB7zcQDyGaB1r3Ww_VQG950AtjVoAk",
//     version: "weekly",
//     libraries: ["places"],
//     language: "zh-TW",
//   });
//   states.google = await loader.load();
//   states.map = new states.google.maps.Map(document.getElementById("map"), {
//     center: { lat: 25.0425, lng: 121.5468 },
//     zoom: 11,
//     mapTypeControl: false,
//     fullscreenControl: false,
//   });
// };

// onMounted(async () => {
//   await initMap();
// });

let location = reactive({
  location_name: "",
  Lng: "",
  Lat: "",
  address: "",
  school_introduction: "",
  email: "",
  phone: "",
  access_token: token,
});

let locationId = ref("");

// async function insertSchool() {
//   // 若已選擇據點則不需新增
//   if (schoolId.value !== "") {
//     locationId.value = schoolId.value;
//     return;
//   }

//   const formData = new FormData();
//   for (const key in location) {
//     formData.append(key, location[key]);
//   }

//   try {
//     const response = await axios.post(
//       "https://cmm.ai:8088/api/insert_school",
//       formData
//     );

//     locationId.value = response.data.location_id;
//     console.log("新增據點 response", response);
//   } catch (error) {
//     console.error(error);
//   }
// }

let resume = reactive({
  teacher_name: "", // 工藝教育者姓名
  work_type: "", // 工作性質
  experience: "", // 教學經驗
  expertise: "", // 專長工藝技能
  license: "", // 工藝相關證照
  media: "", // 社群媒體
  files: [], // 作品集
  introduction: "", // 老師介紹
});

let resumeList = ref([]);
let resumeDialog = ref(false);
let resumeDelectDialog = reactive([]);
let resumeLoading = ref(false);

// 新增工藝教育者履歷
async function insertResume() {
  const validationResult = await resumeForm.value.validate();

  // 驗證表單
  if (validationResult.valid) {
    resumeList.value.push(JSON.parse(JSON.stringify(resume)));
    alert("新增成功！");
    resumeDialog.value = false;

    // 清空表單的值
    for (const key in resume) {
      if (resume.hasOwnProperty(key)) {
        resume[key] = "";
      }
    }
  } else {
    return;
  }
}

// let oldFile = "";

// async function insertUserResume() {
//   if (portfolioImg.value.length) {
//     resume.files = portfolioImg.value;
//   }

//   const formData = new FormData();
//   for (const key in resume) {
//     if (key === "files") {
//       resume.files.forEach((file) => {
//         formData.append("files", file);
//       });
//     } else {
//       formData.append(key, resume[key]);
//     }
//   }

//   let token = store.token;

//   try {
//     const response = await axios.post(
//       `${store.apiUrl}/api/input_user_resume?access_token=${token}&old_file=${oldFile}`,
//       formData
//     );
//     console.log("新增履歷 response", response);
//   } catch (error) {
//     console.error(error);
//   }
// }

// 新增課程
let course = reactive({
  name: "", // 課程名稱
  location_id: "", // 據點編號
  category: "", // 工藝類別
  introduction: "", // 課程簡介
  syllabus: "", // 課程章節(課綱)
  organizer: "", // 主辦單位
  cover_img_file: "", // 課程圖片
  group_id: 2, // 學群編號(技藝)
  group_sort: "", // 學群細分
  special_class_list_name: "",
  recommend: 0, // 是否推薦
  is_inner: 1, // 內課課程
  is_check: 0, // 審核結果
  teachers_resume: "", // 指派工藝教育者
  level: "", // 課程難度
  access_token: token,
});

// let syllabusData = reactive({
//   title: "",
//   content: "",
// });

let section = ref("");
let sectionList = ref([]);

function addSection() {
  if (section.value !== "") {
    sectionList.value.push(section.value);
    section.value = "";
  }
}

function deleteSection(index) {
  sectionList.value.splice(index, 1);
}

watch(location, (data) => {
  course.organizer = data.location_name; // 據點名稱 = 主辦單位
});

let classNameId = ref("");

async function insertClassName() {
  course.location_id = locationId.value;
  course.organizer = locationData.value.location_name;
  course.teachers_resume = JSON.stringify(assignTeachers.list);
  course.syllabus = JSON.stringify(sectionList.value);

  console.log("insertClassName", course);

  if (coverImg.value !== "") {
    course.cover_img_file = coverImg.value;
  }

  const formData = new FormData();
  for (const key in course) {
    formData.append(key, course[key]);
  }

  try {
    const response = await axios.post(
      `${store.apiUrl}/api/insert_class_name`,
      formData
    );

    console.log("新增課程 response", response);

    if (response.data.code === 200) {
      classNameId.value = response.data.new_class_name_id;
    } else {
      return;
    }
    // classNameId.value = response.data.new_class_name_id;
  } catch (error) {
    console.error(error);
  }
}

// 新增場次
let event = reactive({
  name_id: "", // 課程名稱編號(需先新增課程取得Id)
  event: "", // 場次名稱
  start_time: "", // 課程起始日
  end_time: "", // 課程結束日
  contact: "", // 聯絡資訊
  lecturer: "", // 課程講師
  location: "", // 教室名稱
  content: "", // 課程內容
  URL: "", // 外部連結
  people: "不拘", // 對象
  fee_method: "", // 課程價格
  fee_payment: "", // 收費方式
  registration_way: "", // 報名方式
  registration_start: "", // 報名起始日
  registration_end: "", // 報名截止日
  number_limit: "", // 課程名額
  number_minimum: "", // 最低開課人數
  remark: "", // 備註
  ATM_address: "", // 匯款帳號(銀行代碼+帳號)
  access_token: token,
});

let eventType = ref(""); // 課程類型
let isOneDay = ref(true); // 是否為一日課程

watch(eventType, (val) => {
  if (
    val ===
    `${t("form.periodic_courses")}（e.g., 2023/10/1～2023/10/30 ${t(
      "form.classes_schedule"
    )}）`
  ) {
    isOneDay.value = false;
  } else {
    isOneDay.value = true;
  }
});

// 若為一日課程則起始日期 = 結束日期
watch(date, (val) => {
  if (isOneDay.value && val.start_date) {
    date.end_date = val.start_date;
  }
});

let dateReminder = ref(false);
let eventData = reactive({
  list: [],
});

let isRemit = ref(false); // 是否顯示匯款資訊欄位
let bankCode = ref(""); // 銀行代碼
let bankAccount = ref(""); // 銀行帳號

watch(event, (data) => {
  if (data.fee_payment === "匯款") {
    isRemit.value = true;
  } else {
    isRemit.value = false;
  }
});

let eventFieldValidate = ref(false); // 驗證場次欄位

function addEventData() {
  // insertSession(); // 測試
  console.log("event", event);

  let isSame = store.isSameDay(date.start_date, date.end_date);
  // 起始日期不可等於結束日期(週期課程)
  if (!isOneDay.value && isSame) {
    dateReminder.value = true;
    return;
  }
  dateReminder.value = false;

  eventForm.value.validate();

  // 檢查日期欄位
  for (const key in date) {
    if (!date[key]) {
      return;
    }
  }

  // 檢查必填欄位
  if (
    event.event === "" || // 場次名稱
    // event.contact === "" || // 聯絡資訊
    // event.lecturer === "" || // 課程講師
    event.people === "" || // 對象
    event.fee_method === "" || // 課程價格
    event.fee_payment === "" || // 收費方式
    event.number_limit === "" || // 課程名額
    eventType.value === "" // 課程類型
  ) {
    return;
  } else {
    eventFieldValidate.value = true;
  }

  // 帶入指派講師姓名
  event.lecturer = assignTeachers.list
    .map((item) => item.teacher_name)
    .join("、");

  console.log("event", event);

  // 處理時間格式
  event.start_time = store.mergeAndFormatDateTime(
    date.start_date,
    date.start_time
  );
  event.end_time = store.mergeAndFormatDateTime(date.end_date, date.end_time);
  event.registration_start = store.mergeAndFormatDateTime(
    date.registration_start_date,
    date.registration_start_time
  );
  event.registration_end = store.mergeAndFormatDateTime(
    date.registration_end_date,
    date.registration_end_time
  );

  if (isRemit && bankCode.value !== "" && bankAccount.value !== "") {
    event.ATM_address = `(${bankCode.value})-${bankAccount.value}`;
  }
  eventData.list.push(JSON.parse(JSON.stringify(event)));
  sessionsDialog.value = false;
}

function convertDateFormat(inputDateStr) {
  const inputDate = new Date(inputDateStr);
  const formattedDate = inputDate.toISOString();
  return formattedDate;
}

let eventId = ref(null);

async function insertEvent() {
  console.log("insertEvent", event);

  if (classNameId.value !== "") {
    event.name_id = classNameId.value;
  }

  // event.start_time = convertDateFormat(event.start_time);
  // event.end_time = convertDateFormat(event.end_time);
  // event.registration_start = convertDateFormat(event.registration_start);
  // event.registration_end = convertDateFormat(event.registration_end);

  // console.log("檢查日期格式", event);

  const formData = new FormData();
  for (const key in event) {
    formData.append(key, event[key]);
  }

  try {
    const response = await axios.post(
      `${store.apiUrl}/api/insert_event`,
      formData
    );
    eventId.value = response.data.class_id;
    console.log("eventId.value", eventId.value);
    console.log("新增場次 response", response);

    if (response.data.code !== 200) {
      return;
    }
  } catch (error) {
    console.error(error);
  }
}

let errorEventField = ref(false);

// 創建課程
async function create() {
  console.log("course", course);
  loading.value = true;

  // 檢查必填欄位
  courseForm.value.validate();
  console.log("course", course);

  if (
    course.name === "" ||
    course.category === "" ||
    course.introduction === "" ||
    coverImg.value === ""
  ) {
    loading.value = false;
    errorField.value = true;

    setTimeout(() => {
      errorField.value = false;
    }, 3000);

    return;
  }

  // 課程時間(場次)尚未填寫完整
  if (!eventFieldValidate.value) {
    loading.value = false;
    errorEventField.value = true;

    setTimeout(() => {
      errorEventField.value = false;
    }, 3000);

    return;
  }

  locationId.value = assignLocationId.value; // 存據點 ID

  try {
    // await insertSchool(); // 新增據點
    // await insertUserResume(); // 新增履歷
    await insertClassName(); // 新增課程
    await insertEvent(); // 新增場次
    await insertSession(); // 新增課堂

    loading.value = false;
    step.value++;
  } catch (error) {
    console.error(error);
    loading.value = false;
  }
}

const getCoordinates = async () => {
  const geocoder = new states.google.maps.Geocoder();
  geocoder.geocode({ address: location.address }, (results, status) => {
    if (status === states.google.maps.GeocoderStatus.OK) {
      location.Lat = results[0].geometry.location.lat();
      location.Lng = results[0].geometry.location.lng();
    }

    // 將地圖中心設為取得的經緯度，並調整縮放等級
    // states.map.setCenter({ lat: location.Lat, lng: location.Lng });
    // states.map.setZoom(15);

    // 設定地址圖標
    // const marker = new google.maps.Marker({
    //   position: { lat: location.Lat, lng: location.Lng },
    //   map: states.map,
    //   title: location.address,
    //   icon: store.getImageUrl("map-icon/icon_house05.png"),
    // });
  });
};

// 上傳圖片 Input
const portfolioImgRef = ref(null);
const coverImgRef = ref(null);

const fileInputClick = (ref) => {
  if (ref === "portfolio") {
    portfolioImgRef.value.click();
  } else if (ref === "cover") {
    coverImgRef.value.click();
  }
};

// 作品集圖片
let portfolioImg = ref([]);
let portfolioImgList = ref([]);

const handlePortfolioImg = (files) => {
  console.log("files", files);
  // portfolioImgList.value = []; // 清空陣列
  for (let index = 0; index < files.length; index++) {
    const file = files[index];
    console.log("file", file);
    let url = URL.createObjectURL(file);
    portfolioImgList.value.push(url);
    console.log("portfolioImgList", portfolioImgList.value);
  }
};

watch(portfolioImg, (newFiles) => {
  if (newFiles.length > 0) {
    handlePortfolioImg(newFiles);
  }
});

// 封面圖片
let coverImg = ref("");
let coverImgUrl = ref("");

const handleCoverImg = (event) => {
  const file = event.target.files[0];
  console.log("選擇檔案", file);
  if (file) {
    coverImg.value = file;
    coverImgUrl.value = URL.createObjectURL(file); // 設定圖片預覽 URL
  }
};

let sessionsDialog = ref(false);

const requiredRule = (value) => !!value || "此欄位為必填";

const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
const selectedWeek = ref([0, 0, 0, 0, 0, 0, 0]); // 選擇星期

const toggleSelected = (index) => {
  if (selectedWeek.value[index]) {
    selectedWeek.value[index] = 0;
  } else {
    selectedWeek.value[index] = 1;
  }
};

let session = reactive({
  class_event_id: null,
  week_day_str: "",
  start_week_time: "",
  end_week_time: "",
});

let sessionTime = reactive({
  start_week_time: [],
  end_week_time: [],
});

let sessionStartTimeList = ref(["", "", "", "", "", "", ""]);
let sessionEndTimeList = ref(["", "", "", "", "", "", ""]);

// 新增課堂
async function insertSession() {
  console.log("isOneDay.value", isOneDay.value);
  const weekString = `[${selectedWeek.value.join(",")}]`;
  session.week_day_str = weekString;

  console.log("weekString", weekString);

  selectedWeek.value.map((item, index) => {
    if (item) {
      console.log("index", index);
      // 開始時間
      sessionStartTimeList.value[index] = `"${
        sessionTime.start_week_time[index].hours < 10 ? "0" : ""
      }${sessionTime.start_week_time[index].hours}:${
        sessionTime.start_week_time[index].minutes === 0
          ? "00"
          : sessionTime.start_week_time[index].minutes
      }:00"`;

      // 結束時間
      sessionEndTimeList.value[index] = `"${
        sessionTime.end_week_time[index].hours
      }:${
        sessionTime.end_week_time[index].minutes === 0
          ? "00"
          : sessionTime.end_week_time[index].minutes
      }:00"`;
    } else {
      sessionStartTimeList.value[index] = '""';
      sessionEndTimeList.value[index] = '""';
    }
  });

  session.start_week_time = `[${sessionStartTimeList.value}]`;
  session.end_week_time = `[${sessionEndTimeList.value}]`;
  session.class_event_id = eventId.value;

  // const formData = new FormData();
  // for (const key in session) {
  //   formData.append(key, session[key]);
  // }

  let oneDayData = {
    class_event_id: session.class_event_id,
    start_time: event.start_time,
    end_time: event.end_time,
    content: "",
  };

  console.log("oneDayData", oneDayData);

  // const oneDayFormData = new FormData();
  // for (const key in oneDayData) {
  //   formData.append(key, oneDayData[key]);
  // }

  try {
    if (isOneDay.value) {
      const oneDayFormData = new FormData();
      for (const key in oneDayData) {
        oneDayFormData.append(key, oneDayData[key]);
      }

      // 一日課程
      const response = await axios.post(
        `${store.apiUrl}/api/insert_session`,
        oneDayFormData
      );
      console.log("新增課堂(一日) response", response);
    } else {
      const formData = new FormData();
      for (const key in session) {
        formData.append(key, session[key]);
      }

      // 週期課程
      const response = await axios.post(
        `${store.apiUrl}/api/auto_create_session`,
        formData
      );
      console.log("新增課堂(週期) response", response);
    }
    // const response = await axios.post(
    //   "https://cmm.ai:8088/api/auto_create_session",
    //   formData
    // );
    // console.log("新增課堂 response", response);
  } catch (error) {
    console.error(error);
  }
}

let schoolSelect = reactive({
  list: [],
});

let schoolId = ref("");

// 取得已有據點
(async () => {
  let token = store.token;
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_school?&access_token=${token}`
    );

    if (response.data.msg === "no access") {
      store.logout();
      router.push("/");
    } else {
      schoolSelect.list = response.data.schools;
      // 調整排序(未審核移到最後)
      schoolSelect.list.sort((a, b) => b.is_pass_proposal - a.is_pass_proposal);
      console.log("取得使用者據點", schoolSelect.list);
    }
  } catch (error) {
    console.error(error);
  }
})();

// 監聽據點 Select
watch(schoolId, (id) => {
  console.log("schoolId", id);
  // locationId.value = id;
  handleSchoolData(id);
});

let schools = reactive({
  list: [],
});

// 帶入據點資料
async function handleSchoolData(id) {
  console.log("handleSchoolData", id);
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_school?location_id=${id}`
    );

    schools.list = response.data.schools;
    console.log("取得已有據點", schools.list);

    for (const key in schools.list[0]) {
      if (location.hasOwnProperty(key) && schools.list[0][key] !== undefined) {
        location[key] = schools.list[0][key];
      }
    }
  } catch (error) {
    console.error(error);
  }
}

/* 據點 */
let assignLocationId = ref(null);

watch(assignLocationId, (val) => {
  console.log("assignLocationId", val);
});

let locationData = ref(null);

// 存選擇的據點 ID
function setLocationId(item) {
  console.log("setLocationId", item);
  locationData.value = item;

  console.log("locationData", locationData.value);

  if (item.is_pass_proposal === 1) {
    assignLocationId.value = item.location_id;
  }
}

const schoolForm = ref(null); // Step1 表單
const resumeForm = ref(null); // Step2 表單
const courseForm = ref(null); // Step3 表單
const eventForm = ref(null); // Step4 表單

let errorField = ref(false);

function checkField(num) {
  console.log("checkField", num);
  // step.value++;
  if (num === 1) {
    console.log("assignLocationId", assignLocationId.value);

    if (!assignLocationId.value) {
      console.log("沒有");
      errorField.value = true;

      setTimeout(() => {
        errorField.value = false;
      }, 3000);

      return;
    } else {
      getSchool(assignLocationId.value); // 取得指定據點
    }
  } else if (num === 2) {
    if (!assignTeachers.list.length) {
      errorField.value = true;

      setTimeout(() => {
        errorField.value = false;
      }, 3000);

      return;
    }
  }

  step.value++;
}

let teachers = reactive({
  list: [],
});

// 取得指定據點底下的工藝教育者履歷
async function getSchool(id) {
  console.log("getSchool", id);
  resumeLoading.value = true;

  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_school?location_id=${id}`
    );

    console.log("取得據點", response);
    resumeList.value = JSON.parse(response.data.schools[0].teachers_list);
    console.log("resumeList.value", resumeList.value);
    resumeLoading.value = false;
  } catch (error) {
    console.error(error);
  }
}

let teacherCheckbox = ref([]);
let assignTeachers = reactive({
  list: [],
});

/* 指派工藝教育者 */
async function assignTeacher(item, index) {
  console.log("item", item);
  console.log("index", index);

  // 檢查陣列中是否已存在相同資料
  let isDuplicate = assignTeachers.list.some(function (existingItem) {
    return (
      existingItem.teacher_name === item.teacher_name &&
      existingItem.subject === item.subject
    );
  });

  // 如無重複再新增
  if (!isDuplicate) {
    assignTeachers.list.push(item);
    teacherCheckbox.value[index] = true;
    console.log("teacherCheckbox", teacherCheckbox.value);
  } else {
    console.log("已存在");

    assignTeachers.list = assignTeachers.list.filter(
      (e) => e.teacher_name !== item.teacher_name
    );

    teacherCheckbox.value[index] = false;
  }

  console.log("assignTeachers.list", assignTeachers.list);
}

// 移除場次
function deleteEvent(index) {
  console.log("deleteEvent", index);
  eventData.list.splice(index, 1);
  resumeDelectDialog[index] = false;
}
</script>

<template>
  <Navbar />

  <v-container class="mb-16 pb-16">
    <v-breadcrumbs :items="breadcrumbs" divider="/" class="py-10">
      <template v-slot:title="{ item }">
        {{ t(item.title) }}
      </template>
    </v-breadcrumbs>

    <v-card class="mx-auto pa-5 pa-sm-10">
      <v-card-title class="step-title">
        <h5>Step{{ step }} {{ t(computedTitle.stepTitle) }}</h5>
        <p class="mt-5">{{ t(computedTitle.stepDescription) }}</p>
      </v-card-title>

      <v-window v-model="step" :touch="false">
        <v-window-item :value="1">
          <v-card-text>
            <v-form
              ref="schoolForm"
              class="school-form"
              lazy-validation
              @submit.prevent
            >
              <router-link to="/setup-courses/proposal" class="proposal-link">
                <v-icon icon="mdi-plus-circle" class="me-2"></v-icon>
                {{ t("add_new_location") }}</router-link
              >
              <ul>
                <li v-for="(item, index) in schoolSelect.list" :key="index">
                  <div
                    class="d-flex justify-space-between"
                    @click="setLocationId(item)"
                  >
                    <div class="d-flex flex-column">
                      <span class="d-flex align-center">
                        <label :for="item.location_id" class="me-3">{{
                          item.location_name
                        }}</label>
                        <v-chip
                          v-if="item.is_pass_proposal === 1"
                          color="green"
                          text-color="white"
                        >
                          {{ t("approved") }}
                        </v-chip>
                        <v-chip
                          v-else-if="item.is_pass_proposal === 2"
                          color="error"
                          text-color="white"
                        >
                          {{ t("rejected") }}
                        </v-chip>
                        <v-chip v-else> {{ t("awaiting_approval") }} </v-chip>
                        <!-- <small>{{ item.address }}</small> -->
                      </span>
                      <small class="mt-2 text-gray">{{ item.address }}</small>
                    </div>

                    <input
                      :disabled="item.is_pass_proposal !== 1"
                      v-model="assignLocationId"
                      :true-value="item.location_id"
                      type="checkbox"
                      :id="item.location_id"
                    />
                  </div>
                </li>
              </ul>
            </v-form>
          </v-card-text>
        </v-window-item>

        <v-window-item :value="2">
          <v-card-text class="resume-content">
            <button class="resume-btn">
              <p class="d-flex flex-column align-center">
                <v-icon icon="mdi-plus" size="x-large"></v-icon>
                {{ t("create_course_instructor") }}
              </p>

              <v-dialog v-model="resumeDialog" activator="parent" width="700">
                <v-card class="pa-5">
                  <v-card-title>{{ t("instructor_resume") }}</v-card-title>
                  <v-card-text>
                    <v-form ref="resumeForm" lazy-validation @submit.prevent>
                      <v-row>
                        <v-col cols="12">
                          <v-label
                            class="d-flex flex-column flex-md-row align-start align-md-center"
                          >
                            <p class="pb-5 pe-3">
                              {{ t("form.instructor_name")
                              }}<span class="mark">*</span>
                            </p>
                            <v-text-field
                              v-model="resume.teacher_name"
                              :rules="[requiredRule]"
                              density="compact"
                              variant="outlined"
                            ></v-text-field>
                          </v-label>
                        </v-col>

                        <!-- <v-col cols="6"></v-col> -->

                        <v-col cols="12">
                          <v-label class="d-block">
                            <p class="pb-5 pe-3">
                              {{ t("form.job_nature")
                              }}<span class="mark">*</span>
                            </p>
                            <v-radio-group v-model="resume.work_type" inline>
                              <v-radio
                                :label="t('form.full_time')"
                                value="全職"
                              ></v-radio>
                              <v-radio
                                :label="t('form.part_time')"
                                value="兼職"
                                class="ps-3"
                              ></v-radio>
                            </v-radio-group>
                          </v-label>
                        </v-col>

                        <v-col cols="12" class="py-0">
                          <v-label class="d-block">
                            <p class="pb-5 pe-3">教學經驗</p>
                            <v-radio-group v-model="resume.experience" inline>
                              <v-radio
                                label="0-5 年"
                                value="0-5 年"
                                class="ps-3 ps-sm-0"
                              ></v-radio>
                              <v-radio
                                label="5-10 年"
                                value="5-10 年"
                                class="ps-3"
                              ></v-radio>
                              <v-radio
                                label="10-20 年"
                                value="10-20 年"
                                class="ps-3"
                              ></v-radio>
                              <v-radio
                                label="20 年以上"
                                value="20 年以上"
                                class="ps-3"
                              ></v-radio>
                            </v-radio-group>
                          </v-label>
                        </v-col>

                        <v-col cols="12">
                          <v-label class="d-block">
                            <p class="pb-5 pe-3">
                              專長工藝技能<span class="mark">*</span>
                            </p>
                            <v-text-field
                              v-model="resume.expertise"
                              :rules="[requiredRule]"
                              density="compact"
                              variant="outlined"
                            ></v-text-field>
                          </v-label>

                          <v-label class="d-block">
                            <p class="pb-5 pe-3">
                              工藝相關證照<span class="mark">*</span>
                            </p>
                            <v-text-field
                              v-model="resume.license"
                              :rules="[requiredRule]"
                              density="compact"
                              variant="outlined"
                              placeholder="若無工藝相關證照請填「無」"
                            ></v-text-field>
                          </v-label>

                          <v-label class="d-block">
                            <p class="d-flex">社群媒體</p>
                            <span class="d-block py-3 hint"
                              >工藝老師經營之網站或社群媒體，可貼網址</span
                            >
                            <v-text-field
                              v-model="resume.media"
                              density="compact"
                              variant="outlined"
                            ></v-text-field>
                          </v-label>
                        </v-col>

                        <!-- <v-col cols="12">
                                <v-label class="d-block">
                                  <p class="d-flex">講師作品集</p>

                                  <v-file-input
                                    multiple
                                    v-model="portfolioImg"
                                    ref="portfolioImgRef"
                                    label="File input"
                                    variant="outlined"
                                    :placeholder="t('form.choose_image')"
                                    @change="handlePortfolioImg"
                                    style="display: none"
                                  ></v-file-input>
                                </v-label>

                                <v-btn
                                  @click="fileInputClick('portfolio')"
                                  color="purple"
                                  class="my-5"
                                  >選擇相片上傳</v-btn
                                >

                                <v-row class="img-list">
                                  <v-col
                                    cols="4"
                                    v-for="(item, index) in 6"
                                    :key="index"
                                  >
                                    <div
                                      v-if="!portfolioImgList.length"
                                      class="item"
                                    ></div>
                                    <div
                                      v-else
                                      class="item"
                                      :style="{
                                        backgroundImage: `url('${portfolioImgList[index]}')`,
                                      }"
                                    ></div>
                                  </v-col>
                                </v-row>
                              </v-col> -->

                        <v-col cols="12">
                          <v-label class="d-block">
                            <p class="d-flex mb-5">
                              工藝教育者介紹<span class="mark">*</span>
                            </p>
                            <v-textarea
                              v-model="resume.introduction"
                              :rules="[
                                (value) =>
                                  (value && value.length >= 50) ||
                                  '請至少輸入 50 個字元，以確保內容完整性',
                              ]"
                              rows="5"
                              variant="outlined"
                              hint="文字長度不得低於 50 個字元，最多 150 個字元"
                              maxlength="150"
                              counter
                            ></v-textarea>
                          </v-label>
                        </v-col>
                      </v-row>
                    </v-form>
                  </v-card-text>

                  <v-card-actions class="justify-center">
                    <v-spacer></v-spacer>

                    <v-btn
                      :text="t('form.cancel')"
                      @click="resumeDialog = false"
                    ></v-btn>

                    <v-btn
                      @click="insertResume()"
                      color="purple"
                      variant="flat"
                    >
                      {{ t("form.create") }}
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </button>
            <h6 data-v-bbf03f1f="" class="mt-10 table-title">
              {{ t("instructor_resume") }}
            </h6>
            <div v-if="resumeList.length" class="main-table mt-0">
              <table>
                <thead>
                  <tr>
                    <th>{{ t("form.name") }}</th>
                    <th>{{ t("form.job_nature") }}</th>
                    <th>{{ t("form.teaching_experience") }}</th>
                    <th>{{ t("form.craft_skills") }}</th>
                    <th>{{ t("form.related_certifications") }}</th>
                    <th>{{ t("form.social_media") }}</th>
                    <th style="width: 30%">
                      {{ t("form.instructor_intro") }}
                    </th>
                    <th></th>
                    <!-- <th width="15%">繳款資訊</th> -->
                  </tr>
                </thead>
                <tbody>
                  <!-- <tr v-if="!register.list.length">
                <p class="hint-item">
                  目前沒有報名紀錄喔！點擊開始探索您的專屬課程！
                </p>
              </tr> -->
                  <tr
                    v-for="(item, index) in resumeList"
                    :key="index"
                    @click="assignTeacher(item, index)"
                  >
                    <td>{{ item.teacher_name }}</td>
                    <td>{{ item.work_type }}</td>
                    <td>{{ item.experience }}</td>
                    <td>{{ item.expertise }}</td>
                    <td>{{ item.license }}</td>
                    <td>{{ item.media }}</td>
                    <td>
                      <v-dialog width="600">
                        <template v-slot:activator="{ props }">
                          <v-btn
                            v-bind="props"
                            :text="t('form.check')"
                            variant="tonal"
                            color="purple"
                            rounded="xl"
                          >
                          </v-btn>
                        </template>

                        <template v-slot:default="{ isActive }">
                          <v-card
                            :title="t('form.instructor_name')"
                            class="pa-3"
                          >
                            <v-card-text
                              style="letter-spacing: 1px; line-height: 1.5"
                            >
                              {{ item.introduction }}
                            </v-card-text>

                            <v-card-actions class="justify-end">
                              <v-spacer></v-spacer>

                              <v-btn
                                :text="t('form.close')"
                                @click="isActive.value = false"
                              ></v-btn>
                            </v-card-actions>
                          </v-card>
                        </template>
                      </v-dialog>
                    </td>
                    <td>
                      <input
                        v-model="teacherCheckbox[index]"
                        type="checkbox"
                        class="me-5"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div
              v-else
              class="d-flex justify-center my-10"
              v-if="resumeLoading"
            >
              <v-progress-circular
                color="grey-lighten-4"
                indeterminate
              ></v-progress-circular>
            </div>
          </v-card-text>

          <!-- <v-row align="center" justify="center" class="mt-10 mb-16">
            <v-col
              v-for="(item, index) in teachers.list"
              :key="item"
              cols="auto"
            >
              <v-card
                @click="assignTeacher(item, index)"
                class="mx-auto pa-3 teachers-card"
                width="330"
              >
                <v-card-item>
                  <div>
                    <div
                      class="d-flex justify-space-between align-center mb-4 pe-1"
                    >
                      <h4>{{ item.teacher_name }}</h4>
                      <input
                        v-model="teacherCheckbox[index]"
                        type="checkbox"
                        name=""
                        id=""
                      />
                    </div>
                    <ul class="pt-4">
                      <li>工作性質： {{ item.work_type }}</li>
                      <li>工藝技能：{{ item.expertise }}</li>
                      <li>工藝證照：{{ item.license }}</li>
                      <li>教學經驗：{{ item.experience }}</li>
                    </ul>
                  </div>
                </v-card-item>
              </v-card>
            </v-col>
          </v-row> -->

          <!-- <v-card-text>
            <v-form ref="resumeForm" lazy-validation @submit.prevent>
              <v-row>
                <v-col cols="12" sm="6">
                  <v-label class="d-flex align-center pb-3">
                    <p class="pb-5 pe-3">工藝教育者姓名<span class="mark">*</span></p>
                    <v-text-field
                      v-model="resume.teacher_name"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="6"></v-col>

                <v-col cols="12" lg="3">
                  <v-label class="d-block">
                    <p class="pb-5 pe-3">工作性質<span class="mark">*</span></p>
                    <v-radio-group v-model="resume.work_type" inline>
                      <v-radio label="全職" value="全職"></v-radio>
                      <v-radio label="兼職" value="兼職" class="ps-3"></v-radio>
                    </v-radio-group>
                  </v-label>
                </v-col>

                <v-col cols="12" lg="9">
                  <v-label class="d-block">
                    <p class="pb-5 pe-3">教學經驗</p>
                    <v-radio-group v-model="resume.experience" inline>
                      <v-radio label="0-5 年" value="0-5 年"></v-radio>
                      <v-radio
                        label="5-10 年"
                        value="5-10 年"
                        class="ps-3"
                      ></v-radio>
                      <v-radio
                        label="10-20 年"
                        value="10-20 年"
                        class="ps-3"
                      ></v-radio>
                      <v-radio
                        label="20 年以上"
                        value="20 年以上"
                        class="ps-3"
                      ></v-radio>
                    </v-radio-group>
                  </v-label>
                </v-col>

                <v-col cols="12" md="6">
                  <v-label class="d-block">
                    <p class="pb-5 pe-3">
                      專長工藝技能<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="resume.expertise"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block">
                    <p class="pb-5 pe-3">工藝相關證照</p>
                    <v-text-field
                      v-model="resume.license"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block">
                    <p class="d-flex">社群媒體</p>
                    <span class="d-block py-3 hint"
                      >工藝老師經營之網站或社群媒體，可貼網址</span
                    >
                    <v-text-field
                      v-model="resume.media"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="12" md="6">
                  <v-label class="d-block">
                    <p class="d-flex">講師作品集</p>

                    <v-file-input
                      multiple
                      v-model="portfolioImg"
                      ref="portfolioImgRef"
                      label="File input"
                      variant="outlined"
                      :placeholder="t('form.choose_image')"
                      @change="handlePortfolioImg"
                      style="display: none"
                    ></v-file-input>
                  </v-label>

                  <v-btn
                    @click="fileInputClick('portfolio')"
                    color="purple"
                    class="my-5"
                    >選擇相片上傳</v-btn
                  >

                  <v-row class="img-list">
                    <v-col cols="4" v-for="(item, index) in 6" :key="index">
                      <div v-if="!portfolioImgList.length" class="item"></div>
                      <div
                        v-else
                        class="item"
                        :style="{
                          backgroundImage: `url('${portfolioImgList[index]}')`,
                        }"
                      ></div>
                    </v-col>
                  </v-row>
                </v-col>

                <v-col cols="12">
                  <v-label class="d-block">
                    <p class="d-flex mb-5">老師自我介紹</p>
                    <v-textarea
                      v-model="resume.introduction"
                      rows="5"
                      variant="outlined"
                    ></v-textarea>
                  </v-label>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text> -->
        </v-window-item>

        <v-window-item :value="3">
          <v-card-text class="mb-7">
            <v-form ref="courseForm" lazy-validation @submit.prevent>
              <v-row class="justify-space-evenly">
                <v-col cols="12" md="6">
                  <v-row>
                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">
                          {{ t("form.course_name") }}<span class="mark">*</span>
                        </p>
                        <v-text-field
                          v-model="course.name"
                          :rules="[requiredRule]"
                          density="compact"
                          variant="outlined"
                        ></v-text-field>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">
                          {{ t("form.craft_category")
                          }}<span class="mark">*</span>
                        </p>
                        <v-select
                          v-model="course.category"
                          placeholder="請選擇類別"
                          :items="[
                            '樹藝',
                            '漆藝',
                            '藍染',
                            '蠟雕',
                            '竹工藝',
                            '金工/飾品',
                            '蠟燭/香氛/調香',
                            '植栽/花藝',
                            '插畫/繪畫/寫字',
                            '皮件/皮革',
                            '木工/竹藝',
                            '陶藝/玻璃',
                            '編織/羊毛氈/縫紉',
                            '其他',
                          ]"
                          :rules="[requiredRule]"
                          density="compact"
                          variant="outlined"
                        ></v-select>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">{{ t("form.course_location") }}</p>
                        <v-text-field
                          v-model="locationData.address"
                          :label="t('form.auto_fill_location_address')"
                          density="compact"
                          variant="outlined"
                          disabled
                        ></v-text-field>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">{{ t("form.organizer") }}</p>
                        <v-text-field
                          v-model="locationData.location_name"
                          :label="t('form.auto_fill_location_name')"
                          density="compact"
                          variant="outlined"
                          disabled
                        ></v-text-field>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="d-flex">
                          {{ t("form.course_duration") }}
                          <span class="mark">*</span>
                        </p>

                        <v-dialog
                          v-model="sessionsDialog"
                          persistent
                          width="800"
                        >
                          <template v-slot:activator="{ props }">
                            <v-btn class="my-5" color="purple" v-bind="props">
                              <v-icon icon="mdi-plus" class="me-1"></v-icon>
                              {{ t("form.create_new_session") }}
                            </v-btn>
                          </template>
                          <v-card class="sessions-card pb-3">
                            <v-card-text class="pa-3 pa-sm-8">
                              <v-form
                                ref="eventForm"
                                lazy-validation
                                @submit.prevent
                              >
                                <v-container class="py-0">
                                  <v-row>
                                    <v-col cols="12">
                                      <p class="text-h6 font-weight-bold my-3">
                                        {{ t("form.create_new_session") }}
                                      </p>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          {{ t("form.session_name") }}
                                          <span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.event"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          placeholder="可與課程名稱相同"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <!-- <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex flex-column flex-sm-row align-start align-sm-center py-2">
                                        <p class="pb-5 pe-3">
                                          課程講師<span class="mark">*</span>
                                        </p>

                                        <v-text-field
                                          v-model="event.lecturer"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col> -->

                                    <!-- <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex flex-column flex-sm-row align-start align-sm-center py-2">
                                        <p class="pb-5 pe-3">
                                          聯絡資訊<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.contact"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col> -->

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          {{ t("form.course_quota") }}
                                          <span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.number_limit"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                          placeholder="請設定報名人數上限"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          {{ t("form.minimum_enrollment") }}
                                          <span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.number_minimum"
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                          :placeholder="
                                            t('form.enter_minimum_enrollment')
                                          "
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-5">
                                          {{ t("form.classroom") }}
                                        </p>
                                        <v-text-field
                                          v-model="event.location"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          {{ t("form.course_price")
                                          }}<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.fee_method"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          {{ t("form.payment_method") }}
                                          <span class="mark">*</span>
                                        </p>

                                        <v-select
                                          v-model="event.fee_payment"
                                          :items="['現場收費', '匯款']"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          outlined
                                        ></v-select>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label
                                        v-if="isRemit"
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          匯款資訊<span class="mark">*</span>
                                        </p>

                                        <div class="d-flex w-100">
                                          <v-text-field
                                            v-model="bankCode"
                                            label="銀行代碼"
                                            :rules="[requiredRule]"
                                            density="compact"
                                            variant="outlined"
                                            style="width: 30%"
                                            class="me-3"
                                          ></v-text-field>
                                          <v-text-field
                                            v-model="bankAccount"
                                            label="匯款帳號 (10-16 碼)"
                                            :rules="[requiredRule]"
                                            density="compact"
                                            variant="outlined"
                                            style="width: 70%"
                                          ></v-text-field>
                                        </div>
                                      </v-label>
                                    </v-col>

                                    <!-- <v-col cols="12" class="py-0">
                                      <v-label class="d-flex flex-column flex-sm-row align-start align-sm-center py-2">
                                        <p class="pb-5 pe-3">
                                          課程價格<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.fee_method"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col> -->

                                    <v-col cols="12" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-3 pe-3">
                                          {{ t("form.target_audience") }}
                                          <span class="mark pb-4">*</span>
                                        </p>
                                        <v-textarea
                                          rows="2"
                                          variant="outlined"
                                          :placeholder="
                                            t('form.target_placeholder')
                                          "
                                          :rules="[requiredRule]"
                                        ></v-textarea>

                                        <!-- <v-select
                                      v-model="event.people"
                                      :items="[
                                        '不拘',
                                        '7 歲以下',
                                        '7-18 歲',
                                        '18-65 歲',
                                        '65 歲以上',
                                      ]"
                                      :rules="[requiredRule]"
                                      density="compact"
                                      variant="outlined"
                                      outlined
                                    ></v-select> -->
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center py-2"
                                      >
                                        <p class="pb-5 pb-sm-0 ps-sm-8 pe-5">
                                          {{ t("form.remarks") }}
                                        </p>
                                        <v-text-field
                                          v-model="event.remark"
                                          density="compact"
                                          variant="outlined"
                                          hide-details
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-divider class="my-10"></v-divider>

                                    <v-col cols="12" class="pt-0">
                                      <p class="text-h6 font-weight-bold mb-3">
                                        {{ t("form.course_duration") }}
                                      </p>
                                    </v-col>

                                    <v-col
                                      cols="12"
                                      class="py-0 position-relative"
                                    >
                                      <v-label
                                        class="d-flex flex-column flex-sm-row align-start align-sm-center pt-2"
                                      >
                                        <p class="pb-3 pe-3">
                                          {{ t("form.course_type") }}
                                          <span class="mark pb-4">*</span>
                                        </p>
                                        <v-select
                                          v-model="eventType"
                                          :items="[
                                            `${t(
                                              'form.one_day_courses'
                                            )}（e.g., 2023/10/1 ${t(
                                              'form.classes_monday'
                                            )}）`,
                                            `${t(
                                              'form.periodic_courses'
                                            )}（e.g., 2023/10/1～2023/10/30 ${t(
                                              'form.classes_schedule'
                                            )}）`,
                                          ]"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          outlined
                                        ></v-select>
                                      </v-label>

                                      <!-- <small
                                    v-show="eventType !== ''"
                                    class="type-hint"
                                    >{{
                                      isOneDay
                                        ? "例：2023/10/2 週一上課"
                                        : "例：2023/10/1～2023/10/30 每週一三上課"
                                    }}</small
                                  > -->
                                    </v-col>

                                    <v-col
                                      v-if="!isOneDay"
                                      cols="12"
                                      class="d-flex flex-column flex-sm-row py-0"
                                    >
                                      <p class="pt-1 pe-3">
                                        重複週期<span class="mark pb-4">*</span>
                                      </p>

                                      <ul class="week-list">
                                        <li
                                          v-for="(item, index) in weekList"
                                          :key="index"
                                          @click="toggleSelected(index)"
                                          :class="{
                                            active: selectedWeek[index],
                                          }"
                                          class="d-flex align-center"
                                        >
                                          <button class="item">
                                            {{ item }}
                                          </button>

                                          <div
                                            v-if="selectedWeek[index]"
                                            class="d-flex flex-wrap w-100 ms-5"
                                          >
                                            <VueDatePicker
                                              v-model="
                                                sessionTime.start_week_time[
                                                  index
                                                ]
                                              "
                                              time-picker
                                            />
                                            <span
                                              class="d-flex align-center mx-2 my-2 my-sm-0"
                                              >～</span
                                            >
                                            <VueDatePicker
                                              v-model="
                                                sessionTime.end_week_time[index]
                                              "
                                              time-picker
                                            />
                                          </div>
                                        </li>
                                      </ul>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.start_date") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.start_date"
                                        :min-date="new Date()"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                      ></VueDatePicker>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.start_time") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.start_time"
                                        time-picker
                                      />
                                    </v-col>

                                    <v-col
                                      cols="12"
                                      sm="6"
                                      class="date-item position-relative"
                                    >
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.end_date") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.end_date"
                                        :min-date="new Date()"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                        :disabled="isOneDay"
                                      ></VueDatePicker>
                                      <span
                                        v-if="dateReminder"
                                        class="date-reminder text-error"
                                        >{{
                                          t("form.periodic_courses_note")
                                        }}</span
                                      >
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.end_time") }}
                                        <span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.end_time"
                                        time-picker
                                      />
                                    </v-col>

                                    <!-- <v-col
                                  v-if="!isOneDay"
                                  cols="12"
                                  class="time-item pt-5 pb-7"
                                >
                                  <p class="mb-0">
                                    課程時間<span class="mark">*</span>
                                  </p>
                                  <div class="d-flex w-100">
                                    <VueDatePicker
                                      v-model="sessionTime.start_week_time"
                                      time-picker
                                    />
                                    <span class="d-flex align-center mx-2"
                                      >～</span
                                    >
                                    <VueDatePicker
                                      v-model="sessionTime.end_week_time"
                                      time-picker
                                    />
                                  </div>
                                </v-col> -->

                                    <v-divider class="my-10"></v-divider>

                                    <v-col cols="12" class="pt-0">
                                      <p class="text-h6 font-weight-bold mb-3">
                                        {{ t("form.registration_time") }}
                                      </p>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.registration_start_date") }}
                                        <span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_start_date"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                      ></VueDatePicker>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.registration_time") }}
                                        <span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_start_time"
                                        time-picker
                                      />
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.registration_deadline") }}
                                        <span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_end_date"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                      ></VueDatePicker>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-5 mb-sm-0 pe-3">
                                        {{ t("form.registration_end_time") }}
                                        <span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_end_time"
                                        time-picker
                                      />
                                    </v-col>
                                  </v-row>
                                </v-container>
                              </v-form>
                            </v-card-text>

                            <v-card-actions class="justify-center pt-10 pb-5">
                              <v-btn
                                color="gray"
                                variant="tonal"
                                class="me-3 px-10"
                                @click="sessionsDialog = false"
                              >
                                {{ t("form.cancel") }}
                              </v-btn>
                              <v-btn
                                color="purple"
                                variant="flat"
                                @click="addEventData()"
                                class="px-10"
                              >
                                {{ t("form.create") }}
                              </v-btn>
                            </v-card-actions>
                          </v-card>
                        </v-dialog>

                        <h6 v-if="eventData.list.length" class="table-title mt-10">
                          {{ t("session_info") }}
                        </h6>

                        <div v-if="eventData.list.length" class="main-table">
                          <!-- <h6 class="table-title">{{ t("session_info") }}</h6> -->
                          <table>
                            <thead>
                              <tr>
                                <th>{{ t("name") }}</th>
                                <th></th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr
                                v-for="(item, index) in eventData.list"
                                :key="index"
                              >
                                <td>{{ item.event }}</td>
                                <td>
                                  <v-dialog width="auto">
                                    <template v-slot:activator="{ props }">
                                      <v-btn
                                        v-bind="props"
                                        :text="t('form.check')"
                                        variant="tonal"
                                        color="purple"
                                        rounded="xl"
                                      >
                                      </v-btn>
                                    </template>

                                    <template v-slot:default="{ isActive }">
                                      <v-card
                                        :title="`場次：${item.event}`"
                                        class="pa-3"
                                      >
                                        <v-card-text
                                          style="
                                            letter-spacing: 1px;
                                            line-height: 1.5;
                                          "
                                        >
                                          <!-- {{ item.introduction }} -->
                                          <table class="mt-5 event-table">
                                            <tbody>
                                              <tr>
                                                <td>
                                                  {{ t("form.session_date") }}
                                                </td>
                                                <td>
                                                  {{
                                                    item.start_time.split(
                                                      "T"
                                                    )[0]
                                                  }}
                                                  <span class="ps-1">{{
                                                    item.start_time
                                                      .split("T")[1]
                                                      .substring(0, 5)
                                                  }}</span>
                                                  <span class="ms-2 me-1"
                                                    >～</span
                                                  >
                                                  {{
                                                    item.end_time.split("T")[0]
                                                  }}
                                                  <span class="ps-1">{{
                                                    item.end_time
                                                      .split("T")[1]
                                                      .substring(0, 5)
                                                  }}</span>
                                                </td>
                                              </tr>

                                              <tr>
                                                <td>
                                                  {{
                                                    t("form.registration_time")
                                                  }}
                                                </td>
                                                <td>
                                                  {{
                                                    item.registration_start.split(
                                                      "T"
                                                    )[0]
                                                  }}
                                                  <span class="ps-1">{{
                                                    item.registration_start
                                                      .split("T")[1]
                                                      .substring(0, 5)
                                                  }}</span>
                                                  <span class="ms-2 me-1"
                                                    >～</span
                                                  >
                                                  {{
                                                    item.registration_end.split(
                                                      "T"
                                                    )[0]
                                                  }}
                                                  <span class="ps-1">{{
                                                    item.registration_end
                                                      .split("T")[1]
                                                      .substring(0, 5)
                                                  }}</span>
                                                </td>
                                              </tr>

                                              <tr>
                                                <td>
                                                  {{ t("form.course_quota") }}
                                                </td>
                                                <td>{{ item.number_limit }}</td>
                                              </tr>

                                              <tr>
                                                <td>
                                                  {{
                                                    t("form.minimum_enrollment")
                                                  }}
                                                </td>
                                                <td>
                                                  {{ item.number_minimum }}
                                                </td>
                                              </tr>

                                              <tr>
                                                <td>
                                                  {{ t("form.course_price") }}
                                                </td>
                                                <td>{{ item.fee_method }}</td>
                                              </tr>

                                              <tr>
                                                <td>
                                                  {{ t("form.payment_method") }}
                                                </td>
                                                <td>{{ item.fee_payment }}</td>
                                              </tr>

                                              <tr
                                                v-if="item.ATM_address !== ''"
                                              >
                                                <td>匯款帳號</td>
                                                <td>{{ item.ATM_address }}</td>
                                              </tr>

                                              <!-- <tr>
                                                <td>聯絡資訊</td>
                                                <td>{{ item.contact }}</td>
                                              </tr> -->

                                              <tr>
                                                <td>
                                                  {{
                                                    t("form.target_audience")
                                                  }}
                                                </td>
                                                <td>{{ item.people }}</td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </v-card-text>

                                        <v-card-actions class="justify-end">
                                          <v-spacer></v-spacer>

                                          <v-btn
                                            :text="t('form.close')"
                                            @click="isActive.value = false"
                                          ></v-btn>
                                        </v-card-actions>
                                      </v-card>
                                    </template>
                                  </v-dialog>
                                </td>
                                <td>
                                  <button
                                    @click="resumeDelectDialog[index] = true"
                                  >
                                    <v-icon
                                      icon="mdi-close"
                                      color="error"
                                    ></v-icon>
                                  </button>

                                  <v-dialog
                                    v-model="resumeDelectDialog[index]"
                                    width="500"
                                  >
                                    <v-card :title="t('form.delete_session')">
                                      <v-card-text>
                                        {{
                                          t("form.delete_session_confirmation")
                                        }}
                                      </v-card-text>

                                      <v-card-actions
                                        class="d-flex justify-end"
                                      >
                                        <v-btn
                                          :text="t('form.cancel')"
                                          @click="
                                            resumeDelectDialog[index] = false
                                          "
                                        ></v-btn>
                                        <v-btn
                                          text="確定"
                                          color="error"
                                          @click="deleteEvent(index)"
                                        ></v-btn>
                                      </v-card-actions>
                                    </v-card>
                                  </v-dialog>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="d-flex">
                          {{ t("form.course_intro") }}
                          <span class="mark">*</span>
                        </p>
                        <small class="d-block text-gray my-2">
                          {{ t("form.content_requirements") }}</small
                        >
                        <v-textarea
                          v-model="course.introduction"
                          rows="5"
                          variant="outlined"
                          :rules="[
                            (value) =>
                              (value && value.length >= 50) ||
                              '請至少輸入 50 個字元，以確保內容完整性',
                          ]"
                          counter
                        ></v-textarea>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <div class="d-flex align-center">
                          <p class="d-flex me-3">
                            {{ t("form.course_content") }}
                            <span class="mark">*</span>
                          </p>

                          <v-dialog width="500">
                            <template v-slot:activator="{ props }">
                              <v-btn
                                v-bind="props"
                                variant="outlined"
                                color="purple"
                                >{{ t("chapter.example") }}
                              </v-btn>
                            </template>

                            <template v-slot:default="{ isActive }">
                              <v-card>
                                <v-card-text>
                                  <div class="d-flex justify-end">
                                    <v-btn
                                      @click="isActive.value = false"
                                      icon="mdi-close"
                                      variant="text"
                                    ></v-btn>
                                  </div>
                                  <ul class="section-list pa-3">
                                    <li>
                                      {{
                                        `${t("chapter.title")} 1 — ${t(
                                          "chapter.name_1"
                                        )}`
                                      }}
                                    </li>
                                    <li>
                                      {{
                                        `${t("chapter.title")} 2 — ${t(
                                          "chapter.name_2"
                                        )}`
                                      }}
                                    </li>
                                    <li>
                                      {{
                                        `${t("chapter.title")} 3 — ${t(
                                          "chapter.name_3"
                                        )}`
                                      }}
                                    </li>
                                    <li>
                                      {{
                                        `${t("chapter.title")} 4 — ${t(
                                          "chapter.name_4"
                                        )}`
                                      }}
                                    </li>
                                  </ul>
                                </v-card-text>
                              </v-card>
                            </template>
                          </v-dialog>
                        </div>

                        <div class="d-flex my-5">
                          <div class="w-100">
                            <v-text-field
                              v-model="section"
                              density="compact"
                              variant="outlined"
                              hide-details
                              placeholder="章節標題"
                            ></v-text-field>
                            <!-- <v-textarea
                              v-model="syllabusData.content"
                              density="compact"
                              variant="outlined"
                              hide-details
                              placeholder="章節內容"
                              rows="3"
                              counter
                            ></v-textarea> -->
                          </div>

                          <v-btn
                            color="purple"
                            icon="mdi-plus"
                            size="small"
                            class="ms-5"
                            @click="addSection()"
                          ></v-btn>
                        </div>

                        <ul class="section-list">
                          <li
                            v-for="(item, index) in sectionList"
                            :key="index"
                            class="py-2"
                          >
                            <div
                              class="d-flex align-center justify-space-between"
                            >
                              <p>章節 {{ index + 1 }} — {{ item }}</p>
                              <v-btn
                                color="error"
                                icon="mdi-close"
                                variant="text"
                                size="small"
                                @click="deleteSection(index)"
                              ></v-btn>
                            </div>
                          </li>
                        </ul>

                        <!-- <ul>
                          <li v-for="(item, index) in sectionList" :key="index">
                            章節 {{ index + 1 }} — {{ item }}
                          </li>
                        </ul> -->

                        <!-- <v-textarea
                          v-model="syllabusData.content"
                          density="compact"
                          variant="outlined"
                          hide-details
                          placeholder="備註內容(非必填)"
                          rows="2"
                          counter
                        ></v-textarea> -->
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block mt-1">
                        <p class="d-flex mb-3">
                          {{ t("form.course_difficulty")
                          }}<span class="mark">*</span>
                        </p>

                        <v-radio-group
                          v-model="course.level"
                          inline
                          color="purple"
                        >
                          <v-radio
                            label="初階"
                            value="初階"
                            color="brown"
                          ></v-radio>
                          <v-radio
                            label="中階"
                            value="中階"
                            class="mx-2"
                            color="brown"
                          ></v-radio>
                          <v-radio
                            label="高階"
                            value="高階"
                            color="brown"
                          ></v-radio>
                        </v-radio-group>
                      </v-label>
                    </v-col>

                    <!-- <v-col cols="12">
                      <v-label class="d-block">
                        <p class="d-flex">章節預覽：</p>
                      </v-label>
                    </v-col> -->

                    <v-col cols="12" class="me-auto">
                      <v-label class="d-block">
                        <p class="d-flex">
                          {{ t("form.upload_course_cover_image") }}
                          <span class="mark">*</span>
                        </p>

                        <v-file-input
                          multiple
                          v-model="coverImg"
                          ref="coverImgRef"
                          label="File input"
                          variant="outlined"
                          :placeholder="t('form.choose_image')"
                          @change="handleCoverImg"
                          style="display: none"
                        ></v-file-input>
                      </v-label>

                      <v-btn
                        @click="fileInputClick('cover')"
                        color="purple"
                        class="my-5"
                      >
                        {{ t("form.choose_image") }}
                      </v-btn>

                      <div class="step-01 image-preview">
                        <img
                          v-if="coverImg"
                          :src="coverImgUrl"
                          alt="上傳圖片預覽"
                        />
                      </div>

                      <!-- <v-row class="img-list">
                        <v-col cols="4" v-for="(item, index) in 6" :key="index">
                          <div
                            v-if="!portfolioImgList.length"
                            class="item"
                          ></div>
                          <div
                            v-else
                            class="item"
                            :style="{
                              backgroundImage: `url('${portfolioImgList[index]}')`,
                            }"
                          ></div>
                        </v-col>
                      </v-row> -->
                    </v-col>
                  </v-row>
                </v-col>

                <v-col cols="12" md="6">
                  <div class="notes-block">
                    <p class="mb-5">{{ t("course_review_criteria") }}：</p>
                    <ul>
                      <li>◆ {{ t("course_criteria_1") }}</li>
                      <li>◆ {{ t("course_criteria_2") }}</li>
                      <li>◆ {{ t("course_criteria_3") }}</li>
                    </ul>
                  </div>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text>
        </v-window-item>

        <v-window-item :value="4">
          <v-card-text class="mb-7 finish-step">
            <p>
              {{ t("confirmation_messages.waiting_for_staff") }} <br />
              {{ t("confirmation_messages.waiting_for_email") }} <br />
              {{ t("confirmation_messages.go_to_my_courses") }}
              <!-- 就可以前往
              <router-link to="/user/courses">【我的開課】</router-link>
              觀看及修改您的 -->
            </p>
            <ul>
              <li>(1) {{ t("location_info") }}</li>
              <li>(2) {{ t("course_info") }}</li>
              <li>(3) {{ t("session_info") }}</li>
            </ul>
          </v-card-text>
        </v-window-item>
      </v-window>

      <v-divider></v-divider>

      <v-card-actions
        class="justify-center flex-column flex-sm-row my-5 mb-sm-0 mt-sm-7"
      >
        <v-btn
          v-if="step > 1 && step !== 4"
          color="gray"
          variant="outlined"
          size="large"
          @click="step--"
          class="px-7 me-sm-7"
        >
          {{ t("back") }}
        </v-btn>
        <v-spacer></v-spacer>

        <v-btn
          v-if="step < 3"
          color="purple"
          variant="flat"
          size="large"
          @click="checkField(step)"
          class="px-7 ms-0 mt-5 mt-sm-0"
        >
          {{ t("next") }}
        </v-btn>
        <!-- <div
            v-if="errorField"
            class="d-flex align-center text-error mt-3 position-absolute"
            style="bottom: 15px"
          >
            <v-icon icon="mdi-alert"></v-icon>
            <span class="ms-2"> 尚有欄位未填寫 </span>
          </div> -->
        <v-btn
          v-if="step === 3"
          color="purple"
          variant="flat"
          size="large"
          @click="create()"
          :loading="loading"
          class="px-7 mt-5 mt-sm-0 ms-0"
        >
          {{ t("form.create") }}
        </v-btn>
        <div
          v-if="errorField"
          class="d-flex align-center text-error mt-3 position-absolute"
          style="bottom: 15px"
        >
          <v-icon icon="mdi-alert"></v-icon>
          <span class="ms-2"> {{ t("form.fields_blank") }} </span>
        </div>
        <div
          v-if="errorEventField"
          class="d-flex align-center text-error mt-3 position-absolute"
          style="bottom: 15px"
        >
          <v-icon icon="mdi-alert"></v-icon>
          <span class="ms-2"> {{ t("form.course_time_not_filled") }} </span>
        </div>
        <v-btn
          v-if="step === 4"
          color="purple"
          variant="outlined"
          class="mb-5 mb-sm-0 me-sm-3"
        >
          <router-link to="/" class="px-7">{{
            t("return_to_home")
          }}</router-link>
        </v-btn>
        <v-btn v-if="step === 4" color="purple" variant="flat">
          <router-link to="/user/courses" class="px-7">{{
            t("go_to_course_area")
          }}</router-link>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<style lang="scss" scoped>
.step-title {
  text-align: center;
  h5 {
    font-size: 1.75em;
    font-weight: 500;
    letter-spacing: 0.125em;
    @media (max-width: 600px) {
      font-size: 1em;
    }
  }
  p {
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.0625em;
    color: #919191;
    white-space: normal;
    @media (max-width: 600px) {
      font-size: 0.7em;
      line-height: 1.5em;
    }
  }
}

.step-01 {
  &.image-preview {
    height: 17.8125em;
  }
}

.step-02 {
  &.image-preview {
    height: 14.6875em;
  }
}

.image-preview {
  img {
    height: 100%;
    object-fit: contain;
  }
}

.flex-grow-1 {
  display: none !important;
}

.img-list {
  .item {
    height: 10em;
    border-radius: 0.3125em;
    background-color: #ccc; // 預設灰底
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

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

.event-table {
  &,
  tr,
  td {
    padding: 10px 20px;
    border: 1px solid #d7d7d7;
    border-collapse: collapse;
  }

  tr {
    td:first-child {
      text-align: center;
    }
  }
}

.sessions-card {
  border-radius: 1.875em 0.3125em 0.3125em 1.875em !important;

  .v-label {
    p {
      display: flex;
      text-align: end;
      line-height: 1.375em;
      @media (max-width: 600px) {
        width: 7.6875em;
      }
    }
  }
}

.table-title {
  width: auto !important;
  background-color: var(--purple);
}

.main-table {
  margin-bottom: 3em;

  table {
    thead {
      border-bottom: 0.125em solid var(--purple);
      tr {
        &:first-child:hover {
          background-color: #fff;
        }
      }
    }
    tbody {
      tr {
        &:hover {
          background-color: #f3f3f3;
        }
      }
      td {
        cursor: pointer;
        border-bottom: 0.0625em solid var(--purple);
      }
    }
  }
}

.finish-step {
  line-height: 3.125em !important;
  font-size: 1.375em;
  text-align: center;
  letter-spacing: 0.0625em;

  @media (max-width: 600px) {
    padding: 0;
    line-height: 2em;
    font-size: 1em;
  }
}

.type-hint {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0.0625em;
  left: 6.5625em;
  color: var(--gray);
}

.time-item {
  display: flex;
  align-items: center;
  p {
    width: 6.0625em;
    flex-wrap: nowrap;
    display: flex;
    white-space: nowrap;
  }
}

input[type="checkbox"] {
  // accent-color: var(--purple);
  transform: scale(1.5);
}

.school-form {
  max-width: 800px;
  margin: 50px auto 0;

  li {
    padding: 20px;
    border-bottom: 1px solid #eeeded;
    font-size: 1.2em;
    letter-spacing: 1px;
    cursor: pointer;

    &:last-child {
      border-bottom: none;
    }
  }

  .proposal-link {
    padding: 25px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.15em;
    text-shadow: 1px 1px 2px #ababab;
    border-radius: 5px;
    background-color: var(--blue);
    transition: all 0.3s;
    letter-spacing: 2px;

    &:hover {
      opacity: 0.8;
    }
  }
}

.teachers-card {
  cursor: pointer;
  letter-spacing: 1px;
  h4 {
    font-size: 1.25em;
  }

  ul {
    border-top: 1px solid #ccc;
    li {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.v-card .v-card-title {
  @media (max-width: 600px) {
    white-space: normal;
    line-height: 2em;
  }
}
</style>
