Anons79 Mini Shell

<div class="form-group">
    <label for="nama_gaji">Nama Gaji</label>
    <input type="text" name="nama_gaji" placeholder="Nama Gaji" class="form-control" id="nama_gaji"
        value="{{ old('nama_gaji', @$data->nama_gaji) }}" required>

    @error('nama_gaji')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>
<div class="form-group">
    <label for="jumlah_gaji">Jumlah Gaji (Rp)</label>
    <input type="number" name="jumlah_gaji" placeholder="Jumlah Gaji" class="form-control" id="jumlah_gaji" value="{{ old('jumlah_gaji', @$data->jumlah_gaji) }}">

    @error('jumlah_gaji')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<div class="form-group">
    <label for="jenis_gaji">Jenis Gaji</label>

    <div class="form-check mt-3">
        <input name="jenis_gaji" class="form-check-input" type="radio" value="jam" id="jenis_gaji_1" @if(isset($data)) @if($data->jenis_gaji == "jam")checked @endif @else checked @endif />
        <label class="form-check-label" for="jenis_gaji_1"> Per Jam </label>
    </div>
    <div class="form-check">
        <input name="jenis_gaji" class="form-check-input" type="radio" value="hari" id="jenis_gaji_2" @if(@$data->jenis_gaji == "hari")checked @endif/>
        <label class="form-check-label" for="jenis_gaji_2"> Per Hari </label>
    </div>
    <div class="form-check">
        <input name="jenis_gaji" class="form-check-input" type="radio" value="rit" id="jenis_gaji_3" @if(@$data->jenis_gaji == "rit")checked @endif/>
        <label class="form-check-label" for="jenis_gaji_3"> Per Rit </label>
    </div>
    @error('jenis_gaji')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>
<div class="form-group">
    <label for="jumlah_maksimal">Jumlah Maksimal Jam/Hari Kerja/Rit - (nilai 0 jika tidak ada batas maksimal)</label>
    <input type="number" name="jumlah_maksimal" placeholder="Jumlah Maksimal" class="form-control"
        id="jumlah_maksimal" value="{{ old('jumlah_maksimal', @$data->jumlah_maksimal ?? 0) }}" required>

    @error('jumlah_maksimal')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>
<div class="form-group">
    <label for="gaji_lembur">Gaji Lembur</label>
    <input class="form-check-input" @if(@$data->gaji_lembur) checked @endif type="checkbox" name="gaji_lembur" id="gaji_lembur" />


    @error('gaji_lembur')
        <span class="invalid-feedback show" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>


<div class="form-group" id="detail-lembur" >
    <label for="">Detail Lembur</label>
    <button type="button" id="add-row" onclick="addRow()" class="btn btn-sm btn-primary">
        <i class="bx bx-plus"></i>
    </button>
    <table class="table" id="detail">
        <thead>
            <tr>
                <th>Jumlah Jam/Hari/Rit</th>
                <th>Jumlah Gaji Lembur (Rp)</th>
                <th>*</th>
            </tr>
        </thead>
        <tbody id="tbody">
            @forelse (@$data->gaji_detail ?? [] as $index => $detail)
                <tr>
                    <td>
                        <input type="number" name="jumlah_maksimal_detail[]" id="jumlah_maksimal_detail_{{ $index }}"
                            class="form-control" value="{{ $detail->jumlah_maksimal }}">
                    </td>
                    <td>
                        <input type="number" name="jumlah_gaji_tambahan[]"
                            id="jumlah_gaji_tambahan_{{ $index }}" class="form-control"
                            value="{{ $detail->jumlah_gaji_tambahan }}">
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-danger delete-row">
                            <i class="bx bx-trash"></i>
                        </button>
                    </td>
                </tr>
            @empty
            @endforelse
        </tbody>

    </table>
</div>


@push('scripts')
    <script>
        var gaji_lembur = document.getElementById('gaji_lembur');
        var tableBody = document.getElementById('tbody');

        if (gaji_lembur.checked) {
            document.getElementById('detail-lembur').style.display = "block";
        } else {
            document.getElementById('detail-lembur').style.display = "none";
        }
        gaji_lembur.addEventListener('change', function(e) {
            if (e.target.checked) {
                document.getElementById('detail-lembur').style.display = "block";
            } else {
                document.getElementById('detail-lembur').style.display = "none";
            }
        });

        function createElementFromHTML(htmlString) {
            var tr = document.createElement('tr');
            tr.innerHTML = htmlString.trim();

            // Change this to div.childNodes to support multiple top-level nodes.
            return tr;
        }

        function addRow() {
            var el = createElementFromHTML(`
                            <td>
                                <input type="number" name="jumlah_maksimal_detail[]" class="form-control">
                            </td>
                            <td>
                                <input type="number" name="jumlah_gaji_tambahan[]" class="form-control" >
                            </td>
                            <td>
                                <button type="button"  class="btn btn-sm btn-danger delete-row">
                                    <i class="bx bx-trash"></i>
                                </button>    
                            </td>
                        `);
            
            tableBody.appendChild(el);
            var btns = tableBody.querySelectorAll('.delete-row');
            for (let i = 0; i < btns.length; i++) {
                const btn = btns[i];
                btn.addEventListener('click', function(e) {
                    removeRow(e);
                });
            }
            


        }



        function removeRow(event) {
            event.currentTarget.parentElement.parentElement.remove();
        }
    </script>
@endpush