{% extends '@EasyAdmin/crud/new.html.twig' %}

{% block head_javascript %}
    {# importacion del componente TomSelect que usa EasyAdmin #}
    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
    {{ parent() }}
    {{ importmap('app') }}
    <script>
    
        document.addEventListener('DOMContentLoaded', function() {
            var divDepartamento = document.getElementById('Concurso_departamentoJudicial-ts-label').parentElement;
            var divRegion = document.getElementById('Concurso_region-ts-label').parentElement;
            var divJurisdiccion = document.getElementById('Concurso_jurisdiccion-ts-label').parentElement;
            divDepartamento.style.display = 'none';
            divRegion.style.display = 'none';
            divJurisdiccion.style.display = 'none';  

            var tipoSelect = document.querySelector("#Concurso_tipoTerritorialidad");
            tipoSelect.addEventListener('change', actualizarVisibilidad);
            tipoSelect.dispatchEvent(new Event("change")); 

            var selectDepartamentos = document.querySelector("#Concurso_departamentoJudicial");
            selectDepartamentos.addEventListener('change', actualizarJurisdicciones);
            selectDepartamentos.dispatchEvent(new Event("change")); 
        });
        
        function actualizarVisibilidad() {
            var divDepartamento = document.getElementById('Concurso_departamentoJudicial-ts-label').parentElement;
            var divRegion = document.getElementById('Concurso_region-ts-label').parentElement;
            var divJurisdiccion = document.getElementById('Concurso_jurisdiccion-ts-label').parentElement;
            var valor = this.value;
            switch (valor) {
                case 'departamento':
                    divDepartamento.style.display = 'block';
                    divRegion.style.display = 'none';
                    divJurisdiccion.style.display = 'none';
                    break;
                case 'region':
                    divRegion.style.display = 'block';
                    divJurisdiccion.style.display = 'none';
                    divDepartamento.style.display = 'none';
                    break;
                case 'jurisdiccion':
                    divJurisdiccion.style.display = 'block';
                    divRegion.style.display = 'none';
                    divDepartamento.style.display = 'block';
                    actualizarJurisdicciones();
                    break;
                case 'provincia':
                    divDepartamento.style.display = 'none';
                    divRegion.style.display = 'none';
                    divJurisdiccion.style.display = 'none';
                default:
                    break;
            }
        }

        function actualizarJurisdicciones() {
            var tipoSelect = document.querySelector("#Concurso_tipoTerritorialidad");
            var SelectDepto = document.querySelector("#Concurso_departamentoJudicial");
            if(tipoSelect.value == 'jurisdiccion' && SelectDepto.value){
                var idDepto = SelectDepto.value;
                var url = "{{ path('admin_get_jurisdicciones_departamento', {'idDepto':1 }) }}";
                url = url.replace('/1', '/'+idDepto);
                $.get(url,function(data) {
                    var selectJurisdiccion = $('#Concurso_jurisdiccion');
                    var selectInstance = selectJurisdiccion[0].tomselect;
                    selectInstance.clearOptions();
                    data.forEach(jurisdiccion => {
                        selectInstance.addOption({
                            value: jurisdiccion.id,
                            text: jurisdiccion.nombre,
                        });
                    })
                    selectInstance.refreshOptions();
                },"json");
            }
        }
    </script>
{% endblock %}

{% block page_actions %}
    {% for action in entity.actions %}
        {% if 'a' == action.htmlElement %}
            <a class="{{ isIncludedInDropdown|default(false) ? 'dropdown-item' }} {{ action.cssClass }}"
            href="{{ action.linkUrl }}"
            {% for name, value in action.htmlAttributes %}{{ name }}="{{ (value.trans is defined ? value|trans : value)|e('html_attr') }}" {% endfor %}>
                {%- if action.icon %}<i class="action-icon {{ action.icon }}"></i> {% endif -%}
                {%- if action.label is not empty -%}<span class="action-label">{{ action.label|trans|raw }}</span>{%- endif -%}
            </a>
        {% elseif 'button' == action.htmlElement %}
            {% if 'saveAndContinue' == action.name %}
                {% set clase = action.cssClass|replace({'btn-secondary':'btn-primary'}) %}
            {% else %}
                {% set clase = action.cssClass|replace({'btn-primary':'btn-secondary'}) %}
            {% endif %}
            <button class="{{ clase }}" {% for name, value in action.htmlAttributes %}{{ name }}="{{ (value.trans is defined ? value|trans : value)|e('html_attr') }}" {% endfor %}>
                <span class="btn-label">
                    {%- if action.icon %}<i class="action-icon {{ action.icon }}"></i> {% endif -%}
                    {%- if action.label is not empty -%}<span class="action-label">{{ action.label|trans|raw }}</span>{%- endif -%}
                </span>
            </button>
        {% endif %}

    {% endfor %}
{% endblock %}