Anons79 Mini Shell

<div class="form-group">
    <label for="nama_jadwal">Nama Jadwal</label>
    <input type="text" name="nama_jadwal" placeholder="Nama Jadwal" class="form-control" id="nama_jadwal" value="{{ old('nama_jadwal',@$data->nama_jadwal) }}" required>
    
    @error('nama_jadwal')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<div class="form-group">
    <label for="jumlah_hari">Jumlah Hari (Akan dihitung dari tanggal masuk kerja)</label>
    <input type="number" name="jumlah_hari" placeholder="Jumlah Hari" class="form-control" id="jumlah_hari" value="{{ old('jumlah_hari',@$data->jumlah_hari ?? 7) }}" required max="31">
    
    @error('jumlah_hari')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<div class="form-group">
    <label for="toleransi_tepat_waktu">Toleransi Tepat Waku <span class="text-danger">Masuk</span> Dalam Menit (Kosongkan jika tidak ada)</label> 
    <input type="number" name="toleransi_tepat_waktu" placeholder="Toleransi Tepat Waktu Masuk (Menit)" class="form-control" id="toleransi_tepat_waktu" value="{{ old('toleransi_tepat_waktu',@$data->toleransi_tepat_waktu ?? 0) }}">
    
    @error('toleransi_tepat_waktu')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<div class="form-group">
    <label for="toleransi_keterlambatan">Toleransi Keterlambatan <span class="text-danger">Masuk</span> Dalam Menit (Kosongkan jika tidak ada)</label> 
    <input type="number" name="toleransi_keterlambatan" placeholder="Toleransi Keterlambatan Masuk (Menit)" class="form-control" id="toleransi_keterlambatan" value="{{ old('toleransi_keterlambatan',@$data->toleransi_keterlambatan ?? 0) }}">
    
    @error('toleransi_keterlambatan')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<div class="form-group">
    <label for="toleransi_keterlambatan_pulang">Toleransi Keterlambatan <span class="text-danger">Pulang</span> Dalam Menit (Kosongkan jika tidak ada)</label> 
    <input type="number" name="toleransi_keterlambatan_pulang" placeholder="Toleransi Keterlambatan Pulang (Menit)" class="form-control" id="toleransi_keterlambatan_pulang" value="{{ old('toleransi_keterlambatan_pulang',@$data->toleransi_keterlambatan_pulang ?? 0) }}">
    
    @error('toleransi_keterlambatan_pulang')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<div class="form-group">
    <label for="">Detail Jadwl Kerja</label>
   
    <table class="table" id="detail">
        <thead>
            <tr>
                <th>Hari</th>
                <th>Status Kerja</th>
                <th>Jam Masuk</th>
                <th>Jam Pulang</th>
            
            </tr>
        </thead>
        <tbody>
            @forelse (@$data->jadwal_kerja_detail ?? [] as $index => $detail)

                <tr>
                    <td>
                        <label for="">{{ $detail->hari }}</label>
                    </td>
                    <td>
                        <select name="status_kerja[]" id="status_kerja" class="form-control">
                            <option value="work-day" @if ($detail->status_kerja == 'work-day') selected @endif>Working Day</option>
                            <option value="day-off" @if ($detail->status_kerja == 'day-off') selected @endif>Day Off</option>
                        </select>
                    </td>
                    <td>
                        <input type="time" name="jam_masuk[]" id="jam_masuk_{{ $index }}" class="form-control" value="{{ $detail->jam_masuk }}">
                    </td>
                    <td>
                        <input type="time" name="jam_pulang[]" id="jam_pulang_{{ $index }}" class="form-control" value="{{ $detail->jam_pulang }}">
                    </td>
                </tr>
            @empty
               
            @endforelse
        </tbody>
       
    </table>
</div>


@push('scripts')

    <script>
        
        var inputJumlahHari = document.getElementById('jumlah_hari');
        var table = document.getElementById('detail');
        var tableBody = table.querySelector('tbody');


        

        inputJumlahHari.addEventListener('change', function(e){
            
            generateRow();
        });
        

        function generateRow(){
            var rows = tableBody.querySelectorAll('tr');
            if(inputJumlahHari.value < rows.length){
                for(var i = rows.length - 1; i >= inputJumlahHari.value; i--){
                    tableBody.removeChild(rows[i]);
                }
            } else {
                for (let i = 1; i <= inputJumlahHari.value; i++) {
                    if(i > rows.length){
                        const element = `
                            <tr>
                                <td>
                                    <label for="">Day ${(i)}</label>
                                </td>
                                <td>
                                    <select name="status_kerja[]" id="status_kerja" class="form-control">
                                        <option value="work-day">Working Day</option>
                                        <option value="day-off">Day Off</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="time" name="jam_masuk[]" id="jam_masuk_${(i)}" class="form-control" value="08:00">
                                </td>
                                <td>
                                    <input type="time" name="jam_pulang[]" id="jam_pulang_${(i)}" class="form-control" value="17:00">
                                </td>
                            </tr>
                        `;
                        tableBody.innerHTML += element;
                    }
                    
                }
            }
            
            
        }

        
    </script>

    @if (!isset($data))
        <script>
            generateRow();
        </script>
    @endif
@endpush