<?= form_open("", 'id="mlay_form"', ['id' => $id]) ?>
   <div class="modal-body">
      <?= xform_input('uraian', 'Layanan', $uraian, 3, 9, true, 200, 'ginputx') ?>
      <?= xform_input('sla', 'SLA', $sla, 3, 9, true, 10, 'angkax') ?>
      <div class="row mb-3">
         <label class="col-sm-3 col-form-label text-right">Satuan:</label>
         <div class="col-sm-9">
            <select class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" id="satuan" name="satuan">
               <option>Pilih...</option>
               <option value="Menit" <?= $satuan == 'Menit' ? 'selected':'' ?>>Menit</option>
               <option value="Jam" <?= $satuan == 'Jam' ? 'selected':'' ?>>Jam</option>
               <option value="Hari Kerja" <?= $satuan == 'Hari Kerja' ? 'selected':'' ?>>Hari Kerja</option>
               <option value="Hari" <?= $satuan == 'Hari' ? 'selected':'' ?>>Hari</option>
            </select>
            <div class="invalid-feedback" id="em_satuan"></div>
         </div>
      </div>
      <?= xform_input('menit', 'Menit', $menit, 3, 9, false, 10, 'angkax') ?>
      <?= xform_input('bobot', 'Bobot', $bobot, 3, 9, false, 10, 'angkax') ?>
      <div class="row mb-3">
         <label class="col-sm-3 col-form-label text-right">Status:</label>
         <div class="col-sm-9">
            <div class="custom-control custom-checkbox" style="margin-top: 7px;">
               <input type="checkbox" class="custom-control-input" id="status" value="1" name="status" <?= $status == 1 ? 'checked' : ''; ?>>
               <label class="custom-control-label" for="status">Aktif</label>
            </div>
         </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_mlay', $button, 'waves-effect waves-themed float-right') ?>
   </div>
</form>

<script type="text/javascript">

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

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

   // Fungsi untuk menghitung menit berdasarkan SLA dan satuan
   function hitungMenit() {
      var sla = parseFloat($('#sla').val()) || 0;
      var satuan = $('#satuan').val();
      var menit = 0;
      
      switch(satuan) {
         case 'Menit':
            menit = sla;
            break;
         case 'Jam':
            menit = sla * 60;
            break;
         case 'Hari Kerja':
            menit = sla * 9.5 * 60;
            break;
         case 'Hari':
            menit = sla * 24 * 60;
            break;
         default:
            menit = 0;
      }
      
      $('#menit').val(Math.round(menit));
   }

   // Event listener untuk perubahan pada field SLA dan satuan
   $('#sla, #satuan').on('change input', hitungMenit);

   $("#mlay_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_mlay"));
         },
         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_mlay"));
         },
         success: function(res) {
            $('#uraian').val('');
            $('#sla').val('');
            $('#satuan').val('Pilih...');
            $('#menit').val('');
            $('#bobot').val('');
            $('#status').prop('checked', false);
            $('#datagrid_mlay').datagrid('load');
            $('#modal-mlay').modal('hide');
            toastr.success(res.message, 'Updated!!', {timeOut: 3000});
         },
         complete: function() {
            BtnReset($("#btn_mlay"));
         }
      });
   });
</script>