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

{% block estilos %}
    html,
    body {
        height: 100%;
    }
    html {
        display: table;
        margin: auto;
    }
    body {
        display: table-cell;
        vertical-align: middle;
    }
    body {
        background: #004c82;
    }
    .caja{
        width: 800px;
    }  
    .card .card-title {
        font-size: 18px;
    }
    .input-field {
        position: relative;
        margin-top: 0.5rem; 
        margin-bottom: 0.5rem; 
    }
    @font-face {
        font-family: 'icon-cdlmag';
        src: url('{{ asset('icons/fontello/icon-cdlmag.eot') }}');
        src: url('{{ asset('icons/fontello/icon-cdlmag.eot') }}') format('embedded-opentype'),
            url('{{ asset('icons/fontello/icon-cdlmag.woff') }}') format('woff'),
            url('{{ asset('icons/fontello/icon-cdlmag.ttf') }}') format('truetype'),
            url('{{ asset('icons/fontello/icon-cdlmag.svg') }}') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .cdlmag-icon {
        font-family: "icon-cdlmag";
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }
    @media (max-width: 600px) {
        .caja {
            width:auto;
        }
    }
{% endblock %}

{% block js_document_ready %}
    // Inicializo dataPicker
    inicializarDatePicker(
        null,
        [1960, {{ "now"|date("Y") }}],
        new Date(),
        false
    );

    // Inicializo selects y modal
    $("select").formSelect();

    var bt_descarga = $('#{{ form.descargarR.vars.id }}');
    var bt_descarga_text;
    bt_descarga.click(function (e) {
        $(this).prop('disabled', true);
        {# bt_descarga.prepend('<div class="preloader-wrapper small active"><div class="spinner-layer spinner-green-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>'); #}
        bt_descarga_text = bt_descarga.html();
        bt_descarga.html('<div class="progress"><div class="indeterminate valign-wrapper"></div></div>');

        $.ajax({
            url : '{{ path('aspirante_descarga_reglamento') }}',
            type: 'POST',
            {# type: $form.attr('method'), #}
            {# data : data, #}
            success: function(html) {
                descargarReglamento();
                $('#{{ form.tick.vars.id }}').val($(html).find('#{{ form.tick.vars.id }}').val());
                $('#bk_descarga').html($(html).find('#bk_descarga'));
                configurarRegistrarse();
            }
        })
        .always(function() {
            bt_descarga.html(bt_descarga_text);
            bt_descarga.prop('disabled', false);
        });
        {# Deshabilito el submit #}
        return false;
    });
    
{% endblock %}

{% block javascripts_base %}
    function descargarReglamento() {
        var url = '{{ asset('Reglamento_RIA_PODA.pdf', 'files') }}'; 
        fileName = 'Reglamento_RIA_PODA.pdf';
        downloadFile(url, fileName);
    }

    /**
    * Download a file without browser popup warning
    * @param {string} url The url of the file to download
    * @param {string} filename Set a new filename for the downloaded file (optional)
    */
    const downloadFile = (url, filename = '') => {
        if (filename.length === 0) filename = url.split('/').pop();
        const req = new XMLHttpRequest();
        req.open('GET', url, true);
        req.responseType = 'blob';
        req.onload = function () {
            const blob = new Blob([req.response], {
            type: 'application/pdf',
            });

            const isIE = false || !!document.documentMode;
            if (isIE) {
            window.navigator.msSaveBlob(blob, filename);
            } else {
            const windowUrl = window.URL || window.webkitURL;
            const href = windowUrl.createObjectURL(blob);
            const a = document.createElement('a');
            a.setAttribute('download', filename);
            a.setAttribute('href', href);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            }
        };
        req.send();
    };
{% endblock %}

{% form_theme form _self %}
    {% block form_row -%}
        {{- form_widget(form) -}}
        {{- form_label(form) -}}
        {{- form_help(form) -}}
        {{- form_errors(form) -}}
    {%- endblock form_row %}

{% block contenido %}
    <div class="caja" >
        
        <div class="card">
            <div class="card-content">
                <div class="row">
                    <div class="input-field col s12 center">
                        <img src="{{ asset('img/logo-nuevo.png', 'portal') }}" alt="" width="250px">
                    </div>
                </div>

                <span class="card-title grey-text text-darken-4 center-align">
                    PORTAL DIGITAL DE ASPIRANTES - PoDA<br/>
                    Registro de Usuario
                </span>

                {{ form_start(form, {'attr': {'novalidate':'novalidate'}}) }}
                    <div class="row">
                        <div class="input-field col s12 m5">
                            <i class=" cdlmag-icon icon-person-card_2dp prefix">&#xe800;</i>
                            {{ form_row(form.apellidos) }}
                        </div>
                        <div class="input-field col s12 m5">
                            <i class=" cdlmag-icon icon-person-card_2dp prefix">&#xe800;</i>
                            {{ form_row(form.nombres) }}
                        </div>
                        <div class="input-field col s12 m2">
                            {{ form_row(form.genero) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12 m4">
                            <i class=" cdlmag-icon icon-person-card_2dp prefix">&#xe800;</i>
                            {{ form_row(form.dni.first) }}
                        </div>
                        <div class="input-field col s12 m4">
                            <i class=" cdlmag-icon icon-person-card_2dp prefix">&#xe800;</i>
                            {{ form_row(form.dni.second) }}
                        </div>
                        <div class="input-field col s12 m4">
                            <i class=" cdlmag-icon icon-person-card_2dp prefix">&#xe800;</i>
                            {{ form_row(form.dni_tramite) }}
                            <span class="helper-text" data-error="wrong" data-success="right"> 
                                <a class="activator"  href="#" id="2">Ayuda</a>
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12 m12">
                            {{ form_widget(form.urldni) }}
                            {{ form_label(form.urldni) }}
                            {{ form_help(form.urldni) }}
                        </div>
                    </div>
                    
                    <fieldset style="color: rgba(0, 0, 0, 0.87); margin-bottom:15px;">
                        <legend>Información de Matrícula</legend>
                        <div class="row">
                            <div class="input-field col s12 m6">
                                <i class="material-icons  prefix">portrait</i>
                                {{ form_row(form.matricula.colegio) }}
                            </div>
                            <div class="input-field col s12 m6">
                                <i class="material-icons  prefix">portrait</i>
                                {{ form_row(form.matricula.tomo) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12 m6">
                                <i class="material-icons  prefix">portrait</i>
                                {{ form_row(form.matricula.folio) }}
                            </div>
                            <div class="input-field col s12 m6">
                                <i class="material-icons  prefix">event</i>
                                {{ form_row(form.matricula.fechaMatriculacion) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12 m12">
                                {{ form_widget(form.matricula.urlConstanciaMatricula) }}
                                {{ form_label(form.matricula.urlConstanciaMatricula) }}
                                {{ form_help(form.matricula.urlConstanciaMatricula) }}
                            </div>
                        </div>
                    </fieldset>

                    <div class="row">
                        <div class="input-field col s12 m6">
                            <i class="material-icons  prefix">mail</i>
                            {{ form_row(form.email_personal.first) }}
                        </div>
                        <div class="input-field col s12 m6">
                            <i class="material-icons  prefix">mail</i>
                            {{ form_row(form.email_personal.second) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12 m6">
                            <i class="material-icons prefix">lock</i>
                            {{ form_row(form.password.first) }}
                        </div>
                        <div class="input-field col s12 m6">
                            <i class="material-icons prefix">lock</i>
                            {{ form_row(form.password.second) }}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12">
                            <p> Para continuar deberá descargar el <b>Reglamento aplicable para el 
                            Registro Integral de Antecedentes de Aspirantes a la Magistratura y 
                            al Ministerio Público (RIA) y el Portal Digital de Aspirantes (PODA)</b>
                            </p>
                            <br>
                        </div>
                        <div class="col s12">
                            {{ form_widget(form.descargarR, {'attr': {'class': "btn waves-effect waves-light identidad-color col s12 m8 offset-m2"}}) }}
                        </div>
                    </div>
                    <span id="bk_descarga">
                        {% if registroAspirante.tick %}

                            <script type="text/javascript">
                                function configurarRegistrarse() {
                                    var bt_registro = $('#{{ form.registrarse.vars.id }}');
                                    bt_registro.prop('disabled', !$("#{{ form.aceptoTerminos.vars.id }}").is(":checked"));

                                    bt_registro.click(function (e) {
                                        $(this).prop('disabled', true);
                                        bt_registro_text = bt_registro.html();
                                        bt_registro.html('<div class="progress"><div class="indeterminate valign-wrapper"></div></div>');
                                        $('form').submit();
                                    });

                                    $("#{{ form.aceptoTerminos.vars.id }}").click(function (e) {
                                        bt_registro.prop('disabled', !$(this).is(":checked"));
                                    });
                                }
                            </script>

                            <div class="row">
                                <div class="input-field col s12">
                                    <p>
                                        <label for ="{{ form.aceptoTerminos.vars.id }}">
                                            {{ form_widget(form.aceptoTerminos) }}
                                            <span class="blue-grey-text text-darken-4 ">He leído y acepto los términos del <b>Reglamento aplicable 
                                            para el Registro Integral de Antecedentes de Aspirantes a la Magistratura y al 
                                            Ministerio Público (RIA) y el Portal Digital de Aspirantes (PODA) </b>.</span>
                                        </label>
                                        {% if not form.aceptoTerminos.vars.valid %}
                                            <div class="red-text ">
                                                {{ form.aceptoTerminos.vars.errors }}
                                            </div>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                            <div class="row margin">
                                <div class="col s12">
                                    {{ form_widget(form.registrarse, {'attr': {'class': "btn waves-effect waves-light identidad-color col s12 boton_ingresar"}}) }}
                                </div>
                            </div>
                        {% endif %}
                    </span>
                {{ form_end(form) }}
            </div>

            <div class="card-reveal" >
                    <span class="card-title grey-text text-darken-4">AYUDA NÚMERO DE TRÁMITE <i class="material-icons right">close</i></span>
                <hr>
                <div class="row ">
                    <div class="input-field col s12">
                        <img src="{{ asset('img/nro-tramite.jpg') }}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}