{% extends 'menu/menu.html' %}
{% load static %}


{% block title %} Cuenta de APP Nexus {% endblock %}

{% block body %}

<style>
    /* Estilos personalizados */
    .nav-tabs {
        flex-direction: column;
        border-bottom: 0;
    }

    .nav-tabs .nav-link {
        border: none;
        color: #000;
        font-weight: 500;
        padding: 10px 20px;
        text-align: left;
        display: flex;
        align-items: center;
        border-radius: 0;
        border-left: 3px solid transparent;
    }

    .nav-tabs .nav-link.active {
        background-color: #eaf2fe;
        color: #dc3545;
        border-left: 3px solid #dc3545;
    }

    .nav-tabs .nav-link .icon {
        margin-right: 8px;
    }

    .tab-content {
        padding: 20px;
        background-color: #fff;
        border-left: 1px solid #ddd;
    }
</style>

<div class="row">
    <div class="col-md-2">
        <ul class="nav nav-tabs p-3" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a href="{% url 'admin_panel' %}" class="nav-link" id="informacion-tab">
                    <span class="icon">
                        <i class="fas fa-home"></i>
                    </span>
                    Inicio
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="informacion-tab" data-bs-toggle="tab" data-bs-target="#informacion-sec" type="button" role="tab" aria-controls="informacion-sec"
                    aria-selected="true">
                    <span class="icon">
                        <i class="fas fa-info-circle"></i>
                    </span>
                    Información
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="horarios-tab" data-bs-toggle="tab" data-bs-target="#horarios-sec" type="button" role="tab" aria-controls="horarios-sec" aria-selected="true">
                    <span class="icon">
                        <i class="fas fa-clock"></i>
                    </span>
                    Horarios de Atención
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="seguridad-tab" data-bs-toggle="tab" data-bs-target="#seguridad-sec" type="button" role="tab" aria-controls="seguridad-sec" aria-selected="false">
                    <span class="icon">
                        <i class="fas fa-shield-alt"></i>
                    </span>
                    Seguridad
                </button>
            </li>
        </ul>
    </div>


    <div class="col-md-10">

        <div class="tab-content">


            <!-- Contenido para la pestaña Información -->
            <div class="tab-pane fade show active" id="informacion-sec" role="tabpanel" aria-labelledby="informacion-tab">
                <h3>Información</h3>

                <div class="container mt-4">
                    <div class="card border-0 shadow-sm p-3 mb-1 bg-body rounded w-100">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="col-10">
                                <h6 class="mb-0">
                                    <i class="fas fa-info-circle"></i> Información
                                </h6>
                                <small class="text-muted">Detalles de la información</small>
                            </div>
                            <div class="col-2 text-end">
                                <i class="fas fa-info-circle icon-info"></i>
                                <a href="#" class="stretched-link">&#x2192;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Contenido para la pestaña Horarios de Atención -->
            <div class="tab-pane fade" id="horarios-sec" role="tabpanel" aria-labelledby="horarios-tab">
                <h3>Horarios de Atención</h3>

                <div class="container mt-4">

                    <div class="alert alert-info mt-3 d-none" role="alert">
                        <h5>Horario Actual</h5>
                        <div id="horarioVerbose">

                        </div>
                    </div>

                    <div class="row">
                        <div class="col col-md-3">
                            <label for="">Abre</label>
                            <input type="time" name="hora_abre_todos" class="form-control horario-input" value="08:00">
                        </div>
                        <div class="col col-md-3">
                            <label for="">Cierra</label>
                            <input type="time" name="hora_cierra_todos" class="form-control horario-input" value="17:00">
                        </div>
                        <div class="col col-md-3 d-flex">
                            <button type="button" id="setSameTime" class="btn btn-warning w-100 mt-auto">Establecer Horario En Todos</button>
                        </div>
                        <div class="col col-md-3 d-flex">
                            <button type="button" id="setTodosAbierto" class="btn btn-danger w-100 mt-auto">Establecer Abierto En Todos</button>
                        </div>
                    </div>


                    <br>



                    <form id="horarioForm">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Día</th>
                                    <th>Abre</th>
                                    <th>Cierra</th>
                                    <th>Día Libre</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-dia="7">
                                    <td>Domingo</td>
                                    <td><input type="time" name="hora_abre_7" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_7" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="7"></td>
                                </tr>
                                <tr data-dia="1">
                                    <td>Lunes</td>
                                    <td><input type="time" name="hora_abre_1" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_1" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="1"></td>
                                </tr>
                                <tr data-dia="2">
                                    <td>Martes</td>
                                    <td><input type="time" name="hora_abre_2" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_2" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="2"></td>
                                </tr>
                                <tr data-dia="3">
                                    <td>Miércoles</td>
                                    <td><input type="time" name="hora_abre_3" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_3" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="3"></td>
                                </tr>
                                <tr data-dia="4">
                                    <td>Jueves</td>
                                    <td><input type="time" name="hora_abre_4" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_4" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="4"></td>
                                </tr>
                                <tr data-dia="5">
                                    <td>Viernes</td>
                                    <td><input type="time" name="hora_abre_5" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_5" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="5"></td>
                                </tr>
                                <tr data-dia="6">
                                    <td>Sábado</td>
                                    <td><input type="time" name="hora_abre_6" class="form-control horario-input"></td>
                                    <td><input type="time" name="hora_cierra_6" class="form-control horario-input"></td>
                                    <td><input type="checkbox" class="dia-libre" data-dia="6"></td>
                                </tr>
                            </tbody>
                        </table>
                        <button type="button" id="guardarHorario" class="btn btn-primary w-100">Guardar Horario</button>
                    </form>

                </div>

            </div>




            <!-- Contenido para la pestaña Seguridad -->
            <div class="tab-pane fade" id="seguridad-sec" role="tabpanel" aria-labelledby="seguridad-tab">
                <h3>Seguridad</h3>

                <div class="container mt-4">
                    <div class="card border-0 shadow-sm p-3 mb-1 bg-body rounded w-100">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h6 class="mb-0">Verificación en 2 Pasos</h6>
                                    <small class="text-muted">Mantén tu cuenta segura</small>
                                </div>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="verificationSwitch" data-name="switch-mfa" {% if userData.mfa2_value == 1 or userData.mfa2_value == '1' %} checked {% endif %}>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




        </div>
        <br>
        <br>


    </div>


</div>

{% endblock %}



{% block scripts %}


<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";


        $('#verificationSwitch').on('change', function () {
            var isChecked = $(this).is(':checked');
            var value = isChecked ? 1 : 0;

            try {
                $.ajax({
                    url: `{% url 'mfa_enable_disable' %}`,
                    type: "POST",
                    dataScr: 'data',
                    data: {
                        value: value,
                        csrfmiddlewaretoken: csrfToken
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.save != 1) {
                            Swal.fire("", "Error D: " + data.error, "error");
                        }
                    }
                });
            } catch (error) {
                Swal.fire("", "Error A: " + error, "error");
            }
        });


    });
</script>

<script>
    function saveHorarios() {
        let horarioData = [];

        $(".dia-libre").each(function () {
            let diaId = $(this).data("dia");
            let esLibre = $(this).is(":checked");
            let horaAbre = $(`input[name="hora_abre_${diaId}"]`).val();
            let horaCierra = $(`input[name="hora_cierra_${diaId}"]`).val();

            horarioData.push({
                dia_id: diaId,
                libre: esLibre,
                abre: esLibre ? "00:00" : horaAbre,
                cierra: esLibre ? "00:00" : horaCierra
            });
        });

        $.ajax({
            url: "{% url 'save_horario_atencion' %}",
            type: "POST",
            data: {
                horario: JSON.stringify(horarioData),
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            beforeSend: function () {
                $("#loading").show();
            },
            success: function (data) {
                $("#loading").hide();

                if (data.save == 1) {
                    Swal.fire("Éxito", "Horario guardado correctamente.", "success");

                    // setValues();
                } else {
                    Swal.fire("Error A1", "Hubo un problema: " + data.error, "error");
                }
            },
            error: function (error) {
                $("#loading").hide();
                Swal.fire("Error A2", "No se pudo guardar el horario.", "error");
            }
        });
    }

    $(document).on("click", "#guardarHorario", function () {
        saveHorarios();
    });

    $(document).on("change", ".dia-libre", function () {
        var diaId = $(this).data("dia");

        if ($(this).is(":checked")) {
            // Si es día libre, poner horas a 00:00
            $(`input[name="hora_abre_${diaId}"]`).val("00:00");
            $(`input[name="hora_cierra_${diaId}"]`).val("00:00");
        } else {
            // Si no es día libre, volver a los valores por defecto
            $(`input[name="hora_abre_${diaId}"]`).val("08:00");
            $(`input[name="hora_cierra_${diaId}"]`).val("17:00");
        }
    });

    $(document).on('click', '#horarios-tab', function () {
        setValues();
    });


    function setValues() {
        try {
            $.ajax({
                url: `{% url 'control_get_horario_atencion' %}`,
                method: 'POST',
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                beforeSend: function (xhr, type) {
                    // loading layer
                    $('#loading').show();
                }, success: function (data) {
                    if (data.save == 1) {
                        let horarioVerbose = "";

                        data.data.forEach(function (horario) {
                            var dia = horario.numero_dia;
                            var horaAbre = horario.hora_abre.substring(0, 5);  // Convertir de HH:MM:SS a HH:MM
                            var horaCierra = horario.hora_cierra.substring(0, 5);  // Convertir de HH:MM:SS a HH:MM
                            var libre = horario.libre === 1;

                            // Setear el valor de apertura y cierre
                            $("input[name='hora_abre_" + dia + "']").val(horaAbre);
                            $("input[name='hora_cierra_" + dia + "']").val(horaCierra);

                            // Setear el estado de "Día Libre"
                            $("input[data-dia='" + dia + "']").prop("checked", libre);

                            // Crear la descripción para cada día
                            let libre_ = libre ? "Cerrado" : "Abierto";
                            horarioVerbose += "<span><strong>" + horario.descripcion_dia + "</strong> (" + libre_ + ") De " + horaAbre + " a " + horaCierra + "</span><br>";
                            // console.log("<span><strong>" + horario.descripcion_dia + "("+libre_+") </strong> De <strong>" + horaAbre + "</strong> a <strong>" + horaCierra + "</strong></span><br>");
                        });

                        // Insertar la descripción en un párrafo con id "horarioVerbose"
                        $("#horarioVerbose").html(horarioVerbose);

                    } else {
                        Swal.fire("", "Error D5: " + data.error, "error");
                    }
                },
                error: function (error) {
                    Swal.fire("", "Error E: " + error, "error");
                },
                complete: function () {
                    // loading layer
                    $('#loading').hide();
                }
            });
        } catch (error) {
            Swal.fire("", "Error A: " + error, "error");
        }
    }


    // Establecer el mismo horario para todos
    $('#setSameTime').click(function () {
        var horaAbre = $('input[name="hora_abre_todos"]').val();
        var horaCierra = $('input[name="hora_cierra_todos"]').val();

        // Verifica si ambos campos tienen valores
        if (horaAbre && horaCierra) {
            // Aquí puedes colocar la lógica para establecer el mismo horario en todos los campos necesarios
            // console.log('Horario establecido: Abre a ' + horaAbre + ' y Cierra a ' + horaCierra);
            // Ejemplo: Establecer los mismos valores en otros inputs (puedes ajustar según sea necesario)

            // $('input[name^="hora_abre"]').val(horaAbre);
            // $('input[name^="hora_cierra"]').val(horaCierra);

            // Recorremos los días y actualizamos los horarios
            $(".dia-libre").each(function () {
                var diaId = $(this).data("dia");
                if (!$(this).is(":checked")) {  // Solo si el día no es libre
                    $(`input[name="hora_abre_${diaId}"]`).val(horaAbre);
                    $(`input[name="hora_cierra_${diaId}"]`).val(horaCierra);
                }
            });

            saveHorarios();
        } else {
            Swal.fire("", "Por favor, ingrese ambos horarios (abre y cierra).", "error");
        }

    });

    $('#setTodosAbierto').click(function () {
        // Desmarcar todos los checkboxes con la clase "dia-libre"
        $('.dia-libre').prop('checked', false);

        saveHorarios();
    });

</script>



{% endblock %}