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

{% block js_document_ready %}
    
    //defino variable para fecha actual
    function addZeroBefore(n) {
      return (n < 10 ? '0' : '') + n;
    }

    //defino variable para fecha actual
    var currentdate = new Date();
    var datetime = "Extraído el: " + currentdate.getDate() + "/"
                    + addZeroBefore((currentdate.getMonth()+1))  + "/"
                    + currentdate.getFullYear() + "   " 
                    + addZeroBefore(currentdate.getHours()) + ":" 
                    + addZeroBefore(currentdate.getMinutes()) + ":"
                    + addZeroBefore(currentdate.getSeconds());
    $('#datatable').dataTable({
        pageLength: 15,
        dom: 'Bfrtip',

        buttons: [
            {
                extend: 'excel',
                title: '{{tomaExamenFecha.tomaExamen.convocatoriaExamen1.cargo|capitalize ~ (tomaExamenFecha.tomaExamen.convocatoriaExamen2 ? " - " ~ tomaExamenFecha.tomaExamen.convocatoriaExamen2.cargo|capitalize : "") ~ ' del ' ~ tomaExamenFecha.fecha|date('d/m/Y')}}',
                text: 'Excel <i class="material-icons teal-text text-darken-2">description</i>',
                titleAttr: 'Descargar Excel',
                exportOptions: {
                    columns: [1, 2, 3, 4, 5, 6, 7, 8] // Incluye todas las columnas, incluida la "fechaRespuesta" y la fecha de Lectura
                }
            },
            {

                extend: 'pdf',
                title: '{{tomaExamenFecha.tomaExamen.convocatoriaExamen1.cargo|capitalize ~ (tomaExamenFecha.tomaExamen.convocatoriaExamen2 ? " - " ~ tomaExamenFecha.tomaExamen.convocatoriaExamen2.cargo|capitalize : "") ~ ' del ' ~ tomaExamenFecha.fecha|date('d/m/Y')}}',
                text: 'PDF <i class="material-icons white-text red darken-4">picture_as_pdf</i>',
                titleAttr: 'Descargar PDF',
                exportOptions: {
                        columns: [1, 2, 3, 4, 5, 6, 7, 8] // Incluye todas las columnas, incluida la "fechaRespuesta" y la fecha de Lectura
                        },
                //customizo footer con fecha de extracción y número de página
                customize: function(doc) {
                  doc['footer'] = (function(page, pages) {
                    return {
                      columns: [
                        {
                          alignment: 'center',
                          text: [
                            { text: datetime, italics: true },
                          ]
                        },
                        {
                          alignment: 'center',
                          text: [
                            { text: page.toString(), italics: true },
                            ' de ',
                            { text: pages.toString(), italics: true }
                          ]
                        },

                      ],
                      margin: [2, 0]
                    }
                  });
                }
            },
            'colvis'
        ],
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json"
        },
        aLengthMenu: "",
        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": "dni" },
            { "data": "nombre_apellido" },
            { "data": "email" },
            { "data": "telefono" },
            { "data": "leida" }, 
            { "data": "fechaLectura",
                "visible": false 
            }, 
            { "data": "respuesta" }, 
            { "data": "fechaRespuesta",
              "visible": false
            }, 

        ],
        order: [[ 0, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "foto", 
                "searchable": false, 
                "orderable": false, 
                "targets": 0 
            },
            { 
                "name": "p.dni", 
                "targets": 1
            },
            { 
                "name": "nombre_apellido",   
                "targets": 2
            },
            { 
                "name": "email", 
                "orderable": false,    
                "targets": 3
            },
            { 
                "name": "telefono",
                "orderable": false,     
                "targets": 4
            },
            { 
                "name": "leida",  
                "targets": 5
            }, 
            { 
                "name": "fechaLectura",  
                "targets": 6
            }, 
            { 
                "name": "respuesta",  
                "targets": 7
            }, 
            { 
                "data": "fechaRespuesta",
                "targets": 8
            },          
        ],
        serverSide: false,
        processing: true,
        ajax: {
            url: '{{ path('ver_notificados_datos', {'tomaExamenFecha': tomaExamenFecha.id}) }}',
            type: 'POST',
        }
    });


    // 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();
    });
    $('.tooltipped').tooltip();
{% endblock %}


{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a class="" href="#">Inicio</a></li>
        <li><a class="" href="{{ path('examenes_listado') }}">Lista de Exámenes</a></li>
        <li><a class="active">Lista de Notificados para 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 %}

{% endblock %}


{% block body %}
    <div class="row">
        <div class="col l6">
            <div class="col s12 l12">
                <h4>Notificados <span class="btn text-darken-2 small ml-2 modalNotificacionEnviada"><i class="material-icons white-text">visibility</i> Ver Notificación enviada</span></h4>
                <i 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><br>
                <h4>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 ml-3">{{tomaExamenFecha.fecha|format_datetime(pattern="HH:mm", locale='es_AR')}} hs</span>
                </h4>                              
                {% 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: 
                        {% if tomaExamenFecha.numeroActa is not null %}
                            {{tomaExamenFecha.numeroActa }}
                        {% else %}
                            Sin Definir
                        {% endif %}
                    </p>
                    <br>
                </div>
            </div>
        </div>
        <div class="col s6">
			<div class="card">
				<div class="card-content">
					<div class="row" style="">
						<div class="col s9">
							<div class="chart-container">
								<canvas id="chart" width="400" height="200"></canvas>
							</div>
						</div>
						<div class="col s3" style="margin-top: 20px;">
							<div class="row">
								<div class="col s9" style="display: flex; align-items: center;">
									<svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="green" /></svg>
									<span style="color: black; margin-left: 5px;">Notificados:</span>
								</div>
								<div class="col s3" style="display: flex; align-items: center;">
									{{ examinandosNotificados }}
								</div>
							</div>
							<div class="row">
								<div class="col s9" style="display: flex; align-items: center;  padding-left: 2rem">
									<svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="rgba(75, 192, 192, 0.5)" /></svg>
									<span style="color: black; margin-left: 5px;">Resp. SI:</span>
								</div>
								<div class="col s3" style="display: flex; align-items: center;">
									{{ cantRespSi }}
								</div>
							</div>
							<div class="row">
								<div class="col s9" style="display: flex; align-items: center;  padding-left: 2rem">
									<svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="rgba(255, 99, 132, 0.5)" /></svg>
									<span style="color: black; margin-left: 5px;">Resp. NO:</span>
								</div>
								<div class="col s3" style="display: flex; align-items: center;">
									{{ cantRespNo }}
								</div>
							</div>
							<div class="row">
								<div class="col s9" style="display: flex; align-items: center;  padding-left: 2rem">
									<svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="rgba(255, 206, 86, 0.5)" /></svg>
									<span style="color: black; margin-left: 5px;">Sin Resp.:</span>
								</div>
								<div class="col s3" style="display: flex; align-items: center;">
									{{ cantSinResponder }}
								</div>
							</div>
							<div class="row">
								<div class="col s9" style="display: flex; align-items: center;">
									<svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="rgba(255, 99, 132, 0.2)" /></svg>
									<span style="color: black; margin-left: 5px;">Sin Notificar:</span>
								</div>
								<div class="col s3" style="display: flex; align-items: center;">
									{{ cantSinNotificar }}
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
        {# <div class="col l6">
            <div class="col s12 l12">
                <br>
                <div class="card">
                    <div class="card-content">
                        <div class="chart-container">
                            <canvas id="chart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div> #}
    </div>

    <div class="card">
        <div class="card-content">
            <div class="row">
                {{ form_start(form) }}
                    <div class="input-field col s12 m6 l3">
                        {{ 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 s12 m2 l2">
                        {{ form_label(form.respuesta) }}
                        {{ form_widget(form.respuesta) }}
                    </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>
                    <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>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
<br>
    <table id="datatable">
        <thead>
            <tr>
                <th></th>
                <th>DNI</th>
                <th>Nombre y Apellido</th>
                <th class="hide-on-small-only">Email</th>
                <th>Teléfono</th>
                <th class="hide-on-small-only">Leída</th>
                <th class="hide-on-small-only">Fecha Lectura</th>
                <th>Respuesta</th>
                <th class="not-export-col">Fecha Respuesta</th>
            </tr>
        </thead>

        <tbody> 

        </tbody>
    </table>
    <div id="modal2" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4 class="row">
                <div class="col s6 left-align">Notificación enviada</div>
                <div class="col s6 right-align">{{ tomaExamenFecha.tomaExamenFechaNotificacion.fechaNotificacion|date("d/m/Y H:i") }}</div>
            </h4>
            <hr>
            <br>
            <div class="row">
                <div class="col s12 l9">
                    <i class="material-icons medium left identidad-color-text text-darken-2">notifications</i>
                    <h4 style="margin-top: 12px;"><div id="asuntoForm">Asunto: {{notificacionEnviadaEjemplo.notificacionUsuario.notificacion.asunto}}</div></h4>
                </div>
            </div>
            <div class="col s12 l12">
                <div class="card darken-1">
                    <div class="card-content">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td><p><div id="mensajeForm" class="">{{notificacionEnviadaEjemplo.notificacionUsuario.notificacion.mensaje|raw}}</div></p></td>
                                </tr>
{#                                 <tr>
                                    <td>
                                        <p>&nbsp;</p>
                                        <p>Por motivos de organización, favor confirme si va a poder asistir al examen escrito:</p>
                                        <p>&nbsp;</p>
                                        <div class="row">
                                            <a class="btn-large col s5 l3">SI</a>
                                            <div class="col s2 l1"> </div>
                                            <a class="btn-large col s5 l3">NO</a>
                                        </div>
                                    </td>
                                </tr> #}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn">Cerrar</a>
        </div>
    </div>
  
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    {#<script src="{{ asset('js/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js') }}"></script>#}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            const chartData = {{ chartData|json_encode|raw }};
            const ctx = document.getElementById('chart').getContext('2d');
            function resizeChart() {
                const parentDiv = ctx.canvas.parentNode;
                ctx.canvas.width = parentDiv.clientWidth;
                ctx.canvas.height = parentDiv.clientHeight;
                // Si ya hay un gráfico, lo destruye y vuelve a crear para que se actualice con el nuevo tamaño
                if (chart) {
                    chart.destroy();
                }
                chart = new Chart(ctx, chartData);
            }
            
            // Llama a resizeChart al cargar la página y cada vez que cambie el tamaño de la ventana
            let chart;
            resizeChart();
            window.addEventListener('resize', resizeChart);
            // Personaliza los ticks del eje Y para que solo muestren números enteros
            Chart.defaults.scale.ticks.precision = 0;
        });
        $( ".modalNotificacionEnviada" ).click(function() {
            /*var content = CKEDITOR.instances['notificacion_mensaje'].getData();
            var asunto = $("input[name='notificacion[asunto]").val();
            $('#asuntoForm').html('Asunto: ' + asunto);
            $('#mensajeForm').html(content);*/
            $('#modal2').modal();
            $('#modal2').modal('open'); 
            var links = $('#mensajeForm a');
            links.each(function() {
                $(this).removeAttr('href');
            });
        });  
    </script>
{% endblock %}