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


{% block title %} Servicios 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>

<div class="sticky-footer">
    <section class="carousel-section custom-carousel-container">
        <div class="custom-carousel">

            {% for categoria in categoriasData %}
            <div class="custom-carousel-item text-center" data-category="{{categoria.icono }}" data-target="recommendations-{{categoria.icono }}">
                <i class="material-icons" style="color: rgb(156, 46, 46);">{{categoria.icono }}</i>
                <p class="mt-2"><b>{{categoria.tipo_negocio }}</b></p>
            </div>
            {% endfor %}

        </div>

        <!-- Botones de navegación con Material Icons -->
        <button class="custom-carousel-button custom-left">
            <i class="material-icons">chevron_left</i>
        </button>
        <button class="custom-carousel-button custom-right">
            <i class="material-icons">chevron_right</i>
        </button>
    </section>
</div>

<br>

<div class="custom-search-bar d-flex align-items-center p-2" style="width: 100% !important;">

    <div class="custom-search-item d-flex align-items-center flex-fill">

        <label for="services" class="visually-hidden">Buscar Servicio</label>

        <i class="fas fa-th-large me-2 text-muted"></i>
        <input id="searchInput" type="text" class="form-control form-control-sm" placeholder="Buscar servicios...">
    </div>

    <button type="submit" class="custom-search-button btn btn-dark btn-sm rounded-pill ms-2 px-3">
        <i class="fas fa-search"></i>
    </button>

    <div class="col-sm-2">
        <button type="button" class="btn btn-sm btn-warning w-100 rounded-pill ms-2 px-3" id="listSolicitudes">Mis
            Solicitudes</button>
    </div>
</div>

<br>

<div id="filtered-container">
    <h4>Resultados de la búsqueda</h4>
    <button id="clearFilter" class="btn btn-secondary mb-3">Limpiar Filtro</button>
    <div class="container-fluid">
        <div class="d-flex flex-wrap" id="filteredCards">

        </div>
    </div>
</div>

<hr>
{% for categoria in categoriasData %}
<div class="container-fluid mt-2" id="recommendations-{{ categoria.icono }}">
    <h4 id="category-title">{{ categoria.tipo_negocio }}</h4>
    <div class="d-flex flex-wrap">

        {% for negocio in negociosData %}
        {% if negocio.id_tipo_negocio == categoria.id_tipo_negocio %}
        <div class="col business-card"
        onclick="window.location = '{% url "ver_negocio" negocio_id=negocio.id_usuario %}'"
        data-id="{{ negocio.id_usuario }}" data-name="{{ negocio.nombre }}" style="width: 300px !important; max-width: 300px !important;">
            <div class="card mb-3 h-100">
                <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; margin-bottom: 8px;">
                            <img src="{{ negocio.foto_perfil }}" alt="No Image" class="p-2" style="width: 90%; height: 90%; object-fit: cover;">
                        </div>
                        <span class="text-warning p-2" style="font-size: 13px !important;"><i class="fas fa-star"></i>{{negocio.calificacion}}</span>
                    </div>

                    <!-- Detalles del servicio a la izquierda -->
                    <div class="col-8">
                        <div class="card-body">
                            <h6 class="text-wrap"><b>{{negocio.nombre}}</b></h6>
                            <small class="card-title mb-1 text-wrap">{{negocio.telefono}}</small><br>
                            <small class="card-title mb-1 text-wrap">{{ negocio.dias_atencion }}</small><br>
                            <small class="card-title mb-1 text-wrap">{{ negocio.horario_atencion }}</small>
                            <small class="card-title mb-1 text-wrap d-none">{{ negocio.tipo_negocio }}</small>
                        </div>
                    </div>
                </div>

                <div class="row g-0">
                    <!-- Detalles de la dirección -->
                    <div class="col-12 py-2 px-3">
                        <small class="card-title mb-1 text-wrap">
                            <i class="fas fa-map-marker-alt me-2"></i>{{negocio.direccion}}
                        </small>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>
<hr>
{% endfor %}


{% 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');

            // ESTO ES UN INTENTO DE MANDAR a una VIEW CON DATA POST XD?
            // $.ajax({
            //     url: `#`,
            //     type: "POST",
            //     dataScr: 'data',
            //     data: {
            //         negocio: negocio_id,
            //         csrfmiddlewaretoken: csrfToken
            //     },
            //     success: function (data) {
            //         console.log(data);
            //         if (data.save == 1) {
            //             window.location = window.location + "/productos/" + negocio_id + "/" + negocio_name + "/" + data.pedido;
            //         }
            //     },
            // });

        });



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


            window.location = "#";

        });

    });
</script>



{% endblock %}