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

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


{% block body %}

<style>
    .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">


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


{% 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 }}";

    });
</script>



{% endblock %}