<?= form_open('', 'id="modul_form"', ['id_modul' => $id_modul]) ?>
   <div class="modal-body">
      <?= xform_input('fname', 'Fname', $fname, 3, 9, true, 30, 'ginputx') ?>

      <?= xform_input('nama_modul', 'Nama Modul', $nama_modul, 3, 9, true, 30, 'ginputx') ?>

      <?= xform_input('urut', 'No. Urut', $urut, 3, 9, true, 2, 'angkax') ?>
      
      <div class="row mb-3">
         <label class="col-sm-3 col-form-label text-right">Icon :</label>
         <div class="col-sm-7">
            <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" id="ikon" name="ikon" placeholder="Icon" value="<?= esc($ikon, 'html') ?>" required>
            <div class="invalid-feedback" id="em_ikon"></div>
         </div>
         <div class="col-sm-2">
            <a href="https://www.gotbootstrap.com/themes/smartadmin/4.6.0/icons_fontawesome_light.html"target="blank" class="btn btn-default"><i class="fal fa-info"></i></a>
         </div>
      </div>
      <div class="row mb-3">
         <label class="col-sm-3 col-form-label text-right">Keterangan :</label>
         <div class="col-sm-9">
            <textarea class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" id="ket" name="ket" placeholder="Keterangan"><?= esc($ket, 'html') ?></textarea>
         </div>
      </div>
      <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>
      <button type="submit" id="btn_rekam" class="btn btn-primary waves-effect waves-themed">
         Save Changes
      </button>
   </div>
</form>

<script type="text/javascript">

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

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

$("#modul_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-group").removeClass("is-invalid");
         $(".invalid-feedback").html('').hide();
         BtnLoading($("#btn_rekam"));
      },
      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_rekam"));
      },
      success: function(res) {
         $('#modal-modul').modal('hide');
         $('#datagrid_modul').datagrid('load');
         toastr.success(res.message, 'Updated!!', {timeOut: 3000});
      },
      complete: function() {
         BtnReset($("#btn_rekam"));
      }
   });
});
</script>