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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('gestion_informes_psicologicos_index') }}">Gestión de Informes Psicológicos</a></li>
        <li><a href="{{ path('presentaciones_listado', {'informe':'psicologico'}) }}">Selección de Persona</a></li>
        <li><a class="active">Crear Informe</a></li>
    </ol>
{% endblock %}

{% block javascripts_base %}
    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 %}
    {{ parent() }}
    $('.datepicker').datepicker({
        autoClose: true,
        showClearBtn: true,
        format: 'dd/mm/yyyy',
        container: 'body',
        {# defaultDate: p_defaultDate, #}
        {# yearRange: p_yearRange, #}
        {# maxDate: p_maxDate, #}
        {# setDefaultDate: p_setDefaultDate, #}
        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'
            ],
        }
    });

{% endblock %}

{% block titulo_body %}
<div class="row hide-on-small-only">
    <div class="col s12">
        <i class="material-icons medium left identidad-color-text">edit</i>
        <h4 style="margin-top: 12px;">Crear Informe de {{informe.presentacionAntecedentes.datosPersonales.nombres}} {{informe.presentacionAntecedentes.datosPersonales.apellidos}}</h4>
    </div>
</div>
{% endblock %}

{% block body %}
  
  {{ form_start(form) }} 
    {% set presentacion = informe.presentacionAntecedentes %}
    <br>
    <ul class="collapsible popout">
      <li class="active">
        <div class="collapsible-header" tabindex="0" style="pointer-events:none"> 
          <i class="material-icons identidad-color-text">person</i>Datos Personales: {{ presentacion.datosPersonales.nombres }} {{presentacion.datosPersonales.apellidos}}
        </div>
        <div class="collapsible-body" style="display: block;">
          <div class="row">  <h5>{{ presentacion.datosPersonales.nombres }} {{presentacion.datosPersonales.apellidos}}</h5></div>
          <div class="row">
            <div class="col s12 l3 m3">
              <div class="card">
                <div class="card-image">
                  <img src="{{ asset(informe.presentacionAntecedentes.idView ~ '/400', 'ria_fotos') }}">
                  <span class="card-title">{{presentacion.datosPersonales.nombres}} {{presentacion.datosPersonales.apellidos}}</span>
                </div>
                <div class="card-content">
                </div>
              </div>
            </div>
            <div class="col s12 l6 m6">
              <div class="row">
                <div class=" col s12 l11 m11">
                  <blockquote>
                    <p>DNI {{presentacion.datosPersonales.dni}} - 
                    {% if presentacion.datosPersonales.genero == 'F' %}
                        {{ 'Femenino' }}
                    {% elseif presentacion.datosPersonales.genero == 'M' %}
                        {{ 'Masculino' }}
                    {% else %}
                        {{ 'Género: Otros' }}
                    {% endif %}</p>
                    <p>Nacimiento: {{ presentacion.datosPersonales.fechaNacimiento ? presentacion.datosPersonales.fechaNacimiento|date('d/m/Y') ~ ' - ' : '--' }}
                      {{ presentacion.datosPersonales.nacionalidad ? presentacion.datosPersonales.nacionalidad|title : '--' }}</p>
                    <p><strong>Domicilio actual:</strong>  {{ presentacion.datosPersonales.domCalle ? presentacion.datosPersonales.domCalle: '--' }}
                      nro {{ presentacion.datosPersonales.domNumero ? presentacion.datosPersonales.domNumero : '--' }}, 
                      {{ presentacion.datosPersonales.domLocalidad ? presentacion.datosPersonales.domLocalidad|title : '--' }}
                      ({{ presentacion.datosPersonales.domCodigoPostal }}),
                      Prov. de {{ presentacion.datosPersonales.domLocalidad ? presentacion.datosPersonales.domProvincia : '--' }} </p>
                    <p>
                      {% if presentacion.datosPersonales.email %}
                        <a href="mailto:{{ presentacion.datosPersonales.email}}">{{ presentacion.datosPersonales.email}}</a>
                      {% else %}
                        <a href="!#">--</a>
                      {% endif %}
                    </p>
                    <p>
                      {% if presentacion.datosPersonales.telefono %}
                        <a href="tel:{{ presentacion.datosPersonales.telefono}}">{{ presentacion.datosPersonales.telefono}}</a>
                      {% else %}
                        <a href="!#">--</a>
                      {% endif %}
                    </p>
                  </blockquote>
                </div>
              </div>
            </div>
            <div class="card-panel col s12 m3 l3" style="padding:1.2rem">
              {{ form_row(form.fechaEntrevista) }}
              {{ form_row(form.fechaRecepcion) }}
              {{ form_row(form.evaluador) }}
            </div>
          </div>

          <div class="card-panel">
            <div class="col">
                <div class="row">
                    <div class="col s12 m12 l12">
                      {{ form_label(form.observaciones) }}
                      {{ form_row(form.observaciones, {'label' : false}) }}
                    </div>
                </div>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <div>
        <div class="row" style="justify-content: space-between;">
            <a class="btn identidad-color darken-2 waves-effect waves-light" href="{{ path('gestion_informes_psicologicos_index') }}">
                Volver al listado de informes <i class="material-icons right">undo</i>
            </a>
            <a class="btn identidad-color darken-2 waves-effect waves-light" href="{{ path('presentaciones_listado', {'informe':'psicologico'}) }}">
                Volver al listado de personas <i class="material-icons right">undo</i>
            </a>

            <button class=" btn right identidad-color darken-2 waves-effect waves-light">{{ button_label|default('Guardar') }}
              <i class="material-icons right">save</i>  
            </button>
        </div>
    </div>
  {{ form_end(form) }}

{% endblock %}