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

{% block contenido %}

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

<fieldset id="set_pago">
    <legend class="titulos">DATOS PERSONALES ALUMNO/A:</legend>   
    <div class="row">
        <div class="col-md-1"></div>
        <label for="nombre" class="col-md-3 col-form-label">Nombre y Apellidos: <span class="obligatorio">(*)</span></label>
        <div class="col-md-7">
            {{ formulario.nombre |add_class:"form-matriculas requerido"}}
            <div class="campo_invalido">
                Campo Obligatorio
            </div>
        </div>      
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <label for="concepto" class="col-md-3 col-form-label">Concepto: <span class="obligatorio">(*)</span></label>
        <div class="col-md-4">
            {{ formulario.concepto |add_class:"form-matriculas "}}
        </div>
        <label for="concepto" class="col-md-1 col-form-label">Importe: <span class="obligatorio">(*)</span></label>
        <div class="col-md-2">
            {{ formulario.importe |add_class:"form-matriculas requerido"}}
            <div class="campo_invalido">
                Campo Obligatorio
            </div>           
        </div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <input type="text" name="txt_concepto" id="id_txt_concepto" class="form-matriculas requerido">
            <div class="campo_invalido">
                Campo Obligatorio
            </div>
        </div>
    </div>

    <div class="btn_pasos" style="margin-top: 10px;">
        <button type="button" class="btn_web btn btn-danger" onclick="guardar_pago()" name="add_pago"> GENERAR PAGO </button>
        <button type="reset" class="btn_web btn btn-danger" onclick="location.href='/pago_tarjeta/'"> RESET </button>
    </div>  

</fieldset>
</form>
<hr style="color:#000; background-color: #000; ">
<br>
<br>
<table class="table table-hover table-condensed table-striped" id="t_pagos">
    <!-- 
    <tr>
        <td>Nº Matrículas Totales: {{ n_matriculas }}</td>
        <td>Nº Matrículas en Toledo: {{ m_toledo }}</td>
        <td>Nº Matrículas en Yepes: {{ m_yepes }}</td>
        <td>Nº Matrículas AMPAS: {{ m_ampa }}</td>
        <td colspan="4"></td>
    </tr>
    -->
    <thead>
    <tr class="thead-dark">
        <th style="text-align: center;">FECHA CREACIÓN</th>
        <th style="text-align: center;">NOMBRE Y APELLIDOS</th>
        <th style="text-align: center;">CONCEPTO</th>
        <th style="text-align: center;">IMPORTE</th>
        <th style="text-align: center;">ESTADO</th>               
        <th style="text-align: center;">ENLACE</th>
        <th style="text-align: center;" colspan="2">ACCIONES</th>

    </tr>
    </thead>

    <tbody>

    {% for pago in pagos  %}   
   
    <tr>
        <td>{{ pago.fecha_creacion }}</td>
        <td style="text-transform: uppercase;">{{ pago.nombre }}</td>
        <td>{{ pago.txt_concepto }}</td>
        <td style="text-align:right;">{{ pago.importe }} €</td>        
        <td style="text-transform: uppercase; text-align: center;">            
        {% if pago.estado == 'COBRADO' %}
            <select name="estado_pago" id="id_estado_pago_{{pago.id}}">
                <option value="COBRADO" selected="true"> COBRADO </option>
                <option value="PENDIENTE"> PENDIENTE </option>
            </select>
        {% else %}
        <select name="estado_pago" id="id_estado_pago_{{pago.id}}">
            <option value="COBRADO"> COBRADO </option>
            <option value="PENDIENTE" selected="true"> PENDIENTE </option>
        </select>
        {% endif %}
        </td>
        <td>{{ pago.enlace }}</td>
        <td><button type="text" class="btn_web btn btn-info" onclick="editar_pago('{{pago.id}}')"> GUARDAR </button></td>
        <td><button type="text" class="btn_web btn btn-danger" onclick="borrar_pago('{{pago.id}}')"> BORRAR </button></td>             
    </tr>
    {% endfor %}
    </tbody>
</table>

<script type="text/javascript">

    function guardar_pago(){
        
        obligatorio = "True";
        texto = $('#id_txt_concepto').val()

        $( ".requerido" ).each(function( index ) {
        if($(this).val() == ''){
            $(this).next('.campo_invalido').show();
            $(this).css('border', '1px solid red');
            obligatorio = "False";
        }else{
            $(this).next('.campo_invalido').hide();
        }
        });

        if($('#id_txt_concepto').val() == ''){
            obligatorio= "False";
            $('select[name="concepto"] option:selected').text('');
        }

        if (obligatorio == "True"){
            form = document.getElementById('formulario')
            form.submit();            
        }
    };

    $("select[name=concepto]").change(function(){
        var concepto = $('select[name="concepto"] option:selected').text();
        $('#id_txt_concepto').val(concepto);
    });

    function editar_pago(id){

        valor='0'

        if ($("#id_estado_pago_" + id + " " + "option:selected").text() == " COBRADO "){
            valor = "1"
        }

        location.href="/editar_pago/" + id + "/" + valor

    }

    function borrar_pago(id){

        var bool=confirm("Seguro de eliminar el pago?");

        if(bool){
            document.location.href = '/borrar_pago/' + id;            
        }else{
            pass;
        }       
    }   
	
    $(document).ready(function() {
        $('#t_pagos').DataTable();
    } );

</script>

{% endblock contenido %}