AI_Spokesgirl/html/static/script_util2.js

// Check Route
 checkRoute();
// let card;

let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];

console.log(userBasics);
if(userBasics.length >0 && typeof(userBasics) !== 'string'){
  $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
} 

function checkRoute() {
  let jwt_token = get_jwt_token();
  // if(jwt_token == undefined) {
  //   window.location.replace("login.html");
  // }
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/user_profile',
    headers: { 
        'accept': 'text/html',
        'Authorization': `Bearer ${jwt_token}`
     }
  }).then(res => {
    console.log(res.data);
    if(res.status !== 200) {
      window.location.replace("login.html");
    }
    var userName='';
    userName+=`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
    $('.userName').html(userName);
  }).catch(err => {
    console.log(err);
    window.location.replace("login.html");
  }); 
}

// Nav btn control
const btnLoginPage = document.querySelector('.btn-login');
const btnUserProfile = document.querySelector('.btn-userProfile');
const btnLogout = document.querySelector('.btn-logout');
function loginControl() {
  btnLoginPage.style.display = 'none';
  btnLogout.style.display = 'block';
  btnUserProfile.style.display = 'block';
}

loginControl();

// Check lan
let lan = localStorage.getItem('lan');

$('.dropdown-toggle').click(() => {
  lan = localStorage.getItem('lan');
  checkLan();
});

checkLan();

function checkLan() {
  if(lan == 'en') {
    $('.btn-makev').css('display', 'none');
    $('.btn-makelong').css('display', 'none');
    $('.title_new').attr('placeholder', 'Title')
  } else {
    $('.btn-makev').css('display', 'block');
    $('.btn-makelong').css('display', 'block');
  }
}

// Get avatars
function getAvatar() {
  let jwt_token = get_jwt_token();
  /* if(jwt_token == undefined) {
    window.location.replace("login.html");
  } */
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/get_avatar_by_role',
    headers: { 
        'accept': 'text/html',
        'Authorization': `Bearer ${jwt_token}`
     }
  }).then(res => {
    console.log(res.data);
    let result = [...res.data];
    let str = '';
    let carStr = '';
    for(let i = 0; i < result.length; i++) {
      str += `<option value="${result[i].num}">${result[i].name}</option>`
    }
    for(let i = 0; i < result.length; i++) {
      carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
                    <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
                    <div class="card-body">
                        <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
                    </div>
                </div>`;
    }
    $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
    $('.avatar-cards').html(carStr);
    //card = document.getElementsByClassName('card');
    console.log(card);
    //addCardListener(card);
    //avatarChange();
  }).catch(err => {
    console.log(err);
  });
}

// getAvatar();


// Card
const card = document.querySelectorAll('.avatar-cards .card');
var client_id = Date.now()
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
});
var myModal = new bootstrap.Modal(document.getElementById('history'), {
  keyboard: false
})
var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
  keyboard: false
})

var draftsModal = new bootstrap.Modal(document.getElementById('draftModal'), {
  keyboard: false
})
var modalImg = document.querySelector("#avatarmega .modal-img");
var modalTitle = document.querySelector("#avatarmega .modal-title");
var avatarSelector = document.getElementById("avatar");


avatarSelector.addEventListener('change', avatarChange);

function addCardListener() {
  for (let i = 0; i < card.length; i++) {
    card[i].addEventListener('click', openavatarModel);
  }
}

addCardListener()
avatarChange()

function avatarChange() {
  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
  for (let i = 0; i < card.length; i++) {
    card[i].classList.remove('active');
    if (card[i].dataset.avatar == value) {
      card[i].classList.add('active');
    }
  }
}

function openavatarModel() {
  console.log(this.dataset.img);
  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
  modalTitle.textContent = `${this.dataset.avatar}`;
  avatarModal.show();
}
// Drafts
function getDraft() {
  JsLoadingOverlay.show({
    "overlayBackgroundColor": "#FFFFFF",
    "overlayOpacity": "1",
    "spinnerIcon": "ball-circus",
    "spinnerColor": "#B9DDF3",
    "spinnerSize": "1x",
    "overlayIDName": "overlay",
    "spinnerIDName": "spinner",
    "offsetX": 0,
    "offsetY": 0,
    "containerID": "draft-table",
    "lockScroll": false,
    "overlayZIndex": 9998,
    "spinnerZIndex": 9999
  });
  let token = get_jwt_token();
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/draft_list',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${token}`
     }
  }).then(res => {
    console.log(res.data);
    let result = [...res.data];
    let str = '';
    let draftStr = '';
    let nodraftTxt = '目前沒有草稿喔';
      if(lan == 'en') {
        titleTxt = 'Video Title';
        editTxt = 'Edit';
        nodraftTxt = 'no_draft';
      }
    if(result.length > 0){
      for(let i = 0;i < result.length; i++) {
        draftStr += `<tr>
                  <td>${result[i].title}</td>
                  <td>
                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
                    <i class="fas fa-edit"></i>
                    </span>
                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
                    <i class="fas fa-trash-alt"></i>
                    </span>
                    </td>
                </tr>`
      }
      let titleTxt = '標題';
      let editTxt = '編輯';
      str = `<table class="table text-center">
      <thead>
        <tr>
          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
        </tr>
      </thead>
      <tbody class="draft-content">${draftStr}</tbody>
      </table>`
      $('.draft-table .card').html(str);
      JsLoadingOverlay.hide();
    } else {
      str = `<div>
              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
              <img src="static/img/undraw_void_3ggu.svg" width="80">
            </div>`;
      $('.draft-table .card').html(str); 
      JsLoadingOverlay.hide();
    }
  }).catch(err => {
    console.log(err);
  });
}
getDraft();
function openDrafts() {
  draftsModal.show()
  document.querySelector('#draftModal .loader').style.display = "block";
  $('#draftModal #draft-table').show();
  getDraft();
  document.querySelector('#draftModal .loader').style.display = "none";
}

function gotoDraft (id) {
  location.href = `make_video2.html?draftid=${id}`;
}

function deleteDraft(id) {
  let token = get_jwt_token();
  JsLoadingOverlay.show({
    "overlayBackgroundColor": "#FFFFFF",
    "overlayOpacity": "1",
    "spinnerIcon": "ball-circus",
    "spinnerColor": "#B9DDF3",
    "spinnerSize": "1x",
    "overlayIDName": "overlay",
    "spinnerIDName": "spinner",
    "offsetX": 0,
    "offsetY": 0,
    "containerID": "draft-table",
    "lockScroll": false,
    "overlayZIndex": 9998,
    "spinnerZIndex": 9999
  });
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/del_draft',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    data: { "id": id }
  }).then(res => {
    console.log(res.data);
    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
    JsLoadingOverlay.hide();
    getDraft();
    draftsModal.show();
    avatarModal.hide();
  }).catch(err => {
    console.log(err);
  });
}

// Upload
$('input[type=file]').on('change', prepareUpload);
$('.upload-btn').change(prepareUpload);
function prepareUpload(event) {
  files = event.target.files;
  $(this).prev().val('');
  var data = new FormData();
  //data.append('file', $('.img_up1').prop('files')[0]);
  data.append('file', files[0]);
  // append other variables to data if you want: data.append('field_name_x', field_value_x);
  $(this).next().text('');
  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
  $.ajax({
    type: 'POST',
    processData: false, // important
    contentType: false, // important
    data: data,
    url: 'https://www.choozmo.com:8887/uploadfile',
    dataType: 'json',
    success: function (jsonData) {
      event.target.previousSibling.value = jsonData.msg;
      console.log(jsonData.msg);
      $(this).prev().val(jsonData.msg);
      if(jsonData.msg.zh) {
        $(this).prev().val(jsonData.msg.zh);
        event.target.previousSibling.value = jsonData.msg.zh;
      }
      const nextEl = event.target.nextSibling;
      nextEl.innerHTML = '';
      // nextEl.textContent = '上傳檔案';
      nextEl.style.backgroundImage = `url(http://${jsonData.msg})`;
      //console.log($(this).next());
      //$(this).next().html('上傳檔案');
      //$(this).next().text('上傳檔案');
      $(this).html('');
    },
    error: function (error) {
      const nextEl = event.target.nextSibling;
      nextEl.style.backgroundImage = `url(./img/upload_img.png)`;
      $(this).html('');
      alert('圖片錯誤');
    }
  });
}
const button = document.querySelector('.next');

// Submit
$(".next").click(function () {
  button.setAttribute('disabled', '');
  setTimeout(function () {
    button.removeAttribute('disabled')
  }, 10000);
  avatar = $('.avatar').val();
  name_title = $('.title_new').val();
  txtARR = [];
  imgARR = [];
  var step;
  let contentIdx = document.querySelectorAll(".txtsrc").length;
  for (let i = 1; i < (contentIdx + 1); i++) {
    if ($(`.txtsrc`).eq(i-1).val() != "") {
      txtARR.push($(`.txtsrc`).eq(i-1).val())
    }
  }
  let imgIdx = document.querySelectorAll(".imgsrc").length;
  for (let i = 1; i < (imgIdx + 1); i++) {
    if ($(`.imgsrc`).eq(i-1).val() != "") {
      imgARR.push($(`.imgsrc`).eq(i-1).val())
    }
  }
  multiLang = 0;
  if ($('#multiLang').prop("checked")) {multiLang = 1;}
  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
  objstr = JSON.stringify(dataOBJ);
  console.log(dataOBJ)
  jwt_token =  get_jwt_token()
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
  xhr.setRequestHeader("accept", "application/json");
  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      responseOBJ = JSON.parse(xhr.responseText)
      console.log(responseOBJ.msg);
        //let title = "資料已送出";
        let text;
        if(lan == 'en') {
          //title = 'Submitted Successfully!';
          text = responseOBJ.msg.eng;
        } else {
          text = responseOBJ.msg.zh;
        }
        Swal.fire({
         // title: title,
          icon: 'info',
          text: text,
          confirmButtonColor: '#3085d6',
        });
      
    }
  };
  var data = renderXHR_data(dataOBJ)
  console.log(data)
  result = xhr.send(objstr);
});


// Gen avatars
$(".gen_avatar").click(function () {
  dataOBJ = { "imgurl": $('.img_src').val() }
  objstr = JSON.stringify(dataOBJ);
  console.log(dataOBJ)
  //alert('資料已送出! 請耐心等候')
  $.ajax({
    url: 'https://www.choozmo.com:8887/swapFace',
    dataType: 'json', // 預期從server接收的資料型態
    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
    type: 'post',
    data: objstr,
    success: function (suc_data) {
      alert(suc_data.msg)
    },
    //data:JSON.stringify({n1:"12",n2:"22"}),
    error: function (error) {
      console.error(error)
    }
  });
});

var loaded_data = ''
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.querySelector('.loader').style.display = "block";
  let jwt_token = get_jwt_token();
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/history_input',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${jwt_token}`
     }
  }).then(res => {
    console.log(res.data);
    loaded_data = res.data;
    var historyList = document.querySelector('.historyList');
    historyList.innerHTML = '';
    for (var obj of loaded_data) {
      var list = document.createElement('li');
      list.id = obj.id;
      // div-imgfr
      var divImgfr = document.createElement('div');
      divImgfr.classList.add('item_imgfr');
      var img = document.createElement('img');
      img.setAttribute('src', obj['image_urls'][0]);
      divImgfr.appendChild(img);
      // div-content
      var contentBox = document.createElement('div');
      contentBox.classList.add('content-box');
      var boxTitle = document.createElement('p');
      boxTitle.classList.add('box-title');
      boxTitle.textContent = obj.name;
      boxTitle.id = obj.id;
      console.log(loaded_data);
      boxTitle.setAttribute('onclick', `direct(${obj.id})`);

      var boxLink = document.createElement('span');
      boxLink.classList.add('box-link');
      boxLink.setAttribute("data-url", obj.link);
      boxLink.setAttribute('onclick', 'view()');
      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
      contentBox.appendChild(boxTitle);
      contentBox.appendChild(boxLink);
      list.classList.add("historyList-item");
      list.setAttribute('onclick', `direct(${obj.id})`);
      list.appendChild(divImgfr);
      list.appendChild(contentBox);
      historyList.appendChild(list);
    }
    document.querySelector('.loader').style.display = "none";
  
  }).catch(err => {
    console.log(err);
  });
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function view() {
  event.stopPropagation();
  console.log(event.target);
  if (event.target.nodeName === 'I') {
    return;
  } else {
    window.open(`http://${event.target.dataset.url}`, '_blank');
  }
}

function renderXHR_data(jsonObj) {
  XHRstring = ''
  for (const [key, value] of Object.entries(jsonObj)) {
    console.log(value)
    if (typeof (value) == "object") {
      XHRstring += (key+'=['+value.join(',')+']&')
    }
    else {
      XHRstring += (key + '=' + value + '&')
    }
  }
  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
  return XHRstring
}

function get_jwt_token(){
  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
  if(!jwt_raw) {return}
  return jwt_raw.split('=')[1];
}

function direct(id) {
  location.href = `make_video2.html?id=${id}`;
}


function load_data(tid, loaded_data, draft = false) {
  if(!tid) {
    return;
  }
  var title = document.getElementById("title");
  var linker = document.getElementById("linker");
  myModal.hide();
  if(!draft) {
    linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
    linker.setAttribute('target', '_blank')
    $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
    $("#linker").show();
    $(".linker__box").show();
  }
  console.log(loaded_data);
  let historyItem = loaded_data.filter(item => item.id == tid)[0];
  if(draft) {
    $(".title_new").val(historyItem.title);
    $("#avatar").val(historyItem.avatar);
  } else {
    $(".title_new").val(loaded_data.find(item => item.id == tid).name);
    $("#avatar").val(historyItem.avatar);
  }

  let txtlength = historyItem.text_content.length;
  let imglength = historyItem.image_urls.length;
  let flag = txtlength >= imglength ? txtlength : imglength;

  //subtitleInputs.innerHTML = '';
  // imgInputs.innerHTML = '';
  $('.img-inputTest').html('');
        for (let i = 0; i < flag; i++) {
          var input_sec = document.createElement('div');
          var img_box = document.createElement('div');

          input_sec.classList.add('input-sec', `input-sec${i+1}`, 'p-3', 'mb-3', 'text-end');
          img_box.classList.add('img-box');

          // text input
          var txtinput = document.createElement("input");
          txtinput.setAttribute('type', 'text');
          txtinput.setAttribute('name', `t${i+1}`);
          txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
          txtinput.value = historyItem.text_content[i];
          txtinput.setAttribute('placeholder', `${i+1}`);
          input_sec.appendChild(txtinput);

          var removeSpan = document.createElement("span");
          removeSpan.classList.add('remove-btn');
          removeSpan.setAttribute('data-num', `${i}`);
          removeSpan.textContent = '刪除';
          removeSpan.setAttribute('data-bs-toggle', `modal`);
          removeSpan.setAttribute('data-bs-target', `#deleteSecModal`);
          input_sec.appendChild(removeSpan);

          // img url input
          var imginput = document.createElement("input");
          imginput.setAttribute('type', 'text');
          imginput.setAttribute('name', `m${i+1}`);
          imginput.classList.add('imgsrc', `imgsrc${i+1}`);
          imginput.value = historyItem.image_urls[i];
          if(!historyItem.image_urls[i]) {
            imginput.value = "";
          }
          imginput.setAttribute('placeholder', '輸入圖片網址或上傳圖片');
          if(lan == 'en') {
            imginput.setAttribute('placeholder', 'Type in image link or upload image');
          }
          img_box.appendChild(imginput);

          // img upload input
          var imgupload = document.createElement("input");
          imgupload.setAttribute('id', `img${i+1}`);
          imgupload.setAttribute('type', `file`);
          imgupload.classList.add('img_uploader', 'img_up');
          imgupload.style.display = "none";
          img_box.appendChild(imgupload);

          // img upload label
          var imguploadlabel = document.createElement("label");
          imguploadlabel.setAttribute('for', `img${i+1}`);
          imguploadlabel.classList.add('upload-btn');
          // imguploadlabel.textContent = '上傳圖片';
          imguploadlabel.setAttribute('set-lan', `html:upload_file`);
          if(!historyItem.image_urls[i]) {
            imguploadlabel.style.backgroundImage = `url(static/img/upload_img.png)`;
          } else {
            imguploadlabel.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
          }
          img_box.appendChild(imguploadlabel);
          imgupload.addEventListener('change', prepareUpload);

          input_sec.appendChild(img_box);
          document.querySelector('.img-inputTest').append(input_sec);
        }
  addRemoveFunc()
}


getpathId();

function getMode() {
  let id = window.location.search.split('?').pop();
  let mode = id.split('=')[0];
  if(mode == 'draftid') {
    /* JsLoadingOverlay.show({
      "overlayBackgroundColor": "#FFFFFF",
      "overlayOpacity": "0.9",
      "spinnerIcon": "ball-circus",
      "spinnerColor": "#B9DDF3",
      "spinnerSize": "2x",
      "overlayIDName": "overlay",
      "spinnerIDName": "spinner",
      "offsetX": 0,
      "offsetY": 0,
      "containerID": null,
      "lockScroll": false,
      "overlayZIndex": 9998,
      "spinnerZIndex": 9999
    }); */
    getDraftData();
  } else if(mode == 'id') {
    /* JsLoadingOverlay.show({
      "overlayBackgroundColor": "#FFFFFF",
      "overlayOpacity": "0.9",
      "spinnerIcon": "ball-circus",
      "spinnerColor": "#B9DDF3",
      "spinnerSize": "2x",
      "overlayIDName": "overlay",
      "spinnerIDName": "spinner",
      "offsetX": 0,
      "offsetY": 0,
      "containerID": null,
      "lockScroll": false,
      "overlayZIndex": 9998,
      "spinnerZIndex": 9999
    }); */
    getData();
  }
  return id.split('=')[1];
  //load_data(id);
}

getMode();

function getpathId(){
  let id = window.location.search.split('?').pop();
  return id.split('=')[1];
}

function getData() {
  let jwt_token = get_jwt_token();
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/history_input',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${jwt_token}`
     }
  }).then(res => {
    loaded_data = res.data;
    console.log(loaded_data);
    const id = getpathId();
    load_data(id, loaded_data);
  }).catch(err => {
    console.log(err);
  });
} 

let length = 5;
function initial() {
  for (let i = 0; i < length; i++) {
    renderInputSec(i+1) ;
  }
  addRemoveFunc()
  console.log(document.querySelectorAll(".txtsrc").length + 1);
}

initial();

// var addbtn = document.querySelector(".add");
// var addimgbtn = document.querySelector(".addimg");

// addbtn.addEventListener('click', addtxtBlock);
// addimgbtn.addEventListener('click', addimgBlock);

function addtxtBlock() {
  let newIdx = document.querySelectorAll(".txtsrc").length + 1;
  rendertxtBlock(newIdx);
}

function addimgBlock() {
  let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
  renderimgBlock(newimgIdx);
}

function rendertxtBlock(i) {
  var txtinput = document.createElement("input");
  txtinput.setAttribute('type', 'text');
  txtinput.setAttribute('name', `t${i}`);
  txtinput.value = "";
  txtinput.setAttribute('placeholder', `${i}`);
  txtinput.classList.add('txtsrc', `txtsrc${i}`)
  subtitleInputs.appendChild(txtinput);
}

function renderimgBlock(i) {
  var imginput = document.createElement("input");
  imginput.setAttribute('type', 'text');
  imginput.setAttribute('name', `m${i}`);
  imginput.classList.add('imgsrc', `imgsrc${i}`);
  imginput.value = "";
  imginput.setAttribute('placeholder', `${i}`);
  imgInputs.appendChild(imginput);

  var imgupload = document.createElement("input");
  imgupload.setAttribute('id', `img${i}`);
  imgupload.setAttribute('type', `file`);
  imgupload.classList.add('img_uploader', 'img_up');
  imgInputs.appendChild(imgupload);
  var imguploadlabel = document.createElement("label");
  imguploadlabel.setAttribute('for', `img${i}`);
  imguploadlabel.classList.add('upload-btn');
  imguploadlabel.textContent = '上傳檔案';
  if(lan == 'en') {
    imguploadlabel.textContent = 'Upload';
  }
  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
  imgInputs.appendChild(imguploadlabel);
  $('input[type=file]').on('change', prepareUpload);
}

var addsecbtn = document.querySelector(".addsec");

addsecbtn.addEventListener('click', addsecBlock);

function addsecBlock() {
  let newsecIdx = document.querySelectorAll(".input-sec").length + 1;
  renderInputSec(newsecIdx);
  addRemoveFunc()
}

function renderInputSec(i) {
  var input_sec = document.createElement('div');
  var img_box = document.createElement('div');

  input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3', 'text-end');
  img_box.classList.add('img-box');

  // text input
  var txtinput = document.createElement("input");
  txtinput.setAttribute('type', 'text');
  txtinput.setAttribute('name', `t${i}`);
  txtinput.classList.add('txtsrc', `txtsrc${i}`);
  txtinput.value = "";
  txtinput.setAttribute('placeholder', `台詞`);
  if(lan == 'en') {
    txtinput.setAttribute('placeholder', `Line`);
  }
  input_sec.appendChild(txtinput);

  // img url input
  var imginput = document.createElement("input");
  imginput.setAttribute('type', 'text');
  imginput.setAttribute('name', `m${i}`);
  imginput.classList.add('imgsrc', `imgsrc${i}`);
  imginput.value = "";
  imginput.setAttribute('placeholder', '輸入圖片網址或上傳圖片');
  if(lan == 'en') {
    imginput.setAttribute('placeholder', 'Type in image link or upload image');
  }
  img_box.appendChild(imginput);

  // img upload input
  var imgupload = document.createElement("input");
  imgupload.setAttribute('id', `img${i}`);
  imgupload.setAttribute('type', `file`);
  imgupload.classList.add('img_uploader', 'img_up');
  imgupload.style.display = "none";
  img_box.appendChild(imgupload);

  // img upload label
  var imguploadlabel = document.createElement("label");
  imguploadlabel.setAttribute('for', `img${i}`);
  imguploadlabel.classList.add('upload-btn');
  // imguploadlabel.textContent = '上傳圖片';
  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
  img_box.appendChild(imguploadlabel);
  imgupload.addEventListener('change', prepareUpload);

  var removeSpan = document.createElement("span");
  removeSpan.classList.add('remove-btn');
  removeSpan.setAttribute('data-num', `${i}`);
  removeSpan.textContent = '刪除';
  removeSpan.setAttribute('data-bs-toggle', `modal`);
  removeSpan.setAttribute('data-bs-target', `#deleteSecModal`);
  input_sec.appendChild(removeSpan);

  input_sec.appendChild(img_box);
  document.querySelector('.img-inputTest').append(input_sec);
}


$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  mouseDrag: true,
  touchDrag: true,
  smartSpeed: 1000,
  autoplay: true,
  autoplayTimeout: 8000,
  autoplayHoverPause: false,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 2
    },
    1000: {
      items: 4
    }
  }
});


// Handle draft
$('.draft-btn').click(() => {
  let text = '儲存中...';

  if (lan == 'en') {
    text = 'Saving...';
  }

  $('.draft-btn').text(text);

  let jwt_token = get_jwt_token();
  let avatar = $('.avatar').val();
  let name_title = $('.title_new').val();
  let txtARR = [];
  let imgARR = [];
  var step;
  let contentIdx = document.querySelectorAll(".txtsrc").length;
  for (let i = 1; i < (contentIdx + 1); i++) {
    if ($(`.txtsrc`).eq(i-1).val() != "") {
      txtARR.push($(`.txtsrc`).eq(i-1).val())
    }
  }
  let imgIdx = document.querySelectorAll(".imgsrc").length;
  for (let i = 1; i < (imgIdx + 1); i++) {
    if ($(`.imgsrc`).eq(i-1).val() != "") {
      imgARR.push($(`.imgsrc`).eq(i-1).val())
    }
  }
  let multiLang = 0
  if ($('#multiLang').prop("checked")) {multiLang = 1;}
  let id = window.location.search.split('?').pop();
  let mode = id.split('=')[0];
  if(mode == 'draftid') {
    id = Number(id.split('=')[1]);
  } else {
    id = -1;
  }
  let dataOBJ = { "id": id, "title": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang }
  console.log(dataOBJ);
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/save_draft',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${jwt_token}`,
        'Content-Type': 'application/json',
     },
    data: dataOBJ
  }).then(res => {
    console.log(res.data);
    $('.draft-btn').text('存為草稿');
    let title = "儲存完成";
    if(lan == 'en') {
      title = 'Saved!'
      $('.draft-btn').text('Save as Draft');
    }
    Swal.fire({
      title: title,
      icon: 'success',
      confirmButtonColor: '#3085d6',
    }); 
  }).catch(err => {
    console.log(err);
  });
});

function getDraftData() {
  let token = get_jwt_token();
  axios({
    method: 'post',
    url: 'https://www.choozmo.com:8887/draft_list',
    headers: { 
        'accept': 'application/json',
        'Authorization': `Bearer ${token}`
     }
  }).then(res => {
    console.log(res.data);
    let result = [...res.data];
    let id = getpathId();
    load_data(id, result, true);
  }).catch(err => {
    console.log(err);
  });

}

// Copy to clipboard
$(".copy").click(function(){
  const copyStr = $(this).next().text();
  copyToClipboard(copyStr);
});

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  Swal.fire({
    toast: true,
    icon: 'success',
    position: 'top-end',
    title: 'Link copied!',
    timerProgressBar: true,
    showConfirmButton: false,
    timer: 1000,
    backdrop: false
  })
};

$("#lang-manu").hide();

$( "#changeLanguage" ).click(function() {
  $("#lang-manu").slideToggle();
  $("#lang-arrow").toggleClass("arrowdoup");
});

function addRemoveFunc() {
  const testRemove = document.querySelectorAll('.remove-btn');
  [ ...testRemove ].forEach((item) => {
    item.addEventListener('click', testRemoving)
  });
}

function testRemoving(e) {
  console.log(e.target.parentElement)
  let el = e.target.parentElement
  $('.deleteSec').click(function(){
    el.remove();
  })
}