{% 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="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 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>


    </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>



{% endblock %}