Untitled

view

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="modal fade" id="modal-komphard-test" aria-labelledby="modalKompHardLabel" aria-hidden="true"
    data-route="{{ route('jobprofile-fetch-hardkompetensi') }}"
    data-route2="{{ route('jobprofile-fetch-softkompetensi') }}"
    data-route3="{{ route('edit-jobprofileeditkomhardsoft') }}"
    data-route4="{{ route('jobprofile-hapus-hardsoft') }}"
    data-route5="{{ route('jobprofile-fetch-rumpun') }}">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Edit Kompetensi Technical: Hard Skills</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="form-komphard-test" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-sm-6">
                            <ul id="listContainerhard-test" class="list-group"></ul>

                            <div style="margin-bottom: 16px;">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <p class="body-title">Pilih Rumpun</p>
                                        <select id="rumpunhard-test" class="form-select select2" style="width: 100%;"
                                            data-placeholder="Nama Rumpun">
                                            <option selected disabled></option>
                                            @foreach($selectnamarumpun['result'] as $item)
                                                <option value="{{ $item['koderumpunjbtn'] }}">{{ $item['namarumpun'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-7">
                                        <p class="body-title">Pilih Kompetensi</p>
                                        <select id="kompetensihard-test" class="form-select select2"
                                            style="width: 100%;" data-placeholder="Kompetensi">
                                            <option selected disabled></option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div id="selectedKompetensiHard-test">
                                <!-- Selected kompetensi will be appended here -->
                            </div>

                            <span class="divider"></span>
                        </div>

                        <div class="col-sm-6">
                            <p class="body-title" style="text-align:center">Kamus Kompetensi</p>
                            <hr>
                            <div class="nama-kompetensi">
                                <p style="font-weight: 600; text-align:left">Nama Kompetensi:</p>
                                <p style="text-align:left" id="namakompetensihard"></p>
                            </div>
                            <div class="desc-kompetensi">
                                <p style="font-weight: 600; text-align:left">Definisi:</p>
                                <p style="text-align:left" id="desckompetensihard"></p>
                            </div>

                            <div>
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th scope="col">Proficiency Level</th>
                                            <th scope="col">Indikator Perilaku</th>
                                        </tr>
                                    </thead>
                                    <tbody id="data-body-hard-test">
                                        <!-- Rows will be appended here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer justify-content-between">
                <div>
                    <button type="button" class="btn btn-batal" data-bs-dismiss="modal">Batal</button>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary" id="submit-komphard-test">Simpan</button>
                </div>
            </div>
        </div>
    </div>
</div>


script

<script>
$(document).ready(function () {
    $('#modal-komphard-test').on('shown.bs.modal', function (e) {
        $('.select2').select2({
            dropdownParent: $('#modal-komphard-test'),
            placeholder: "Pilih",
            allowClear: true,
        });

        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var routeUrl = $('#modal-komphard-test').data('route');
        
        // Fetch and populate existing hard skills
        $.ajax({
            url: routeUrl,
            type: 'GET',
            data: { ididentitasjbtn: idIdentitas },
            success: function (response) {
                console.log(response);
                var levels = response.result.result;
                var listItems = levels.map(function (level) {
                    return '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                        level.namakomphardsoft +
                        '<button type="button" class="btn btn-danger btn-sm delete-item" data-ididentitasjbtn="' + level.ididentitasjbtn + '" data-idkompsoft="' + level.idkomphardsoft + '">' +
                        '<i class="fa-solid fa-trash"></i>' +
                        '</button>' +
                        '</li>';
                }).join('');

                $('#listContainerhard-test').html(listItems);

                // Add delete button event listener
                $('.delete-item').on('click', function () {
                    var ididentitasjbtn = $(this).data('ididentitasjbtn');
                    var idkompsoft = $(this).data('idkompsoft');
                    var listItem = $(this).closest('li');
                    var routeUrlhapus = $('#modal-komphard-test').data('route4');

                    // Show confirmation popup
                    if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
                        $.ajax({
                            url: routeUrlhapus,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Content-Type': 'application/json'
                            },
                            type: 'POST',
                            data: JSON.stringify({
                                ididentitasjbtn: ididentitasjbtn,
                                idhardsoft: idkompsoft
                            }),
                            success: function (response) {
                                // Handle successful response
                                console.log(response);
                                listItem.remove(); // Remove <li> element from DOM
                            },
                            error: function (xhr, status, error) {
                                console.error(error); // Handle error
                            }
                        });
                    }
                });
            },
            error: function (xhr, status, error) {
                console.error(error); // Handle error
            }
        });

        // Event listener for changes on "Pilih Rumpun"
        $('#rumpunhard-test').on('change', function () {
            var selectedRumpun = $(this).val();
            var fetchUrl = $('#modal-komphard-test').data('route5');
            fetchKompetensiByRumpun(selectedRumpun, fetchUrl);
        });

        // Event listener for changes on "Pilih Kompetensi"
        $('#kompetensihard-test').on('change', function () {
            var selectedId = $(this).val();
            var selectedText = $(this).find('option:selected').text();
            if (selectedId) {
                updateDescriptionHard(selectedId, selectedText);
                appendSelectedKompetensi(selectedId, selectedText); // Call function to append selected kompetensi
                fetchProficiency(selectedId); // Call function to fetch and display proficiency
            }
        });
    });

    // Fetch kompetensi by selected rumpun
    function fetchKompetensiByRumpun(rumpunId, fetchUrl) {
        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        $.ajax({
            url: fetchUrl,
            type: 'GET',
            data: {
                ididentitasjbtn: idIdentitas,
                koderumpun: rumpunId,
                kodejeniskomp: 1 // Always 1 for hard skills
            },
            success: function (response) {
                console.log('Kompetensi fetch response:', response);
                var kompetensiOptions = '<option selected disabled></option>';
                response.result.result.forEach(function (item) {
                    kompetensiOptions += '<option value="' + item.idkomphardsoft + '">' + item.namakomphardsoft + '</option>';
                });
                $('#kompetensihard-test').html(kompetensiOptions).trigger('change');
            },
            error: function (xhr, status, error) {
                console.error('Error fetching kompetensi:', error);
            }
        });
    }

    // Update description based on selected kompetensi
    function updateDescriptionHard(selectedValue, selectedText) {
        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var data = {
            ididentitasjbtn: idIdentitas,
            id: selectedValue,
            koderumpun: $('#rumpunhard-test').val(),
            kodejeniskomp: 1 // Always 1 for hard skills
        };
        var fetchUrl = $('#modal-komphard-test').data('route5');

        $.ajax({
            url: fetchUrl,
            type: "GET",
            data: data,
            beforeSend: function () {
                $('#desckompetensihard').text('Loading...');
            },
            success: function (response) {
                console.log('AJAX Response:', response);
                var nameElement = $('#namakompetensihard');
                var descriptionElement = $('#desckompetensihard');

                if (response.result) {
                    nameElement.text(selectedText || '');
                    let dataFetch = response.result.result.find((data) => {
                        return data.namakomphardsoft == selectedText;
                    });
                    descriptionElement.text(dataFetch.desckomphardsoft || '');
                } else {
                    console.error("No matching item found for id:", selectedValue);
                    descriptionElement.text('No matching description found.');
                }
            },
            error: function (xhr, status, error) {
                console.error('Error fetching description:', error);
                $('#desckompetensihard').text('Error fetching description.');
            }
        });
    }

    // Append selected kompetensi to the list
    function appendSelectedKompetensi(selectedId, selectedText) {
        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var levelOptions = '<option value="1">Level 1</option><option value="2">Level 2</option>'; // Replace with actual level options
        var row = '<div class="row mb-2" style="padding-right: 10px;">' +
                      '<div class="col-7"><input type="text" class="form-control" value="' + selectedText + '" disabled></div>' +
                      '<input type="hidden" name="ididentitasjbtn[]" value="' + idIdentitas + '">' +
                      '<input type="hidden" name="iddictkomphardsoft[]" value="' + selectedId + '">' +
                      '<div class="col-3"><select class="form-select" name="idkomphardsoft[]" aria-label="Default select example">' + levelOptions + '</select></div>' +
                      `<div class="col-1"><button onclick="deleteBtn(${selectedId})" type="button" class="btn btn-danger delete-row" data-toggle="tooltip" title="Hapus" data-placement="bottom"><i class="fa-solid fa-trash"></i></button></div>` +
                  '</div>';
        $('#selectedKompetensiHard-test').append(row);

        $('[data-toggle="tooltip"]').tooltip();
    }

    // Function to handle deletion of rows
    window.deleteBtn = function(selectedId) {
        // Find and remove the row with the given selectedId
        $('input[name="iddictkomphardsoft[]"][value="' + selectedId + '"]').closest('.row.mb-2').remove();
    };

    // Fetch and display proficiency data for selected kompetensi
    function fetchProficiency(selectedId) {
        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var fetchUrl = $('#modal-komphard-test').data('route');

        $.ajax({
            url: fetchUrl,
            type: 'GET',
            data: { ididentitasjbtn: idIdentitas, idkomphardsoft: selectedId },
            success: function (response) {
                console.log('Proficiency fetch response:', response);
                var proficiencyLevels = response.result.result.find(function (item) {
                    return item.idkomphardsoft == selectedId;
                }).lvlkomphardsoft;

                var tbody = $('#data-body-hard-test');
                tbody.empty(); // Clear existing rows

                proficiencyLevels.forEach(function (level) {
                    var row = '<tr>' +
                        '<td>' + level.proficiencyLevel + '</td>' +
                        '<td>' + level.indikatorPerilaku + '</td>' +
                        '</tr>';
                    tbody.append(row);
                });
            },
            error: function (xhr, status, error) {
                console.error('Error fetching proficiency:', error);
            }
        });
    }
});



</script>