<?= form_open("", 'id="clay_form"', ['id' => $id]) ?>
   <div class="modal-body">
      <?= form_select2('id_jalay', $dd_mlay, $id_jalay, 'Layanan') ?>
      <?= xx_tArea_inline('Nama Dokumen', 'uraian', $uraian, 3, true, 'ginputx') ?>

      <div class="form-group">
         <label class="form-label">Berkas</label>
         <input type="file" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" id="berkas" name="berkas" value="<?= $berkas ?>" accept=".pdf,application/pdf">
         <div class="invalid-feedback" id="em_berkas"></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>
      <?= form_submit('btn_clay', $button, 'waves-effect waves-themed float-right') ?>
   </div>
</form>

<script type="text/javascript">

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

   $('.select2').select2({
      dropdownCssClass:'increasezindex'
   });

$("#clay_form").submit(function(e){
   e.preventDefault();
   var url = '<?= $action ?>'
   var formObj = $(this);
   var formData = new FormData(this);
   $.ajax({
      url: url,
      type: "post",
      dataType: 'json',
      data: formData,
      mimeType:"multipart/form-data",
      contentType: false,
      cache : false,
      processData: false,
      beforeSend  : function() {
         $(".form-control").removeClass("is-invalid");
         $(".invalid-feedback").html('').hide();
         BtnLoading($("#btn_clay"));
      },
      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_clay"));
      },
      success: function(res) {
         $('#uraian').val('');
         $('#berkas').val('');
         $('#datagrid_clay').datagrid('load');
         $('#modal-clay').modal('hide');
         toastr.success(res.message, 'Updated!!', {timeOut: 3000});
      },
      complete: function() {
         BtnReset($("#btn_clay"));
      }
   });
});
</script>