$(document).ready(function () {
    const idSede = $('#id_sede').val();

    if (!idSede) {
        console.error('No existe id_sede');
        $('#id_codigoegreso').html('<option value="">No existe sede</option>');
        return;
    }

    if (!window.codigoEgresoConfig) {
        console.error('No existe window.codigoEgresoConfig');
        $('#id_codigoegreso').html('<option value="">Falta configuracion</option>');
        return;
    }

    const URL_CODIGO_EGRESO = window.codigoEgresoConfig.urlCodigoEgreso;
    const URL_CODIGO_EGRESO_DETALLE = window.codigoEgresoConfig.urlCodigoEgresoDetalle;
    const URL_CONCEPTOS = window.codigoEgresoConfig.urlConceptos;
    const URL_DETALLES = window.codigoEgresoConfig.urlDetalles;

    function cargarCodigoEgreso() {
        $('#id_codigoegreso').html('<option value="">Cargando...</option>');

        $.ajax({
            type: 'GET',
            url: `${URL_CODIGO_EGRESO}/${idSede}`,
            dataType: 'json',
            success: function (response) {
                let opciones = '<option value="">Elige una opcion</option>';

                if (Array.isArray(response) && response.length > 0) {
                    $.each(response, function (index, item) {
                        opciones += `<option value="${item.id}">${item.codigo} - ${item.nombre}</option>`;
                    });
                } else {
                    opciones = '<option value="">No hay registros</option>';
                }

                $('#id_codigoegreso').html(opciones);
                $('#id_codigoegresodetalle').html('<option value="">Seleccione codigo egreso</option>');
            },
            error: function (xhr) {
                console.error('Error cargando codigo_egresos:', xhr.status, xhr.responseText);
                $('#id_codigoegreso').html('<option value="">No se pudo cargar</option>');
            }
        });
    }

    $('#id_codigoegreso').on('change', function () {
        const idCodigoEgreso = $(this).val();

        if (!idCodigoEgreso) {
            $('#id_codigoegresodetalle').html('<option value="">Seleccione codigo egreso</option>');
            return;
        }

        $('#id_codigoegresodetalle').html('<option value="">Cargando detalle...</option>');

        $.ajax({
            type: 'GET',
            url: `${URL_CODIGO_EGRESO_DETALLE}/${idCodigoEgreso}/${idSede}`,
            dataType: 'json',
            success: function (response) {
                let opciones = '<option value="">Elige una opcion</option>';

                if (Array.isArray(response) && response.length > 0) {
                    $.each(response, function (index, item) {
                        opciones += `<option value="${item.id}">${item.codigo} - ${item.nombre}</option>`;
                    });
                } else {
                    opciones = '<option value="">No hay detalles</option>';
                }

                $('#id_codigoegresodetalle').html(opciones);
            },
            error: function (xhr) {
                console.error('Error cargando codigo_egreso_detalles:', xhr.status, xhr.responseText);
                $('#id_codigoegresodetalle').html('<option value="">No se pudo cargar</option>');
            }
        });
    });

    cargarCodigoEgreso();

    function activarAutocomplete(selector, urlBase) {
        if (!urlBase || !$(selector).length) {
            return;
        }

        $(selector).typeahead({
            minLength: 1,
            delay: 150,
            source: function (query, process) {
                return $.get(`${urlBase}/${idSede}`, { q: query }, function (response) {
                    return process(Array.isArray(response) ? response : []);
                });
            },
            autoSelect: true,
            items: 10
        });
    }

    activarAutocomplete('#concepto', URL_CONCEPTOS);
    activarAutocomplete('#detalle', URL_DETALLES);
});
