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

{% block title %} Pantalla Principal {% endblock %}


{% block body %}

<style>
    .page-wrapper {
        background-color: rgba(0, 0, 0, 0.426) !important;
    }

    .menu-hover {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .menu-hover:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

    .animated-icon:hover {
        animation: bounce 1s;
        transform: rotate(10deg);
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }
</style>

<div class="row" id="mainContent" style="display: none;">

    <div class="container text-center my-4">
        <div class="row justify-content-center gy-3">
            <div class="col-12 col-md-4">
                <a href="{% url 'list_negocios_pedidos' %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-shopping-cart fa-2x mb-2 animated-icon"></i>
                    <span>Realizar Pedido</span>
                </a>
            </div>
            {% if productos %}
            <div class="col-12 col-md-4">
                <a href="{% url 'control_productos_x_negocio' user_id %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-tags fa-2x mb-2 animated-icon"></i>
                    <span>Mis Productos</span>
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="{% url 'control_pedidos_x_negocio' user_id %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-receipt fa-2x mb-2 animated-icon"></i>
                    <span>Pedidos a mi Comercio</span>
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="{% url 'publicaciones' %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-calendar-alt fa-2x mb-2 animated-icon"></i>
                    <span>Crear Publicaciones</span>
                </a>
            </div>
            {% endif %}
            {% if tipo_usuario == 1 %}
            <div class="col-12 col-md-4">
                <a href="{% url 'admin_catalogos_view' %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-box-open fa-2x mb-2 animated-icon"></i>
                    <span>Catalogos</span>
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="{% url 'control_negocios_ayudas' %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-question-circle fa-2x mb-2 animated-icon"></i>
                    <span>Ayudar Negocios</span>
                </a>
            </div>
            {% endif %}
            <div class="col-12 col-md-4" id="opcionEstadoCuenta">
                <a href="{% url 'control_suscripciones' %}" class="btn btn-outline-danger text-black w-100 p-4 rounded-lg shadow-lg d-flex flex-column align-items-center menu-hover">
                    <i class="fas fa-credit-card fa-2x mb-2 animated-icon"></i>
                    <span>Estado de cuenta</span>
                </a>
            </div>
        </div>
    </div>




    <!--     <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'solicitar_servicios' user_id=user_id %}" class="menu-type-option" data-type="Pedido">
            <i class="fas fa-calendar-alt"></i>
            <h5>Solicitar Servicios</h5>
        </a>
    </div>

    {% if servicios %}
    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'control_servicios_x_negocio' user_id %}" class="menu-type-option" data-type="Servicios">
            <i class="fas fa-concierge-bell"></i>
            <h5>Mis Servicios</h5>
        </a>
    </div>

    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'control_solicitudes_x_negocio' user_id %}" class="menu-type-option" data-type="Servicios">
            <i class="fas fa-paper-plane"></i>
            <h5>Solicitudes a mi Comercio</h5>
        </a>
    </div>

    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'publicaciones' %}" class="menu-type-option" data-type="Pedido">

            <i class="fas fa-calendar-alt"></i>
            <h5>Crear Publicaciones</h5>
        </a>
    </div>
    {% endif %} -->

</div>




<!-- <h4 class="text-center"> Disenios</h4>

<div class="row mt-5">
    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'solicitar_pedido_disenio' %}" class="menu-type-option" data-type="Pedido">
            <i class="fas fa-shopping-cart"></i>
            <h5>Realizar Pedido</h5>
        </a>
    </div>


    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'solicitar_servicios_disenio'%}" class="menu-type-option" data-type="Pedido">
            <i class="fas fa-calendar-alt"></i>
            <h5>Solicitar Servicios Disenio</h5>
        </a>
    </div>
    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'listado_productos_disenio' %}" class="menu-type-option" data-type="Pedido">

            <i class="fas fa-calendar-alt"></i>
            <h5>Listar Pedidos</h5>
        </a>
    </div>
    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'crear_publicaciones_disenio' %}" class="menu-type-option" data-type="Pedido">

            <i class="fas fa-calendar-alt"></i>
            <h5>Crear Publicaciones</h5>
        </a>
    </div>
    <div class="col-12 col-md-auto mb-2">
        <a href="{% url 'mapView' %}" class="menu-type-option" data-type="Map">

            <i class="fas fa-location-arrow"></i>
            <h5>Mis Ubicaciones</h5>
        </a>
    </div>
</div> -->

<!-- No tienes acceso no has realizado los pagos -->
<div id="bloqueoModal" class="modal fade" tabindex="-1" aria-labelledby="bloqueoModalLabel" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h4 class="modal-title text-white" id="bloqueoModalLabel">
                    Usted no tiene acceso a NEXUS! <i class="fas fa-exclamation-triangle text-white"></i>
                </h4>
                <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
            </div>
            <div class="modal-body">
                <strong class="text-center fs-5">
                    ¡Su acceso a la plataforma ha sido denegado!
                </strong>
                <br><br>
                <span class="fs-5"> Para acceder nuevamente, por favor realice sus pagos en estado mora.</span>
            </div>
            <div class="modal-footer">
                <a href="{% url 'control_suscripciones' %}" class="btn btn-success">Pagar <i class="fas fa-credit-card ms-2"></i></a>
                <a href="{% url 'logoutRequest' %}" class="btn btn-primary">Salir</a>
            </div>
        </div>
        l
    </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 fullName = "{{ fullName }}";



    });

    $(window).on("pageshow", function () {
        function control_acceso() {
            try {
                $.ajax({
                    type: 'POST',
                    url: '{% url "control_acceso_x_pagos" %}',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    beforeSend: function (xhr, type) {
                        // loading layer
                        $('#loading').show();
                    },
                    success: function (data) {
                        if (data.save == 1) {
                            // SI en la tabla configuraciones la opcion pk 9 validar acceso segun pagos vale 0
                            if (data.estado_cuenta.validar_acceso == 0) {
                                $('#opcionEstadoCuenta').hide();
                                return;
                            }

                            // Si puede acceder
                            if (data.estado_cuenta.acceso == 1) {

                                // Tiene un pago pendiente
                                if (data.estado_cuenta.pagos_pendientes > 0) {
                                    Swal.fire({
                                        title: "Recordatorio",
                                        text: "Usted tiene pagos pendientes, revise su estado de cuenta.",
                                        icon: "warning",
                                        showCancelButton: true,
                                        confirmButtonText: '<i class="fas fa-credit-card"></i> Ver estado de cuenta',
                                        cancelButtonText: 'Cancelar',
                                        customClass: {
                                            confirmButton: 'btn btn-success', // Clase Bootstrap para color verde
                                            cancelButton: 'btn btn-danger' // Clase para el botón de cancelar
                                        },
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            window.location.href = "{% url 'control_suscripciones' %}";
                                        }
                                    });

                                }
                            }
                            // no puede acceder
                            else {
                                $('#bloqueoModal').modal('show');
                            }
                        } else {
                            Swal.fire("", "Error A2: " + data.error, "error");
                        }
                    },
                    complete: function (data) {
                        // loading layer
                        $('#loading').hide();

                        // Main Content
                        $('#mainContent').show();

                    }
                });

            } catch (error) {
                Swal.fire("", "Error A1: " + error, "error");
            }
        }

        control_acceso();
    });
</script>



{% endblock %}