Untitled

script

<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').text();

      if (selectedId) {
        updateDescription(selectedId, selectedText);
        fetchProficiencylead(selectedId);
      }
    });
  });
});

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

  $.ajax({
    url: "{{ route('jobprofile-fetch-desc-komplead') }}",
    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;
        });
        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>


view

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="modal fade" id="modal-komplead" aria-labelledby="exampleModalLabel" aria-hidden="true"
  data-route="{{ route('edit-jobprofileeditikomleader') }}"
  data-route2="{{ route('jobprofile-fetch-detailkompetensi') }}" 
  data-route3="{{ route('jobprofile-fetch-komplead') }}"
  data-route4="{{ route('jobprofile-hapus-komplead') }}">

  <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 Kepemimpinan</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form-komplead" method="POST">
          @csrf
          <div class="row">
            <div class="col-sm-6">
              <ul id="listContainer" class="list-group"></ul>
              <div style="margin-bottom: 16px;">
                <p class="body-title">Pilih Kompetensi</p>
                <input type="hidden" name="ididentitasjbtn" value="{{ $ididentitasjbtn }}">

                <!-- Dropdown for Kompetensi -->
                <select class="form-select select2 kompetensi-select" style="width: 100%;"
                  data-placeholder="Pilih Kompetensi">
                  <option selected disabled></option>
                  @foreach($selectkomplead['result'] as $item)
                    <option value="{{ $item['idkompetensilead'] }}"
                            data-idkompetensilead="{{ $item['idkompetensilead'] }}"
                            data-namakomplead="{{ $item['namakomplead'] }}">
                      {{ $item['namakomplead'] }}
                    </option>
                  @endforeach
                </select>
              </div>
              <div id="selectedKompetensiLead">
                <!-- 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="nama-kompetensi"></p>
              </div>
              <div class="desc-kompetensi">
                <p style="font-weight: 600; text-align:left">Definisi:</p>
                <p style="text-align:left" id="desc-kompetensi"></p>
              </div>
              <div class="proficiency-kompetensi">
                <p style="font-weight: 600; text-align:left">Proficiency:</p>
                <table class="table table-bordered" id="proficiency-table">
                  <thead>
                    <tr>
                      <th>Level</th>
                      <th>Indicator</th>
                    </tr>
                  </thead>
                  <tbody id="proficiency-body">
                    <!-- Proficiency data 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" form="form-komplead" class="btn btn-primary">Simpan</button>
        </div>
      </div>
    </div>
  </div>
</div>


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() {
    $(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, // 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) {
                        console.log(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);
            
                    // Tambahkan event listener untuk tombol hapus
                    $('.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');
                        
                        // 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,
                                    idkomplead: idkomplead
                                }),
                                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
                }
            });
            
            // 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');
                var disabledData = $(this).find('option:selected')
                disabledData.prop('disabled', true)
                
                // AJAX Request
                $.ajax({
                    url: routeUrl, // Ganti dengan URL endpoint API Anda
                    type: 'GET',
                    data: {
                        
                        ididentitasjbtn: idIdentitas,
                        idkompetensilead: idkompetensilead
                    },
                    success: function(response) {
                        // Tambahkan logika Anda untuk menangani respons dari server di sini
                        // Misalnya, cetak respons ke konsol
    
                        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 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>';
                        $('#selectedKompetensiLead').append(row);
            
                        $('[data-toggle="tooltip"]').tooltip();
                    },
                    error: function(xhr, status, error) {
                        console.error(error); // Tangani kesalahan
                    }
                });
            });
        });
    
        $('#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 () {
        $('.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');
        
        $.ajax({
            url: routeUrl,
            type: 'GET',
            data: { ididentitasjbtn: idIdentitas },
            success: function(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('');
                
                $('#listContainersoft').html(listItems);
                
                $('.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');
                    
                    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) {
                                console.log(response);
                                listItem.remove();
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    }
                });
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });

        $.ajax({
            url: routeUrlkompetensi,
            type: "GET",
            data: { 
                koderumpun: 0,
                kodejeniskomp: 2,
                ididentitasjbtn: idIdentitas,
            },
            success: function(response) {
                var kompetensiDropdown = $('#kompetensisoft');
                kompetensiDropdown.empty();
                
                $.each(response.result.result, function(index, item) {
                    kompetensiDropdown.append($('<option>', {
                        value: item.iddictkomphardsoft,
                        text: item.namakomphardsoft,
                        'data-iddictkomphardsoft': item.iddictkomphardsoft,
                        'data-koderumpun': 0,
                        'data-namakomphardsoft': item.namakomphardsoft
                    }));
                });
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
});

$(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');

    var routeUrl = $('#modal-kompsoft').data('route2');
    
    $.ajax({
        url: routeUrl,
        type: 'GET',
        data: {
            iddictkomphardsoft: iddictkomphardsoft,
            ididentitasjbtn: idIdentitas,
        },
        success: function(response) {
            var levels = response.result.result;
            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);
        }
    });
});

$(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.');
        }
    });
});
    $(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');

    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.');
            }
        });
    });
    
});