{% 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 me-2" data-id="{{ negocio.id_usuario }}" data-name="{{ negocio.nombre }}"
      style="width: 300px; max-width: 300px;">
      <div class="card mb-3 h-100 p-2">
        <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">
              <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>
              <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>

          {% if negocio.esta_abierto == 2 or negocio.esta_abierto == '2' %}
          <span class="badge bg-success">Abierto</span>
          {% elif negocio.esta_abierto == 1 or negocio.esta_abierto == '1' %}
          <span class="badge bg-warning text-dark">Horario NO Establecido</span>
          {% else %}
          <span class="badge bg-danger">Cerrado</span>
          {% endif %}

        </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 }}";

    if (existeMap == 0) {
        Swal.fire({
            title: "",
            text: "No tienes Ubicaciones Registradas! Puedes Registrar una o user tu Ubicacion Actual.",
            icon: "warning",
            allowOutsideClick: false,
            showCancelButton: true,
            confirmButtonText: 'Registrar Ubicaciones!',
            cancelButtonText: 'Usaré Ubicacion Actual',
        }).then((result) => {
            if (result.isConfirmed) {
                window.location = "{% url 'mapsViewer' 0 0 %}";
            } else {
              Swal.close();
            }
        });
    }

    // 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 %}