Untitled

<script>
$(document).ready(function () {
  $('#modal-komplead').on('shown.bs.modal', function () {
    // Reset select element and clear descriptions when the modal opens
    $('.kompetensi-select').val(null).trigger('change');
    $('#desc-kompetensi').text('');
    $('#nama-kompetensi').text('');

    // Event listener for changes on the select element
    $('.kompetensi-select').on('change', function () {
      var selectedId = $(this).val();
      var selectedText = $(this).find('option:selected').data('namakomplead');
      if (selectedId) {
        updateDescription(selectedId, selectedText);
        fetchProficiencylead(selectedId);
      }
    });
  });
});

function updateDescription(selectedValue, selectedText) {
  var idIdentitas = $('input[name="ididentitasjbtn"]').val();
  var data = {
    ididentitasjbtn: idIdentitas,
    id: selectedValue
  };
  var routeUrl = $('#modal-komplead').data('route3');

  $.ajax({
    url: routeUrl,
    type: "GET",
    data: data,
    beforeSend: function() {
      // Show loading indicator
      $('#desc-kompetensi').text('Loading...');
    },
    success: function (response) {
      console.log('AJAX Response:', response); // Log the response
      console.log(selectedText);
      
      var nameElement = $('#nama-kompetensi');
      var descriptionElement = $('#desc-kompetensi');

      if (response.result) {
        nameElement.text(selectedText || '');
        let dataFetch = response.result.result.find((data) => {
          return data.namakomplead == selectedText;
          console.log(selectedText);
        });
        descriptionElement.text(dataFetch.desckomplead || '');
      } 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);
      $('#desc-kompetensi').text('Error fetching description.');
    }
  });
}

function fetchProficiencylead(selectedId) {
  var idIdentitas = $('input[name="ididentitasjbtn"]').val();
  var fetchUrl = $('#modal-komplead').data('route3');

  $.ajax({
    url: fetchUrl,
    type: 'GET',
    data: { ididentitasjbtn: idIdentitas, idkomplead: selectedId },
    success: function (response) {
      console.log('Proficiency fetch response:', response);

      var proficiencyBody = $('#proficiency-body');
      proficiencyBody.empty(); // Clear existing rows

      if (response.result && response.result.result.length > 0) {
        var item = response.result.result[0]; // Assuming only one proficiency per competency
        var row = '<tr>' +
                    '<td>' + item.namalvlkomplead + '</td>' +
                    '<td>' + (item.indikator || 'No indicator available') + '</td>' +
                  '</tr>';
        proficiencyBody.append(row);
      } else {
        var row = '<tr><td colspan="2">No proficiency data found.</td></tr>';
        proficiencyBody.append(row);
      }
    },
    error: function (xhr, status, error) {
      console.error('Error fetching proficiency:', error);
      var proficiencyBody = $('#proficiency-body');
      proficiencyBody.empty();
      var row = '<tr><td colspan="2">Error fetching proficiency data.</td></tr>';
      proficiencyBody.append(row);
    }
  });
}

</script>



js

// function for filter
function selectStatus(value) {
    document.getElementById('filter-status').innerText = value;
}

function deleteBtn(value){
    var option = document.querySelector('.kompetensi-select option[value="' + value + '"]');
    option.disabled = false
}

document.addEventListener('DOMContentLoaded', function() {
    var dropdownItems = document.querySelectorAll('.dropdown-item');

    dropdownItems.forEach(function(item) {
        item.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent the default action of the anchor tag

            // Extracting the value from the clicked anchor tag's text content
            var value = this.textContent.trim();
            
            // Assuming you want to pass different values to each function based on the clicked item
            if (this.parentElement.parentElement.id === 'dropdown-status') {
                selectStatus(value);
            }
        });
    });
});

$('.select2').each(function() {
    $(this).select2({
        placeholder: $(this).data('placeholder') || 'Pilih'
    });
});
  
$(document).ready(function() {
    $('#modal-komplead').on('shown.bs.modal', function () {
        
        // Initialize Select2
        $('.select2').select2({
            dropdownParent: $('#modal-komplead'),
            placeholder: "Pilih",
            allowClear: true,
        });

        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var routeUrl = $('#modal-komplead').data('route3');
        
        // AJAX Request
        $.ajax({
            url: routeUrl,
            type: 'GET',
            data: {
                ididentitasjbtn: idIdentitas
            },
            success: function(response) {
                var levels = response.result.result;
                var listItems = levels.map(function(level) {
                    if (level.namakomplead && level.namalvlkomplead) {
                        return '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    level.namakomplead + " - " + level.namalvlkomplead +
                                    '<button type="button" class="btn btn-danger btn-sm delete-item" data-ididentitasjbtn="' + level.ididentitasjbtn + '" data-idkomplead="' + level.idkomplead + '">' +
                                        '<i class="fa-solid fa-trash"></i>' +
                                    '</button>' +
                                '</li>';
                    } else {
                        return '';
                    }
                }).join('');
                
                $('#listContainer').html(listItems);
        
                // Add event listener for delete button
                $('.delete-item').on('click', function() {
                    var ididentitasjbtn = $(this).data('ididentitasjbtn');
                    var idkomplead = $(this).data('idkomplead');
                    var listItem = $(this).closest('li');
                    var routeUrlhapus = $('#modal-komplead').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,
                                idkomplead: idkomplead
                            }),
                            success: function(response) {
                                console.log(response);
                                listItem.remove(); // Remove the list item from the DOM
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    }
                });
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
        
        // Event listener for .kompetensi-select change event
        $(document).on('change', '.kompetensi-select', function() {
            var idIdentitas = $('input[name="ididentitasjbtn"]').val();
            var selectedOption = $(this).val();
            var selectedText = $(this).find('option:selected').data('namakomplead');
            var idkompetensilead = $(this).find('option:selected').data('idkompetensilead');
            var routeUrl = $('#modal-komplead').data('route2');
            
            // Disable the selected option
            $(this).find('option:selected').prop('disabled', true);
            
            // AJAX Request
            $.ajax({
                url: routeUrl,
                type: 'GET',
                data: {
                    ididentitasjbtn: idIdentitas,
                    idkompetensilead: idkompetensilead
                },
                success: function(response) {
                    var levels = response.result.result;
                    var levelOptions = levels.map(function(level) {
                        return '<option value="' + level.idkomplead + '">' + level.namalvlkomplead + '</option>';
                    }).join('');
                    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="kompetensi_id[]" value="' + selectedOption + '">' +
                                '<input type="hidden" name="idkompetensilead[]" value="' + idkompetensilead + '">' +
                                '<div class="col-3"><select class="form-select" name="kompetensi_level[]" aria-label="Default select example">' + levelOptions + '</select></div>' +
                                '<div class="col-1"><button 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>';
                    $('#selectedKompetensiLead').append(row);
        
                    $('[data-toggle="tooltip"]').tooltip();
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });

    $('#modal-komplead').on('hidden.bs.modal', function () {
        $(document).off('change', '.kompetensi-select');
    });

    $(document).on('submit', '#form-komplead', function(e) {
        e.preventDefault();

        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var dataToUpdate = [];
        $('#selectedKompetensiLead .row').each(function() {
            var idKomplead = $(this).find('input[name="kompetensi_id[]"]').val();
            var idKompetensiLead = $(this).find('select[name="kompetensi_level[]"]').val();

            dataToUpdate.push({
                ididentitas: idIdentitas,
                idkomplead: idKomplead,
                idkompetensilead: idKompetensiLead
            });
        });

        var jsonData = {
            dataToUpdate: dataToUpdate
        };

        var routeUrl = $('#modal-komplead').data('route');
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        $.ajax({
            url: routeUrl,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Content-Type': 'application/json'
            },
            data: JSON.stringify(jsonData),
            success: function(response) {
                alert('Data has been saved successfully.');
                $('#modal-komplead').modal('hide');
                location.reload();
            },
            error: function(xhr, status, error) {
                alert('An error occurred while saving the data.');
            }
        });
    });
    
    // Listen for click on delete button (since it's dynamically added)
    $(document).on('click', '.delete-row', function() {
        var row = $(this).closest('.row');
        console.log(row);
        // Dispose of the tooltips
        row.find('[data-toggle="tooltip"]').tooltip('dispose');
        // Remove the entire row
        row.remove();
    });
});



$(document).ready(function() {
    $('#modal-kompsoft').on('shown.bs.modal', function () {
        // Initialize Select2
        $('.select2').select2({
            dropdownParent: $('#modal-kompsoft'),
            placeholder: "Pilih",
            allowClear: true,
        });

        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var routeUrl = $('#modal-kompsoft').data('route3');
        var routeUrlkompetensi =  $('#modal-kompsoft').data('route5');;

        var labelText = '';
        var selectedValue = $(this).val();
        
        // AJAX Request
        $.ajax({
            url: routeUrl, // Ganti dengan URL endpoint API Anda
            type: 'GET',
            data: {
                ididentitasjbtn: idIdentitas
            },
            success: function(response) {

                var levels = response.result.result;
                var ididentitasjbtn = ididentitasjbtn;
                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('');
                
                $('#listContainersoft').html(listItems);
        
                // Tambahkan event listener untuk tombol hapus
                $('.delete-item').on('click', function() {
                    var ididentitasjbtn = $(this).data('ididentitasjbtn');
                    var idkompsoft = $(this).data('idkompsoft');
                    var listItem = $(this).closest('li');
                    var routeUrlhapus = $('#modal-kompsoft').data('route4');
                    
                    // Tampilkan popup konfirmasi
                    if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
                        $.ajax({
                            url: routeUrlhapus, 
                            headers: {
                                'X-CSRF-TOKEN': csrfToken,
                                'Content-Type': 'application/json'
                            },
                            type: 'POST',
                            data: JSON.stringify({ 
                                ididentitasjbtn: ididentitasjbtn,
                                idhardsoft: idkompsoft
                            }),
                            success: function(response) {
                                // Tangani respons sukses dari server
                                console.log(response);
                                listItem.remove(); // Hapus elemen <li> dari DOM
                          
                            },
                            error: function(xhr, status, error) {
                                console.error(error); // Tangani kesalahan
                            }
                        });
                    }
                });
            },
            error: function(xhr, status, error) {
                console.error(error); // Tangani kesalahan
            }
        });
           
            
        $.ajax({
            url: routeUrlkompetensi,
            type: "GET",
            data: { 
                koderumpun: 0,
                kodejeniskomp: 2,
                ididentitasjbtn: idIdentitas,
            },
            success: function(response) {
                var kompetensiDropdown = $('#kompetensisoft');
                kompetensiDropdown.empty(); // Kosongkan dropdown sebelum menambahkan opsi baru
        
       
                // Tambahkan opsi baru berdasarkan data yang diterima
                $.each(response.result.result, function(index, item) {
                    kompetensiDropdown.append($('<option>', {
                        value: item.iddictkomphardsoft,
                        text: item.namakomphardsoft,
                        'data-iddictkomphardsoft': item.iddictkomphardsoft,
                        'data-koderumpun': 0, // Diganti dengan nilai yang sesuai jika diperlukan
                        'data-namakomphardsoft': item.namakomphardsoft
                    }));
                });
    
            },
            error: function(xhr, status, error) {
                // Handle error
                console.error(xhr.responseText);
            }
        });
        
        $('#hasilSelect').text(labelText);

    });

    // Listen for click on delete button (since it's dynamically added)
    $(document).on('click', '.delete-row', function() {
        // var disabledData = $(this).find('option:selected')

        // disabledData.prop('disabled', false)
        var row = $(this).closest('.row');
        console.log(row);
        // Dispose of the tooltips
        row.find('[data-toggle="tooltip"]').tooltip('dispose');
        // Remove the entire row
        row.remove();
    });
});

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

//         // $('#form-komphard').on('submit', function(e) {
//         //     e.preventDefault(); // Prevent the default form submission

//         //     // Display an alert
//         //     alert('Form submitted successfully!');

//             // Optionally, you can proceed with form submission via AJAX or other methods here
//             /*
//             var formData = new FormData(this);
//             $.ajax({
//                 url: $(this).attr('action'),
//                 method: 'POST',
//                 data: formData,
//                 processData: false,
//                 contentType: false,
//                 headers: {
//                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//                 },
//                 success: function(response) {
//                     console.log('Form submitted successfully:', response);
//                     // Additional actions on success
//                 },
//                 error: function(xhr, status, error) {
//                     console.error('Error submitting form:', error);
//                 }
//             });
//             */
//         // });
//     });
// });

    

// Listen for click on delete button (since it's dynamically added)
$(document).on('click', '.delete-row', function() {
    // var disabledData = $(this).find('option:selected')

    // disabledData.prop('disabled', false)
    var row = $(this).closest('.row');
    console.log(row);
    // Dispose of the tooltips
    row.find('[data-toggle="tooltip"]').tooltip('dispose');
    // Remove the entire row
    row.remove();
});

$(document).on('change', '#kompetensisoft', function() {
    var idIdentitas = $('input[name="ididentitasjbtn"]').val();
    var selectedOption = $(this).val();
    var iddictkomphardsoft = $(this).find('option:selected').data('iddictkomphardsoft');
    var koderumpun = $(this).find('option:selected').data('koderumpun');
    var namakomphardsoft = $(this).find('option:selected').data('namakomphardsoft');

    console.log(selectedOption);

    var routeUrl = $('#modal-kompsoft').data('route2');
    // var disabledData = $(this).find('option:selected')
    // disabledData.prop('disabled', true)
    
    // AJAX Request
    $.ajax({
        url: routeUrl, // Ganti dengan URL endpoint API Anda
        type: 'GET',
        data: {
            iddictkomphardsoft: iddictkomphardsoft,
            ididentitasjbtn: idIdentitas,
        },
        success: function(response) {
            var levels = response.result.result;
            console.log(levels);
            var levelOptions = levels.map(function(level) {
                return '<option value="' + level.idkomphardsoft + '">' + level.lvlkomphardsoft + '</option>';
            }).join('');
            var row = '<div class="row mb-2" style="padding-right: 10px;">' +
                        '<div class="col-7"><input type="text" class="form-control" value="' + namakomphardsoft + '" disabled></div>' +
                        '<input type="hidden" name="ididentitasjbtn[]" value="' + idIdentitas + '">' +
                        '<input type="hidden" name="iddictkomphardsoft[]" value="' + iddictkomphardsoft + '">' +
                        '<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(${selectedOption})" 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>';
            $('#selectedKompetensiSoft').append(row);

            $('[data-toggle="tooltip"]').tooltip();
        },
        error: function(xhr, status, error) {
            console.error(error); // Tangani kesalahan
        }
    });
});

$(document).ready(function() {

    $(document).on('submit', '#form-kompsoft', function(e) {
        e.preventDefault();
    
        var idIdentitas = $('input[name="ididentitasjbtn"]').val();
        var dataToUpdate = [];
        $('#selectedKompetensiSoft .row').each(function() {
            var iddictkomphardsoft = $(this).find('input[name="iddictkomphardsoft[]"]').val();
            var idkomphardsoft = $(this).find('select[name="idkomphardsoft[]"]').val();
    
            dataToUpdate.push({
                ididentitas: idIdentitas,
                iddictkomphardsoft: iddictkomphardsoft,
                idkomphardsoft: idkomphardsoft
            });
        });
    
        var jsonData = {
            dataToUpdate: dataToUpdate
        };
    
        var routeUrl = $('#modal-kompsoft').data('route');
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
    
        $.ajax({
            url: routeUrl,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Content-Type': 'application/json'
            },
            data: JSON.stringify(jsonData),
            success: function(response) {
                alert('Data has been saved successfully.');
                $('#modal-kompsoft').modal('hide');
                location.reload();
    
            },
            error: function(xhr, status, error) {
                alert('An error occurred while saving the data.');
            }
        });
    });
    
});