project_directory/public/js/dashboard/functions.js

let colCount = 1;
$(document).ready(function() {
    $('.unit_kerja').select2({
        placeholder: '-- Pilih Unit Kerja --',
        allowClear:true,
        width: '100%',
        ajax:{
            url : '/select-unit-kerja',
            dataType: 'json',
            delay: 250,
            data: function(params){
                return {
                    q: params.term
                }
            },
            processResults: function(data){
                return {
                    results : data?.data.map(item => ({
                        id: item.id,
                        text: item.name,
                        sub_units: item?.sub_unit_kerja
                    }))
                }
            },
            cache: true,
        },
        minimumInputLength: 1,
    });

    $('.sub_unit_kerja').select2({
            placeholder: '-- Pilih Sub Unit Kerja ',
            allowClear:true,
            width: '100%',
    })

    $('.unit_kerja').on('select2:select', function(e){
        let data = e.params.data;
        $('.sub_unit_kerja').empty().append('<option value="" disable>-- Pilih Sub Unit Kerja --</option>')

        if(data.sub_units && data.sub_units.length > 0){
            data.sub_units.forEach(sub => {
                $('.sub_unit_kerja').append(`<option value="${sub.id}">${sub.name}</option>`)
            })
        }
    })

    $('.klasifikasi_dok').select2();
    $('.kategori_dok').select2();
    if(allAkses){
        selectOptionUnitKerjaV1(0)
    }else{
        selectOptionUnitKerjaV2(0)
    }
});

function addForm(){
    let col = $("#col_add_file")

    let html = '';

        html += ` <div class="row mt-3" id="col-${colCount}">
                <hr />
                <div class="col-md-6 mb-2">
                    <label>Unit</label>
                      <select class="form-control" name="data[${colCount}][id_unit_kerja]" id="select_id_unit_kerja_${colCount}" required>
                            <option value="" disable>Select Choose</option>
                      </select>
                </div>
                <div class="col-md-6 mb-2">
                    <label>Sub Unit</label>
                      <select class="form-control" name="data[${colCount}][id_sub_unit_kerja]" id="select_id_sub_unit_kerja_${colCount}" required>
                            <option value="" disable>Select Choose</option>
                      </select>
                </div>
                <div class="col-md-4">
                      <label>Kategori Dokumen</label>
                      <select class="form-control" name="data[${colCount}][master_kategori_directory_id]" id="select_kategori_${colCount}" required>
                            <option value="" disable>Select Choose</option>
                             ${katDok.map(dok => `
                                    <option value="${dok?.master_kategori_directory_id}">${dok?.nama_kategori_directory}</option>
                                    `).join('')}
                      </select>
                </div>
                     <div class="col-md-4">
                        <label>File</label>
                        <input type="file" class="form-control" name="data[${colCount}][file]" placeholder="exp : Juknis" required>
                    </div>
                    <div class="col-md-3">
                        <label>Klasifikasi Dokumen</label>
                        <select class="form-select" name="data[${colCount}][klasifikasi]">
                                <option value="" disable >Select Choose</option>
                                ${klasifikasiDok.map(kla => `
                                    <option value="${kla?.master_klasifikasi_directory_id}">${kla?.nama_klasifikasi_directory}</option>
                                    `).join('')}
                        </select>
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-danger mt-4 me-2" onclick="removeCol(${colCount})"><i class="fa-solid fa-trash"></i></button>
                    </div>
             </div>
        `
    col.append(html)
    if(allAkses){
        selectOptionUnitKerjaV1(colCount)
    }else{
        selectOptionUnitKerjaV2(colCount)
    }
    colCount++;

}


function removeCol(count){
    $(`#col-${count}`).remove()
}


function selectOptionUnitKerjaV1(colCount) {
    let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
    let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);

    // inisialisasi select2 untuk Unit Kerja
    selectUnit.select2({
        placeholder: '-- Pilih Unit Kerja --',
        allowClear:true,
        width: '100%',
        dropdownParent: selectUnit.parent(),
        ajax:{
            url : '/select-unit-kerja',
            dataType: 'json',
            delay: 250,
            data: function(params){
                return { q: params.term }
            },
            processResults: function(data){
                return {
                    results : data?.data.map(item => ({
                        id: item.id,
                        text: item.name,
                        sub_units: item.sub_unit_kerja // kirim ke front
                    }))
                }
            },
            cache: true,
        },
        minimumInputLength: 1,
    });

       selectSubUnit.select2({
            placeholder: '-- Pilih Sub Unit Kerja --',
            allowClear: true,
            width: '100%',
            dropdownParent: selectSubUnit.parent()
        });

    // event ketika unit kerja dipilih
    selectUnit.on('select2:select', function (e) {
        let data = e.params.data; // data unit kerja terpilih
        selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');

        if (data.sub_units && data.sub_units.length > 0) {
            data.sub_units.forEach(sub => {
                selectSubUnit.append(`<option value="${sub.id}">${sub.name}</option>`);
            });
        }

        // aktifkan select2 untuk sub unit

    });
}


function selectOptionUnitKerjaV2(colCount) {
    let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
    let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);

    // Kosongkan dulu
    selectUnit.empty().append('<option value="" disabled selected>-- Pilih Unit Kerja --</option>');
    selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');

    // Load semua unit kerja tanpa ajax
    $.ajax({
        url: '/select-unit-kerja', // endpoint tetap sama
        method: 'GET',
        success: function(response) {
            if (response?.data) {
                response.data.forEach(unit => {
                    const option = new Option(unit.name, unit.id, false, false);
                    $(option).data('sub_units', unit.sub_unit_kerja); // simpan sub unit di data attribute
                    selectUnit.append(option);
                });
            }
        }
    });

    // Inisialisasi select2 tanpa ajax
    selectUnit.select2({
        placeholder: '-- Pilih Unit Kerja --',
        allowClear: true,
        width: '100%',
        dropdownParent: selectUnit.parent()
    });

    selectSubUnit.select2({
        placeholder: '-- Pilih Sub Unit Kerja --',
        allowClear: true,
        width: '100%',
        dropdownParent: selectSubUnit.parent()
    });

    // Event ketika unit kerja dipilih
    selectUnit.on('change', function () {
        const selectedOption = $(this).find(':selected');
        const subUnits = selectedOption.data('sub_units') || [];

        selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');

        if (subUnits.length > 0) {
            subUnits.forEach(sub => {
                selectSubUnit.append(`<option value="${sub.id}">${sub.name}</option>`);
            });
        }
    });
}