$(document).on('page:beforein', '.page[data-name="person_add"]', async function (e) {

  console.log('app person_add ready')

  let js = JSON.parse(localStorage.getItem('f04_company'));

  let dt=js.data;

  let sel_company =`<option value="0"></option>`;

  for (let i=0;i<dt.length;i++) {

    sel_company +=`<option value="`+dt[i].id+`">`+dt[i].name+`</option>`;

  }

  $$("#p8_company_id").html(sel_company);

  let dt2=ar['relation'];

  let sel2 =``;

  for (let i=2;i<11;i++) {

    if(dt2[i]) {

      sel2 +=`

    <li>

     <label class="item-checkbox item-checkbox-icon-start item-content">

      <input type="checkbox" name="p8_relation" value="`+i+`" />

       <i class="icon icon-checkbox"></i>

        <div class="item-inner">

          <div class="item-title">`+dt2[i]+`</div>

        </div>

      </label>

     </li>`;

    }

  }

  $$("#relation").html(sel2);

  

});



$$(document).on('page:init', '.page[data-name="person_add"]', function(e) {

  $(document).off("click", "#person_add_button").on("click", "#person_add_button", function(e) {

    e.preventDefault();

    const name = $('#p8_name').val();

    const initial= $('#p8_initial').val();

    const nik= $('#p8_nik').val();

    const npwp= $('#p8_npwp').val();

    const address= $('#p8_address').val();

    const city= $('#p8_city').val();

    const postcode= $('#p8_postcode').val();

    const email = $('#p8_email').val();

    const phone = $('#p8_phone').val();

    const company_id = $('#p8_company_id').val();

    let relations= [];

    $('input[type="checkbox"]:checked').each(function() {

      relations.push($(this).val());

    });

    console.log(relations)

    let req = {

      name,initial,nik,npwp,address,city,postcode,email,phone,company_id,relations

    }

    if (name) {

      person_add(req);

    } else {

      app.dialog.alert("All fields are required", "Person Add Errors");

    }

  });

})