{% extends 'partials/base.html' %}
{% load widget_tweaks %}

{% block content %}
<!-- Esta es la zona donde se crean los mensajes perrones con sweet alert -->
<div class="row my-4">
    <div class="col-md-4">
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        {% if messages %}
            {% for message in messages %}
                {% if message.tags == "error" %}
                <script>
                Swal.fire({
                    "title":"Error",
                    "text":"{{message}}",
                    "icon":"error",
                })
                </script>
                {% else %}
                <script>
                Swal.fire({
                    "title":"Excelente",
                    "text":"{{message}}",
                    "icon":"success",
                })
                </script>
                {% endif %}
            {% endfor %}
        {% endif %}
    </div>
</div>

<hr>
<hr>
    <div class="container">
        <div class="columns is-mobile">
            <h3 class="title is-size-2">Historico de Costo</h3>
            <hr>
            <span class="h4">{{costo.status.perfil.nombres}} {{costo.status.perfil.apellidos}}</span>
            <hr>
            <h5>Filtro del historico de costos</h5>
            {% csrf_token %}
            <form method="GET">
                <label for="myfilter.form.start_date" class="col-sm-1 col-form-label text-right"><strong>Desde:</strong></label>
                <div class="col-2">
                    {% render_field myfilter.form.start_date type="date" class="form-control" %}
                </div>
                <label for="myfilter.form.end_date" class="col-sm-1 col-form-label text-right"><strong>Hasta:</strong></label>
                <div class="col-2">
                    {% render_field myfilter.form.end_date type="date" class="form-control" %}
                </div>
                <div class="col-2">
                    <button class="btn btn-outline-succes btn-block" name="btnSend" type="submit" value="Buscar"><i class="fa-solid fa-magnifying-glass"></i></button>
                </div>
            </form>
            <hr>
            <div class='cart-row'>
            <table class="table table-ligth table-striped mx-1">
            <thead>
                    <tr>
                        <th scope="col">Fecha</th>
                        <th scope="col">Cesantia</th>
                        <th scope="col">Sueldo mensual neto</th>
                        <th scope="col">Complemento salario catorcenal</th>
                        <th scope="col">Apoyo de pasajes</th>
                        <th scope="col">Total percepciones mensual</th>
                        <th scope="col">Impuesto estatal</th>
                        <th scope="col">IMSS Obrero patronal</th>
                        <th scope="col">SAR 2%</th>
                        <th scope="col">CESANTIA </th>
                        <th scope="col">INFONAVIT</th>
                        <th scope="col">ISR</th>
                        <th scope="col">Apoyo visita familiar</th>
                        <th scope="col">Apoyo estancia</th>
                        <th scope="col">Apoyo renta</th>
                        <th scope="col">Apoyo de estudios</th>
                        <th scope="col">AMV</th>
                        <th scope="col">Gasolina</th>
                        <th scope="col">Total apoyos y bonos</th>
                        <th scope="col">Total costo mensual para la empresa</th>
                        <th scope="col">Ingreso mensual neto del empleado</th>
                        <!--<th scope="col">Registro</th>-->
                    </tr>
            </thead>
            <tbody>
            {% for registro in registros %}
                    <tr>
                        <th scope="col">{{registro.updated_at}}</th>
                        <td class="registro" registro="{{registro.id}}">{{registro.cesantia}}</td>
                        <td>{{registro.sueldo_mensual_neto}}</td>
                        <td>{{registro.complemento_salario_catorcenal}}</td>
                        <td>{{registro.apoyo_de_pasajes}}</td>
                        <td>{{registro.total_percepciones_mensual}}</td>
                        <td>{{registro.impuesto_estatal}}</td>
                        <td>{{registro.imms_obrero_patronal}}</td>
                        <td>{{registro.sar}}</td>
                        <td>{{registro.cesantia}}</td>
                        <td>{{registro.infonavit}}</td>
                        <td>{{registro.isr}}</td>
                        <td>{{registro.apoyo_vist_familiar}}</td>
                        <td>{{registro.estancia}}</td>
                        <td>{{registro.renta}}</td>
                        <td>{{registro.apoyo_estudios}}</td>
                        <td>{{registro.amv}}</td>
                        <td>{{registro.gasolina}}</td>
                        <td class="register" comision ="{{comision}}" complemento ="{{registro.complemento_salario_catorcenal}}" registro="{{registro.id}}" campamento="{{registro.campamento}}" bonototal="{{registro.bonototal}}"></td>
                        <td class="costo_mensual"></td>
                        <td class="ingreso_mensual" sueldo_mensual="{{registro.sueldo_mensual_neto}}" pasajes="{{registro.apoyo_de_pasajes}}" impuesto_est="{{registro.impuesto_estatal}}" impuesto_imss ="{{registro.imms_obrero_patronal}}"
                         sar="{{registro.sar}}" cesantia="{{registro.cesantia}}" infonavit="{{registro.infonavit}}" isr="{{registro.isr}}" total_apoyos="{{registro.total_apoyosbonos_empleadocomp}}"></td>
                        <!--<th scope="col">
                            <a type="button" class="btn btn-outline-info" href=""><i class="fa-solid fa-file-pdf fa-2xl"></i></a>
                        </th>-->
                    </tr>
            {% endfor %}
            </table>
            </tbody>
            </div>
            <a href="{% url 'Tabla_costo' %}" class="btn btn-outline-info"><i class="fa-solid fa-backward"></i></a>
        </div>
    </div>


  <script>
    var registros = document.querySelectorAll('.register');

    var costo_mensual = document.querySelectorAll('.costo_mensual');
    var ingreso_mensual = document.querySelectorAll('.ingreso_mensual');
    //console.log(costo_mensual)

    for (let i=0; i<registros.length; i++){
        var bonototal = registros[i].getAttribute('bonototal');
        var campamento = registros[i].getAttribute('campamento');
        var complemento = registros[i].getAttribute('complemento');

        var sueldo_mensual = ingreso_mensual[i].getAttribute('sueldo_mensual');
        var pasajes = ingreso_mensual[i].getAttribute('pasajes');
        var impuesto_est = ingreso_mensual[i].getAttribute('impuesto_est');
        var impuesto_imss = ingreso_mensual[i].getAttribute('impuesto_imss');
        var sar = ingreso_mensual[i].getAttribute('sar');
        var cesantia = ingreso_mensual[i].getAttribute('cesantia');
        var infonavit = ingreso_mensual[i].getAttribute('infonavit');
        var isr = ingreso_mensual[i].getAttribute('isr');
        var total_apoyos = ingreso_mensual[i].getAttribute('total_apoyos');


        var apoyos = parseFloat(campamento) + parseFloat(bonototal);
        if (!apoyos){
            apoyos = 0;
        }
        var comision = registros[i].getAttribute('comision');
        var comision_complemento_salario = (apoyos + Number(complemento)) * Number(comision).toFixed(4);
        var ingreso_mensual_neto = Number(sueldo_mensual) + Number(complemento) + Number(pasajes) + comision_complemento_salario + Number(total_apoyos)
        var total_costo_empresa =  ingreso_mensual_neto + Number(impuesto_est) + Number(impuesto_imss)+ Number(sar)+ Number(cesantia)+Number(infonavit)+Number(isr)+apoyos

        registros[i].innerHTML = apoyos;
        costo_mensual[i].innerHTML = Number(total_costo_empresa).toFixed(2);
        ingreso_mensual[i].innerHTML = Number(ingreso_mensual_neto).toFixed(2)
        }
  </script>
{% endblock %}