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


{% block title %} Comercios Disponibles {% endblock %}

{% block body %}

<style>
    .custom-search-bar {
        display: flex;
        justify-content: flex-start;
        /* Alinea los elementos a la izquierda */
        align-items: center;
        background: white;
        /* Fondo blanco del buscador */
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* Sombra suave */
        max-width: 600px;
        /* Ancho máximo del buscador */
        width: 100%;
        /* Asegura que no exceda su contenedor */
        margin: 0 auto;
        /* Centra el buscador horizontalmente */
        padding: 0.5rem 0.7rem;
        /* Espaciado interno compacto */
    }

    @media (max-width: 768px) {
        .custom-search-bar {
            max-width: 90%;
            /* Se ajusta en pantallas más pequeñas */
            padding: 0.4rem;
            /* Espaciado reducido */
        }
    }

    .custom-search-item {
        display: flex;
        align-items: center;
        background: #f8f8f8;
        /* Fondo gris claro para el input */
        padding: 0.2rem 0.6rem;
        /* Tamaño compacto */
        border-radius: 20px;
        flex-grow: 1;
        /* Permite que el input ocupe el espacio disponible */
    }

    .custom-search-item i {
        margin-right: 0.4rem;
        /* Espaciado entre ícono y texto */
        color: #888;
        /* Color del ícono */
    }

    .custom-search-item input {
        border: none;
        outline: none;
        box-shadow: none;
        background: none;
        font-size: 0.9rem;
        /* Texto más pequeño */
        width: 100%;
        /* Ocupar todo el espacio del contenedor */
    }

    .custom-search-item input:focus {
        outline: none;
        box-shadow: none;
    }

    .custom-search-button {
        background: #000;
        /* Fondo negro */
        color: white;
        /* Color del texto */
        padding: 0.4rem 1rem;
        /* Compacta el botón */
        border: none;
        border-radius: 20px;
        /* Bordes redondeados */
        font-size: 0.8rem;
        cursor: pointer;
        transition: background 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-search-button i {
        font-size: 0.9rem;
        /* Ajusta el tamaño del ícono */
    }

    .custom-search-button:hover {
        background: #444;
        /* Cambia el color del fondo al pasar el mouse */
    }

    .custom-carousel {
        scroll-behavior: smooth;
    }
</style>

<h4><strong>Solicitudes de ayuda pendientes a comercios:</strong></h4>
<br>

{% if ayudasData %}
<div class="container-fluid mt-2" id="recommendations-{{ categoria.icono }}">
    <div class="d-flex flex-wrap">

        {% for ayuda in ayudasData %}
        <div class="col business-card" data-id="{{ ayuda.usuario_solicita }}" data-name="{{ ayuda.nombre }}" style="width: 300px !important; max-width: 300px !important;">
            <div class="card h-100">
                <strong class="mx-3 my-1">Comercio de {{ayuda.tipo_servicio}}</strong>
                <div class="row g-0">
                    <!-- Imagen y calificación a la derecha -->
                    <div class="col-4 d-flex flex-column align-items-center justify-content-center">
                        <div style="width: 100px; height: 100px; overflow: hidden; border-radius: 8px;">
                            <img src="{{ ayuda.foto_perfil }}" alt="No Image" class="p-2" style="width: 90%; height: 90%; object-fit: cover;">
                        </div>
                    </div>

                    <!-- Detalles del comercio a la izquierda -->
                    <div class="col-8">
                        <div class="card-body">
                            <h6 class="text-wrap"><b>{{ayuda.nombre}}</b></h6>
                            <small class="card-title mb-1 text-wrap"><strong>Fecha solicitud:</strong></small><br>
                            <small class="card-title mb-1 text-wrap">{{ayuda.fecha_hora_creado}}</small>
                        </div>
                    </div>
                </div>

                <!-- row -->
                <div class="row g-0">
                    <!-- Detalles del comercio a la izquierda -->
                    <div class="col-12">
                        <div class="card-body mt-0 pt-0">
                            <hr class="mt-0">
                            <small class="card-title mb-1 text-wrap"><strong>Comentarios del negocio:</strong></small><br>
                            <small class="card-title mb-1 text-wrap">{{ayuda.comentarios}}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}


    </div>
</div>
{% else %}

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
            <h4>Usted lo ha hecho! No hay solicitudes pendientes!</h4>
        </div>
    </div>
    <div class="row">
        <div class="col d-flex justify-content-center">
            <img src="https://cdn-icons-png.freepik.com/256/2820/2820166.png?semt=ais_hybrid" alt="Good">
        </div>
    </div>
</div>
{% endif %}


{% endblock %}



{% block scripts %}


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const carousel = document.querySelector('.custom-carousel');
        const leftButton = document.querySelector('.custom-carousel-button.custom-left');
        const rightButton = document.querySelector('.custom-carousel-button.custom-right');

        const scrollStep = 160; // Ajusta según el tamaño de los elementos visibles

        // Función para verificar y actualizar la visibilidad de los botones
        function updateButtonVisibility() {
            leftButton.style.display = carousel.scrollLeft > 0 ? 'flex' : 'none';
            rightButton.style.display = (carousel.scrollLeft + carousel.clientWidth) < carousel.scrollWidth ? 'flex' : 'none';
        }

        // Inicializa la visibilidad de los botones
        updateButtonVisibility();

        // Manejador de clics para el botón derecho
        rightButton.addEventListener('click', function () {
            let newScroll = carousel.scrollLeft + scrollStep;
            carousel.scrollTo({ left: newScroll, behavior: 'smooth' });
        });

        // Manejador de clics para el botón izquierdo
        leftButton.addEventListener('click', function () {
            let newScroll = carousel.scrollLeft - scrollStep;
            carousel.scrollTo({ left: newScroll, behavior: 'smooth' });
        });

        // Actualizar visibilidad de botones después de cada scroll
        carousel.addEventListener('scroll', updateButtonVisibility);

        // Recalcular límites y visibilidad de botones al redimensionar la ventana
        window.addEventListener('resize', updateButtonVisibility);
    });

    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var userName = "{{ userName }}";

        $('#filtered-container').hide();
        $('#filteredCards').empty();
        $('#searchInput').val('');

        // Función para normalizar texto (eliminar acentos y convertir a minúsculas)
        function normalizeText(text) {
            // Verifica que text es una cadena
            text = typeof text === 'string' ? text : '';
            return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
        }

        $('#clearFilter').click(function (e) {
            e.preventDefault();

            $('#filtered-container').hide();
            $('#filteredCards').empty();
            $('#searchInput').val('');
        });

        $('#searchInput').on('keyup', function () {
            var searchTerm = normalizeText($(this).val() || '');

            const filteredContainer = $('#filtered-container');
            const filteredCards = $('#filteredCards');

            filteredCards.empty();

            if (searchTerm.trim() == '') {
                // Si el término está vacío, oculta la sección filtrada
                filteredContainer.hide();
                return;
            }

            let resultsFound = false;
            $('.business-card').each(function () {
                var businessName = normalizeText($(this).data('name') || '');
                var businessCategory = normalizeText($(this).data('category') || '');
                var businessId = $(this).data('id');

                // Mostrar/ocultar tarjetas según la coincidencia
                if (businessName.includes(searchTerm)) {
                    if (filteredCards.find(`.business-card[data-id="${businessId}"]`).length == 0) {
                        const clonedCard = $(this).clone();
                        filteredCards.append(clonedCard);
                        resultsFound = true;
                        $('#filtered-container').show();
                    }
                }
            });

            // Mostrar mensaje si no hay coincidencias
            const visibleCards = $('#filteredCards .business-card').length;

            if (visibleCards == 0) {
                $('#filteredCards').empty();
                $('.container-fluid').last().append('<p id="no-results" class="text-center text-muted">No se encontraron resultados.</p>');
            } else {
                // $('#filteredCards').empty();
            }
        });

        $('.custom-carousel-item').click(function () {
            // Obtener la categoría y el destino de la sección
            var category = $(this).data('category');
            var targetSection = $(this).data('target');

            // Desplazarse suavemente a la sección correspondiente
            $('html, body').animate({
                scrollTop: $('#' + targetSection).offset().top
            }, 500); // 800ms para desplazamiento suave
        });

        const $carousel = $('.custom-carousel');

        let touchStartX = 0;
        let scrollStart = 0;

        $carousel.on('touchstart', function (e) {
            touchStartX = e.originalEvent.touches[0].clientX; // Registrar la posición inicial del toque
            scrollStart = $carousel.scrollLeft(); // Posición inicial del scroll
        });

        $carousel.on('touchmove', function (e) {
            const touchEndX = e.originalEvent.touches[0].clientX;
            const touchDiff = touchStartX - touchEndX;

            $carousel.scrollLeft(scrollStart + touchDiff); // Ajustar el scroll nativo
        });

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

            // Usamos JavaScript para construir la URL con el valor de negocio_id
            var url = '{% url "control_productos_x_negocio" "negocio_id" %}'.replace("negocio_id", negocio_id);

            window.location.href = url;

        });



        $('#listPedidos').click(function (e) {
            e.preventDefault();


            window.location = "{% url 'pedidos_listado_cliente' %}";

        });

    });
</script>



{% endblock %}