$(function () {
    const toggleIcon = (el, fromClass, toClass) => $(el).removeClass(fromClass).addClass(toClass);

    const ocultaTodos = () => {
        toggleIcon('.datalist .icono', 'ing-cancelar iconoAzul pointer', 'ing-buscar');
        $('.datalist ul').hide();
    };

    $(document)
        .on('click', '.datalist-input,.icono', function () {
            const parent = $(this).parent();
            $(".datalist ul:visible").not(parent.find('ul')).siblings('.datalist-input').trigger('click');
            if (parent.find('ul').is(':visible') || parent.hasClass("disabled")) return ocultaTodos();

            parent.find('ul, .datalist-input').show();
            toggleIcon(parent.find('.icono'), 'ing-buscar', 'ing-cancelar iconoAzul pointer');
        })
        .on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
            const parent = $(this).closest('.datalist');
            parent.find('.datalist-input').text($(this).text().trim());
            parent.find("input[type=hidden]").val($(this).data('id'));
            $('.datalist li').removeClass("selected");
            $(this).addClass("selected");
            parent.removeClass("datalist-invalid");
            ocultaTodos();
        })
        .on('click', (e) => {
            if (!$(e.target).closest('.datalist').length) ocultaTodos();
        });

    $('.modal').on('hide.bs.modal', ocultaTodos);
});
const setDatalist = (selector, value = -1) => {
    const parent = $(selector).closest('.datalist');
    parent.find('ul li:not(.not-selectable)').each(function () {
        if ($(this).data("id") !== value) return;
        parent.find('.datalist-input').text($(this).text().trim());
        $(selector).val(value);
        $('.datalist li').removeClass("selected");
        $(this).addClass("selected");
    });
}
const makeRequiredDatalist = (selector, required = true) => $(selector).closest('.datalist').toggleClass("required", required);