{% block title %}Integridad Fotografica{% endblock %}
{% extends 'base_basic.html.twig' %}

{% block body %}
    <style>
        .container {
            width: 80%;
            max-width: 3280px;
        }

        .textArea {
            height: auto;
            padding: .5em;
        }
    </style>



    <!-- PRINCIPAL CONTENT -->
    <div class="container-fluid">


        <div class="row">
            <div class="col s12 m6 l6">
                <h4>Datos del candidato</h4>
            </div>
        </div>

        <div class="row">
            {% for idPicture in idPictures %}
                <div class="col  s2">
                    <img src="/uploads/{{ idPicture }}"  class="img-fluid">
                </div>
            {% endfor %}
        </div>

        <!-- end Modal -->

        <form id="candidate-form" action="" method="post">
            <input type="hidden" name="friId" id="friId"
                   value="{{ analysisData.friId }}">
            <div class="row">
                <div class="col s12 m6 l4">
                    <h6>Nombre del candidato</h6>
                    <input value="{{ analysisData.candidateData.name }} {{ analysisData.candidateData.firstLastname }} {{ analysisData.candidateData.secondLastname }}"
                           id="txtName" name="name"
                           type="text" class="validate" readonly="readonly" readonly="readonly">
                </div>
                <div class="col s12 m6 l4">
                    <h6>UUID</h6>
                    <input value="{{ analysisData.candidateData.candidateProfiles[0].uuid }}" id="txtUuid" name="uuid"
                           type="text" readonly="readonly"/>
                </div>
                <div class="col s12 m6 l4">
                    <h6>Email</h6>
                    <input value="{{ analysisData.candidateData.candidateProfiles[0].email }}" id="txtEmail"
                           name="email"
                           type="email" readonly="readonly">
                </div>
            </div>
            <div class="row">
                <div class="col s12 m6 l4">
                    <h6>CURP</h6>
                    <input value="{{ analysisData.candidateData.nationalId }}" readonly="readonly"
                           id="txtCurp" name="nationalId" type="text" class="validate">
                </div>
                <div class="col s12 m6 l4">
                    <h6>Fecha de nacimiento</h6>
                    <input value="{{ analysisData.candidateData.birthDate|date("d-m-Y") }}"
                           id="txtCumple"
                           name="birthdate" type="text"
                           placeholder="YYYY-MM-DD" class="validate" readonly="readonly">
                </div>
                <div class="col s12 m6 l4">
                    <h6>Fecha Procesamiento Fotos</h6>
                    <input value="{{ analysisData.processDatetime | date("Y-m-d H:i:s") }}" id="txtCumple"
                           name="birthState" type="text" class="validate" readonly="readonly">
                </div>
            </div>
            <div>
                <h4>Alertas</h4>
                {% for key,alertPicture in alertPictures.many_faces %}
                    <div class="row">
                        <div class="col s4">
                            <img src="/uploads/{{ key }}.jpg" class="img-fluid" width="50%">
                        </div>
                        <div class="col s2">
                            <b>Más de un rostro</b>
                        </div>
                        <div class="col s2">
                            <p>
                                <input type="radio" name="alertEval[{{ key }}][MF]" id="alertEval{{ key }}_MF_FP"
                                       key="{{ key }}" typeKey="MF" value="1"/>
                                <label for="alertEval{{ key }}_MF_FP">Falso positivo</label>
                            </p>

                            <p>
                                <input type="radio" name="alertEval[{{ key }}][MF]" id="alertEval{{ key }}_MF_P"
                                       key="{{ key }}" typeKey="MF" value="2"/>
                                <label for="alertEval{{ key }}_MF_P">Positivo</label>
                            </p>
                        </div>
                    </div>
                {% endfor %}
                {% for key,alertPicture in alertPictures.other_face %}
                    <div class="row">
                        <div class="col s4">
                            <img src="/uploads/{{ key }}.jpg" class="img-fluid" width="50%">
                        </div>
                        <div class="col s2">
                            <b>Diferente rostro</b>
                        </div>
                        <div class="col s2">
                            <p>
                                <input type="radio" name="alertEval[{{ key }}][DF]" id="alertEval{{ key }}_DF_FP"
                                       key="{{ key }}" typeKey="DF" value="1"/>
                                <label for="alertEval{{ key }}_DF_FP">Falso positivo</label>
                            </p>

                            <p>
                                <input type="radio" name="alertEval[{{ key }}][DF]" id="alertEval{{ key }}_DF_P"
                                       key="{{ key }}" typeKey="DF" value="2"/>
                                <label for="alertEval{{ key }}_DF_P">Positivo</label>
                            </p>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <h6>Resultado</h6>
                    <select name="resultValue" id="resultValue">
                        <option value="" disabled selected>Elige resultado</option>
                        <option value="Aprobado">Aprobado</option>
                        <option value="No Aprobado">No Aprobado</option>
                    </select>

                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <h6>Observaciones</h6>
                    <textarea name="observationsValue" id="observationsValue" class="materialize-textarea"
                              cols="400"></textarea>
                </div>
            </div>
        </form>
        <br>
        <br>
        <div class="left">
            <a href="/picture-alerts/"
               class="btn btn-danger">Cancelar evaluación</a>
            <a href="#" class="btn btn-primary submitData">Finalizar
                Evaluación</a>
        </div>
        <br>
        <br>
        <br>
        <div class="fixed-action-btn">
            <a href="/picture-alerts/"
               class="btn-floating btn-large waves-effect waves-light orange cancelButton"><i
                        class="fa fa-arrow-left" aria-hidden="true"></i></a>
        </div>
    </div>
{% endblock %}

{% block extraSripts %}

    <script>


        $(document).ready(function () {


                function saveBgcResult() {
                    revAlerts = {};
                    $.each($('input[type="radio"]:checked'), function (key, value) {
                        revAlerts[$(value).attr('key')] = {};
                        revAlerts[$(value).attr('key')][$(value).attr('typeKey')] = $(value).val();
                    });
                    $.ajax({
                        url: "{{ path("picAlertSave") }}",
                        method: "POST",
                        data: {
                            friId: {{ analysisData.friId }},
                            reviewedAlerts: revAlerts,
                            resultValue: $("#resultValue").children("option:selected").val(),
                            observationsValue: $("#observationsValue").val()
                        },
                        beforeSend: function () {
                        },
                        success: function (res) {
                            window.location.href = '{{ path("picAlertIndex") }}';
                        },
                        error: function (e, e1, e2) {
                            alert("error al guardar");
                        }
                    });
                }

                $('.submitData').click(function () {
                    var resultValue = $("#resultValue").children("option:selected").val();
                    if (resultValue === "") {
                        alert("El resultado no puede estar vacio");
                        return false;
                    }

                    console.log($('input[type="radio"]:checked').length)
                    console.log($('input[type="radio"]').length / 2);

                    if ($('input[type="radio"]:checked').length < ($('input[type="radio"]').length / 2)) {
                        alert("Todas las fotografías deberían ser revisadas");
                        return false;
                    }

                    saveBgcResult();
                });


            }
        );
    </script>
    <script>"use strict";
        $("#note").on("change keyup keydown paste cut", function (e) {
            var height = $(this).height(0).height(this.scrollHeight);
        });
    </script>
{% endblock %}