// $('.sec05-moblie-container').slick({
//   arrows: false,
//   slidesToShow: 1,
//   slidesToScroll: 1,
//   infinite: false,
//   centerMode: true,
// });

$(".sendbox").hide();
$(document).on("click", ".collectcontent", function (event) {
  $(".sendbox").show(500);
  $(this).addClass("select");
  $(".select").siblings().removeClass('select');
});

$(document).on("click", ".close", function (event) {
  // $(this).siblings('.collectcard').removeClass('select'); 
  $(".sendbox").hide(500);
  $(".collectcontent").removeClass("select");
});

var collectuserid = 'U176663ce100ebb1f4c404d48749decb1'; // test

// 收藏頁面
function collection(collectuserid) {
  console.log('call collection(' + collectuserid + ')'); // test

  $.ajax({
    method: "GET",
    url: "https://ark.cards:8228/collection/" + collectuserid + "",
    dataType: "json",
  })
  .done(function (msg) {
    console.log(msg);
    // console.log(Object.keys(msg).length);
    let msgLen = Object.keys(msg).length;
    console.log(msgLen);
    var collectcontent = '';
    if (msg[0].id == undefined) {
      collectcontent += '<p>' + msg + '</p>';
    } else {
        for (var i = 0; i < msgLen; i++) {
        collectcontent += '\
          <div class="collectcontent col">\
          <input style="display: none;" type="checkbox" value="'+ msg[i].id + '" name="nftid" id="' + msg[i].id + '">\
          <label for="'+ msg[i].id + '">\
          <div class="collectcard card h-100">\
              <a target="_blank">\
                  <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
              </a>\
              <div class="card-body p-2">\
                  <a target="_blank">\
                      <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
                  </a>\
                  <p class="card-text">\
                      '+ msg[i].context + ' \
                  </p>\
                  <p class="card-text row">\
                      <small class="text-muted col-6 px-1">\
                          <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
                              src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i].cost + '</span>\
                      </small>\
                      <small class="price col-6 px-0 text-center">\
                          <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+ msg[i].likes + '</span></small>\
                      </p>\
              </div>\
          </div>\
          </label>\
        </div>';
      }
    }

    $('.sec05-moblie-container').html(collectcontent);
  });
}

$(document).ready(function () {
  // 收藏頁面
  collection(collectuserid);
});

$(".buybox").hide();
$(document).on("click", ".nftmall", function (event) {
  $(".buybox").show(500);
  $(this).addClass("select");
  $(".select").siblings().removeClass('select');
});


$(document).on("click", ".close", function (event) {
  // $(this).siblings('.collectcard').removeClass('select'); 
  $(".buybox").hide(500);
  $(".nftmall").removeClass("select");

  $(".nftname").prop("checked", false);
});

$.fn.serializeObject = function () {
  var o = {};
  var a = this.serializeArray();
  // o["id"] = 0;
  // o["time_stamp"] = "";
  $.each(a, function () {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });

  return o;
};

$(".collect-send").submit(function (e) {
  /*	var formRef = $('#form1').serializeArray();
    var jsonString = JSON.stringify(formRef);*/
  var jsonInfo = $('.collect-send').serializeObject();
  var jsonString = JSON.stringify(jsonInfo);
  console.log(jsonString),

    $.ajax({
      type: 'POST',
      url: 'https://ark.cards:8228/send',
      data: jsonString,
      dataType: 'json',
      success: function (data) {
        console.log('送出成功: ' + data);
        alert("送出成功");
        // location.reload();
      },
      beforeSend: function () {
        console.log('beforeSend');
      },
      complete: function () {
        console.log('complete');
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
        console.log('送出失敗: ' + jqXHR.responseText);
      }
    });
  return false;
});

$(".nft-buy").submit(function (e) {
  /*	var formRef = $('#form1').serializeArray();
    var jsonString = JSON.stringify(formRef);*/
  var jsonInfo = $('.nft-buy').serializeObject();
  var jsonString = JSON.stringify(jsonInfo);
  console.log(jsonString),

    $.ajax({
      type: 'POST',
      url: 'https://ark.cards:8228/buy',
      data: jsonString,
      dataType: 'json',
      success: function (data) {
        console.log('購買成功: ' + data);
        alert("購買成功");
        location.reload();
      },
      beforeSend: function () {
        console.log('beforeSend');
      },
      complete: function () {
        console.log('complete');
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
        console.log('送出失敗: ' + jqXHR.responseText);
      }
    });
  return false;
});

// 購買頁面
$(document).ready(function () {
  // collecturl = location.search;
  // collecturl = collecturl.split("&")[0];
  // console.log("collecturl = " + collecturl); // test
  // getcollect = collecturl.split("?")
  // var collectuserid = getcollect[1];
  $.ajax({
    method: "GET",
    url: "https://ark.cards:8228/shop/" + collectuserid + "",
    // url: "https://ark.cards:8228/shop/Uf161c92b16f84357987a78c2b4b47719",
    dataType: "json",
  })
    .done(function (msg) {
      console.log(msg);
      // console.log(Object.keys(msg).length);
      let msgLen = Object.keys(msg).length;
      console.log(msgLen);
      var nftmall = '';
      var buybox = "";
      for (var i = 0; i < msgLen; i++) {
        nftmall += '\
          <div class="nftmall col">\
          <input style="display:none" type="checkbox" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
          <label for="'+ msg[i].id + '">\
          <div class="collectcard card h-100">\
              <a target="_blank">\
                  <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
              </a>\
              <div class="card-body p-2">\
                  <a target="_blank">\
                      <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
                  </a>\
                  <p class="card-text">\
                     '+ msg[i].context + ' \
                  </p>\
                  <p class="card-text row">\
                      <small class="text-muted col-6 px-1">\
                          <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
                              src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i].cost + '</span>\
                      </small>\
                      <small class="price col-6 px-0 text-center">\
                          <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+ msg[i].likes + '</span></small>\
                      </p>\
              </div>\
          </div>\
          </label>\
        </div>';
      }
      buybox += '\
      <div class="p-2">\
      <input style="border-radius: 10px; border:none; display: none;" class="p-2 w-100 mb-3" type="text" name="userid" value="' + collectuserid + '" placeholder="請輸入您的userid" required>\
          <div class="text-end px-2">\
              <p class="text-start text-white mb-2">※一次只能購買一則NFT收藏品</p>\
              <button type="button" style="border:1px solid #fff; border-radius: 30px;" class="close btn text-white px-3">取消</button>\
              <input style="border-radius: 30px; background:#fff; border: none;" class="send-btn px-3 ms-1 py-2" type="submit" value="購買">\
          </div>\
      </div>\
  </div>';

      $('.sec06-nft-mall').html(nftmall);
      $('.buybox').html(buybox);
    });

});

// Qrcode頁面
$(document).ready(function () {
  // collecturl = location.search;
  // collecturl = collecturl.split("&")[0];
  // console.log("collecturl = " + collecturl); // test
  // getcollect = collecturl.split("?")
  // var collectuserid = getcollect[1];
  function get_data() {
    $.ajax({
      method: "GET",
      url: "https://ark.cards:8228/receive/" + collectuserid + "",
      // url:"https://api.ptt.cx:8228/receive/Uf161c92b16f84357987a78c2b4b47719",
      dataType: "json",
    })
      .done(function (msg) {
        console.log(msg);
        console.log(msg.base)
        var Qrcodeimg = '';
        var useraddress = '';
        Qrcodeimg += '\
      <img src="'+ msg.base + '" alt="">\
      ';
        useraddress += '\
      '+ msg.useraddress + '\
      ';

        $('#Qrcode').html(Qrcodeimg);
        $('#copy').html(useraddress);
      });
  }
  get_data();
});

function copyEvent(id) {
  var str = document.getElementById(id);
  window.getSelection().selectAllChildren(str);
  document.execCommand("Copy")
  toastr.options = {
    // 參數設定[註1]
    "closeButton": false, // 顯示關閉按鈕
    "debug": false, // 除錯
    "newestOnTop": false,  // 最新一筆顯示在最上面
    "progressBar": false, // 顯示隱藏時間進度條
    "positionClass": "toast-top-center", // 位置的類別
    "preventDuplicates": false, // 隱藏重覆訊息
    "onclick": null, // 當點選提示訊息時，則執行此函式
    "showDuration": "300", // 顯示時間(單位: 毫秒)
    "hideDuration": "1000", // 隱藏時間(單位: 毫秒)
    "timeOut": "1000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒)
    "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
    "showEasing": "swing", // 顯示動畫時間曲線
    "hideEasing": "linear", // 隱藏動畫時間曲線
    "showMethod": "fadeIn", // 顯示動畫效果
    "hideMethod": "fadeOut" // 隱藏動畫效果
  }
  toastr.success("複製成功");
}