$(document).ready(function() {
    selectOptionPegawai(0)
    selectOptionUnitKerja(0)
});

function selectOptionPegawai(colCount) {
    let selectPegawai = $(`#pegawai_id_${colCount}`);
    // inisialisasi select2 untuk Unit Kerja
    selectPegawai.select2({
        placeholder: '-- Pilih Pegawai --',
        allowClear:true,
        width: '100%',
        dropdownParent: selectPegawai.parent(),
        ajax:{
            url : '/select-pegawai',
            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.nama,
                    }))
                }
            },
            cache: true,
        },
        minimumInputLength: 1,
    });
}

function selectOptionUnitKerja(colCount) {
    let selectUnit = $(`#unit_akses_${colCount}`);
    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,
                    }))
                }
            },
            cache: true,
        },
        minimumInputLength: 1,
    });
}

function toggleUnitAkses(colCount) {
    const wrapper = $(`#unit_akses_wrapper_${colCount}`);
    const unitSelect = $(`#unit_akses_${colCount}`);
    const isUnit = $(`#akses_unit_${colCount}`).is(':checked');
    if (isUnit) {
        wrapper.removeClass('d-none');
    } else {
        wrapper.addClass('d-none');
        unitSelect.val(null).trigger('change');
    }
}



let colCount = 1;
function addForm(){
    let col = $("#col_add_akses")

    let html = '';

        html += `
            <div class="row mt-3" id="col-${colCount}">
                <hr/>
                <div class="col-md-4 mb-2">
                            <label>Nama</label>
                            <select class="form-control" name="data[${colCount}][pegawai_id]" id="pegawai_id_${colCount}" required>
                            </select>
                        </div>
                        <div class="col-12 col-md-2">
                            <label class="form-label mb-1 d-block">Akses</label>
                            <div class="d-flex flex-wrap gap-3">
                                <div class="form-check">
                                  <input class="form-check-input" type="radio"
                                          name="data[${colCount}][akses]" id="akses_all_${colCount}" value="all" checked
                                          onchange="toggleUnitAkses(${colCount})">
                                  <label class="form-check-label" for="akses_all_${colCount}">
                                      Semua Akses
                                  </label>
                                </div>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio"
                                          name="data[${colCount}][akses]" id="akses_unit_${colCount}" value="unit"
                                          onchange="toggleUnitAkses(${colCount})">
                                  <label class="form-check-label" for="akses_unit_${colCount}">
                                      By Unit Akses
                                  </label>
                                </div>
                                <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                        name="data[${colCount}][master_akses]" id="akses_unit_${colCount}" value="yes">
                                <label class="form-check-label">
                                    Akses Master
                                </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-2 d-none" id="unit_akses_wrapper_${colCount}">
                            <label>Unit Kerja</label>
                            <select class="form-control" name="data[${colCount}][unit_akses][]" id="unit_akses_${colCount}" multiple>
                            </select>
                            <small class="text-muted">Bisa pilih lebih dari satu.</small>
                        </div>
                    <div class="col-md-2">
                     <button type="button" class="btn btn-danger mt-3 me-2" onclick="removeCol(${colCount})"><i class="fa-solid fa-trash"></i></button>
                    </div>

             </div>
        `
    col.append(html)
    selectOptionPegawai(colCount)
    selectOptionUnitKerja(colCount)
    colCount++;

}


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