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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="#">Inicio</a></li>
        <li><a href="{{ path('toma_posesion_index_limpiar') }}">Lista de Tomas de Posesión</a></li>
        <li><a href="{{ path('toma_posesion_show', {'idView': tp.idView}) }}"> Toma de Posesión de {{tp.apellidos}}, {{tp.nombres}}</a></li>
        <li><a class="active"> Editar</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row" style="margin-top: 1%;">
        <div class="col s12 l12"
            <i class="material-icons medium left identidad-color-text text-darken-2">person</i>
            <h4 >Editar toma de posesión de {{tp.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}, {{tp.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}</h4>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
    {{ parent() }}
{% endblock %}

{% block javascripts_base %}
    var cleave = new Cleave('#new_toma_posesion_fechaDecreto', {
        date: true,
        delimiter: '/',
        datePattern: ['d', 'm', 'Y']
    });

    var cleave2 = new Cleave('#new_toma_posesion_posesion', {
        date: true,
        delimiter: '/',
        datePattern: ['d', 'm', 'Y']
    });

    function initDateFormat( datePicker ) {
        var selectedDate = ( typeof datePicker.date === 'undefined' || datePicker.date === null ) ? datePicker.options.defaultDate : datePicker.date;
        var shortWeekdays = datePicker.options.i18n.weekdaysShort; 
        var shortMonths = datePicker.options.i18n.monthsShort; 
        var day = selectedDate.getDate();
        var weekday = shortWeekdays[ selectedDate.getDay() ];
        var month = shortMonths[ selectedDate.getMonth() ];

        var formattedDate = weekday + ', ' + day + ' ' + month;
        document.querySelector(".datepicker-date-display .date-text").innerHTML = formattedDate;
        document.querySelector(".datepicker-date-display .year-text").innerHTML = selectedDate.getFullYear();
    } 


{% endblock %}

{% block js_document_ready %}
 $('.datepicker').datepicker({
        autoClose: true,
        showClearBtn: true,
        format: 'dd/mm/yyyy',
        container: 'body',
        onDraw: function (datePicker) { 
            // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
            $('.datepicker-container').find('.datepicker-select').addClass('browser-default');
            $(".datepicker-container .select-dropdown.dropdown-trigger").remove();
        },
        onOpen: function (p) {
            var instance = M.Datepicker.getInstance(this.el);
            var d = $(this.el).parent().parent().find('input').val().split(/[^0-9]/);
            var newDate = new Date(d[2], d[1] - 1, d[0]);
            instance.setDate(newDate);
            initDateFormat(instance);
        },
        onSelect: function(date) {
            var day = String(date.getDate()).padStart(2, '0');
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var year = String(date.getFullYear());
            var fecha = day + '/' + month + '/' + year;
            var inputFecha = $(this.el).parent().parent().find('input');
            inputFecha.val(fecha);
            inputFecha.siblings('label').addClass('active');
        },
        i18n: {
            cancel:	'Cancelar',
            clear: 'Limpiar',
            done: 'Aceptar',
            weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysShort: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysAbbrev: ["D", "L", "M", "M", "J", "V", "S"],
            today: 'Hoy',
            months: [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ],
            monthsShort: [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ],
        }
    });

    $('select').formSelect(); 
    
    //Muestro los errores de los selects
    var helpers = $(this).find('span.helper-text').siblings('.select-wrapper').siblings('span.helper-text');
    if(helpers)
    {
        helpers.each(function() {
            var elemento = $(this);
            elemento.text(elemento.attr('data-error'));
        });
        helpers.attr("style", "color:#F44336");
        helpers.siblings('.select-wrapper').find('input.select-dropdown').prop('class', 'invalid');
    }

    var $selectCargos = $('#new_toma_posesion_cargoJusticia');
    if ($selectCargos.hasClass('autocomplete')) { 
        // Selecciona el input dentro del contenedor del select
        var $selectWrapper = $selectCargos.closest('.select-wrapper');
        var $autocompleteInput = $selectWrapper.find('input.select-dropdown');
        // Agrega la clase "autocomplete" al input
        $autocompleteInput.addClass('autocomplete');
        $selectWrapper.find('.caret').remove();
        $autocompleteInput.removeClass('dropdown-trigger');
        $autocompleteInput.removeClass('select-dropdown');
        $autocompleteInput.attr("readonly", false);
        $autocompleteInput.autocomplete({
            data: {
                {% for choice in form.cargoJusticia.vars.choices %}
                    "{{ choice.label }}": null,
                {% endfor %}
            },
            limit: 5,
            onAutocomplete: function(text) {
                // Callback cuando se selecciona un elemento del autocompletado
                $('input.autocomplete').val(text);
                var selectorOption = 'option:contains("'+text+'")';
                var valor = $('input.autocomplete').siblings('#new_toma_posesion_cargoJusticia').children(selectorOption).val();
                $('#new_toma_posesion_cargoJusticia').val(valor);
            }
        }); 
    }

{% endblock %}

{% block body %}
    {{ form_start(form) }}
        <div class="card">
            <div class="card-content">
                <div class="row">
                    <div class="input-field col s12 m2 l5">
                        {{ form_label(form.apellidos) }}
                        {{ form_widget(form.apellidos) }}
                    </div>
                    <div class="input-field col s12 m2 l5">
                        {{ form_widget(form.nombres) }}
                        {{ form_label(form.nombres) }}
                    </div>
                    <div class="input-field col s12 m6 l2">
                        {{ form_widget(form.dni) }}
                        {{ form_label(form.dni) }}
                    </div>
                </div>
                <br>

                <div class="row">
                    <div class="col s12 m2 l3" style="padding-left: 0px;">
                        <div class="input-field col s11 m10 l10">
                            {{ form_label(form.fechaDecreto) }}
                            {{ form_widget(form.fechaDecreto) }}
                            {# <span class="helper-text" data-error="ELEGI UNO." style="color:#F44336;display:none" id="textoError">Debe seleccionar una Fecha de Decreto</span> #}
                        </div>
                        <div class="input-field col" style="padding-left:0; padding-top: 4%; margin-right: 1%; padding-right: 0;">
                            <a id="btnFechaDecreto" class="identidad-color-text datepicker " href="#"  style="background:transparent; border:none; ">
                                <i class="material-icons">calendar_today</i>
                            </a>
                        </div>
                    </div>
                    <div class="input-field col s12 m2 l3">
                        {{ form_widget(form.tipoDecreto) }}
                        {{ form_label(form.tipoDecreto) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.numeroDecreto) }}
                        {{ form_widget(form.numeroDecreto) }}
                    </div>

                    <div class="col s12 m2 l3" style="padding-left: 0px;">
                        <div class="input-field col s11 m10 l10">
                            {{ form_label(form.posesion) }}
                            {{ form_widget(form.posesion) }}
                            {# <span class="helper-text" data-error="ELEGI UNO." style="color:#F44336;display:none" id="textoError">Debe seleccionar una Fecha de Posesión</span> #}
                        </div>
                        <div class="input-field col" style="padding-left:0; padding-top: 4%; margin-right: 1%; padding-right: 0;">
                            <a id="btnFechaPosesion" class="identidad-color-text datepicker " href="#"  style="background:transparent; border:none; ">
                                <i class="material-icons">calendar_today</i>
                            </a>
                        </div>
                    </div>
                </div>
                <br>

                {% if tp.cargoJusticia is null %}
                    <div class="row">
                        <div class="input-field col s12 m2 l6">
                            {{ form_widget(form.cargo) }}
                            {{ form_label(form.cargo) }}
                        {#</div>
                         <div class="input-field col s12 m6 l4"> #}
                            {# select_param(form.cargo, multiple, orden, autocomplete #}
                            {# {{ select_param(form.cargo, true, 'ASC', true) | raw }} #}
                        </div>
                        <div class="input-field col s12 m2 l6">
                            {{ form_widget(form.cargoJusticia) }}
                            {{ form_errors(form.cargoJusticia) }}
                            {{ form_label(form.cargoJusticia) }}
                        </div>
                    </div>
               
                    <div class="row">
                        <div class="input-field col s12 m2 l7">
                            {{ form_label(form.asiento) }}
                            {{ form_widget(form.asiento) }}
                        </div>
                    </div>
                {% else %}
                    <div class="row">
                        <div class="input-field col s12 m2 l6">
                            {# select_param(form.cargo, multiple, orden, autocomplete #}
                            {# {{ select_param(form.cargoJusticia, false, 'ASC', true) | raw }} #}
                            {{ form_widget(form.cargoJusticia) }}
                            {{ form_label(form.cargoJusticia) }}
                        </div> 
                        <div class="input-field col s12 m2 l5">
                            {{ form_label(form.asiento) }}
                            {{ form_widget(form.asiento) }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>

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

        <a class="btn waves-effect waves-light left-align" style="margin-top:2%;" href="{{ path('toma_posesion_show', {'idView': tp.idView}) }}">Volver.
            <i class="material-icons right">undo</i>
        </a>
    {{ form_end(form) }}
{% endblock %}