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

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

{% block body %}
<style>
  /* Buscador */
  .custom-search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    margin: 1rem auto;
    padding: 0.5rem 1rem;
  }
  .custom-search-item {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    flex-grow: 1;
  }
  .custom-search-item i {
    margin-right: 0.5rem;
    color: #888;
  }
  .custom-search-item input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    width: 100%;
  }
  .custom-search-button {
    background: #000;
    color: #fff;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s;
  }
  .custom-search-button:hover {
    background: #444;
  }
  
  /* Carousel */
  .custom-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.5rem;
  }
  .custom-carousel-item {
    flex: 0 0 auto;
    margin-right: 1rem;
    cursor: pointer;
  }
  .custom-carousel-item button {
    width: 50px;
    height: 50px;
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
  }
  .custom-carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 10;
  }
  .custom-carousel-button.custom-left {
    left: 10px;
  }
  .custom-carousel-button.custom-right {
    right: 10px;
  }
  
  /* Business Card */
  .business-card { 
    margin-bottom: 1rem; 
    cursor: pointer; 
  }
  .business-card .card {
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
    border-radius: 10px;
  }
  .business-card .card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  /* Follow Button */
  .btn-follow {
    background: transparent;
    color: #007bff;
    border: 1px solid #007bff;
  }
  .btn-follow:hover {
    background: #007bff;
    color: #fff;
  }
  .btn-unfollow {
    background: #007bff;
    color: #fff;
    border: 1px solid #007bff;
  }
  
  /* Search results */
  #filtered-container {
    display: none;
  }
</style>

<!-- CARRUSEL DE CATEGORÍAS -->
<div class="sticky-footer">
  <section class="carousel-section custom-carousel-container" style="position: relative;">
    <div class="custom-carousel">
      {% for categoria in categoriasData %}
      <div class="custom-carousel-item text-center" data-category="{{ categoria.icono }}" data-target="recommendations-{{ categoria.icono }}">
        <div class="text-center">
          <button class="btn rounded-circle">
            <i class="material-icons">{{ categoria.icono }}</i>
          </button>
          <p class="small mt-1" style="color:#212529;"><b>{{ categoria.tipo_negocio }}</b></p>
        </div>
      </div>
      {% endfor %}
    </div>
    <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>

<!-- BUSCADOR -->
<div class="custom-search-bar">
  <div class="custom-search-item">
    <label for="services" class="visually-hidden">Buscar Comercio</label>
    <i class="fas fa-th-large"></i>
    <input id="searchInput" type="text" class="form-control form-control-sm" placeholder="Comercio">
  </div>
  <button type="submit" class="custom-search-button">
    <i class="fas fa-search"></i>
  </button>
  <div class="col-sm-3">
    <button type="button" class="btn btn-warning btn-sm rounded-pill w-100" id="listPedidos">Mis Pedidos</button>
  </div>
</div>

<br>

<!-- CONTENEDOR DE RESULTADOS DE FILTRO -->
<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>

<!-- LISTADO DE NEGOCIOS POR CATEGORÍA -->
{% 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" data-id="{{ negocio.id_usuario }}" data-name="{{ negocio.nombre }}" style="width: 300px; max-width: 300px;">
        <div class="card mb-3 h-100">
          <div class="row g-0">
            <div class="col-4 d-flex flex-column align-items-center justify-content-center">
              <!-- FOTO con enlace a perfil_negocio -->
              <div style="width:100px; height:100px; overflow:hidden; border-radius:8px; margin-bottom:8px;">
                <a href="{% url 'perfil_negocio' negocio.id_usuario %}" style="display: block;">
                  <img src="{{ negocio.foto_perfil }}" alt="No Image" class="p-2" style="width:90%; height:90%; object-fit:cover;">
                </a>
              </div>
              <span class="text-warning p-2" style="font-size: 13px;">
                <i class="fas fa-star"></i>{{ negocio.calificacion }}
              </span>
            </div>
            <div class="col-8">
              <div class="card-body">
                <!-- SOLO EL NOMBRE (NO ES ENLACE) -->
                <h6 class="text-wrap">
                  <b>{{ negocio.nombre }}</b>
                </h6>
                <h6 class="text-wrap">
                  {% if negocio.horario %}
                    {% if negocio.esta_abierto %}
                      <b class="text-success">Abierto</b>
                    {% else %}
                      <span>
                        <b class="text-danger">Cerrado</b>
                        {% if negocio.proximo_dia_abierto and negocio.proxima_hora_apertura %}
                          ⋅ Abre el {{ negocio.proximo_dia_abierto }} a las {{ negocio.proxima_hora_apertura }}
                        {% endif %}
                      </span>
                    {% endif %}
                  {% else %}
                    <span><b class="text-danger">No hay un horario</b></span>
                  {% endif %}
                </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>
                <div class="mt-2">
                  <button class="btn btn-sm {% if negocio.seguidor_actual %}btn-unfollow{% else %}btn-follow{% endif %}" data-id="{{ negocio.id_usuario }}">
                    {% if negocio.seguidor_actual %}
                      Seguido
                    {% else %}
                      Seguir
                    {% endif %}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}
    {% endfor %}
  </div>
</div>
<hr>
{% endfor %}

{% endblock %}

{% block scripts %}
<script>
  // --------------------------
  // 1. Carousel con vanilla JS
  // --------------------------
  document.addEventListener('DOMContentLoaded', () => {
    const carousel = document.querySelector('.custom-carousel'),
          leftButton = document.querySelector('.custom-carousel-button.custom-left'),
          rightButton = document.querySelector('.custom-carousel-button.custom-right'),
          scrollStep = 160;

    const updateButtonVisibility = () => {
      leftButton.style.display = carousel.scrollLeft > 0 ? 'flex' : 'none';
      rightButton.style.display = (carousel.scrollLeft + carousel.clientWidth) < carousel.scrollWidth ? 'flex' : 'none';
    };

    updateButtonVisibility();
    rightButton.addEventListener('click', () => {
      carousel.scrollTo({ left: carousel.scrollLeft + scrollStep, behavior: 'smooth' });
    });
    leftButton.addEventListener('click', () => {
      carousel.scrollTo({ left: carousel.scrollLeft - scrollStep, behavior: 'smooth' });
    });
    carousel.addEventListener('scroll', updateButtonVisibility);
    window.addEventListener('resize', updateButtonVisibility);
  });

  // ---------------------------
  // 2. Funcionalidades con jQuery
  // ---------------------------
  $(document).ready(() => {
    const csrfToken = "{{ csrf_token }}";
    const existeMap = "{{ existeMap }}";

    // Ocultar contenedor de resultados al inicio
    $('#filtered-container').hide();
    $('#filteredCards').empty();
    $('#searchInput').val('');

    // ---------------------------------
    // 2.1 Función para normalizar texto
    // ---------------------------------
    const normalizeText = (text) => {
      text = typeof text === 'string' ? text : '';
      return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
    };

    // ---------------------------------------
    // 2.2 Limpiar búsqueda y resultados
    // ---------------------------------------
    $('#clearFilter').click((e) => {
      e.preventDefault();
      $('#filtered-container').hide();
      $('#filteredCards').empty();
      $('#searchInput').val('');
    });

    // ---------------------------------------
    // 2.3 Filtrar negocios en vivo por nombre
    // ---------------------------------------
    $('#searchInput').on('keyup', function(){
      const searchTerm = normalizeText($(this).val() || ''),
            filteredContainer = $('#filtered-container'),
            filteredCards = $('#filteredCards');
      filteredCards.empty();

      // Si no hay término de búsqueda, ocultar
      if(searchTerm.trim() === ''){
        filteredContainer.hide();
        return;
      }

      // Recorrer tarjetas y filtrar
      $('.business-card').each(function(){
        const businessName = normalizeText($(this).data('name') || ''),
              businessId = $(this).data('id');
        if(businessName.includes(searchTerm)){
          // Evitar duplicar
          if(filteredCards.find(`.business-card[data-id="${businessId}"]`).length === 0){
            filteredCards.append($(this).clone());
            filteredContainer.show();
          }
        }
      });

      // Si no hay resultados, mostrar texto
      if($('#filteredCards .business-card').length === 0){
        $('#filteredCards').empty();
        $('.container-fluid').last().append('<p id="no-results" class="text-center text-muted">No se encontraron resultados.</p>');
      }
    });

    // ---------------------------------------
    // 2.4 Scroll a la categoría (carousel)
    // ---------------------------------------
    $('.custom-carousel-item').click(function(){
      const targetSection = $(this).data('target');
      $('html, body').animate({ scrollTop: $('#' + targetSection).offset().top }, 500);
    });

    // Manejo de arrastre en carousel para mobile
    const $carousel = $('.custom-carousel');
    let touchStartX = 0, scrollStart = 0;
    $carousel.on('touchstart', (e) => {
      touchStartX = e.originalEvent.touches[0].clientX;
      scrollStart = $carousel.scrollLeft();
    });
    $carousel.on('touchmove', (e) => {
      const touchDiff = touchStartX - e.originalEvent.touches[0].clientX;
      $carousel.scrollLeft(scrollStart + touchDiff);
    });

    // -----------------------------------------------------------
    // 2.5 Verificar a quiénes ya sigue (endpoint 'obtener_seguidos')
    // -----------------------------------------------------------
    $.ajax({
      url: "{% url 'obtener_seguidos' %}",
      type: "GET",
      dataType: "json",
      success: (response) => {
        // Se espera que response.seguidos sea un array de IDs
        response.seguidos.forEach((userId) => {
          $('.btn-follow[data-id="' + userId + '"], .btn-unfollow[data-id="' + userId + '"]').each(function(){
            $(this).text("Seguido").removeClass("btn-follow").addClass("btn-unfollow");
          });
        });
      },
      error: () => {
        console.log("Error al obtener la lista de seguidos.");
      }
    });

    // ---------------------------------------------------------
    // 2.6 Sincronizar botones de seguir si un usuario tiene más
    //     de un negocio.
    // ---------------------------------------------------------
    (function syncFollowButtons() {
      const buttonsByUser = {};
      $('.btn-follow, .btn-unfollow').each(function() {
        const userId = $(this).data('id');
        if (!buttonsByUser[userId]) {
          buttonsByUser[userId] = [];
        }
        buttonsByUser[userId].push($(this));
      });
      $.each(buttonsByUser, (userId, btnArray) => {
        const followed = btnArray.some(($btn) => $btn.hasClass('btn-unfollow'));
        if (followed) {
          btnArray.forEach(($btn) => {
            $btn.text("Seguido").removeClass("btn-follow").addClass("btn-unfollow");
          });
        }
      });
    })();

    // ----------------------------------------------
    // 2.7 Evento Follow/Unfollow (evita propagación)
    // ----------------------------------------------
    $(document).on('click', '.btn-follow, .btn-unfollow', (e) => {
      e.stopPropagation(); // Evita el evento de .business-card
      const $btn = $(e.currentTarget),
            idUsuarioSeguido = $btn.data('id');

      $.ajax({
        url: "{% url 'seguir_usuario' %}",
        type: "POST",
        data: { id_usuario_seguido: idUsuarioSeguido, csrfmiddlewaretoken: csrfToken },
        success: (response) => {
          // Actualiza todos los botones con el mismo data-id
          if(response.estado === "seguido"){
            $('.btn-follow[data-id="' + idUsuarioSeguido + '"], .btn-unfollow[data-id="' + idUsuarioSeguido + '"]').each(function(){
              $(this).text("Seguido").removeClass("btn-follow").addClass("btn-unfollow");
            });
          } else if(response.estado === "dejado"){
            $('.btn-follow[data-id="' + idUsuarioSeguido + '"], .btn-unfollow[data-id="' + idUsuarioSeguido + '"]').each(function(){
              $(this).text("Seguir").removeClass("btn-unfollow").addClass("btn-follow");
            });
          }
        },
        error: () => { alert("Error al procesar la solicitud"); }
      });
    });

    // -------------------------------------------------------------------
    // 2.8 Clic en la tarjeta (fuera de la foto) -> Validar pedido/AJAX
    // -------------------------------------------------------------------
    $(document).on('click', '.business-card', function(event){
    // Si el clic fue en un <a> (ej. foto), dejamos que redireccione a perfil_negocio
    if ($(event.target).closest('a').length > 0) {
      return;
    }

    const csrfToken = "{{ csrf_token }}";
    const negocio_id = $(this).data('id');
    const negocio_name = $(this).data('name');

    $.ajax({
      url: "{% url 'pedidos_validar_existe_pendiente' %}",
      type: "POST",
      data: {
        negocio: negocio_id,
        csrfmiddlewaretoken: csrfToken
      },
      success: (data) => {
        if (data.save == 1) {
          // Opción A: Asegurarte de que la URL final tenga '/pedidos/productos'
          const currentPath = window.location.pathname; 
          // Si no termina con "/", se la agregamos 
          // (ej: "/admin/panel/negocios/pedidos" => "/admin/panel/negocios/pedidos/")
          const normalizedPath = currentPath.endsWith('/') ? currentPath : currentPath + '/';

          // Construimos la URL final
          const finalURL = window.location.origin 
            + normalizedPath 
            + "productos/" 
            + negocio_id + "/" 
            + negocio_name + "/" 
            + data.pedido;

          window.location.href = finalURL;
        }
      },
      error: () => {
        alert("Error al procesar la solicitud");
      }
    });
  });

    // --------------------------------
    // 2.9 Botón "Mis Pedidos"
    // --------------------------------
    $('#listPedidos').click((e) => {
      e.preventDefault();
      window.location = "{% url 'pedidos_listado_cliente' %}";
    });

    // --------------------------------
    // 2.10 Actualizar resumen (dashboard)
    // --------------------------------
    const actualizarResumen = () => {
      $.ajax({
        url: "{% url 'dashboard_data' %}",
        type: "POST",
        data: {
          fecha_inicio: $('#fechaInicio').val(),
          fecha_fin: $('#fechaFin').val(),
          csrfmiddlewaretoken: csrfToken
        },
        success: (response) => {
          if(response.error) {
            alert("Error: " + response.error);
            return;
          }
          const resumen = response.resumen;
          $('#totalPedidos').text(parseFloat(resumen.TotalPedidos).toFixed(0));
          $('#totalSubTotal').text(parseFloat(resumen.TotalSubTotal).toFixed(2));
          $('#totalISV').text(parseFloat(resumen.TotalISV).toFixed(2));
          $('#totalGeneral').text(parseFloat(resumen.TotalGeneral).toFixed(2));
          const promedio = parseFloat(resumen.TotalPedidos) > 0 ?
                           (parseFloat(resumen.TotalGeneral) / parseFloat(resumen.TotalPedidos)) : 0;
          $('#promedioVenta').text(promedio.toFixed(2));

          // Actualizar el nombre del mes a partir de la fecha de inicio (sin sumar 1)
          const fechaInicioVal = $('#fechaInicio').val();
          const dt = fechaInicioVal ? new Date(fechaInicioVal) : new Date();
          const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", 
                         "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
          $('#nombreMes').text(meses[dt.getMonth()]);
          console.log("Mes mostrado:", meses[dt.getMonth()]);
        }
      });
    };

    // ---------------------------------------
    // 2.11 Filtro de movimientos (ejemplo)
    // ---------------------------------------
    $('#filtrarMovimientos').click(() => {
      tablaCaja.ajax.reload();
      actualizarResumen();
    });

    // ---------------------------------------
    // 2.12 Establecer fechas por defecto
    // ---------------------------------------
    (function setDefaultDates(){
      let today = new Date();
      // Para forzar Abril para pruebas:
      // today = new Date(2025, 3, 15); // (3 = Abril en JS)
      const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
      const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);

      const format = (date) => {
        const d = date.getDate().toString().padStart(2, '0');
        const m = (date.getMonth() + 1).toString().padStart(2, '0');
        return date.getFullYear() + '-' + m + '-' + d;
      };

      $('#fechaInicio').val(format(firstDay));
      $('#fechaFin').val(format(lastDay));

      console.log("Fecha Inicio default:", $('#fechaInicio').val());
      console.log("Fecha Fin default:", $('#fechaFin').val());
    })();

    // ---------------------------------------
    // 2.13 Inicializar resumen al cargar
    // ---------------------------------------
    actualizarResumen();
  });
</script>
{% endblock %}