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


{% block title %} Negocios Disponibles {% endblock %}

{% block body %}

<div class="row justify-content-center">
    <label for=""><b>Buscar Negocio</b></label>
    <input type="text" id="searchInput" class="form-control form-control-sm mb-4" placeholder="Buscar negocio">
    <div id="negociosContainer" class="row"></div>
    <div id="paginationContainer" class="pagination"></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 }}";

        const negocios = {{ negocios_list|safe }};

        const itemsPerPage = 16;
        let currentPage = 1;
        let filteredNegocios = negocios;

        // Función para generar tarjetas de negocios
        function generateCards(page) {
            const container = $('#negociosContainer');
            container.empty(); // Limpiar el contenido anterior

            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const paginatedNegocios = filteredNegocios.slice(start, end);

            if (paginatedNegocios.length > 0) {
                $.each(paginatedNegocios, function (index, negocio) {
                    container.append(`
                        <div class="col-6 col-md-3 mb-3">
                            <div class="business-card" data-id="${negocio.id}" data-name="${negocio.nombre}">
                                <div class="img-container">
                                    <img class="card-img-top" style="height: 40px; width: 40px; margin: 1%;"
                                        src="{% static 'app/assets/images/logo.jpg' %}">
                                </div>
                                <div class="business-card-body">
                                    <h5 class="business-card-title">${negocio.nombre}</h5>
                                </div>
                            </div>
                        </div>
                    `);
                });
            } else {
                container.append('<div class="col-lg-12 text-center"><p>No se encontraron resultados.</p></div>');
            }
        }

        // Función para crear la paginación
        function generatePagination() {
            const pagination = $('#paginationContainer');
            pagination.empty();

            const totalPages = Math.ceil(filteredNegocios.length / itemsPerPage);

            if (totalPages > 1) {
                for (let i = 1; i <= totalPages; i++) {
                    pagination.append(`<a class="page-link" data-page="${i}">${i}</a>`);
                }
            }

            $('.page-link').on('click', function () {
                currentPage = $(this).data('page');
                generateCards(currentPage);
            });
        }

        // Función para filtrar tarjetas
        function filterCards() {
            const input = normalizeText($('#searchInput').val());

            if (input === "") {
                filteredNegocios = negocios;
            } else {
                filteredNegocios = negocios.filter(function (negocio) {
                    return normalizeText(negocio).includes(input);
                });
            }

            currentPage = 1;
            generatePagination();
            generateCards(currentPage);
        }

        // Función para normalizar texto (eliminar acentos y convertir a minúsculas)
        function normalizeText(text) {
            return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
        }

        generatePagination();
        generateCards(currentPage);
        $('#searchInput').on('keyup', filterCards);


        $(document).on('click', '.business-card', function () {
            negocio_id = $(this).data('id');
            negocio_name = $(this).data('name');

            window.location = window.location + "/productos/" + negocio_id + "/" + negocio_name;
        });

    });
</script>



{% endblock %}