$(document).ready(function () {
  $('.human-resource-datepicker').datepicker({
    format: 'yyyy-mm-dd'
  });

  let DATA_ROLE_HUMAN_RESOURCE = []
  let DATA_HUMAN_RESOURCE = []
  let forbiddenHuman = []
  // let DATA_MATERIAL_RESOURCE = []
  // let DATA_TOOL_RESOURCE = []
  function getDataHumanResource() {
    const url = `${base_url}human-resource/search`
    const payload = {
      "paging": {
        "start": 1,
        "length": -1
      },
      "columns": [
        // 	{
        // 	"name": "proyek_id",
        // 	"logic_operator": "like",
        // 	"value": search,
        // 	"operator": "AND"
        // },
      ],
      "orders": {
        "columns": [
          "id"
        ],
        "ascending": false
      }
    }
    // console.log("qry", qry)
    axiosInstance.post(url, payload, HEADER).then(res => {
      console.log('getDataHumanResource', res)
      DATA_HUMAN_RESOURCE = res.data.data
      // arr.forEach(function (element, key) {
      //   $('#choices-multiple-remove-button1').append(`<option value="${element.id}">${element.name}</option>`)
      // });
      // var multipleCancelButton = new Choices('#choices-multiple-remove-button1', {
      //   removeItemButton: true,
      //   // maxItemCount: 5,
      //   // searchResultLimit: 5,
      //   // renderChoiceLimit: 5
      // });
    });
  }

  function getDataRole() {
    const url = `${base_url}project-role/search`
    const payload = {
      "paging": { "start": 0, "length": -1 },
      "columns": [
        { "name": "name", "logic_operator": "like", "value": "", "operator": "AND" }
      ],
      "joins": [],
      "orders": { "columns": ["id"], "ascending": false }
    }
    // console.log("qry", qry)
    axiosInstance.post(url, payload, HEADER).then(res => {
      console.log(res)
      DATA_ROLE_HUMAN_RESOURCE = res.data.data
    });
  }
  // getDataHumanResource()

  // function getDataMaterials() {
  //   const url = `${base_url}request-material/search`
  //   const payload = {
  //     "paging": {
  //       "start": 0,
  //       "length": -1
  //     },
  //     "columns": [
  //       {
  //         "name": "proyek_id",
  //         "logic_operator": "=",
  //         "value": "6",
  //         "operator": "AND"
  //       },
  //       {
  //         "name": "status",
  //         "logic_operator": "=",
  //         "value": "receipt to site",
  //         "operator": "AND"
  //       }
  //     ],
  //     "orders": {
  //       "columns": [
  //         "id"
  //       ],
  //       "ascending": false
  //     }
  //   }
  //   axiosInstance.post(url, payload, HEADER).then(res => {
  //     console.log(res)
  //     DATA_MATERIAL_RESOURCE = res.data.data
  //   });
  // }

  // function getDataTools() {
  //   const url = `${base_url}req-tools/search`
  //   const payload = {
  //     "paging": {
  //       "start": 0,
  //       "length": -1
  //     },
  //     "columns": [
  //       {
  //         "name": "status",
  //         "logic_operator": "=",
  //         "value": "receipt to site",
  //         "operator": "AND"
  //       }
  //     ],
  //     "orders": {
  //       "columns": [
  //         "id"
  //       ],
  //       "ascending": false
  //     }
  //   }
  //   axiosInstance.post(url, payload, HEADER).then(res => {
  //     console.log(res)
  //     const arr = res.data.data
  //     DATA_TOOL_RESOURCE = res.data.data
  //     arr.forEach(function (element, key) {
  //       $('#choices-multiple-remove-button3').append(`<option value="${element.id}">${element.name}</option>`)
  //     });
  //     var multipleCancelButton = new Choices('#choices-multiple-remove-button3', {
  //       removeItemButton: true
  //     });
  //   });
  // }

  $('#human-resource').on('show.bs.modal', function (event) {
    // console.log("open modal human resource")
    getDataHumanResource()
    getDataRole()
    // getDataMaterials()
    // getDataTools()
  });

  $('#human-resource').on('hide.bs.modal', function (event) {
    $("#table-human-resource").empty();
    forbiddenHuman = [];
    activityId = 0;
  });

  $("#add-human-resource").on('click', function () {
    const num = $('#table-human-resource tr').length
    console.log(num)
    const idx = num + 1
    $('#table-human-resource').append(`
        <tr id="row-human-resource-${idx}">
      
        <td>
          <select id="select-human-resource-${idx}" class="form-control form-control-sm">
            <option value="0" selected>Select User</option>
          </select>
        </td>
        <td>
          <select id="select-role-human-resource-${idx}" class="form-control form-control-sm">
            <option value="0" selected>Select Role</option>
          </select>
        </td>
        <td>
          <button index="${idx}" type="button" class="btn btn-danger btn-sm human-resource-delete"><i class="fa fa-trash"
              aria-hidden="true"></i></button>
        </td>
      </tr>
    `)

    DATA_HUMAN_RESOURCE.forEach(function (value, key) {
      $(`#select-human-resource-${idx}`).append(`<option value="${value.id}">${value.name}</option>`)
    });
    DATA_ROLE_HUMAN_RESOURCE.forEach(function (value, key) {
      $(`#select-role-human-resource-${idx}`).append(`<option value="${value.id}">${value.name}</option>`)
    });

  });

  $('#table-human-resource').on('click', '.human-resource-delete', function (event) {
    const idx = $(this).attr("index")
    console.log(idx)
    $(`#row-human-resource-${idx}`).remove()
  })

  // $("#add-material-resource").on('click', function () {
  //   const num = $('#table-material-resource tr').length
  //   console.log(num)
  //   const idx = num + 1
  //   $('#table-material-resource').append(`
  //       <tr id="row-material-resource-${idx}">
      
  //       <td>
  //         <select id="select-material-resource-${idx}" class="form-control form-control-sm">
  //           <option value="0" selected>Select Material</option>
  //         </select>
  //       </td>
  //       <td>
  //         <input id="select-qty-material-resource-${idx}" class="form-control form-control-sm" type="number" placeholder="qty">
  //       </td>
  //       <td>
  //         <button id="material-resource-delete" index="${idx}" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"
  //             aria-hidden="true"></i></button>
  //       </td>
  //     </tr>
  //   `)

  //   DATA_MATERIAL_RESOURCE.forEach(function (element, key) {
  //     $(`#select-material-resource-${idx}`).append(`<option value="${element.id}">${element.description}</option>`)
  //   });

  // });

  // $('#table-material-resource').on('click', '#material-resource-delete', function (event) {
  //   const idx = $(this).attr("index")
  //   console.log(idx)
  //   $(`#row-material-resource-${idx}`).remove()
  // })

  // $("#add-tool-resource").on('click', function () {
  //   const num = $('#table-tool-resource tr').length
  //   console.log(num)
  //   const idx = num + 1
  //   $('#table-tool-resource').append(`
  //       <tr id="row-tool-resource-${idx}">
      
  //       <td>
  //         <select id="select-tool-resource-${idx}" class="form-control form-control-sm">
  //           <option value="0" selected>Select Tool</option>
  //         </select>
  //       </td>
  //       <td>
  //         <input id="select-qty-tool-resource-${idx}" class="form-control form-control-sm" type="number" placeholder="qty">
  //       </td>
  //       <td>
  //         <button id="tool-resource-delete" index="${idx}" type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash"
  //             aria-hidden="true"></i></button>
  //       </td>
  //     </tr>
  //   `)

  //   DATA_TOOL_RESOURCE.forEach(function (element, key) {
  //     $(`#select-tool-resource-${idx}`).append(`<option value="${element.id}">${element.asset_name}</option>`)
  //   });

  // });

  // $('#table-tool-resource').on('click', '#tool-resource-delete', function (event) {
  //   const idx = $(this).attr("index")
  //   console.log(idx)
  //   $(`#row-tool-resource-${idx}`).remove()
  // })


  $(".submit-human-resource").on('click', function () {
    console.log('onclick submit human resource');
    // addComments();
    let valueHumanResource = []
    const num = $('#table-human-resource tr').length
    for (let i = 0; i < num; i++) {
      const valUser = $(`#select-human-resource-${i + 1}`).val()
      const valRole = $(`#select-role-human-resource-${i + 1}`).val()
      const obj = {
        role: valRole,
        user: valUser
      }
      valueHumanResource.push(obj)
    }
    console.log("cek value", valueHumanResource)

    // let valueMaterialResource = []
    // const numMaterial = $('#table-material-resource tr').length
    // for (let i = 0; i < numMaterial; i++) {
    //   const valMaterial = $(`#select-material-resource-${i + 1}`).val()
    //   const valQty = $(`#select-qty-material-resource-${i + 1}`).val()
    //   const obj = {
    //     qty: valQty,
    //     material: valMaterial
    //   }
    //   valueMaterialResource.push(obj)
    // }
    // console.log(valueMaterialResource)

    // let valueToolResource = []
    // const numTool = $('#table-tool-resource tr').length
    // for (let i = 0; i < numTool; i++) {
    //   const valTool = $(`#select-tool-resource-${i + 1}`).val()
    //   const valQty = $(`#select-qty-tool-resource-${i + 1}`).val()
    //   const obj = {
    //     qty: valQty,
    //     tool: valTool
    //   }
    //   valueToolResource.push(obj)
    // }
    // console.log(valueToolResource)
    // const cost = $(`#cost-human-resource`).val()
    // const duration = $(`#duration-human-resource`).val()
    // const dateStart = $(`#date-started-human-started`).val()
    // console.log({ cost, duration, dateStart })

    // $("#exampleModal").modal('hide');
  });
})