{% extends "base.html" %}
{% load static %}
{% load widget_tweaks %}

{% block inicio %}
<div class="form-group form-group-md col-md-7">
    {% if request.path == "/matricula_ampa/" %}
    <h4>MATRICULACIÓN AMPAS CURSO 2024/2025 OK</h4>
    {% else %}
    <h4>MATRICULACIÓN CURSO 2024/2025</h4>
    {% endif %}
</div>
<div class="form-group form-group-md col-md-2">
    <button id="btn_inicio" type="button" class="btn btn-danger" onclick="location.href='/'">
        INICIO
    </button>
    <button id="btn_web" type="button" class="btn_web btn btn-danger" data-toggle="modal" data-target="#ModalWeb">
        IR A WEB
    </button>
</div>
{% endblock inicio %}


{% block contenido %}
<form class="form-horizontal" role="form" id="formulario" name="formulario" method="POST" enctype="multipart/form-data">{% csrf_token %}

<!-- ################################################################################################### -->
<!-- ################################   PASO 1 ##########################################################-->
<!-- ################################################################################################## -->

<div id="paso1">
<ol class="breadcrumb">
    <li class="active">PASO 1 de 4</li>
</ol>
<fieldset>
    <legend class="titulos">DATOS PERSONALES ALUMNO/A:</legend>
    <div class="container">
        <span style="display:none;">{% if matricula %} {{ formulario.referencia}} {% endif %}</span>
        {% if request.path == "/matricula_ampa/" %}
        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="nombre" class="col-md-2 col-sm-3 col-form-label">AMPA: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.nombre_ampa1 |add_class:"form-matriculas requerido"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <input type="hidden" name="nombre_ampa" id="id_nombre_ampa">
                </div>

                <label for="nombre" class="col-md-2 col-sm-3 col-form-label">¿Socio/a del AMPA?: <span class="obligatorio">(*)</span> </label>
                <div class="col-md-4 col-sm-9">    
                    <input type="radio" name="p_socia_ampa" value="Sí" id="p_socio_si"> <label> Sí </label>
                    &nbsp;&nbsp;&nbsp;
                    <input type="radio" name="p_socia_ampa" value="No" id="p_socio_no"> <label> No </label>
                    <div id="campo_invalido_ampa">
                        Campo Obligatorio. Debe seleccionar una opción.
                    </div>
                </div>
            </div>            
       
            <div class="form-group form-group-md col-md-12" id="n_socio_ampa">
                <div class="row">

                    <div class="col-md-6"> </div>            
                    <label for="apellidos" class="col-md-2 col-sm-3 col-form-label">Nº Socio/a AMPA: </span></label>
                    <div class="col-md-4 col-sm-9">                    
                    {{ formulario.id_ampa |add_class:"form-matriculas" }}
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="centro" class="col-md-2 col-sm-3 col-form-label">CENTRO: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.nombre_centro1 |add_class:"form-matriculas requerido"}}                    
                    <input type="hidden" name="nombre_centro" id="id_nombre_centro">
                    <div id="campo_invalido_centro">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>   
        {% endif %}

        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="nombre" class="col-md-2 col-sm-3 col-form-label">Nombre: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.nombre |add_class:"form-matriculas requerido"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
                <label for="apellidos" class="col-md-2 col-sm-3 col-form-label">Apellidos: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4  col-sm-9">
                    {{ formulario.apellidos |add_class:"form-matriculas requerido"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="fecha_nacimiento" class="col-md-2 col-sm-3 col-form-label" >Fecha Nacimiento: <span class="obligatorio">(*)</span></label>
                
                <div class="col-md-4 col-sm-9">
                    <input type="date" class="requerido" name="fecha_nacimiento" id="id_fecha_nacimiento" onchange="calculaedad(this.value);">
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>                    
            <label for="edad" class="col-md-6 col-sm-12 col-form-label">Edad: {{ formulario.edad }} años <span style="font-size: 0.9em;font-weight: normal; color: #ff0000;">* este campo se calcula con la fecha de nacimiento</label>
            </div>                
        </div>

        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="domicilio" class="col-md-2 col-sm-3 col-form-label">Domicilio: <span class="obligatorio">(*)</span></label>
                <div class="col-md-10 col-sm-9">
                    {{ formulario.domicilio |add_class:"form-matriculas requerido"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="provincia" class="col-md-2 col-sm-3 col-form-label">Código Postal: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.codigo_postal | add_class:"form-matriculas requerido"}}
                    <div id="suggestBoxElement" style="position: absolute; width: 256px; top: 20px; left: 0px; z-index:25; visibility: hidden;"></div>
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="c_p" role="alert">
                       Código Postal introducido no es válido
                    </div>
                </div>              
                <label for="localidad" class="col-md-2 col-sm-3 col-form-label">Localidad: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.localidad |add_class:"form-matriculas requerido"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="row">
                <label for="provincia" class="col-md-2 col-sm-3 col-form-label">Provincia: <span class="obligatorio">(*)</span></label>
                <div class="col-md-10 col-sm-9">
                    {{ formulario.provincia |add_class:"form-matriculas requerido"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="row">                
                <label for="telefono" class="col-md-2 col-sm-3 col-form-label">Teléfono Alumno: <span class="obligatorio req_adulto">(**)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.telefono |add_class:"form-matriculas requerido1"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="telefono_1" role="alert">
                        El teléfono introducido no es válido.
                    </div>  
                </div>
                <label for="email" class="col-md-2 col-sm-3 col-form-label">Email Alumno: <span class="obligatorio req_adulto">(**)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.email |add_class:"form-matriculas requerido1"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="correo_1" role="alert">
                        El correo introducido no es válido.
                    </div>               
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset>
    <legend class="titulos">DATOS ACADÉMICOS ALUMNO/A: <span>(aparece para rellenar solo si el alumno es menor de edad)</span></legend>
    <div class="menor18" {% if request.path == "/matricula_ampa/" %} style="display:block" {% endif %}>
    <div class="container">
        <div class="form-group form-group-md col-md-12">
            <div class="row">                
                <label for="colegio_instituto" class="col-md-3 col-form-label">Colegio/Instituto al que asistes: <span class="obligatorio">(*)</span></label>
                <div class="col-md-9">
                    {{ formulario.colegio_instituto |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="row">                
                <label for="localidad_colinst" class="col-md-3 col-sm-3 col-form-label">Localidad del colegio/instituto: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.localidad_colinst |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
                <label for="cursando" class="col-md-2 col-sm-3 col-form-label">Cursa (2024/2025): <span class="obligatorio">(*)</span></label>
                <div class="col-md-3 col-sm-9">
                    {{ formulario.cursando1 |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>                     
                    <input type="hidden" name="cursando" id="id_cursando">                     
                </div>
            </div>
        </div>
    </div>
    </div>
</fieldset>

<fieldset>
    <legend class="titulos">DATOS PADRE / MADRE / TUTORES: <span>(aparece para rellenar solo si el alumno es menor de edad)</span></legend>
    <div class="menor18" {% if request.path == "/matricula_ampa/" %} style="display:block" {% endif %}>
    <div class="container">
        <div class="form-group form-group-md col-md-12">
            <div class="texto_cabecera">DATOS PADRE / MADRE / TUTOR 1</div>
            <br>
            <div class="row">                
                <label for="tutor1_nombre" class="col-md-2 col-sm-3 col-form-label">Nombre: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.tutor1_nombre |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
                <label for="tutor1_apellidos" class="col-md-2 col-sm-3 col-form-label">Apellidos: <span class="obligatorio">(*)</span></label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.tutor1_apellidos |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="row">                
                <label for="tutor1_telefono" class="col-md-2 col-sm-3 col-form-label">Teléfono <span class="obligatorio">(*)</span></label>
                <div class="col-md-2 col-sm-9">
                    {{ formulario.tutor1_telefono |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="telefono_2" role="alert">
                        El teléfono introducido no es válido.
                    </div>
                </div>
                <label for="tutor1_email" class="col-md-1 col-sm-3 col-form-label">Email <span class="obligatorio">(*)</span></label>
                <div class="col-md-2 col-sm-9">
                    {{ formulario.tutor1_email |add_class:"form-matriculas requerido2"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="correo_2" role="alert">
                        El correo introducido no es válido.
                    </div>
                </div>
                <label for="tutor1_profesion" class="col-md-2 col-sm-3 col-form-label">Profesión</label>
                <div class="col-md-3 col-sm-9">
                    {{ formulario.tutor1_profesion |add_class:"form-matriculas"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="texto_cabecera">DATOS PADRE / MADRE / TUTOR 2</div>
            <br>
            <div class="row">                
                <label for="tutor2_nombre" class="col-md-2 col-sm-3 col-form-label">Nombre</label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.tutor2_nombre |add_class:"form-matriculas" }}
                </div>
                <label for="tutor2_apellidos" class="col-md-2 col-sm-3 col-form-label">Apellidos</label>
                <div class="col-md-4 col-sm-9">
                    {{ formulario.tutor2_apellidos |add_class:"form-matriculas" }}
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">
            <div class="row">                
                <label for="tutor2_telefono" class="col-md-2 col-sm-3 col-form-label">Teléfono</label>
                <div class="col-md-2 col-sm-9">
                    {{ formulario.tutor2_telefono |add_class:"form-matriculas" }}
                    <div class="alert alert-danger alert-dismissible fade show" id="telefono_3" role="alert">
                        El teléfono introducido no es válido.
                    </div>
                </div>
                <label for="tutor2_email" class="col-md-1 col-sm-3 col-form-label">Email</label>
                <div class="col-md-2 col-sm-9">
                    {{ formulario.tutor2_email |add_class:"form-matriculas" }}
                    <div class="alert alert-danger alert-dismissible fade show" id="correo_3" role="alert">
                        El correo introducido no es válido.
                    </div>
                </div>                
                <label for="tutor2_profesion" class="col-md-2 col-sm-3 col-form-label">Profesión</label>
                <div class="col-md-3 col-sm-9">
                    {{ formulario.tutor2_profesion |add_class:"form-matriculas" }}
                </div>
            </div>
        </div>
    </div>
    </div>
</fieldset>
<fieldset>
    <legend class="titulos">FORMA Y CONDICIONES DE PAGO: <span>(para mensualidades)</span></legend>               
    <div class="container tipo_pago">
       
        <div class="form-check form-check-inline">
            <input class="for_tipo_pago" type="radio" name="tipo_pago" id="id_tipo_pago_domiciliacion" value="Domiciliación Bancaria">
            <label class="form-check-label" for="inlineRadio1">DOMICILIACIÓN BANCARIA</label>
        </div>
        <!--
        <div class="form-check form-check-inline">
            <input class="for_tipo_pago" type="radio" name="tipo_pago" id="id_tipo_pago_efectivo_tarjeta" value="Efectivo o Tarjeta">
            <label class="form-check-label" for="inlineRadio2">EFECTIVO o TARJETA</label>
        </div>
    -->
        <div class="form-check form-check-inline">
            <input class="for_tipo_pago" type="radio" name="tipo_pago" id="id_tipo_pago_transferencia" value="Trasferencia Bancaria a Academia EGA">
            <label class="form-check-label" for="inlineRadio2">TRANSFERENCIA BANCARIA A Academia EGA</label>
        </div>
        
        <div id="campo_invalido_banco" style="margin-bottom: 5px;">
            Campo Obligatorio. Debe seleccionar una opción. <br>
        </div>     
    </div>

    <div class="container" id="dom_bancaria">        
        <div class="row">
            <p>Según se establece en el art.25.1 de la Le Ley de Servicios de Pago 16/2009, el Cliente autoriza a que se gire en el número de cuenta especificado el importe de los recibos correspondientes a las mensualidades que se originen por los servicios prestados, así como que lesean remitidos dichos recibos por medios telemáticos. Mediante la firma de esta orden de domiciliación, el Cliente autoriza a la Consultora a enviar órdenes de pago a su entidad financiera para domiciliar los recibos correspondientes a la facturación de los servicios que haya contratado. Le informamos que, en caso de no conformidad con el cargo, tendrá 8 semanas para ejercer el derecho a ser reembolsado directamente por su entidad financiera. Puede obtener información adicional sobre sus derechos en su entidad financiera.
            <br><span style="font-weight: bold;">
            El centro emitirá los recibos del 1 al 6 de cada mes (los recibos devueltos tendrán un recargo de 5.00€ que el centro emitirá al mes siguiente)</span>
            </p>
        </div>
        <div class="form-group form-group-md col-md-12">            
            <div class="row">                
                <label for="IBAN" class="col-md-3 col-sm-3 col-form-label">IBAN CLIENTE: <span class="obligatorio">(*)</span></label>
                <div class="col-md-9 col-sm-9">
                    {{ formulario.IBAN |add_class:"form-matriculas requerido3"}}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="iban_1" role="alert">
                        El IBAN introducido no es correcto.<br>
                        Utilice el formato correcto respetando los espacios.<br>
                        ES00 0000 0000 0000 0000 0000                       
                    </div>    
                </div>
            </div>
        </div>
        <div class="form-group form-group-md col-md-12">            
            <div class="row">                
                <label for="domiciliacion_nombre_apellidos" class="col-md-3 col-sm-3 col-form-label">Nombre y Apellidos titular de la Cuenta: <span class="obligatorio">(*)</span></label>
                <div class="col-md-5 col-sm-9">
                    {{ formulario.domiciliacion_nombre_apellidos |add_class:"form-matriculas requerido3" }}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                </div>
                <label for="domiciliacion_dni" class="col-md-1 col-sm-3 col-form-label">DNI: <span class="obligatorio">(*)</span></label>
                <div class="col-md-3 col-sm-9">
                    {{ formulario.domiciliacion_dni |add_class:"form-matriculas requerido3" }}
                    <div class="campo_invalido">
                        Campo Obligatorio
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" id="dni_1" role="alert">
                        DNI Incorrecto                       
                    </div>  
                </div>
            </div>
        </div>        
    </div>

    <div class="container" id="efectivo_tarjeta">
        <p>Para pagos en Efectivo o con Tarjeta se abonarán en la recepción de la Academia EGA Ronda Buenavista, 37. 45005. Toledo., <span style="font-weight: bold;">del 01 al 08 de cada mes</span></p>        
    </div>

    <div class="container" id="transferencia">
        <p>A Academia EGA en una de las siguientes cuentas, indicando en el concepto nombre y apellidos del alumno.
        <br>
        <span style="font-weight: bold;">EuroCajaRural ES94 3081 0215 1450 0032 0374</span> 
        </p>
    </div>
    
    
    {% if request.path == "/matricula_ampa/" %}
        <div class="btn_pasos">    
            <button type="button" class="btn btn-danger" onclick="paso2(2)">SIGUIENTE PASO</button>           
        </div>
    {% else %}
        <div class="btn_pasos">    
            <button type="button" class="btn btn-danger" onclick="paso2(1)">SIGUIENTE PASO</button>           
        </div>
    {% endif %}
        
    

</fieldset>

<div class="obligatorio">
    <span> &nbsp;&nbsp; (*) Campo Obligatorio</span>
    <br>
    <span> &nbsp;&nbsp; (**) Campo Obligatorio solo mayores de edad</span>
</div>

</div>

</form>

<!-- ################################################################################################## -->
<!-- ############################### SCRIPTS ########################################################## -->
<!-- ################################################################################################## -->

{% if request.path == "/matricula_ampa/" %}

<script type="text/javascript">

    $("select[name=nombre_ampa1]").change(function(){
        var colegio = $('select[name="nombre_ampa1"] option:selected').text();
        $('#id_colegio_instituto').val(colegio); 

        if($('#id_nombre_ampa1').val() == "ampa_cervantes_yepes"){
            $('#id_localidad_colinst').val("Yepes");
        }else{
            $('#id_localidad_colinst').val("Toledo");
        }

    });

    $("#p_socio_si").click(function(){
        $('#n_socio_ampa').show();
    });

    $("#p_socio_no").click(function(){
        $('#n_socio_ampa').hide();
    });

</script>

{% endif %}

<script type="text/javascript">

    $('#id_tipo_pago_domiciliacion').click(function(){
            if( $(this).prop('checked') ) {
                $('#efectivo_tarjeta').hide();
                $('#transferencia').hide();
                $('#dom_bancaria').show();            
                $("html, body").animate({ scrollTop: $(document).height() }, "slow");
            }else{
                $('#dom_bancaria').hide();
            }
        })

    $('#id_tipo_pago_efectivo_tarjeta').click(function(){
        if( $(this).prop('checked') ) {
            $('#dom_bancaria').hide();
            $('#transferencia').hide();
            $('#efectivo_tarjeta').show();
            $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

        }else{
            $('#efectivo_tarjeta').hide();
        }
    })

    $('#id_tipo_pago_transferencia').click(function(){
        if( $(this).prop('checked') ) {
            $('#dom_bancaria').hide();
            $('#efectivo_tarjeta').hide();
            $('#transferencia').show();
            $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

        }else{
            $('#transferencia').hide();
        }
    })

    $('#p_domiciliacion').click(function(){
        if( $(this).prop('checked') ) {
            $('#pago_efectivo_tarjeta').hide();
            $('#pago_transferencia').hide();
            $('#pago_dom_bancaria').show();
        }else{
            $('#pago_dom_bancaria').hide();
        }
    })

    $('#p_efectivo_tarjeta').click(function(){
        if( $(this).prop('checked') ) {
            $('#pago_efectivo_tarjeta').show();
            $('#pago_transferencia').hide();
            $('#pago_dom_bancaria').hide();
        }else{
            $('#pago_efectivo_tarjeta').hide();
        }
    })

    $('#p_transferencia').click(function(){
        if( $(this).prop('checked') ) {
            $('#pago_efectivo_tarjeta').hide();
            $('#pago_transferencia').show();
            $('#pago_dom_bancaria').hide(); 

        }else{
            $('#pago_transferencia').hide();
        }
    })


$('#btn_acceso').hide();

</script>

<!-- Modal -->
<div id="ModalObligatorio" tabindex="-1" role="dialog" aria-labelledby="ModalObligatorioLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title" id="ModalObligatorioLabel">CAMPO OBLIGATORIO</h6>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" style="color: #ffffff;">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="text-align: center;">
            Ups no has rellenado un campo que es <span class="txt_resaltado">obligatorio</span>. 
            <br><br>
            Revise todos estos campos <span class="obligatorio">(*)</span> y complételos para seguir.<br>
            <br>
            En las opciones de <span class="txt_resaltado">Si o No </span> (si las hay), debe elegir una.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="ok_error()">OK</button>
        </div>
      </div>
    </div>
</div>

{% endblock contenido %}