//function export Pdf
function exportExcel() {
  let param = new FormData(document.getElementById("frm-search"));
  $.post(folder + "excel.php", param).done(function (data) {
    console.log(data);
    obj = jQuery.parseJSON(data);
    window.open(obj["url"]);
  });
}
//function export Pdf
function exportPDF() {
  let param = new FormData(document.getElementById("frm-search"));
  $.post(folder + "pdf.php", param).done(function (data) {
    console.log(data);
    obj = jQuery.parseJSON(data);
    window.open(obj["url"], "_blank");
  });
}

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

function form_modal_show() {
  $(".frm").val("");
  $("#detail").summernote("code", "");
  $("#form_action").val("1");
  $("#special_gm_modal2").modal("show");
  
  // รีเซ็ตการแสดงผลของ dropdown หมวดหมู่
  if($('#guidaTypeID').val() == 1){
    $('#guidaSubTypeID').attr("disabled", false);
    $('#showGuidaSubTypeID').show();
  } else {
    $('#guidaSubTypeID').attr("disabled", true);
    $('#showGuidaSubTypeID').hide();
  }
}

//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);
    if (width < 370) {
      max = 6;
    } else if (width < 650) {
      max = 12;
    } else if (width < 740) {
      max = 15;
    } else if (width < 1025) {
      max = 20;
    } else if (width > 1100) {
      max = 7;
    }
    if (page == 1) {
      i = 1;
    } else {
      if (max_page < max) {
        i = 1;
      } else {
        loop = page + max;
        if (loop > max_page) {
          i = max_page - max + 1;
        } else {
          i = page;
        }
      }
    }
    var x = 1;
    var pag = "";
    while (i <= max_page) {
      if (page == i) {
        at = "active";
      } else {
        at = "";
      }
      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();
  }
}
//สิ้นสุด pagination แบ่งหน้าแสดงข้อมูล

//แสดงข้อมูล
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) {
    console.log(data);
    obj = jQuery.parseJSON(data);
    $("#show_state").html(obj["pagination"].state);
    pagination(obj["pagination"].max_loop, page);

    if (page == 1) {
      x = 1;
    } else {
      x = (page - 1) * $("#qpage").val() + 1;
    }
    da = "";
    $.each(obj, function (i) {
      if (i !== "pagination") {
        da += '<tr class="bgc-h-yellow-l4 d-style">';
        da += '<td class="text-center">' + x + "</td>";
        da +=
          '<td><a href="../guidance/detail/' +
          obj[i].id +
          '/" target="_blank">' +
          obj[i].title +
          "</a></td>";
        da += '<td >' + obj[i].name_type + "</td>";
        
        // ถ้า sub_type เป็น null ให้แสดงว่างๆ ป้องกันคำว่า null ปรากฏหน้าจอ
        let subTypeShow = obj[i].sub_type ? obj[i].sub_type : "-";
        da += '<td >' + subTypeShow + "</td>";
        
        da += '<td class="text-center">';
        da +=
          '<a onClick="edit_data(' +
          obj[i].id +
          ')"  data-toggle="modal" data-target="#pr_modal" style="cursor:pointer;"> ' ;
        da += '<i class="fa fa-pencil-alt text-blue mr-1 p-2 w-4"></i>';
        da += "</a>";
        da +=
          '<a onClick="delete_data(' +
          obj[i].id +
          ')" style="cursor:pointer;" >';
        da += '<i class="fa fa-trash-alt text-danger-m1 mr-1 p-2 w-4"></i>';
        da += "</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);
    $("#detail").summernote("code", obj.detail);

    $.each(obj, function (index, value) {
      $("#" + index).val(value);
    });
    
    // อัปเดต dropdown ของ หมวดหมู่ อีกรอบตอนดึงค่ามาแก้ไข
    if($('#guidaTypeID').val() == 1){
      $('#guidaSubTypeID').attr("disabled", false);
      $('#showGuidaSubTypeID').show();
    } else {
      $('#guidaSubTypeID').attr("disabled", true);
      $('#showGuidaSubTypeID').hide();
    }
  });
  $("#frm-label").html(" <i class='fa fa-pencil-alt'></i> แก้ไขข้อมูล");
  form_modal_show();
  $("#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">';
  ms += '<i class="fa fa-exclamation-circle text-180 text-white mx-1px"></i>';
  ms += "</div>";
  ms += "<h4>คำเตือน</h4>";
  ms += "<h5>หากลบข้อมูลแล้วจะไม่สามารถกู้คืนกลับมาได้</h5>";
  ms += '<hr class="my-3" />';
  ms += '<p class="text-center mt-2 mb-0">';
  ms +=
    '<button type="button" data-dismiss="toast" class="btn px-4 btn-danger" onclick="confirm_delete(' +
    did +
    ')">ยืนยันการลบข้อมูล</button>';
  ms +=
    ' <button type="button" data-dismiss="toast" class="btn px-4 btn-light-secondary">ยกเลิก</button>';
  ms += "</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'>";
      ms += "<div class='border-2 brc-white px-3 py-25 radius-round'>";
      ms += "<i class='fa fa-check text-150'></i>";
      ms += "</div></div>";
      ms += "<div class='p-3 mb-0 flex-grow-1'>";
      ms += "<h4 class='text-130'>Success</h4>";
      ms += "ลบข้อมูลเรียบร้อยแล้ว";
      ms += "</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 {
      $("#dia-derror").modal();
    }
  });
}
function subselect(src, fa, tar, sel) {
  let param = new FormData();
  param.append("form_action", fa);
  param.append("id", src);
  $("#" + tar).empty();
  $("#" + tar).append('<option value="">โปรดเลือก</option>');
  $.post(folder + "db.php", param).done(function (data) {
    obj = jQuery.parseJSON(data);
    $.each(obj, function (index, value) {
      if (index == sel) {
        se = "selected";
      } else {
        se = "";
      }
      $("#" + tar).append(
        '<option value="' + index + '" ' + se + " >" + value + "</option>"
      );
    });
  });
}

$(function () {
  $('#guidaSubTypeID').attr("disabled", true);
  $('#showGuidaSubTypeID').hide();
  
  $('#guidaTypeID').change(function(){
    if($('#guidaTypeID').val() == 1){
      $('#guidaSubTypeID').attr("disabled", false);
      $('#showGuidaSubTypeID').show();
    } else {
      $('#guidaSubTypeID').attr("disabled", true);
      $('#showGuidaSubTypeID').hide();
    }
    subselect($('#guidaTypeID').val(), 'getGuidaType', 'guidaSubTypeID');
  });

  $('#s_guidaTypeID').change(function(){
    subselect($('#s_guidaTypeID').val(), 'getGuidaType', 's_guidaSubTypeID');
  });

  //ปรับการแสดงผลเลขหน้าตามขนาดจอ
  $(window).on("resize", function () {
    show_data($("#page").val());
  });

  //แสดงผลข้อมูลเมื่อกด enter ที่เลขหน้า
  $("#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());
  });

  //ซ่อนและแสดง main form และ data
  $("#btn-show-main-form").click(function () {
    toggle_form_data();
    $("#frm-label2").html("<i class='fa fa-pencil-alt'></i> เพิ่มข้อมูล");
  });
  $("#btn-hide-main-form").click(function () {
    toggle_form_data();
  });

  $("#btn-form-modal-show").click(function () {
    form_modal_show();
    $("#frm-label").html("<i class='fa fa-pencil-alt'></i> เพิ่มข้อมูล");
  });

  //คลิกปุ่ม reset แล้วไม่ enable menu_file
  $("#btn-reset").click(function () {
    $("#menu_file").attr("disabled", false);
  });

  //ฟอร์มค้นหาข้อมูลโดยละเอียด
  $("#aside-search").aceAside({
    placement: "right",
    dismiss: true,
    belowNav: true,
    extrwNav: true,
    extraClass: "my-2",
  });

  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;
      else if ($element.is(".select2")) {
        var container = $element.siblings('[class*="select2-container"]');
        container.find(".select2-selection").addClass($invalidClass);
      } else if ($element.is(".chosen")) {
        var container = $element.siblings('[class*="chosen-container"]');
        container.find(".chosen-choices, .chosen-single").addClass($invalidClass);
      } else {
        $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;
      else if ($element.is(".select2")) {
        var container = $element.siblings('[class*="select2-container"]');
        container.find(".select2-selection").removeClass($invalidClass);
      } else if ($element.is(".chosen")) {
        var container = $element.siblings('[class*="chosen-container"]');
        container.find(".chosen-choices, .chosen-single").removeClass($invalidClass);
      } else {
        $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>'
      );

      if (element.is("input[type=checkbox]") || element.is("input[type=radio]")) {
        element.closest('div[class*="col-"]').append(error);
      } else if (element.is(".select2")) {
        var container = element.siblings('[class*="select2-container"]');
        error.insertAfter(container);
        container.find(".select2-selection").addClass($invalidClass);
      } else if (element.is(".chosen")) {
        var container = element.siblings('[class*="chosen-container"]');
        error.insertAfter(container);
        container.find(".chosen-choices, .chosen-single").addClass($invalidClass);
      } else {
        error.addClass("d-inline-block").insertAfter(element);
      }
    },

    submitHandler: function (form) {
      $("#show_data").empty();
      let param = new FormData(document.getElementById("frm-main"));
      
      // ใช้ $.ajax เพื่อส่งข้อมูลรวมถึงรูปภาพได้
      $.ajax({
        url: folder + "db.php",
        type: "POST",
        data: param,
        processData: false,
        contentType: false,
        success: function (data) {
          console.log(data);
          if (data.trim() == "0") {
            let ms = "<div class='bgc-success-d1 text-white px-3 pt-3'>";
            ms += "<div class='border-2 brc-white px-3 py-25 radius-round'>";
            ms += "<i class='fa fa-check text-150'></i>";
            ms += "</div></div>";
            ms += "<div class='p-3 mb-0 flex-grow-1'>";
            ms += "<h4 class='text-130'>Success</h4>";
            if ($("#form_action").val() == 1) {
              ms += "บันทึกข้อมูลเรียบร้อยแล้ว";
            } else {
              ms += "แก้ไขข้อมูลเรียบร้อยแล้วครับ";
            }
            ms += "</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",
            });

            $(".frm").val("");
            $("#detail").summernote("code", "");
            show_data();
            $("#pr_modal").modal("hide");
            $("#form_action").val("1");
          } else {
             alert("เกิดข้อผิดพลาดในการบันทึกข้อมูล:\n" + data);
          }
        },
        error: function(err) {
            alert("เชื่อมต่อฐานข้อมูลล้มเหลว");
        }
      });
      return false;
    },
  });

  $.extend($.summernote.options.icons, {
    align: "fa fa-align",
    alignCenter: "fa fa-align-center",
    alignJustify: "fa fa-align-justify",
    alignLeft: "fa fa-align-left",
    alignRight: "fa fa-align-right",
    indent: "fa fa-indent",
    outdent: "fa fa-outdent",
    arrowsAlt: "fa fa-arrows-alt",
    bold: "fa fa-bold",
    caret: "fa fa-caret-down text-grey-m2 ml-1",
    circle: "fa fa-circle",
    close: "fa fa fa-close",
    code: "fa fa-code",
    eraser: "fa fa-eraser",
    font: "fa fa-font",
    italic: "fa fa-italic",
    link: "fa fa-link text-success-m1",
    unlink: "fas fa-unlink",
    magic: "fa fa-magic text-brown-m1",
    menuCheck: "fa fa-check",
    minus: "fa fa-minus",
    orderedlist: "fa fa-list-ol text-blue",
    pencil: "fa fa-pencil",
    picture: "far fa-image text-purple-d1",
    question: "fa fa-question",
    redo: "fa fa-repeat",
    square: "fa fa-square",
    strikethrough: "fa fa-strikethrough",
    subscript: "fa fa-subscript",
    superscript: "fa fa-superscript",
    table: "fa fa-table text-danger-m2",
    textHeight: "fa fa-text-height",
    trash: "fa fa-trash",
    underline: "fa fa-underline",
    undo: "fa fa-undo",
    unorderedlist: "fa fa-list-ul text-blue",
    video: "far fa-file-video text-pink-m1",
  });

  $("#detail").summernote({
    height: 250,
    minHeight: 150,
    maxHeight: 400,
  });

  $("#file_jpg").aceFileInput({});
});