{% 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 class="active"> Nueva Toma de Posesión </a></li>
    </ol>
{% 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(); 

{% endblock %}

{% block titulo_body %}
    <div class="row" style="margin-top: 1%;">
        <div class="col s12 l9">
            <i class="material-icons medium left identidad-color-text text-darken-2">person</i>
            <h4 >Nueva Toma de Posesión</h4>
        </div>
    </div>
{% 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>
      
                <div class="row">
                    <div class="input-field col s12 m2 l6">
                        {{ 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>
            </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_index_limpiar') }}">Volver.
            <i class="material-icons right">undo</i>
        </a>
    {{ form_end(form) }}
      

{% endblock %}