function toggle_form_data() {
  $(".frm").val("");
  $("#form_action").val("2"); // ฟิกซ์เป็น 2 (แก้ไข) เสมอ
  $("#div-main-form").toggle();
  $("#div-show-data").toggle();
}

function form_modal_show() {
  $(".frm").val("");
  
  // สั่งเคลียร์รูปภาพที่ค้างอยู่ออก (จำลองการกดปุ่มกากบาท)
  $('.ace-file-input .remove').click(); 
  
  $("#form_action").val("2");
  $("#pr_modal").modal("show");
}

function show_data() {
  $("#show_data").empty();
  let param = new FormData(document.getElementById("frm-search"));
  param.append("page", 1);
  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);

    x = 1;
    da = "";
    $.each(obj, function (i) {
      if (i !== "pagination") {
        let imgUrl = obj[i].coverImg ? '../backend/uploads/personnel/' + obj[i].id + '.' + obj[i].coverImg : '../assets/image/no-image.jpg';
        
        da += '<tr class="bgc-h-yellow-l4 d-style">';
        da += '<td class="text-center align-middle">' + obj[i].rec_order + "</td>";
        da += '<td><img src="'+imgUrl+'" style="max-height:80px; border-radius:4px; border: 1px solid #ddd;" onerror="this.src=\'../assets/image/no-image.jpg\'" alt="'+obj[i].title+'"></td>';
        da += '<td class="align-middle">' + obj[i].title + "</td>";
        
        // มีแค่ปุ่ม Edit ไม่มีปุ่ม Delete สำหรับเมนูนี้
        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 += "</td>";
        da += "</tr>";
        ++x;
      }
    });
    $("#show_data").html(da);
  });
}

function show_data2() {
  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"); // บังคับเป็น Update
}

$(function () {
  show_data();
  $("#qpage").change(function () { show_data(); });

  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");
    },
    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>อัปเดตข้อมูลเรียบร้อยแล้ว</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("");
            
            // สั่งเคลียร์รูปภาพหลังจากบันทึกข้อมูลเสร็จสิ้น
            $('.ace-file-input .remove').click(); 

            show_data();
            $("#pr_modal").modal("hide");
          } 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'
  });
});