{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block js_document_ready %}
    {{ parent() }}

    var $departamentoJudicial = $('#orden_merito_edit_departamentoJudicial');
    $departamentoJudicial.change(function() {

        const departamentoId = this.value;
        // Realiza la solicitud AJAX para cargar las jurisdicciones
        // Reemplaza la URL con la ruta correcta para cargar las jurisdicciones
        console.log("Realizando solicitud AJAX a la URL: /cargar-jurisdicciones/" + departamentoId);

        // Limpia las opciones actuales del campo de selección de jurisdicciones
        var $jurisdiccionSelect = $('#orden_merito_edit_jurisdiccion');
        $jurisdiccionSelect.empty();

        //Agrego la opcion vacia
        const option = document.createElement("option");
        option.value = '';
        option.text = '';
        $jurisdiccionSelect.append(option);
        $jurisdiccionSelect.formSelect(); 

        $.ajax({
            type: "GET", // Método HTTP
            url: '{{ path("cargar_jurisdicciones", {"departamentoId": "PLACEHOLDER"}) }}'.replace('PLACEHOLDER', departamentoId),
            dataType: "json", // Tipo de datos esperados en la respuesta
            success: function(data) {
                console.log("Datos recibidos de la solicitud AJAX:", data);

                var $jurisdiccionSelect = $('#orden_merito_edit_jurisdiccion');
                // Agrega las nuevas opciones al campo de selección de jurisdicciones
                data.forEach(jurisdiccion => {
                    const option = document.createElement("option");
                    option.value = jurisdiccion.id;
                    option.text = jurisdiccion.descrip;
                    $jurisdiccionSelect.append(option);
                });

                $jurisdiccionSelect.formSelect(); 
            },
            error: function(error) {
                console.error("Error en la solicitud AJAX:", error);
            }
        });
    });

    $departamentoJudicial.change();

    $('#{{ form.eliminar.vars.id }}').click( function(e) {
        e.preventDefault();
        swal({
            title: "Borrar",
            text: "¿Está seguro que quiere borrar el Orden de Mérito? \n Evalúe si lo que quiere es enviarlo a borrador",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((aceptar) => {
            if (aceptar) {
                $('form').prop('action', '{{ path('orden_merito_delete', { idView: orden.idView }) }}');
                $('form').submit();
            }
        });
    });
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        {# <li><a href="{{ path('main') }}">Inicio</a></li> #}
        <li><a href="{{ path('orden_merito_index') }}">Ordenes Mérito</a></li>
        <li><a href="{{ path('orden_merito_show_view', {'idView': orden.idView}) }}">{{orden.cargo}} - {{orden.departamentoJudicial}}</a></li>
        <li><a class="active">Editar Orden</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row">
        <div class="col s12 l9">
        <i class="material-icons medium left identidad-color-text">business_center</i>
        <h4 style="margin-top: 12px;">Editar Orden
            {% if orden.estadoRegistro == 'Borrador' %}
                <span style="margin-top: 15px;margin-left: 5px;"><i><sub style="color:darkorange">{Borrador}</sub></i></span>
            {% endif %}
        </h4>
        </div>
    </div>
    <br>
{% endblock %}

{% block body %}
    <div class="col s12 m12 l12">
        <div class="card-panel">
            {{ form_start(form) }} 
                <div class="card-content">
                    <div class="row">
                        <div class="input-field col s12">
                            {{ form_label(form.cargo) }}
                            <br>
                            {{ form_widget(form.cargo) }}
                        </div>
                        <div class="input-field col s12 l6">
                            {{ form_label(form.departamentoJudicial) }}
                            <br>
                            {{ form_widget(form.departamentoJudicial) }}
                        </div>
                        <div class="input-field col s12 l6">
                            {{ form_label(form.jurisdiccion) }}
                            <br>
                            {{ form_widget(form.jurisdiccion) }}
                            <br>
                        </div>
                    </div>
                
                    <div class="divider"></div>
                    <div class="row card-action right-align">
                        {# <br> #}
                        {{ form_label(form.actualizar) }}
                        {{ form_widget(form.actualizar) }}
                
                        {{ form_label(form.cargarDetalles) }}
                        {{ form_widget(form.cargarDetalles) }}

                        {{ form_label(form.eliminar) }}
                        {{ form_widget(form.eliminar) }}

                    </div>
                </div>
            {{ form_end(form) }}

        </div>
    </div>
    {# <div class="col s12 m12 l12"> #}
        <a class="btn waves-effect waves-light left-align" style="margin-right:15px;" href="{{ path('orden_merito_show_view', {'idView': orden.idView}) }}">Volver
            <i class="material-icons right">undo</i>
        </a>
    {# </div> #}
{% endblock %}