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){
                let q = '';
                if(allAkses){
                    q = params.term;
                }else{
                    q = authUnitKerja?.name ?? '';
                }

                return { q };
            },
            processResults: function(data){
                let results = data?.data.map(item => ({
                    id: item.id,
                    text: item.name
                }));
                return { results };
            },
            cache: true,
        },
        minimumInputLength: 0,
    });

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

    // --- isi default unit kerja ---
    // if(authUnitKerja){
    //     let option = new Option(authUnitKerja.name, authUnitKerja.id, true, true);
    //     $('.unit_kerja').append(option).trigger('change');
    // }

    let initialUnit = $('.unit_kerja').val();
    if(initialUnit){
        loadSubUnitKerja(initialUnit);
    }

    let prefillSubIds = [];
    let prefillSubMeta = {};

    // jalankan setiap kali unit_kerja berubah
    $('.unit_kerja').on('change', function(){
        let idUnit = $(this).val();
        if(idUnit){
            loadSubUnitKerja(idUnit, prefillSubIds, prefillSubMeta);
            prefillSubIds = [];
            prefillSubMeta = {};
        }
    });

    $('.kategori_dok').select2();

    if(allAkses){
        selectOptionUnitKerjaV1(0);
    }else{
        selectOptionUnitKerjaV2(0);
    }

    if (window.__folderPrefillApplied) return;
    const urlParams = new URLSearchParams(window.location.search);
    const prefill = window.__prefillFromSession || null;

    const unitId = prefill?.unitId || urlParams.get('unitKerja');
    const subParam = prefill?.subId || urlParams.get('subUnit');
    const katParam = prefill?.kategoriId || urlParams.get('kategori');
    const unitName = prefill?.unitName || urlParams.get('unitName');
    const subName = prefill?.subName || urlParams.get('subName');
    const kategoriName = prefill?.kategoriName || urlParams.get('kategoriName');

    let prefillSubIdsFinal = [];
    let prefillKatIdsFinal = [];

    if (unitId) {
        window.__folderPrefillApplied = true;
        window.__prefillFromSession = null;
        $('.unit_kerja').val(null).trigger('change');
        $('.sub_unit_kerja').val(null).trigger('change');
        $('.kategori_dok').val(null).trigger('change');

        const unitLabel = unitName || unitId;
        const unitOption = new Option(unitLabel, unitId, true, true);
        const selectedSubIds = subParam ? Array.from(new Set(subParam.split(',').filter(Boolean))) : [];
        const subNames = subName ? subName.split(',').map(s => s.trim()).filter(Boolean) : [];

        prefillSubIds = selectedSubIds;
        prefillSubMeta = selectedSubIds.reduce((acc, id, idx) => {
            let label = subNames[idx] || subNames[0] || id;
            label = label.replace(/^\d+\s*\/\s*/, '');
            acc[id] = label;
            return acc;
        }, {});
        $('.unit_kerja').append(unitOption).trigger('change');

        if (selectedSubIds.length) {
            $('.sub_unit_kerja').val(selectedSubIds).trigger('change');
        }

        prefillSubIdsFinal = selectedSubIds;
    }

    if (katParam) {
        const katIds = Array.from(new Set(katParam.split(',').filter(Boolean)));
        if (katIds.length) {
            $('.kategori_dok').val(katIds).trigger('change');
            prefillKatIdsFinal = katIds;
        } else if (kategoriName) {
            const katOption = new Option(kategoriName, katParam, true, true);
            $('.kategori_dok').append(katOption).trigger('change');
            prefillKatIdsFinal = katParam ? [katParam] : [];
        }
    }

    if ((unitId || subParam || katParam) && typeof index === 'function') {
        index(prefillKatIdsFinal, unitId, prefillSubIdsFinal, '');
    }
});

function loadSubUnitKerja(unitId, selectedSubIds = [], selectedSubMeta = {}){
    $('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');

    $.ajax({
        url: `/select-sub-unit-kerja/${unitId}`,
        method: 'GET',
        success: function(response) {
            if (response?.data) {
                response.data.forEach(unit => {
                    let selected = false;
                    if (selectedSubIds.length) {
                        selected = selectedSubIds.includes(String(unit.id));
                    } else if (authSubUnitKerja) {
                        selected = unit.id === authSubUnitKerja.objectsubunitkerjapegawaifk;
                    }
                    const option = new Option(unit.name, unit.id, false, selected);
                    $('.sub_unit_kerja').append(option);
                });
                if (selectedSubIds.length) {
                    selectedSubIds.forEach(id => {
                        if ($(`.sub_unit_kerja option[value="${id}"]`).length === 0) {
                            const label = selectedSubMeta[id] || id;
                            const opt = new Option(label, id, false, true);
                            $('.sub_unit_kerja').append(opt);
                        }
                    });
                }
                $('.sub_unit_kerja').trigger('change');
            }
        }
    });
}


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

    let html = '';

        html += `
        <div class="row g-3 align-items-start mt-2" id="col-${colCount}">
            <hr class="my-2" />
                <div class="col-12 d-flex justify-content-end">
                    <button type="button"
                            class="btn btn-sm btn-danger"
                            onclick="removeCol(${colCount})">
                        <i class="fa-solid fa-trash"></i> Hapus
                    </button>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Unit <span class="text-danger">*</span></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">
                    <label class="form-label fw-semibold">Sub Unit <span class="text-danger">*</span></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 class="form-label fw-semibold">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}">${dok?.nama_kategori_directory}</option>
                                    `).join('')}
                      </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Nomor Dokumen</label>
                    <div class="input-group">
                        <span class="input-group-text">#</span>
                        <input type="text"
                               class="form-control"
                               name="data[${colCount}][no_dokumen]"
                               placeholder="Contoh: 001/RS/IT/I/2026">
                    </div>
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Tanggal Terbit</label>
                    <input class="form-control"
                            type="date"
                            name="data[${colCount}][date_active]"
                            required>
                </div>

                <div class="col-md-3">
                    <label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>

                    <div class="border rounded-3 p-2 bg-light">
                            <div class="form-check">
                            <input class="form-check-input"
                                    type="radio"
                                    name="data[${colCount}][is_permission]"
                                    id="perm_yes_${colCount}"
                                    value="1"
                                    required>
                            <label class="form-check-label" for="perm_yes_${colCount}">Ya</label>
                            </div>

                            <div class="form-check mt-1">
                            <input class="form-check-input"
                                    type="radio"
                                    name="data[${colCount}][is_permission]"
                                    id="perm_no_${colCount}"
                                    value="2"
                                    required>
                            <label class="form-check-label" for="perm_no_${colCount}">Tidak</label>
                            </div>
                    </div>

                </div>

                <div class="col-md-12">
                    <label for="fileUpload_${colCount}" class="form-label fw-semibold">📂 Upload Dokumen (PDF)</label>

                    <div class="border rounded-3 p-3 bg-white shadow-sm">
                        <input class="form-control file-input"
                            type="file"
                            id="fileUpload_${colCount}"
                            accept=".pdf"
                            name="data[${colCount}][file]">
                        <div class="mt-2 text-success fw-semibold d-none file-name" id="fileName_${colCount}"></div>
                    </div>

                    <div class="form-text text-muted">
                        Format yang didukung: <b>PDF</b> Maksimal <b>10mb</b>.
                    </div>
                </div>

             </div>
        `
        col.append(html)
        let newInput = document.querySelector(`#fileUpload_${colCount}`);
        bindFileUpload(newInput);
        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+'/'+item.name,
                        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}">${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 +'/'+unit.name, 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}">${sub.name}</option>`);
            });
        }
    });
}