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

{% block stylesheets %}
    {{ parent() }}
    <style>
        .cke_dialog_body select {
			display: initial;
		}
    </style>
{% endblock %}

{% block javascripts_base %}
    function initDateFormat( datePicker ) {
        {# console.debug(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 = instance.el.value.split(/[^0-9]/);
            var newDate = new Date(d[2], d[1] - 1, d[0]);
            instance.setDate(newDate);
            initDateFormat(instance);
        },
        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'
            ],
        }
    });

    $('.timepicker').timepicker({
        container: 'body',
        autoClose: true,
        twelveHour: false,
        showClearBtn: true,
        onDraw: function () {
            // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
            $('.timepicker-container').find('.timepicker-select').addClass('browser-default');
            $(".timepicker-container .select-dropdown.dropdown-trigger").remove()
        },
        i18n: {
            cancel:	'Cancelar',
            clear: 'Limpiar',
            done: 'Aceptar',
        }
    });
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('historial') }}">Historial de Sesiones</a></li>
        {% if sesion.id %}<li><a href="{{ path('orden', { 'idView': sesion.idView }) }}">Sesion del día - {{ sesion.fechaSesion|date('d/m/Y') }}</a></li>{% endif %}
        <li class="active">{{ sesion.id ? 'Editar' : 'Nueva' }} Sesión</li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <i class="material-icons medium left identidad-color-text">list</i>
    <h4 style="margin-top: 12px;">{{ sesion.id ? 'Editar' : 'Nueva' }} Sesión</h4>
{% endblock %}

{% block body %}
    {# <div class="card-panel"> #}
        {{ include('od/sesion/_form.html.twig') }}
    {# </div> #}
{% endblock %}