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



<main id="mainContent" class="flex-grow flex items-center justify-center p-4">
    <div class="max-w-md w-full grid grid-cols-1 gap-4">

        <!-- Realizar Pedido -->
        <a href="{% url 'list_negocios_pedidos' %}"
            class="bg-white shadow-lg border border-red-500 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-shopping-cart text-2xl text-red-600"></i>
                <span class="text-base font-semibold text-black">Realizar Pedido</span>
            </div>
        </a>

        <a href="{% url 'publicaciones' %}"
            class="bg-white shadow-lg border border-red-500 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-calendar-alt text-2xl text-red-600"></i>
                <span class="text-base font-semibold text-black">Publicaciones</span>
            </div>
        </a>

        <!-- Reportes -->
        <a href="#" onclick="document.getElementById('modalReportes').classList.remove('hidden')"
            class="bg-white shadow-md border border-gray-300 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-chart-line text-2xl text-gray-600"></i>
                <span class="text-base font-semibold text-black">Reportes</span>
            </div>
        </a>

        <!-- Crear Publicaciones -->
        {% if productos %}
        <a href="#" onclick="document.getElementById('modalPedidos').classList.remove('hidden')"
            class="bg-white shadow-md border border-gray-300 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-receipt text-2xl text-indigo-600"></i>
                <span class="text-base font-semibold text-black">Gestion Pedidos</span>
            </div>
        </a>
        <!-- <a href="{% url 'control_pedidos_x_negocio' user_id %}"
            class="bg-white shadow-md border border-gray-300 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-receipt text-2xl text-indigo-600"></i>
                <span class="text-base font-semibold text-black">Pedidos a mi Comercio</span>
            </div>
        </a> -->

        <!-- Control Caja -->
        <a href="{% url 'control_caja' %}"
            class="bg-white shadow-md border border-gray-300 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-dollar-sign text-2xl text-green-600"></i>
                <span class="text-base font-semibold text-black">Control Caja</span>
            </div>
        </a>


        <!-- Estado de Cuenta -->
        <a href="{% url 'control_suscripciones' %}"
            class="bg-white shadow-md border border-gray-300 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-credit-card text-2xl text-blue-600"></i>
                <span class="text-base font-semibold text-black">Estado de Cuenta</span>
            </div>
        </a>
        {% endif %}




        <!-- Ayudar Negocios (Admin) -->
        {% if tipo_usuario == 1 %}
        <a href="{% url 'control_negocios_ayudas' %}"
            class="bg-white shadow-md border border-gray-300 rounded-xl px-6 py-4 flex items-center justify-between transition hover:scale-[1.02] active:scale-95">
            <div class="flex items-center space-x-4">
                <i class="fas fa-hands-helping text-2xl text-purple-600"></i>
                <span class="text-base font-semibold text-black">Ayudar Negocios</span>
            </div>
        </a>
        {% endif %}

    </div>
</main>



<!-- 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 }}";


        localStorage.setItem('jwtToken', '{{token}}');

        $('#mainContent').hide();
    });

    $(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();




        $(document).on('click', '.business-card', function (event) {
            const csrfToken = "{{ csrf_token }}";
            const negocio_id = "{{ user_id }}";
            const negocio_name = "{{ fullName }}";

            $.ajax({
                url: "{% url 'pedidos_validar_existe_pendiente' %}",
                type: "POST",
                data: {
                negocio: negocio_id,
                csrfmiddlewaretoken: csrfToken
                },
                success: (data) => {
                if (data.save == 1) {
                    // Opción A: Asegurarte de que la URL final tenga '/pedidos/productos'
                    const currentPath = window.location.pathname;
                    // Si no termina con "/", se la agregamos 
                    // (ej: "/admin/panel/negocios/pedidos" => "/admin/panel/negocios/pedidos/")
                    const normalizedPath = currentPath.endsWith('/') ? currentPath : currentPath + '/';

                    // Construimos la URL final
                    const finalURL = window.location.origin
                    + normalizedPath
                    + "negocios/pedidos/x/cliente/productos/"
                    + negocio_id + "/"
                    + negocio_name + "/"
                    + data.pedido;

                    window.location.href = finalURL;
                }
                },
                error: () => {
                alert("Error al procesar la solicitud");
                }
            });
            });


    });
</script>



{% endblock %}