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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a class="" href="#">Inicio</a></li>
        <li><a class="" href="{{ path('orden_merito_index') }}">Ordenes Mérito</a></li>
        <li><a class="active" >Nuevo Orden de Mérito</a></li>
        <li><a class="active">Lista de Exámenes</a></li>
        <li><a class="active" href="#">Detalle de Examen de {{tomaExamenFecha.tomaExamen.convocatoriaExamen1.cargo|capitalize ~ (tomaExamenFecha.tomaExamen.convocatoriaExamen2 ? " - " ~ tomaExamenFecha.tomaExamen.convocatoriaExamen2.cargo|capitalize : "") ~ ' del ' ~ tomaExamenFecha.fecha|date('d/m/Y')}}</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
	<div class="row hide-on-small-only">
		<div class="col s12">
			<i style="margin-top:27px" class="material-icons  medium left identidad-color-text text-darken-2">
				history_edu
			</i>
			<h5 style="margin-top: 12px;">{{tomaExamenFecha.tomaExamen.convocatoriaExamen1.cargo|capitalize ~ (tomaExamenFecha.tomaExamen.convocatoriaExamen2 ? " - " ~ tomaExamenFecha.tomaExamen.convocatoriaExamen2.cargo|capitalize : "") }}</h5>
			<h4> 
				Seleccione Examinando del Examen del {{tomaExamenFecha.fecha|format_datetime(pattern="eeee dd 'de' LLLL 'de' Y ", locale='es_AR') |capitalize}}
				<span class="blue-text text-darken-2 small">{{tomaExamenFecha.fecha|format_datetime(pattern="HH:mm", locale='es_AR')}} hs</span>
			</h4>
			<br>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
	{# </script> #}
{% endblock %}

{% block js_document_ready %}

	$('#datatable').dataTable({
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        aLengthMenu: "",
        pageLength: 50,
        bAutoWidth: false,
        "columns": [
            { 
                "data": "foto",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        foto = [
                            '<img src="',
                            data,
                            '" alt="" class="circle responsive-img small" style="height: 50px; width: 50px;">',
                        ].join('');
                        return foto;
                    }
                    return data;
                },
            },
            { "data": "apellidos" },
            { "data": "nombres" },
            { "data": "dni" },
            { "data": "presentismo" },
            { "data": "resultado" },
            { "data": "nota" },
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                    	if(data['resultado'] == '<span class="badge pink lighten-5">Desaprobado</span>' || data['resultado'] == '<span class="badge grey lighten-5">--</span>'){
	                    	$botones = [
		                            ' <a data-target="modal1" class="btn-floating btn-flat modal-trigger  grey darken-2" title="Seleccionar examinando">',
		                            '<i class="material-icons">person_add</i>',
		                            '</a> ',
		                        ].join('');
	                    	}
                        else {
							if (data['urlEdit']) {
								$botones = [
									' <a href="',
									data['seleccionarExaminando'],
									'" class="btn-floating btn-flat identidad-color darken-2" title="Editar Orden">',
									'<i class="material-icons">edit</i>',
									'</a> ',
								].join('');
							} else {
								$botones = [
									' <a href="',
									data['seleccionarExaminando'],
									'" class="btn-floating btn-flat identidad-color darken-2" title="Seleccionar examinando">',
									'<i class="material-icons">person_add</i>',
									'</a> ',
								].join('');
							}
						}
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[5, 'asc'],[ 1, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
             { 
                "name": "foto", 
                "searchable": false, 
                "orderable": false, 
                "targets": 0 
            },
            { 
                "name": "dp.apellidos",   
                "targets": 1
            },
            { 
                "name": "dp.nombres",   
                "targets": 2
            },
            { 
                "name": "dp.dni",   
                "targets": 3
            },
            { 
                "name": "e.presente",   
                "targets": 4
            },
            { 
                "name": "resultado",   
                "targets": 5
            },
            { 
                "name": "e.nota",   
                "targets": 6
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 7
            },
        ],
        "displayStart": 0,
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('examenes_examinandos_datos', {'tomaExamenFecha': tomaExamenFecha.id, 'idView_orden': orden.idView}) }}',
            type: 'POST'
        }
        {% if tomaExamenFecha.numeroActa is null %}
			,
			fnDrawCallback: function( oSettings ) {
				// Ocultar columnas si no esta seteada el numero de acta
				$('#datatable tbody tr').each(function() {
					var fechaCell1 = $(this).find('td:eq(3)'); // Columna del presentismo en la tabla
					var fechaCell2 = $(this).find('td:eq(4)'); // Columna de aprobacion en la tabla
					var fechaCell3 = $(this).find('td:eq(5)'); // Columna de la nota en la tabla
					fechaCell1.hide();
					fechaCell2.hide();
					fechaCell3.hide();
				});
       		}
		{% endif %}
    });
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('select').formSelect(); 

    var select = $('select');
    $('.limpiar').click(function(){
        $("input[type=text]").val("");
        select.prop('selectedIndex', 0); //Sets the first option as selected
        select.material_select();        //Update material select
        form.submit();
    });

    {# $('.modal').modal({ 
        dismissible: false,
    }); #}

{% endblock %}

{% block dialogos_modales %}
      <!-- Modal Structure -->
    <div id="modal1" class="modal card-panel red lighten-4 ">
        <div class="modal-content ">
            <h5>Para añadir un postulante a un Orden de Mérito, debe tener el examen Aprobado.</h5>
        </div>
        <div class="modal-footer">
            <a href="#" class="modal-close waves-effect waves-red btn-flat">Cerrar</a>
        </div>
    </div>
{% endblock %}


{% block body %}
	<div class="row">
		<div class="col s5">
			{% if tomaExamenFecha.territorialidad is not empty %}
				<p>Territorio: {{tomaExamenFecha.territorialidad|join(", ") }}</p>
			{% endif %}
			<div class="col s6"><p> 
				<i class="material-icons identidad-color-text">place</i> {{tomaExamenFecha.lugar|capitalize}}</p>
			</div>
			<div class="col s6">
				<p> <i class="material-icons identidad-color-text">description</i> 
					Acta: 
					{# <a href="#"> #}
						{% if tomaExamenFecha.numeroActa is not null %}
							{{tomaExamenFecha.numeroActa }}
						{% else %}
							Sin Definir
						{% endif %}
					{# </a> #}
				</p>
			</div>
			<div class="col s12">&nbsp;</div>
		</div>
			<div class="col s7 l7" style="padding-left:0px">
				<ul class="collapsible">
					<li>
						<div class="collapsible-header">
							<i class="material-icons">person_pin</i>Sala Examinadora
						</div>
						<div class="collapsible-body">
							<span>
								{% for salaExaminadora in tomaExamenFecha.salaExaminadoras %}
									<p>
										{{ salaExaminadora.examinador.persona.nombre ~ ' ' ~ salaExaminadora.examinador.persona.apellido ~ ' - ' ~ salaExaminadora.examinador.estamento|upper }}
										{% if tomaExamenFecha.numeroActa is not null %}
											{% if salaExaminadora.presente == true %}
												Presente
											{% else %}
												Ausente
											{% endif %}
										{% endif %}
									</p>
								{% else %}
									Sin Definir
								{% endfor %}
							</span>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">school</i> Académicos
						</div>
						<div class="collapsible-body">
							<span class="collection">
								{% for examenAcademico in tomaExamenFecha.examenAcademicos %}
									<p>
										{{ examenAcademico.academico.persona.nombre ~ ' ' ~ examenAcademico.academico.persona.apellido }}
										{% if tomaExamenFecha.numeroActa is not null %}
											{% if examenAcademico.presente == true %}
												Presente
											{% else %}
												Ausente
											{% endif %}
										{% endif %}
									</p>
								{% else %}
									Sin Definir
								{% endfor %}
							</span>
						</div>
					</li>
				</ul>
			</div>
	
	</div>
	<div class="row">
		<div class="col s12">&nbsp;</div>
	</div>
	<div class="card">
			<div class="card-content">
				<div class="row">
					{{ form_start(form) }}
						<div class="input-field col s12 m6 l4">
							{{ form_label(form.textoBusqueda) }}
							{{ form_widget(form.textoBusqueda) }}
						</div>
						<div class="input-field col s12 m2 l2">
							{{ form_label(form.dni) }}
							{{ form_widget(form.dni) }}
						</div>
						<div class="input-field col m2 s12 l2">
							<button id="boton" class="btn identidad-color darken-2 waves-effect waves-light col s12" type="submit" >Buscar<i class="material-icons right">search</i></button>
						</div>
						{% if form.children | filter(v => (v.vars.name != "_token" and v.vars.value != "")) | length > 0 %}
							<div class="input-field col m2 s12 l2">
								<button id="boton" class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="" >Limpiar<i class="material-icons right">close</i></button>
							</div>
						{% endif %}
					{{ form_end(form) }}
				</div>
			</div>
		</div>

	<div class="row">
		<div class="col s12">
			{% if tomaExamenFecha.examinandos is not empty %}
				<table id="datatable" class= "responsive-table highlight centered">
				    <thead>
				      <tr>
						<th></th>
						<th>Apellidos</th>
						<th>Nombres</th>
						<th class="hide-on-small-only">DNI</th>
							{% if tomaExamenFecha.numeroActa is not null %}
								<th class="hide-on-small-only">Asistencia</th>
								<th class="hide-on-small-only">Resultado</th>
								<th class="hide-on-small-only">Nota</th>
							{% endif %}
						<th>Acciones</th>
				      </tr>
				    </thead>

				    <tbody>
					      <tr>
					        <td class="hide-on-small-only"></td>
					        <td class="hide-on-small-only"></td>
					        <td></td>
					        {% if tomaExamenFecha.numeroActa is not null %}
					        	<td class="hide-on-small-only"></td>
					        	<td class="hide-on-small-only"></td>
			        			<td class="hide-on-small-only"></td>
		        			{% endif %}
					        <td></td>
					      </tr>
				    </tbody>
				</table>
			{% endif %}
		</div>
	</div>

{% endblock %}