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


{% block title %}Inicio{% endblock %}

{% block head %}

{% endblock %}

{% block content %}
<!-- CONTENIDO -->
<!-- <ion-content fullscreen>
    {% include 'ionic_refresher.html' %}

    <ion-card>
        <ion-item lines="none" href="{% url 'list_negocios_pedidos' %}">
            <ion-icon name="cart" slot="start" color="red"></ion-icon>
            <ion-label>Realizar Pedido</ion-label>
        </ion-item>
    </ion-card>

    <ion-card>
        <ion-item lines="none" href="{% url 'publicaciones' %}">
            <ion-icon name="calendar" slot="start" color="warning"></ion-icon>
            <ion-label>Publicaciones</ion-label>
        </ion-item>
    </ion-card>

    <ion-card>
        <ion-item lines="none" data-id="menu_ion__m_reportes" button="true">
            <ion-icon name="stats-chart" slot="start" color="secondary"></ion-icon>
            <ion-label>Reportes</ion-label>
        </ion-item>
        <ion-ripple-effect></ion-ripple-effect>
    </ion-card>

    {% if productos %}
    <ion-card>
        <ion-item lines="none" data-id="menu_ion__m_pedidos" button="true">
            <ion-icon name="receipt" slot="start" color="tertiary"></ion-icon>
            <ion-label>Gestion Pedidos</ion-label>
        </ion-item>
    </ion-card>

    <ion-card>
        <ion-item lines="none" href="{% url 'control_caja' %}">
            <ion-icon name="cash" slot="start" color="success"></ion-icon>
            <ion-label>Control Caja</ion-label>
        </ion-item>
    </ion-card>

    <ion-card>
        <ion-item lines="none" href="{% url 'control_suscripciones' %}">
            <ion-icon name="card" slot="start" color="primary"></ion-icon>
            <ion-label>Estado de Cuenta</ion-label>
        </ion-item>
    </ion-card>
    {% endif %}

    {% if tipo_usuario == 1 %}
    <ion-card>
        <ion-item lines="none" href="{% url 'control_negocios_ayudas' %}">
            <ion-icon name="people" slot="start" color="gray"></ion-icon>
            <ion-label>Ayudar Negocios</ion-label>
        </ion-item>
    </ion-card>
    {% endif %}

</ion-content> -->

<!-- CONTENIDO -->
<ion-content fullscreen class="ion-padding">
    {% include 'ionic_refresher.html' %}

    <!-- MARCA DE AGUA FIJA CENTRADA -->
    <div class="fixed inset-0 flex items-center justify-center pointer-events-none select-none z-[-1]">
        <img src="{% static 'app/assets/images/logo.jpg' %}" alt="Marca de Agua" class="w-[100%] sm:max-w-[450px] opacity-10">
    </div>

    <!-- CONTENIDO PRINCIPAL -->
    <div class="flex items-center justify-center p-4 relative z-10">
        <div class="max-w-md w-full grid grid-cols-1 gap-4">

            <a href="{% url 'list_negocios_pedidos' %}" class="bg-white shadow-lg border 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 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-tags text-2xl text-orange-700"></i>
                    <span class="text-base font-semibold text-black">Publicaciones</span>
                </div>
            </a>
    
            <a href="#" data-id="menu_ion__m_reportes" 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>
    
            {% if productos %}
            <a href="#" data-id="menu_ion__m_pedidos" 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_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>
    
            <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 %}
    
            {% 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-users text-2xl text-gray-500"></i>
                    <span class="text-base font-semibold text-black">Ayudar Negocios</span>
                </div>
            </a>
            {% endif %}
        </div>

    </div>
</ion-content>

<!-- BLOQUEO MODAL -->
<ion-modal id="bloqueoModal" trigger="none">
    <ion-content class="ion-padding">
        <ion-card>
            <ion-card-header>
                <ion-card-title>Usted no tiene acceso a NEXUS</ion-card-title>
                <ion-icon name="warning" size="large"></ion-icon>
            </ion-card-header>
            <ion-card-content>
                <p>¡Su acceso a la plataforma ha sido denegado!</p>
                <p>Para acceder nuevamente, por favor realice sus pagos en estado mora.</p>
                <ion-button expand="block" href="{% url 'control_suscripciones' %}">
                    <ion-icon name="card" slot="start"></ion-icon>Pagar
                </ion-button>
                <ion-button expand="block" href="{% url 'logoutRequest' %}">
                    <ion-icon name="log-out" slot="start"></ion-icon>Salir
                </ion-button>
            </ion-card-content>
        </ion-card>
    </ion-content>
</ion-modal>
{% endblock %}

{% block scripts %}
<script>
    var csrfToken = "{{ csrf_token }}";

    function handleEstadoText(estado_text) {
        return estado_text === 'ENTREGADO' ? 'success' : 'medium';
    }

    function badgeEstadoText(estado_text) {
        return `<ion-badge color="${handleEstadoText(estado_text)}">${estado_text}</ion-badge>`;
    }

    function renderOrders(data) {
        $('#pedidos_skeleton').remove(); // Elimina el esqueleto de carga

        // data = []; // Para pruebas, descomentar esta línea para simular una lista vacía
        const lista = $('.orders-list');

        if (data.length === 0) {
            lista.append(`
                <ion-item lines="none" class="no-orders-item">
                <ion-icon name="cart-outline" slot="start" class="empty-cart-icon"></ion-icon>
                <ion-label class="ion-text-wrap">
                    <h2>No hay pedidos</h2>
                    <p>Aún no has realizado ningún pedido.</p>
                    
                    <ion-button 
                    fill="outline" 
                    size="small" 
                    class="view-orders-btn"
                    onclick="window.location.href='{% url 'pedidos_listado_cliente' %}'">
                    <ion-icon slot="start" name="document-text-outline"></ion-icon>
                    Ver mis pedidos
                    </ion-button>
                </ion-label>
                </ion-item>
            `);
        } else {
            data.forEach(order => {
                lista.append(`
                    <ion-item>
                        <ion-icon name="cart" slot="start"></ion-icon>
                        <ion-label>
                            <div style="margin-bottom: 4px;">${order?.forma_entrega}</div>
                            <div style="display: flex; align-items: center;">
                                ${badgeEstadoText(order?.estado_text)}
                                <span style="font-size: 12px; margin-left: 8px;">${order?.fecha_hora_creado_text}</span>
                            </div>
                        </ion-label>
                        <ion-button 
                            slot="end" 
                            fill="outline" 
                            size="small" 
                            onclick="window.location.href='{% url 'pedidos_listado_cliente' %}?${order?.id}'">
                            <ion-icon name="open-outline" slot="end"></ion-icon>Ver
                        </ion-button>
                    </ion-item>
                `);
            });
        }
    }

    function loadOrders(estado = 0, opc = 1) {
        $.ajax({
            url: `{% url 'pedidos_list_pedidos_cliente_negocio' %}`,
            method: "POST",
            data: {
                estado: estado,
                opc: opc,
                tipo: 2,
                csrfmiddlewaretoken: csrfToken
            },
            beforeSend: () => showLoadingBar(),
            complete: () => hideLoadingBar(),
            success: response => {
                if (response.data) {
                    renderOrders(response.data);
                } else if (response.error) {
                    showAlerta(`Error al cargar los pedidos: ${response.error}`);
                }
            }
        });
    }

    // document.querySelector('#fab_crear_pedido').addEventListener('click', () => {
    //     window.location.href = "{% url 'list_negocios_pedidos' %}";
    // });

    // Al cargar la página, solicitas los pedidos
    document.addEventListener('DOMContentLoaded', () => {
        loadOrders();
    });
</script>
{% endblock %}