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

  let DATA_ROLE_HUMAN_RESOURCE = []
  let DATA_HUMAN_RESOURCE = []
  function getDataHumanResource() {
    const url = `${base_url}human-resource/search`
    const payload = {
      "paging": {
        "start": 1,
        "length": -1
      },
      "orders": {
        "columns": [
          "id"
        ],
        "ascending": false
      }
    }
    axiosInstance.post(url, payload, HEADER).then(res => {
      DATA_HUMAN_RESOURCE = res.data.data
    });
  }

  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 }
    }
    axiosInstance.post(url, payload, HEADER).then(res => {
      DATA_ROLE_HUMAN_RESOURCE = res.data.data
    });
  }

  $('#human-resource').on('show.bs.modal', function (event) {
    getDataHumanResource()
    getDataRole()
  });

  $('#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
    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")
    $(`#row-human-resource-${idx}`).remove()
  })

  // $("#add-material-resource").on('click', function () {
  //   const num = $('#table-material-resource tr').length
  //   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")
  //   $(`#row-material-resource-${idx}`).remove()
  // })

  // $("#add-tool-resource").on('click', function () {
  //   const num = $('#table-tool-resource tr').length
  //   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")
  //   $(`#row-tool-resource-${idx}`).remove()
  // })


  $(".submit-human-resource").on('click', function () {
    // 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)
    }

    // 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)
    // }

    // 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)
    // }
    // const cost = $(`#cost-human-resource`).val()
    // const duration = $(`#duration-human-resource`).val()
    // const dateStart = $(`#date-started-human-started`).val()

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