I am creating an employee leave form with 3 types of permissions from another table, namely: "Terlambat", "Pulang Cepat", "Sakit". Select Category Options

For the "SAKIT" category, since there are no jam_mulai and jam_selesai to be filled in, the data has been successfully saved to the database. "SAKIT" Category Form

For "Terlambat", "Pulang Cepat" categories. If selected, the jam_mulai and jam_selesai forms will appear. And the jml_jam field I created in the controller. But when submitting, the data of my DD ($IZIN) does not appear, but returns to the index.blade.php page. Table

This is the response from the network side when checking: Preview Network header

This is the code to add data permissions in form mode:

enter code here    {{-- FORM PENGAJUAN IZIN--}}
{{-- bbootsrapt clockpicker  --}}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>

<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Form Permohonan Izin</h4>
            </div>
                   
            <div class="modal-body">
                <form class="input" action="{{ route('izinstore')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('POST')
                    <div class="form-group">
                        <label for="id_karyawan" class="col-form-label">Nama</label>
                        <input type="text" class="form-control" id="id_karyawan" value="{{Auth::user()->name}}" readonly>
                        <input type="hidden" class="form-control" name="id_karyawan" id="id_karyawan" value="{{$karyawan}}" hidden>
                    </div>
                    <div class="form-group col-sm" id="jenisizin">
                        <label for="id_jenisizin" class="col-form-label">Kategori Izin</label>
                        <select name="id_jenisizin" id="id_jenisizin" class="form-control">
                            <option>-- Pilih Kategori --</option>
                            @foreach ($jenisizin as $data)
                                <option value="{{ $data->id}}" 
                                    {{ old('id_jenisizin') == $data->id ? 'selected' : '' }}
                                    >{{ $data->jenis_izin }}
                                </option>
                            @endforeach
                        </select> 
                    </div>
                    <div class="form-group">
                        <label for="keperluan" class="col-form-label">Keperluan</label>
                        <input type="text" class="form-control" name="keperluan" id="keperluan" required>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="">
                                {{-- <form class="" action="#"> --}}
                                    <div class="form-group">
                                        <label for="tgl_mulai" class="form-label">Tanggal Mulai</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose3" name="tgl_mulai" onchange=(jumlahhari()) autocomplete="off" required>
                                            <span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                        </div>
                                    </div>
                                {{-- </form> --}}
                            </div>
                        </div>
                       
                        <div class="col-sm-6">
                            <div class="">
                                {{-- <form class="" action="#"> --}}
                                    <div class="form-group">
                                        <label for="tgl_selesai" class="form-label">Tanggal Selesai</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose4" name="tgl_selesai"  onchange=(jumlahhari()) autocomplete="off" required>
                                            <span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                        </div>
                                    </div>
                                {{-- </form> --}}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6" id="jmulai">  
                            <div class="">
                                <label for="jam_mulai">Dari Jam</label>
                                <div class="input-group clockpicker pull-center" data-placement="top" data-align="top" autocomplete="off" data-autoclose="true">
                                    <input type="text" class="form-control" name="jam_mulai" id="mulai" value="{{ old('jam_mulai') }}">
                                    <span class="input-group-addon">
                                        <span class="fa fa-clock-o"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                               
                        <div class="col-lg-6" id="jselesai">
                            <div class="">
                                <label for="jam_selesai">Sampai Jam</label>
                                <div class="input-group clockpicker pull-center" data-placement="top" data-align="top" autocomplete="off" data-autoclose="true">
                                    <input type="text" class="form-control" name="jam_selesai" id="selesai" value="{{ old('jam_selesai') }}">
                                    <span class="input-group-addon">
                                        <span class="fa fa-clock-o"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-sm" id="jumlahhari">
                        <label for="jml_hari" class="col-form-label">Jumlah Hari</label>
                        <input type="text" class="form-control" name="jml_hari" id="jml" readonly>
                    </div>


                    <div class="form-group col-sm"  id="jumlahjam">
                        {{-- <label for="jml_jam" class="col-form-label">Jumlah Jam</label> --}}
                        <input type="hidden" class="form-control" name="jml_jam" value="{{old('jml_jam')}}" id="jam">
                    </div>

                    <div class="form-group col-sm">
                        <input type="hidden" class="form-control" name="status" id="status" value="Pending" hidden>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" value="save">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    
<script type="text/javascript">
//show clockpicker 
    jQuery(function(j){
        j('.clockpicker').clockpicker()
            .find('input').change(function()
            {
                console.log(this.value);
            });
        var input = j('#single-input').clockpicker({
            placement: 'bottom',
            align: 'left',
            autoclose: true,
            'default': 'now'
        });
    });

//show/hide clockpicker when id_jenisizin selected
    $(function()
    {
        $('#jmulai').prop("hidden", true);
        $('#jselesai').prop("hidden", true);
        // $('#jumlahjam').prop("hidden", true);
        $('#jumlahhari').prop("hidden", true);

        $('#jenisizin').on('change', function(e)
        {
            if(e.target.value== 1 || e.target.value== 2)
            {
                $('#jmulai').prop("hidden", false);
                $('#jselesai').prop("hidden", false);
                // $('#jumlahjam').prop("hidden", false);
                $('#jumlahhari').prop("hidden", false);

                //selisih waktu jika terlambat
                if(e.target.value== 1)
                {
                    //set nilai jam_mulai
                    $('#mulai').val('08:00');
                    $('#mulai').attr('readonly', false);
                    $('#mulai').css('background-color' , '#DEDEDE');
                }else {

                    //set nilai jam_selesai
                    $('#selesai').val('17:00');
                    $('#selesai').attr('readonly', false);
                    $('#selesai').css('background-color' , '#DEDEDE');
                }
                // alert('DATA ADA');
            } else {
                $('#jmulai').prop("hidden", true);
                $('#jselesai').prop("hidden", true);
                // $('#jumlahjam').prop("hidden", true);
                $('#jumlahhari').prop("hidden", false);
            }
            // alert('id:' + e.target.value);
        });
    });

// =========================================================
//datepicker for tgl_mulai & tgl_selesai
    $('#datepicker-autoclose3').datepicker({
        autoclose: true,
    });

    $('#datepicker-autoclose4').datepicker({
        autoclose: true,
    });

    function jumlahhari(){
        var start= $('#datepicker-autoclose3').val();
        var end  = $('#datepicker-autoclose4').val();

        var start_date= new Date(start);
        var end_date  = new Date(end) ;
        var daysOfYear= [];

        //mendapatkan jumlah hari izin jika sakit
        for (var d = start_date; d <= end_date; d.setDate(d.getDate() + 1)){
            //cek workdays
            let tgl = new Date(d);
            if(tgl.getDay() !=0 && tgl.getDay() !=6){
                daysOfYear.push(tgl);
                console.log(tgl);
            } else{
                console.log("hari Libur" + tgl.getDay());
            };
        };

        //mengambil value tanggal mulai
        $('#start_date').on('change', function(){
            jumlahhari();
        });
        //mengambil value tanggal selesai
        $('#end_date').on('change', function(){
            jumlahhari();
        });

        console.info(daysOfYear);
        $('#jml').val(daysOfYear.length ?? 0);
    };

</script>


<!-- jQuery  -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>

{{--  plugin js --}}
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>


{{-- // Datatable init js  --}}
<script src="assets/pages/datatables.init.js"></script>
<script src="assets/js/app.js"></script>

{{-- // Plugins Init js --}}
<script src="assets/pages/form-advanced.js"></script>

This is the code in CONTROLLER to store data:

public function store(Request $request)
{
    $karyawan = Auth::user()->karyawans->id;
    // dd($request->id_jenisizin);
    if($request->has('jam_mulai') && $request->has('jam_selesai'))
    {
        if($request->id_jenisizin == 1 || $request->id_jenisizin == 2)
        {
            // dd($request->all());
            $validate = $request->validate([
                'id_karyawan'  => 'required',
                'id_jenisizin' => 'required',
                'keperluan'    => 'required',
                'tgl_mulai'    => 'required',
                'tgl_selesai'  => 'required',
                'jam_mulai'    => 'required',
                'jam_selesai'  => 'required',
                'jml_hari'     => 'required',
                'jml_jam'      => 'required',
                'status'       => 'required',
            ]);
            // dd($validate);

            $izin = New Izin;
            $izin->id_karyawan = $karyawan;
            $izin->id_jenisizin= $request->id_jenisizin;
            $izin->keperluan   = $request->keperluan;
            $izin->tgl_mulai   = Carbon::now()->format("Y-m-d");
            $izin->tgl_selesai = Carbon::now()->format("Y-m-d");
            $izin->jam_mulai   = $request->jam_mulai;
            $izin->jam_selesai = $request->jam_selesai;
            $izin->jml_hari    = $request->jml_hari;

            $jammulai  = Carbon::parse($request->jam_mulai);
            $jamselesai= Carbon::parse($request->jam_selesai);
            $time_range= $jamselesai->diff($jammulai)->format("%H:%I");

            $izin->jml_jam     = $time_range;
            $izin->status      = 'Pending';

            $izin->save();

            dd($izin);
        
            return redirect()->back()->withInput();
        }else{
            // dd($request->all());

            $validate = $request->validate([
                'id_karyawan'  => 'required',
                'id_jenisizin' => 'required',
                'keperluan'    => 'required',
                'tgl_mulai'    => 'required',
                'tgl_selesai'  => 'required',
                'jml_hari'     => 'required',
                'status'       => 'required',
            ]);

            // dd($validate);

            $izin = New Izin;
            $izin->id_karyawan = $karyawan;
            $izin->id_jenisizin= $request->id_jenisizin;
            $izin->keperluan   = $request->keperluan;
            $izin->tgl_mulai   = Carbon::now()->format("Y-m-d");
            $izin->tgl_selesai = Carbon::now()->format("Y-m-d");
            $izin->jml_hari    = $request->jml_hari;
            $izin->status      = 'Pending';

            $izin->save();
            // dd($izin);
           
            return redirect()->back()->withInput();
        };
    }
        
}

This is the PERMISSION table in the laragon database: Table IZIN