{% 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">Formulario: Costo Empleado</h3>
            <hr>
            <form method="POST">
                {% csrf_token %}
                        <div class="row my-2">
                        <label class="col-auto col-form-label" empleados='{{empleados}}'><strong>Empleado:</strong></label>
                        <div class="col-sm-6">
                            <div class="input-group">
                            <span class="input-group-text my-1" style="height:35px"><i class="fa-solid fa-user"></i></span>
                            <div class="selector">
                                <select class="form-select form-select-sm my-1" style="height:35px" id="empleados">
                                <option id="default_sel">      </option>
                                {% for empleado in empleados %}
                                <option id="js" target="{{empleado.id}}">
                                {{empleado.perfil.nombres}} {{empleado.perfil.apellidos}}
                                </option>
                                {% endfor %}
                                </select>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div class="row my-2">
                            <label for="form.status" class="col-auto col-form-label my-1 d-none"><strong>Empleado:</strong></label>
                            <div class="col-3 d-none">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-user"></i></span>
                                {{form.status|add_class:"form-control"}}
                                </div>
                            </div>
                            <label for="form.puesto" class="col-auto col-form-label my-1"><strong>Puesto del empleado:</strong></label>
                            <div class="col-5 d-none">
                              {{form.puesto|add_class:"form-control"}}
                            </div>
                            <div class="col-5">
                                <input type="text" list="puesto" id="txt_puesto" valor="{{puesto.id}}" placeholder="Puestos..." class="form-control">
                                <datalist id="puesto" name='puesto'>
                                    {% for puesto in puestos %}
                                        <option valor="{{puesto.id}}" value="{{puesto.puesto}}"></option>
                                    {% endfor %}
                                </datalist>
                            </div>
                        </div>
                        <div class="row my-2">
                            <label for="form.seccion" class="col-auto col-form-label my-1"><strong>Sección a la que pertenece:</strong></label>
                            <div class="col-3">
                                {{ form.seccion|add_class:"form-control my-1"}}
                            </div>
                            </div>
                        </div>

                        <div class="row my-2">
                            <label for="form.neto_catorcenal_sin_deducciones" class="col-auto col-form-label my-1"><strong>Neto catorcenal sin deducciones:</strong></label>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.neto_catorcenal_sin_deducciones|add_class:"form-control"}}
                                </div>
                            </div>
                            <label for="form.complemento_salario_catorcenal" class="col-auto col-form-label my-1"><strong>Complemento salario catorcenal:</strong></label>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.complemento_salario_catorcenal|add_class:"form-control"}}
                                </div>
                            </div>
                        </div>

                        <div class="row my-2">
                            <label for="form.sueldo_diario" class="col-auto col-form-label my-1"><strong>Sueldo diario:</strong></label>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.sueldo_diario|add_class:"form-control"}}
                                </div>
                            </div>
                             <label for="form.sdi" class="col-auto col-form-label my-1"><strong>SDI:</strong></label>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.sdi|add_class:"form-control"}}
                                </div>
                            </div>
                        </div>
                        <div class="row my-2">
                            <label for="form.imms_obrero_patronal" class="col-auto col-form-label my-1"><strong>IMSS Obrero patronal:</strong></label>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.imms_obrero_patronal|add_class:"form-control"}}
                                </div>
                            </div align="right">
                             <label for="form.amortizacion_infonavit" class="col-auto col-form-label my-1"><strong>Amortización infonavit:</strong></label>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.amortizacion_infonavit|add_class:"form-control"}}
                                </div>
                            </div>
                        </div>

                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="fonacot">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchFonacot">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Fonacot</strong></label>
                            </div>
                            <div class="col-2">
                                <div class="input-group mb-3">
                                <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                {{form.fonacot|add_class:"form-control txt_check d-none"}}
                                </div>
                            </div>
                        </div>

                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="pasajes">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchPasajes">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Pasajes</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.apoyo_de_pasajes|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="visita">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Visita</strong></label>
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchVisita">
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.apoyo_vist_familiar|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="estancia">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchEstancia">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Estancia</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.estancia|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="renta">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchRenta">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Renta</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.renta|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="campamento">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchCampamento">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Campamento</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.campamento|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="estudios">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchEstudios">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Estudios</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.apoyo_estudios|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="gasolina">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchGasolina">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Gasolina</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.gasolina|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <div class="row my-2">
                            <div class="form-check form-switch col-auto mx-4" id="Mantto">
                                <input class="form-check-input" type="checkbox" role="switch" id="SwitchMantto">
                                <label class="form-check-label" for="flexSwitchCheckDefault"><strong>Apoyo de Mantenimiento Vehicular</strong></label>
                            </div>
                                <div class="col-2">
                                    <div class="input-group mb-3">
                                    <span class="input-group-text span_check d-none"><i class="fa-solid fa-dollar-sign"></i></span>
                                    {{form.amv|add_class:"form-control txt_check d-none"}}
                                    </div>
                                </div>
                        </div>
                        <hr>
                        <button id="btnSave" type="submit" name="btnSend" class="btn btn-success">Guardar</button>
                        <a href="{% url 'Tabla_costo' %}" class="btn btn">Cancelar</a>

                 </div>
            </div>
        </div>
  </form>
<script>

document.getElementById("txt_puesto").addEventListener("change", (event)=>{
    var select = document.getElementById("txt_puesto");
    var browserChildren = document.getElementById('puesto').children;
    var other_select = document.getElementById('id_puesto');
    cont = 0

    for(let i = 0; i < browserChildren.length; i++){
        if (browserChildren[i].value === select.value){
            let id = browserChildren[i].getAttribute('valor');
            other_select.value = id;
            cont = 1
            }
    }
    console.log(select.value)
    //El cont = 0 es un indicador/bandera si encuentra al menos una similitud en el for no se activa
    if ((!select.value) || (cont = 0)){
        other_select.value = 0
    }
});

document.getElementById("btnSave").addEventListener("click", function(event){
    var text_puesto = document.getElementById('txt_puesto');
    var save = document.getElementById('btnSave')
    if (!txt_puesto){
        save.removeAttribute('type')
        Swal.fire({
            "title":"Error",
            "text":"Debes ingresar un puesto",
            "icon":"error",
            })
    }
});

document.getElementById("empleados").addEventListener("change", function(event){
    var select = document.getElementById("empleados");
    var current_option = select.options[select.selectedIndex];
    var target = current_option.getAttribute('target')
    var other_select = document.getElementById('id_status')
    other_select.value = target
});

var switches = document.querySelectorAll('.form-check-input');
var txt_check = document.querySelectorAll('.txt_check');
var span_check = document.querySelectorAll('.span_check');
console.log(span_check);

for (let i=0; i<switches.length; i++){
    switches[i].addEventListener("change", function(element){

        if (switches[i].checked){
            txt_check[i].removeAttribute('class');
            span_check[i].removeAttribute('class');
            txt_check[i].setAttribute('class', 'form-control');
            span_check[i].setAttribute('class','input-group-text span_check');
        } else {
            txt_check[i].removeAttribute('class');
            span_check[i].removeAttribute('class');
            txt_check[i].setAttribute('class','form-control d-none');
            span_check[i].setAttribute('class','input-group-text span_check d-none');
        }
    });
 }
</script>
{% endblock %}