//ฟังก์ชั่นเปิดปิดฟอร์ม
function toggle_form_data() {
  $(".frm").val("");
  $("#form_action").val("1");
  $("#div-main-form").toggle();
  $("#div-show-data").toggle();
}

function form_modal_show() {
  $(".frm").val("");
  $("#form_action").val("1");
  $("#pr_modal").modal("show");
}

//pagination แบ่งหน้าแสดงข้อมูล
function pagination(max_page, page) {
  $("#total_page").html(" จาก " + max_page + " หน้า");
  var width = $(window).width();
  if (max_page >= 1) {
    $("#pagination").empty();
    if (page == 1) {
      ds = 'class="disabled"';
      oc = "";
    } else {
      ds = "";
      pe = parseInt(page) - 1;
      oc = 'onclick="show_data(' + pe + ');"';
    }
    pag = '<li class="page-item mr-1" ' + ds + '><a class="page-link btn btn-sm btn-bgc-tp p-25 radius-3px text-600 btn-light-grey border-0"  ' + oc + '><i class="fa fa-caret-left text-11s0"></i></a>';
    $("#pagination").append(pag);
    
    max = (width < 370) ? 6 : (width < 650) ? 12 : (width < 740) ? 15 : (width < 1025) ? 20 : 7;
    
    i = (page == 1 || max_page < max) ? 1 : ((page + max > max_page) ? max_page - max + 1 : page);
    
    var x = 1;
    var pag = "";
    while (i <= max_page) {
      at = (page == i) ? "active" : "";
      pag += '<li class="page-item mr-15" ><a class=" ' + at + ' w-5 page-link btn p-25 btn-sm border-0 btn-bgc-tp radius-3px text-600 btn-light-black btn-h-primary btn-a-primary"  onclick="show_data(' + i + ');" >' + i + "</a></li>";
      ++i;
      ++x;
      if (x > max) break;
    }
    
    if (page == max_page) {
      ds = 'class="disabled"';
      oc = "";
    } else {
      ds = "";
      po = parseInt(page) + 1;
      oc = 'onclick="show_data(' + po + ');"';
    }
    pag += '<li class="page-item" ' + ds + '><a class="page-link btn btn-sm btn-bgc-tp p-25 radius-3px text-600 btn-light-grey border-0" ' + oc + '><i class="fa fa-caret-right text-11s0"></i></a></li>';
    $("#pagination").append(pag);
  } else {
    $("#pagination").empty();
  }
}

//แสดงข้อมูล
function show_data(page) {
  if (page == null) page = $("#page").val();
  else $("#page").val(page);
  
  $("#show_data").empty();
  let param = new FormData(document.getElementById("frm-search"));
  param.append("page", page);
  param.append("qpage", $("#qpage").val());
  param.append("form_action", 6);
  
  $.post(folder + "db.php", param).done(function (data) {
    obj = jQuery.parseJSON(data);
    $("#show_state").html(obj["pagination"].state);
    pagination(obj["pagination"].max_loop, page);

    x = (page == 1) ? 1 : (page - 1) * $("#qpage").val() + 1;
    da = "";
    
    $.each(obj, function (i) {
      if (i !== "pagination") {
        let imgUrl = '../backend/uploads/slideBanner/' + obj[i].id + '.' + obj[i].coverImg;
        let linkUrl = (obj[i].link && obj[i].link !== "") ? obj[i].link : "#";
        
        da += '<tr class="bgc-h-yellow-l4 d-style">';
        da += '<td class="text-center align-middle">' + x + "</td>";
        da += '<td><div class="d-flex align-items-center"><img src="'+imgUrl+'" style="max-height:50px; margin-right:10px; border-radius:4px;" onerror="this.src=\'../assets/image/no-image.jpg\'" alt="Banner"><span class="text-secondary-d2 font-bolder">' + obj[i].title + '</span></div></td>';
        da += '<td class="align-middle"><a href="'+linkUrl+'" target="_blank" class="text-blue">' + (linkUrl !== "#" ? linkUrl : "- ไม่มีลิงก์ -") + '</a></td>';
        da += '<td class="text-center align-middle">' + obj[i].name_type + "</td>";
        
        da += '<td class="text-center align-middle">';
        da += '<a onClick="edit_data(' + obj[i].id + ')" data-toggle="modal" data-target="#pr_modal" style="cursor:pointer;" class="btn btn-outline-info btn-h-light-info btn-a-light-info border-0 px-2 py-1 radius-1" title="แก้ไข"> <i class="fa fa-pencil-alt text-110 text-blue-m1"></i></a>';
        da += '<a onClick="delete_data(' + obj[i].id + ')" style="cursor:pointer;" class="btn btn-outline-danger btn-h-light-danger btn-a-light-danger border-0 px-2 py-1 radius-1" title="ลบ"> <i class="fa fa-trash-alt text-110 text-danger-m1"></i></a>';
        da += "</td>";
        da += "</tr>";
        ++x;
      }
    });
    $("#show_data").html(da);
  });
}

function show_data2() {
  $("#qpage option:first").prop("selected", true);
  $("#page").val(1);
  show_data();
}

function edit_data(id) {
  form_modal_show();  
  let param = new FormData();
  param.append("id", id);
  param.append("form_action", "5");
  $.post(folder + "db.php", param).done(function (data) {
    obj = jQuery.parseJSON(data);
    $.each(obj, function (index, value) {
      $("#" + index).val(value);
    });
  });
  $("#frm-label").html(" <i class='fa fa-pencil-alt'></i> แก้ไขป้ายแบนเนอร์");
  $("#form_action").val(2);
}

function delete_data(did) {
  ms = '<div class="bgc-danger-d2 px-3 py-3 radius-round ml-1 mr-3 mb-3 float-left"><i class="fa fa-exclamation-circle text-180 text-white mx-1px"></i></div>';
  ms += "<h4>คำเตือน</h4><h5>หากลบข้อมูลแล้วจะไม่สามารถกู้คืนกลับมาได้</h5><hr class='my-3' />";
  ms += '<p class="text-center mt-2 mb-0"><button type="button" data-dismiss="toast" class="btn px-4 btn-danger" onclick="confirm_delete(' + did + ')">ยืนยันการลบข้อมูล</button> <button type="button" data-dismiss="toast" class="btn px-4 btn-light-secondary">ยกเลิก</button></p>';

  $.aceToaster.add({
    placement: "tc", title: "ยืนยันการลบข้อมูล", body: ms, width: "420px", sticky: true, belowNav: true,
    closeClass: "btn btn-bgc-tp border-0 btn-light-danger btn-xs px-2 py-1px m2-px radius-1 text-100 font-normal position-tr mt-2px mr-2px",
    headerClass: "bgc-transparent border-0 text-white text-140 mb-3 p-0 pl-3 pr-4", titleClass: "text-dark-tp3 font-normal pt-15",
    className: "brc-danger-m1 border-1 border-t-4 radius-0 pr-0", bodyClass: "pt-0 pl-3 text-105",
  });
}

function confirm_delete(did) {
  let param = new FormData();
  param.append("id", did);
  param.append("form_action", 3);
  $.post(folder + "db.php", param).done(function (data) {
    if (data.trim() == "0") {
      ms = "<div class='bgc-success-d1 text-white px-3 pt-3'><div class='border-2 brc-white px-3 py-25 radius-round'><i class='fa fa-check text-150'></i></div></div>";
      ms += "<div class='p-3 mb-0 flex-grow-1'><h4 class='text-130'>Success</h4>ลบข้อมูลเรียบร้อยแล้ว</div>";
      ms += "<button data-dismiss='toast' class='align-self-start btn btn-xs btn-outline-grey btn-h-light-grey py-2px mr-1 mt-1 border-0 text-150'>&times;</button>";
      $.aceToaster.add({placement: "tc", body: ms, width: 420, delay: 5000, close: false, className: "bgc-white-tp1 shadow border-0", bodyClass: "d-flex border-0 p-0 text-dark-tp2", headerClass: "d-none"});
      show_data(1);
    } else {
      alert("เกิดข้อผิดพลาดในการลบข้อมูล!");
    }
  });
}

$(function () {
  $(window).on("resize", function () { show_data($("#page").val()); });
  $("#page").on("keypress", function (e) { if (e.which == 13) { show_data($("#page").val()); return false; } });
  show_data();
  $("#qpage").change(function () { show_data(1); });
  $("#go_page").click(function () { show_data($("#page").val()); });
  
  $("#btn-form-modal-show").click(function () {
    form_modal_show();
    $("#frm-label").html("<i class='fa fa-plus'></i> เพิ่มป้ายแบนเนอร์");
  });

  var $invalidClass = "brc-danger-tp2";
  var $validClass = "brc-info-tp2";

  $("#frm-main").validate({
    errorElement: "span",
    errorClass: "form-text form-error text-danger-m2",
    focusInvalid: false,
    ignore: "",
    rules: {
      title: { required: true }
    },
    messages: {
      title: { required: "กรุณากรอกชื่อแบนเนอร์" }
    },
    highlight: function (element) {
      var $element = $(element);
      $element.closest(".form-group").find(".form-text").remove();
      if ($element.is("input[type=checkbox]") || $element.is("input[type=radio]")) return;
      $element.addClass($invalidClass + " d-inline-block").removeClass($validClass);
    },
    success: function (error, element) {
      var parent = error.parent();
      var $element = $(element);
      $element.removeClass($invalidClass).closest(".form-group").find(".form-text").remove();
      if ($element.is("input[type=checkbox]") || $element.is("input[type=radio]")) return;
      $element.addClass($validClass + " d-inline-block");
      parent.append('<span class="form-text d-inline-block ml-sm-2"><i class=" fa fa-check text-success-m1 text-120"></i></span>');
    },
    errorPlacement: function (error, element) {
      error.prepend('<i class="form-text fa fa-exclamation-circle text-danger-m1 text-100 mr-1 ml-2"></i>');
      error.addClass("d-inline-block").insertAfter(element);
    },
    submitHandler: function (form) {
      $("#show_data").empty();
      let param = new FormData(document.getElementById("frm-main"));
      
      $.ajax({
        url: folder + "db.php", type: "POST", data: param, processData: false, contentType: false,
        success: function (data) {
          if (data.trim() == "0") {
            let ms = "<div class='bgc-success-d1 text-white px-3 pt-3'><div class='border-2 brc-white px-3 py-25 radius-round'><i class='fa fa-check text-150'></i></div></div>";
            ms += "<div class='p-3 mb-0 flex-grow-1'><h4 class='text-130'>Success</h4>";
            ms += ($("#form_action").val() == 1) ? "บันทึกแบนเนอร์เรียบร้อยแล้ว" : "แก้ไขแบนเนอร์เรียบร้อยแล้ว";
            ms += "</div><button data-dismiss='toast' class='align-self-start btn btn-xs btn-outline-grey btn-h-light-grey py-2px mr-1 mt-1 border-0 text-150'>&times;</button>";
            
            $.aceToaster.add({placement: "tc", body: ms, width: 420, delay: 5000, close: false, className: "bgc-white-tp1 shadow border-0", bodyClass: "d-flex border-0 p-0 text-dark-tp2", headerClass: "d-none"});
            $(".frm").val("");
            show_data();
            $("#pr_modal").modal("hide");
            $("#form_action").val("1");
          } else {
             alert("เกิดข้อผิดพลาดในการบันทึกข้อมูล:\n" + data);
          }
        },
        error: function(err) { alert("เชื่อมต่อฐานข้อมูลล้มเหลว"); }
      });
      return false;
    },
  });

  $('#file_jpg').aceFileInput({
    style: 'drop',
    droppable: true,
    container: 'border-1 border-dashed brc-grey-m4 brc-h-warning-m1',
    placeholderClass: 'text-125 text-600 text-grey-l1 my-2',
    placeholderText: 'ลากไฟล์มาวาง หรือ คลิกเพื่อเลือกรูปภาพ',
    placeholderIcon: '<i class="fas fa-image text-400 opacity-2 mb-2 d-block text-center"></i>',
    thumbnail: 'large'
  });
});