<?= form_open("", 'id="prov_form"', ['id' => $id]) ?>
   <div class="modal-body">
      <?= xform_input('nama_prov', 'Nama Provinsi', $nama_prov, 3, 9, true, 200, 'ginputx') ?>
      <?= xform_input('nama_alt', 'Nama Alt', $nama_alt, 3, 9, false, 100, 'ginputx') ?>
      <?= xform_input('kode', 'Kode', $kode, 3, 9, false, 2, 'angkax') ?>
      <hr>
      <div class="invalid-feedback text-center" id="em_message"></div>
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">Close</button>
      <?= form_submit('btn_prov', $button, 'waves-effect waves-themed float-right') ?>
   </div>
</form>

<script type="text/javascript">

   $('.ginputx').inputmask({
      regex: "^[a-zA-Z0-9\\s.,@-]*$"
   });

   $('.angkax').numeric();

$("#prov_form").submit(function(e){
  e.preventDefault();
  var url = '<?= $action ?>'
  var formData = $(this).serialize();
  $.ajax({
      url: url,
      type: "post",
      dataType: 'json',
      data: formData,
      beforeSend  : function() {
         $(".form-control").removeClass("is-invalid");
         $(".invalid-feedback").html('').hide();
         BtnLoading($("#btn_prov"));
      },
      error: function (xhr, status, message) {
         var res = JSON.parse(xhr.responseText);
         $(res.messages).each(function(i,val){
            var inputname = Object.keys(val)[0];
            $.each(val,function(k,v){
               $("#"+inputname).focus();
               $("#"+k).addClass("is-invalid");
               $("#em_"+k).html(v).fadeIn();
            });
         });
         BtnReset($("#btn_prov"));
      },
      success: function(res) {
         $('#nama_prov').val('');
         $('#nama_alt').val('');
         $('#kode').val('');
         $('#datagrid_prov').datagrid('load');
         $('#modal-prov').modal('hide');
         toastr.success(res.message, 'Updated!!', {timeOut: 3000});
      },
      complete: function() {
         BtnReset($("#btn_prov"));
      }
   });
});
</script>