{% extends 'menu/menu.html' %}
{% load static %}
{% load humanize %}
{% block title %} Publicaciones
{% endblock %} {% block body %}

<style>
  /* ----- STORY / VISTAZOS ----- */

  .bg-color-a8d5e2 {
    background-color: #a8d5e2;
  }

  .bg-color-f2c1c1 {
    background-color: #f2c1c1;
  }

  .bg-color-c3e6cb {
    background-color: #c3e6cb;
  }

  .bg-color-d1c4e9 {
    background-color: #d1c4e9;
  }

  .bg-color-default {
    background-color: #ffffff;
    /* Clase por defecto */
  }

  .text-story {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 90%;
    height: 85vh;
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    padding: 20px;
  }

  /* Clase por defecto */
  .bg-color-default {
    background-color: #FFFFFF;
  }

  .story-container {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  .story-item {
    padding-left: 10px;
    flex-shrink: 0;
    text-align: center;
    overflow: visible;
    position: relative;
  }

  .story-image {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ECEFF1;
    border: 3px solid #2196F3;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow;
    transform: translateZ(0);
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .story-image:hover {
    transform: scale(1.2);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .story-image:active {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }

  .story-title {
    margin-top: 5px;
    color: #555;
    font-weight: bold;
    font-size: 0.75rem;
  }

  .add-story {
    border: 3px dashed #007bff;
    background: none;
    color: #007bff;
  }

  .add-story .plus-icon {
    font-size: 1.5rem;
    color: #007bff;
    font-weight: bold;
  }

  .add-story:hover {
    background: linear-gradient(135deg, #a2dbff, #76b7fd);
    border-color: #007bff;
  }

  .overflow-visible {
    overflow: visible !important;
  }

  .story-title {
    margin-top: 5px;
    color: #555;
    font-weight: bold;
    font-size: 0.75rem;
  }

  .reaction-container {
    position: relative;
    display: inline-block;
    margin: 20px;
  }

  .like-button {
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .reaction-options {
    display: flex;
    position: absolute;
    bottom: 50px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 10px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .reaction-options .reaction {
    margin: 0 8px;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .reaction-options .reaction:hover {
    transform: scale(1.3);
  }

  /* Mostrar reacciones al pasar el cursor */
  .reaction-container:hover .reaction-options {
    visibility: visible;
    opacity: 1;
  }

  /* Círculo para el ícono del contador */
  /* Círculo más pequeño para el ícono */
  .circle-icon {
    width: 25px;
    /* Reducción del ancho */
    height: 25px;
    /* Reducción de la altura */
    background-color: #4267b2;
    /* Color de fondo azul */
    border-radius: 50%;
    /* Hace que el fondo sea un círculo */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .circle-icon i {
    font-size: 16px;
    /* Reducción del tamaño del ícono */
    color: #ffffff;
    /* Color blanco para el ícono */
  }

  .like-button.liked {
    color: #4267b2;
    /* Color azul resaltado */
    font-weight: bold;
    transition: all 0.3s ease;
  }

  .like-button.liked i {
    color: #4267b2;
    /* Ícono azul cuando está en modo "like" */
  }

  #listaComercios li {
    transition: background-color 0.3s ease;
  }

  #listaComercios li:hover {
    background-color: #f8f9fa;
    cursor: pointer;
  }

  .material-icons {
    transition: color 0.3s;
  }

  #listaComercios li:hover .material-icons {
    color: #ffc107;
    /* Amarillo */
  }

  /* Contenedor principal del modal */
  #customModal1 .modal-body {
    padding: 1.5rem;
    /* Espaciado interno */
    scrollbar-width: thin;
    scrollbar-color: #444444 #222222;
  }

  #customModal1 .modal-body::-webkit-scrollbar {
    width: 6px;
  }

  #customModal1 .modal-body::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 10px;
  }

  /* Estilo de las imágenes */
  #customModal1 .modal-body img {
    border-radius: 10px;
    /* Esquinas redondeadas */
    margin-bottom: 20px;
    /* Separación entre imágenes */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Animación suave */
  }

  #customModal1 .modal-body img:hover {
    transform: scale(1.02);
    /* Ligeramente más grande al pasar el cursor */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Sombra al pasar el cursor */
  }

  /* Texto debajo de cada imagen */
  #customModal1 .modal-body p {
    font-size: 0.9rem;
    color: #bbbbbb;
    text-align: center;
    margin: 5px 0 20px 0;
    /* Espaciado alrededor del texto */
    font-weight: 300;
    /* Texto más ligero */
  }

  /* Contenedor de la imagen con posición relativa */
  .position-relative {
    position: relative;
  }

  /* Fecha superpuesta en la esquina inferior derecha */
  .fecha-superpuesta {
    position: absolute;
    bottom: 10px;
    /* Separación desde la parte inferior */
    right: 10px;
    /* Separación desde la derecha */
    background: rgba(0, 0, 0, 0.6);
    /* Fondo negro translúcido */
    color: #ffffff;
    /* Texto blanco */
    font-size: 0.7rem;
    /* Tamaño del texto */
    padding: 5px 5px;
    /* Espaciado interno */
    border-radius: 5px;
    /* Esquinas redondeadas */
    font-weight: 500;
    /* Negrita ligera */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    /* Sombra para mayor visibilidad */
    pointer-events: none;
    /* Evitar que interfiera con clics */
  }

  /* Estilo adicional para el modal */
  .modal-body {
    padding: 1.5rem;
    /* Espaciado interno */
    scrollbar-width: thin;
    scrollbar-color: #444444 #222222;
  }

  .modal-body::-webkit-scrollbar {
    width: 6px;
  }

  .modal-body::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 10px;
  }

  /* Efecto suave al cambiar el color */
  .btn-like .like-icon,
  .btn-like .like-text {
    transition: color 0.3s ease;
  }

  /* Estado de "like" */
  .btn-like.liked .like-icon,
  .btn-like.liked .like-text {
    color: red;
  }

  /* Estado de "no like" */
  .btn-like.unliked .like-icon,
  .btn-like.unliked .like-text {
    color: gray;
  }
</style>

<div class="row justify-content-center">
  <div class="col-md-3 overflow-visible">
    <div class="p-3">
      <h5 class="mb-3 fw-bold text-center">Vistazos</h5>

      <!-- Contenedor principal en horizontal -->
      <div class="d-flex flex-row align-items-center story-container">
        <!-- Crear Historia -->
        {% if productos %}
        <div class="me-2 text-center story-item">
          <a href="{% url 'crear_vistazo' %}" style="text-decoration: none;">
            <div class="story-image add-story" style="cursor: pointer;">
              <span class="plus-icon">+</span>
            </div>
            <p class="mt-1 text-primary story-title">Nuevo</p>
          </a>
        </div>
        {% endif %}

        {% if historias %}
        <div class="me-2 text-center story-item">
          <div class="story-image border border-secondary rounded-circle" style="
              background-image: url('{{ historias.0.ruta_imagen }}');
              background-size: cover;
              background-position: center;
              cursor: pointer;
              width: 60px;
              height: 60px;
            " data-bs-toggle="modal" data-bs-target="#customModal1"></div>
          <p class="mt-1 text-muted story-title">Mis vistazos</p>
        </div>
        {% endif %}

        <!-- Esfera única para las historias del usuario -->

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


  <!-- Modal con Historia -->
  <div class="modal fade" id="customModal1" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen modal-dialog-centered">
      <div class="modal-content border-0 bg-transparent">
        <!-- Encabezado del modal -->
        <div class="modal-header border-0 text-white d-flex flex-column align-items-center" style="position: relative;">
          <!-- Contenido del encabezado -->
          <div class="d-flex flex-row align-items-center justify-content-center w-100" style="position: relative;">
            <!-- Info usuario -->
            <div class="d-flex flex-row align-items-center">
              <img src="{{ usuario.foto_perfil|default:'https://via.placeholder.com/50' }}" alt="Avatar"
                class="rounded-circle me-2" style="width: 50px; height: 50px" />
              <div>
                <h6 class="mb-0 fw-bold" style="font-size: 14px;">
                  {{ usuario.nombre }}
                </h6>
                {% if historias and historias.0.fecha_hora_creado %}
                <p class="mb-0 text-muted" style="font-size: 12px;">
                  Hace {{ historias.0.fecha_hora_creado|timesince }}
                  <!-- Usar el filtro timesince para mostrar "Hace X tiempo" -->
                </p>
                {% endif %}
              </div>
            </div>
            <!-- Botón cerrar -->
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"
              style="position: absolute; right: 1rem;"></button>
          </div>
          <!-- Barras de progreso -->
          <div class="d-flex w-100 mt-3 progress-container px-3">
            {% for story in historias %}
            <div class="progress me-1" style="height: 5px; flex: 1; background-color: rgba(255,255,255,0.3);">
              <div class="progress-bar" style="width: 0%; background-color: #ff0055; transition: none;"></div>
            </div>
            {% endfor %}
          </div>
        </div>

        <!-- Cuerpo del modal con Swiper -->
        <div class="modal-body p-0 text-center d-flex align-items-center justify-content-center position-relative">
          <div class="swiper-container w-100 h-100">
            <div class="swiper-wrapper">
              {% for story in historias %}
              <div class="swiper-slide d-flex align-items-center justify-content-center position-relative">
                {% if story.tipo_estado == "texto" %}
                <div class="text-story rounded shadow-lg {{ story.color_class }}">
                  {{ story.texto }}
                </div>
                {% else %}
                <img src="{{ story.ruta_imagen }}" class="rounded shadow-lg" alt="Historia"
                  style="max-height: 85vh; max-width: 90%; object-fit: cover;" />
                {% endif %}

                <div class="dropdown position-absolute" style="top: 1rem; right: 1rem;">
                  <button class="btn btn-secondary dropdown-toggle" type="button"
                    id="dropdownMenuButton{{ story.id_estado }}" data-bs-toggle="dropdown" aria-expanded="false">
                    &#x22EE; <!-- Tres puntos verticales -->
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ story.id_estado }}">
                    <li><a class="dropdown-item borrar-vistazo" href="#"
                        data-id_estado="{{ story.id_estado }}">Borrar</a></li>
                  </ul>
                </div>
              </div>
              {% endfor %}

            </div>

            <!-- Flechas de navegación -->
            <div class="swiper-button-prev" style="color: #fff;"></div>
            <div class="swiper-button-next" style="color: #fff;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- FIN MODAL HISTORIAS -->

  <!-- Sección de Publicaciones -->
  <div class="col-md-6 d-flex justify-content-center">
    <div class="card shadow-sm p-3" style="
        border-radius: 10px;
        background-color: #f8f9fa;
        width: 900px;
        max-width: 100%;
      ">
      <h5 class="text-center mb-3 fw-bold">Publicaciones</h5>

      {% if productos %}
      <div class="d-flex align-items-center mb-2">
        <!-- Icono de Material Icons -->
        <span class="material-icons me-2" style="font-size: 40px; color: #007bff">store</span>
        <!-- Campo de entrada -->
        <input type="text" id="" class="form-control border-0 shadow-none openModalInput"
          placeholder="¿Qué producto deseas ofrecer?" style="background-color: #f8f9fa; font-size: 1rem" />
      </div>

      <hr class="my-1" />
      <!-- Opciones de acción (Foto y Promoción) -->
      <div class="row text-center">
        <!-- Opción de Foto -->
        <div class="col-6 col-md-3 mb-2">
          <div class="d-flex justify-content-start openModalInput align-items-center text-success"
            style="cursor: pointer">
            <span class="material-icons me-1" style="font-size: 1.5rem">photo</span>
            <span style="font-size: 1rem">Foto</span>
          </div>
        </div>
      </div>
      {% endif %}

      <div id="publicacionesContainer" class="mt-1" style="width: 100%; max-width: 900px; margin: auto">
        <!-- CONTENEDOR PUBLICACIONES -->
      </div>
      <div class="reaction-container">
        <!-- CONTENEDOR REACCIONES -->
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="p-3">
      <h5 class="text-center mb-4 fw-bold">Comercios Verificados</h5>
      <ul id="listaComercios" class="list-unstyled mb-0"></ul>
    </div>
  </div>
</div>

<div class="modal fade" id="customModal" tabindex="-1" aria-labelledby="customModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content" style="border-radius: 10px">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="customModalLabel">
          Crear Publicación
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex flex-column">
          <div class="d-flex align-items-center mb-3">
            <!-- Avatar -->
            <img src="{{ usuario.foto_perfil }}" alt="Avatar" class="rounded-circle me-2"
              style="width: 40px; height: 40px" />

            <!-- Nombre y botón -->
            <div class="d-flex flex-column">
              <div class="d-flex align-items-center">
                <h6 class="mb-0 fw-bold">{{ usuario.nombre }}</h6>

                <span id="promotion-status" class="ms-2"></span>
              </div>
              <!-- Botón de promoción -->
              <div class="d-flex justify-content-start align-items-start text-danger" style="cursor: pointer"
                data-bs-toggle="modal" data-bs-target="#promotionModal">
                <span class="material-icons me-1" style="font-size: 1.5rem">campaign</span>
                <span style="font-size: 1rem">Promoción</span>
              </div>
            </div>
          </div>
          <!-- Campo de texto con emoji -->
          <div class="d-flex align-items-center p-2 rounded-3">
            <input type="text" id="texto-post" name="texto-post" class="form-control border-0"
              placeholder="aquí va el texto" style="box-shadow: none" />
          </div>
          <!-- Subida de foto -->
          <div class="dropzone border border-dashed rounded p-4 position-relative text-center bg-light">
            <div class="d-flex justify-content-center align-items-center mb-3" id="btnUpload">
              <span class="material-icons bg-secondary text-white rounded-circle p-2"
                style="font-size: 2rem">add_photo_alternate</span>
            </div>
            <h6 class="fw-bold">Agregar fotos</h6>
          </div>
          <!-- Input oculto para cargar archivos -->
          <input type="file" id="fileInput" name="ruta_imagen" style="display: none;" class="" accept="image/*" />

          <!-- Sección móvil -->
          <div class="d-flex align-items-center justify-content-between mt-3 p-3 border rounded bg-light">
            <div class="d-flex align-items-center">
              <span class="material-icons bg-secondary text-white rounded-circle p-2 me-2"
                style="font-size: 1.5rem">smartphone</span>
              <p class="mb-0">Agrega fotos.</p>
            </div>
            <button class="btn btn-success btn-sm" id="btnAgregarImagen">
              Agregar
            </button>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-primary w-100 d-block" id="publicarBtn">
          Publicar
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="promotionModal" tabindex="-1" aria-labelledby="promotionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <!-- Encabezado del Modal -->
      <div class="modal-header">
        <h5 class="modal-title" id="promotionModalLabel">
          Elige tu tipo de promoción
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3" id="promotionOptionsContainer">
          <!-- Las opciones se cargarán dinámicamente aquí -->
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="uploadPhotoModal" tabindex="-1" aria-labelledby="uploadPhotoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <!-- Encabezado del Modal -->
      <div class="modal-header">
        <h5 class="modal-title" id="uploadPhotoModalLabel">Subir Foto</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!-- Cuerpo del Modal -->
      <div class="modal-body text-center">
        <!-- Botón para subir foto -->
        <button class="btn p-0 d-flex align-items-center text-primary mx-auto" style="background: none; border: none">
          <span class="material-icons me-1" style="font-size: 1.5rem; color: green">image</span>
          <span class="fw-bold" style="font-size: 1rem">Seleccionar foto</span>
        </button>
      </div>
      <!-- Pie del Modal -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
          Cerrar
        </button>
        <button type="button" class="btn btn-primary btn-sm">Guardar</button>
      </div>
    </div>
  </div>

  {% endblock %} {% block scripts %}
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


  <script>
    $(document).ready(function () {
      var csrfToken = "{{ csrf_token }}";

      // Activar el input de archivo al hacer clic en el botón
      $("#btnUpload1").on("click", function () {
        $("#fileInput").click(); // Activa el input oculto
      });

      // Manejar la carga del archivo
      $("#fileInput").on("change", function () {
        const file = this.files[0]; // Obtener el archivo seleccionado
        if (!file) {
          Swal.fire("", "Selecciona un archivo para Continuar!", "warning");
          return;
        }

        // Convertir la imagen a Base64
        const reader = new FileReader();
        reader.onload = function (event) {
          const base64Image = event.target.result;

          // Enviar los datos al servidor
          $.ajax({
            url: "{% url 'vistazos/insertar_estado_comercio' %}",
            method: "POST",
            headers: { "X-CSRFToken": "{{ csrf_token }}" },
            contentType: "application/json",
            data: JSON.stringify({
              ruta_imagen: base64Image,
            }),
            success: function (response) {
              if (response.save == 1) {
                console.log("URL del archivo:", response.file_url);
              } else {
                Swal.fire(
                  "",
                  "Error al crear el estado: " + response.error,
                  "error"
                );
              }
            },
          });
        };

        reader.readAsDataURL(file); // Leer el archivo como Base64
      });
      // Mostrar la imagen en el modal al hacer clic en un botón
      $(document).on("click", ".show-modal", function () {
        const rutaImagen = $(this).data("imagen");
        $("#modalImage").attr("src", rutaImagen);
      });

      $.ajax({
        url: "{% url 'obtener_estados' %}", // URL de la API para obtener los estados agrupados
        method: "GET",
        success: function (response) {
          console.log("Respuesta obtenida de la API:", response);

          // Verifica si hay estados en la respuesta
          if (response.estados && response.estados.length > 0) {
            console.log(`Se recibieron ${response.estados.length} estados.`);

            const estadosContainer = $("#estadosContainer");
            estadosContainer.find(".dynamic-state").remove(); // Limpia previos estados

            // Iterar y agregar estados dinámicos
            response.estados.forEach(function (estado, index) {
              console.log(`Procesando estado ${index + 1}:`, estado);

              const estadoHTML = `
            <div class="me-3 text-center dynamic-state">
              <img src="${estado.ruta_imagen_usuario}" alt="${estado.nombre_usuario}" 
                   class="img-fluid rounded-circle estado-img"
                   style="width: 80px; height: 80px; cursor: pointer;" 
                   data-usuario="${estado.nombre_usuario}">
              <p class="mt-2" style="font-size: 0.9rem;">${estado.nombre_usuario}</p>
            </div>
          `;
              estadosContainer.append(estadoHTML);
            });

            // Asignar evento para abrir el modal con los estados del usuario
            $(document).on("click", ".estado-img", function () {
              const usuario = $(this).data("usuario");
              console.log("Usuario seleccionado:", usuario);
              $.ajax({
                url: "{% url 'get_estados_detalle' %}", // URL de la API para obtener los estados detallados
                method: "GET",
                success: function (response) {
                  if (response.estados && response.estados.length > 0) {
                    console.log(
                      `Se recibieron ${response.estados.length} estados detallados.`
                    );
                    const imageList = $("#imageList");
                    imageList.empty();
                    response.estados.forEach(function (estado) {
                      const imageItem = `
                          <div class="mb-3 position-relative">
                            <img src="${estado.ruta_imagen_estado}" alt="Estado ${estado.id_estado}" 
                                class="img-fluid rounded shadow-sm w-100"
                                style="max-height: 400px;">
                            <span class="fecha-superpuesta">${estado.fecha_hora_creado}</span>
                            <!-- Botón minimalista con tres puntos -->
                            <button class="btn btn-repetir-estado position-absolute top-0 end-0 m-2 p-0" 
                                    data-id="${estado.id_estado}" 
                                    data-nombre="${estado.nombre_estado}" 
                                    style="background: none; border: none; color: #007bff; font-size: 20px;">
                              &#x22EE; <!-- Código HTML para tres puntos verticales -->
                            </button>
                          </div>
                        `;
                      imageList.append(imageItem);
                    });

                    const modal = new bootstrap.Modal(
                      document.getElementById("customModal1")
                    );
                    modal.show();
                  } else {
                    console.warn("No hay estados detallados disponibles.");
                  }
                },
                error: function (xhr, status, error) {
                  console.error(
                    "Error al obtener los estados detallados:",
                    error
                  );
                },
              });
            });
          } else {
            console.warn("No hay estados disponibles en la respuesta.");
            $("#estadosContainer").append(
              '<p class="text-muted">No hay estados disponibles.</p>'
            );
          }
        },
        error: function (xhr, status, error) {
          console.error("Error al obtener los estados agrupados:", error);
          $("#estadosContainer").append(
            '<p class="text-danger">Error al cargar los estados agrupados.</p>'
          );
        },
      });

      $("#btnAgregarImagen").on("click", function () {
        $("#fileInput").click(); // Activa el input de tipo archivo
      });

      // Mostrar la previsualización de la imagen seleccionada
      $("#fileInput").on("change", function (event) {
        const file = event.target.files[0]; // Obtén el archivo seleccionado
        if (file) {
          const reader = new FileReader(); // Crear lector de archivos
          reader.onload = function (e) {
            // Mostrar la imagen seleccionada dentro del contenedor `btnUpload`
            $("#btnUpload").html(`
              <img src="${e.target.result}" alt="Imagen seleccionada" class="img-fluid rounded-circle"
                style="width: 100px; height: 100px; object-fit: cover;">
              `);
          };
          reader.readAsDataURL(file); // Leer el archivo como DataURL
        }
      });

      function cargarPublicaciones() {
        $.ajax({
          url: "{% url 'obtener_publicaciones' %}", // URL para obtener todas las publicaciones
          type: "GET",
          success: function (response) {
            // Limpiar el contenedor de publicaciones
            $("#publicacionesContainer").empty();

            // Iterar sobre las publicaciones y construir el HTML
            response.publicaciones.reverse().forEach(function (publicacion) {
              // Publicaciones recientes al inicio
              agregarPublicacionAlDOM(publicacion);
            });
          },
          error: function (xhr, status, error) {
            console.error("Error al cargar las publicaciones:", error); // Depuración
            alert("Hubo un error al cargar las publicaciones.");
          },
        });
      }
      var idPublicacion;
      function agregarPublicacionAlDOM(publicacion) {
        // Asignar valores con manejo de datos faltantes
        const textoPublicacion =
          publicacion.texto_publicaciones || "Sin descripción";
        let rutaImagen = publicacion.ruta_imagen || null;
        const estadoPromocion =
          publicacion.tipo_estado == "Promoción" ? "Promoción" : "";
        const nombreUsuario = publicacion.nombre_usuario || "Anónimo";
        const avatar =
          publicacion.ruta_imagen_usuario ||
          "{% static 'app/assets/images/default_avatar.png' %}";
        const idPublicacion =
          publicacion.id_publicaciones || "ID no disponible"; // Agregar el ID
        const contador_like = publicacion.cantidad_likes || 0;
        const isLiked = publicacion.is_liked == 1; // Determinar si el usuario ya dio "like"

        // Reemplazar barras invertidas en la ruta de la imagen
        if (rutaImagen) {
          rutaImagen = rutaImagen.replace(/\\/g, "/"); // Convertir a barras normales
        }

        // Generar el HTML de la publicación
        const publicacionHTML = `
            <div class="d-flex justify-content-start">
                <div class="card my-3 p-3 shadow-sm"
                    style="border-radius: 10px; background-color: #ffffff; width: 100%; max-width: 900px;">
                    <div class="d-flex align-items-center mb-2">
                        <!-- Avatar -->
                        <img src="${avatar}" alt="Avatar" class="rounded-circle me-2" style="width: 40px; height: 40px;">
                        <!-- Nombre del negocio y estado de promoción -->
                        <div>
                            <h6 class="mb-0 fw-bold">${nombreUsuario}</h6>
                            <div class="d-flex align-items-center">
                                <small class="text-muted me-2">${publicacion.fecha_hora_creacion
          }</small>
                                ${estadoPromocion
            ? `<span>${estadoPromocion}</span>`
            : ""
          }
                            </div>
                        </div>
                    </div>
                    <div class="mb-2">
                        <!-- Texto de la publicación -->
                        <p>${textoPublicacion}</p>
                    </div>
                    ${rutaImagen
            ? `
                    <div class="mb-2">
                        <img src="${rutaImagen}" alt="Imagen Publicación" class="img-fluid rounded"
                            style="width: 100%; border-radius: 10px;">
                    </div>
                    `
            : ""
          }
                    <!-- Sección de Likes y Compartir -->
                    <div class="d-flex align-items-center mt-2 justify-content-start like-section" style="gap: 5px;">
                        <!-- Botón Me Gusta -->
                        <button class="btn-like d-flex align-items-center ${isLiked ? "liked" : "unliked"
          }" 
                                data-id="${idPublicacion}" 
                                style="border: none; background: none; cursor: pointer; gap: 5px;">
                            <i class="material-icons like-icon" style="font-size: 24px;">
                                ${isLiked ? "favorite" : "favorite_border"}
                            </i>
                            <span class="like-text" style="font-weight: bold;">Me gusta</span>
                        </button>
                        <div id="likes-count-${idPublicacion}" class="d-flex align-items-center">
                            <span class="like-count" style="font-weight: bold; color: #222; font-size: 14px;">
                                ${contador_like || 0}
                            </span>
                        </div>
                        <!-- Botón Compartir -->
                        <button class="btn d-flex align-items-center share-button" 
                                data-url="https://nexushn.com/app/control/publicacion/${idPublicacion}" 
                                style="gap: 5px; border: none; background: none; padding: 0;">
                            <i class="material-icons" style="font-size: 20px; color: #6c757d;">share</i>
                            <span style="font-weight: bold; font-size: 14px; color: #6c757d;">Compartir</span>
                        </button>
                    </div>
                </div>
            </div>
        `;

        $("#publicacionesContainer").prepend(publicacionHTML);
      }

      $.ajax({
        url: "{% url 'obtener_comercios_verificados' %}",
        type: "GET",
        data: { tipo: 0 }, // Parámetro de filtro si aplica
        dataType: "json",
        success: function (response) {
          const lista = $("#listaComercios");
          lista.empty(); // Limpiar lista previa

          if (response.success && response.data.length > 0) {
            // Iteramos sobre los datos recibidos
            $.each(response.data, function (index, comercio) {
              const comercioHTML = `
                <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
                  <div class="d-flex align-items-center">
                    <span class="fw-bold text-secondary me-2">${comercio.nombre}</span>
                  </div>
                  <div class="d-flex align-items-center">
                    <i class="material-icons text-warning" style="font-size: 20px;">star</i>
                    <span class="badge bg-success rounded-pill ms-1">${comercio.calificacion}</span>
                  </div>
                </li>`;
              lista.append(comercioHTML);
            });
          } else {
            lista.html(
              '<li class="text-center text-danger">No se encontraron comercios verificados.</li>'
            );
          }
        },
        error: function (xhr, status, error) {
          console.error("Error al obtener los comercios:", error);
          $("#listaComercios").html(
            '<li class="text-center text-danger">Error al cargar los comercios.</li>'
          );
        },
      });

      $(document).on("click", ".btn-like", function () {
        const idPublicacion = $(this).data("id"); // Obtener el ID de la publicación asociada al botón
        const likeButton = $(this); // Referencia al botón
        const likeIcon = likeButton.find(".like-icon"); // Referencia al ícono
        const likeText = likeButton.find(".like-text"); // Referencia al texto
        const likesCountElement = $(
          `#likes-count-${idPublicacion} .like-count`
        ); // Contador de likes

        // Enviar la solicitud AJAX al servidor
        $.ajax({
          url: "{% url 'update_likes' %}",
          type: "POST",
          headers: { "X-CSRFToken": "{{ csrf_token }}" }, // Token CSRF
          data: {
            id_publicaciones: idPublicacion,
          },
          success: function (data) {
            // Actualizar el estado del botón según el mensaje del servidor
            if (data.message == "Like anadido") {
              likeButton.addClass("liked").removeClass("unliked"); // Cambiar estado a "like"
            } else if (data.message == "Like eliminado") {
              likeButton.addClass("unliked").removeClass("liked"); // Cambiar estado a "no like"
            }

            // Actualizar el contador de likes
            let currentLikes = parseInt(likesCountElement.text());
            if (data.message == "Like anadido") {
              currentLikes += 1;
            } else if (data.message == "Like eliminado") {
              currentLikes = Math.max(0, currentLikes - 1);
            }
            likesCountElement.text(currentLikes); // Actualizar el texto del contador
          },
        });
      });

      $(document).on("click", ".share-button", function () {
        const publicacionURL = $(this).data("url");
        const publicacionTexto = "Mira esta publicación:";
        const mensaje = `${publicacionTexto} ${publicacionURL}`;
        const whatsappURL = `https://wa.me/?text=${encodeURIComponent(
          mensaje
        )}`;
        window.location.href = whatsappURL;
      });

      // Función para manejar el evento de clic en el botón "Publicar"
      $("#publicarBtn").on("click", function (e) {
        e.preventDefault(); // Evita el comportamiento predeterminado del botón si está dentro de un formulario

        // Obtener datos del formulario
        const tipoEstado = $("#tipo_estado").val() || 2;
        const textoPublicacion = $("#texto-post").val().trim();
        const csrfToken = $('input[name="csrfmiddlewaretoken"]').val();
        const fileInput = $("#fileInput")[0];

        // Validar que al menos haya texto o una imagen
        if (!textoPublicacion && fileInput.files.length == 0) {
          Swal.fire(
            "",
            "Debes ingresar un texto o seleccionar una foto.",
            "warning"
          );
          return false;
        }

        // Preparar los datos a enviar
        let datos = {
          tipo_estado: tipoEstado,
          texto_publicacion: textoPublicacion,
          csrfmiddlewaretoken: csrfToken,
        };

        // Validar si hay una imagen seleccionada
        if (fileInput.files.length > 0) {
          const archivo = fileInput.files[0];
          const reader = new FileReader();

          reader.onload = function (event) {
            datos["ruta_imagen"] = event.target.result; // Archivo en formato Base64
            enviarNuevaPublicacion(datos);
          };

          reader.readAsDataURL(archivo);
        } else {
          enviarNuevaPublicacion(datos);
        }
      });

      // Enviar nueva publicación al servidor y recargar publicaciones
      function enviarNuevaPublicacion(datos) {
        $.ajax({
          url: "{% url 'crear_publicacion' %}",
          type: "POST",
          data: datos,
          success: function (response) {
            console.log("Respuesta del servidor:", response);

            if (response.save) {
              Swal.fire("", "Publicación Creada!", "success");

              // Recargar todas las publicaciones para incluir la nueva
              cargarPublicaciones();

              // Limpiar campos del formulario
              $("#texto-post").val("");
              $("#fileInput").val("");
              $("#fileInput").next("img").remove(); // Eliminar previsualización
              $("#promotion-status").html("").removeClass();
              $("#customModal").modal("hide");
            } else {
              alert("Error al crear la publicación: " + response.error);
            }
          },
          error: function (xhr, status, error) {
            console.error("Error en la solicitud:", error);
            alert("Hubo un error al guardar la publicación.");
          },
        });
      }

      // Cargar todas las publicaciones existentes al inicio
      cargarPublicaciones();

      // Llamada AJAX a la vista en Django
      $.ajax({
        url: "/app/catalogo-tipo-estado/",
        method: "GET",
        success: function (response) {
          if (response.success) {
            // Iteramos sobre los datos recibidos
            response.data.forEach(function (item) {
              const optionHTML = `
                  <div class="col-6">
                    <div class="p-3 border rounded text-center promotion-option" data-promotion="${item.nombre_tipo}">
                      <span class="material-icons" style="font-size: 2rem; color: ${item.color};">${item.icono}</span>
                      <p class="mt-2">${item.nombre_tipo}</p>
                    </div>
                  </div>`;
              container.append(optionHTML);
            });
          } else {
            container.append(
              '<p class="text-danger">Error al cargar las opciones.</p>'
            );
          }
        },
        error: function () {
          container.append(
            '<p class="text-danger">No se pudieron cargar las opciones. Inténtalo más tarde.</p>'
          );
        },
      });

      // Activar el input de archivo al hacer clic en el botón
      $("#btnUpload").on("click", function () {
        $("#fileInput").click(); // Activa el input oculto
      });

      // Activar el input de archivo al hacer clic en el botón
      $("#btnUpload1").on("click", function () {
        $("#fileInput").click(); // Activa el input oculto
      });

      // Manejar la selección de archivos
      $("#fileInput").on("change", function () {
        const files = this.files;

        if (files.length > 0) {
          console.log("Archivo seleccionado:", files[0].name);
        } else {
          console.warn("No se seleccionó imagen.");
        }
      });

      $("#texto-post").on("input", function () {
        console.log("Texto ingresado en tiempo real:", $(this).val());
      });

      // Función para enviar publicación al servidor
      function enviarPublicacion(datos) {
        $.ajax({
          url: "{% url 'crear_publicacion' %}", // URL de la vista
          type: "POST",
          data: datos,
          success: function (response) {
            console.log("Respuesta del servidor:", response);

            if (response.save) {
              // Crear el HTML dinámico de la publicación recién creada
              const nuevaPublicacion = construirPublicacionHTML(response);

              // Agregar la nueva publicación al inicio del contenedor
              $("#publicacionesContainer").prepend(nuevaPublicacion);

              // Limpiar los campos del formulario
              $("#texto-post").val("");
              $("#fileInput").val("");
              $("#fileInput").next("img").remove(); // Eliminar previsualizaciones
              $("#promotion-status").html("").removeClass(); // Limpiar promoción

              // Cerrar el modal
              $("#customModal").modal("hide");
            } else {
              alert("Error al crear la publicación: " + response.error);
            }
          },
          error: function (xhr, status, error) {
            console.error("Error en la solicitud:", error);
            alert("Hubo un error al guardar la publicación.");
          },
        });
      }

      // Función para construir el HTML de una publicación
      function construirPublicacionHTML(publicacion) {
        const rutaImagen = publicacion.file_url || null; // URL completa devuelta por el servidor
        const nombreUsuario = publicacion.creado_por || "Anónimo";
        const estadoPromocion =
          publicacion.tipo_estado == "Promoción" ? "Promoción" : "";

        return `
          <div class="card my-3 p-3" style="border-radius: 10px; background-color: #ffffff;">
            <div class="d-flex align-items-center mb-2">
              <!-- Avatar -->
              <img src="{% static 'app/assets/images/default_avatar.png' %}" alt="Avatar" class="rounded-circle me-2"
                style="width: 40px; height: 40px;">
              <!-- Nombre del negocio y estado de promoción -->
              <div>
                <h6 class="mb-0 fw-bold">${nombreUsuario}</h6>
                <div class="d-flex align-items-center">
                  <small class="text-muted me-2">Justo ahora</small>
                  ${estadoPromocion ? `<span>${estadoPromocion}</span>` : ""}
                </div>
              </div>
            </div>
            <div class="mb-2">
              <!-- Texto de la publicación -->
              <p>${publicacion.texto_publicacion || "Sin descripción"}</p>
            </div>
            ${rutaImagen
            ? `
            <div class="mb-2">
              <img src="${rutaImagen}" alt="Imagen Publicación" style="width: 100%; border-radius: 10px;">
            </div>`
            : ""
          }
          </div>
          `;
      }

      $(".promotion-option").on("click", function () {
        // Obtener el nombre de la promoción desde el atributo data-promotion
        let promotionName = $(this).data("promotion");

        // Actualizar el contenido del span con texto e ícono
        $("#promotion-status") // Seleccionamos el <span> por ID
          .html(`<i class="fas fa-tag me-1"></i> - ${promotionName}`) // Añadimos el ícono y el texto
          .removeClass() // Quitamos clases previas para evitar conflictos visuales
          .addClass("text-dark p-1 rounded"); // Añadimos clases nuevas para el diseño

        // Cerrar el modal de promociones
        $("#promotionModal").modal("hide");
      });

      // Limpiar el input de imagen y promoción al abrir el modal
      $("#customModal").on("show.bs.modal", function () {
        $("#fileInput").val(""); // Restablecer el input de archivo
        $("#fileInput").next("img").remove(); // Eliminar previsualizaciones anteriores
        $("#promotion-status").html("").removeClass(); // Limpiar el estado de promoción
      });

      // Al hacer clic en una opción de promoción
      $(".promotion-option").on("click", function () {
        // Obtener el nombre de la promoción desde el atributo data-promotion
        let promotionName = $(this).data("promotion");

        // Actualizar el contenido del span con texto e ícono
        $("#promotion-status") // Seleccionamos el <span> por ID
          .html(`<i class="fas fa-tag me-1"></i> - ${promotionName}`) // Añadimos el ícono y el texto
          .removeClass() // Quitamos clases previas para evitar conflictos visuales
          .addClass("bg-warning text-dark p-1 rounded"); // Añadimos clases nuevas para el diseño

        // Cerrar el modal de promociones
        $("#promotionModal").modal("hide");
      });

      // Abrir el selector de archivos al hacer clic en el área de "Agregar fotos/videos"
      $(".border-dashed").on("click", function () {
        $("#fileInput").click();
      });

      // Mostrar vista previa de la imagen seleccionada
      $("#fileInput").on("change", function (event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function (e) {
            // Reemplaza el contenido de la caja con la imagen cargada
            $(".border-dashed").html(`
              <img src="${e.target.result}" alt="Vista previa" class="img-fluid rounded"
                style="max-width: 100%; max-height: 200px;">
              <button type="button" class="btn-close position-absolute top-0 end-0 me-2 mt-2" id="removePreview"
                aria-label="Cerrar"></button>
              `);
          };
          reader.readAsDataURL(file);
        }
      });

      // Eliminar la vista previa y restaurar la caja inicial
      $(document).on("click", "#removePreview", function () {
        $(".border-dashed").html(`
          <div class="d-flex justify-content-center align-items-center mb-3">
            <span class="material-icons bg-secondary text-white rounded-circle p-2"
              style="font-size: 2rem;">add_photo_alternate</span>
          </div>
          <h5 class="fw-bold">Agregar fotos/videos</h5>
          <p class="text-muted">o arrastra y suelta</p>
        `);
        $("#fileInput").val("");
      });

      $("#uploadPhotoModal").on("click", function () {
        $("#exampleModal").modal("show");
      });

      $(".openModalInput").on("click", function () {
        $("#customModal").modal("show");
      });
    });

    // Función para previsualizar la imagen
    function previewImage(event) {
      const reader = new FileReader();
      reader.onload = function () {
        $("#preview").attr("src", reader.result);
      };
      reader.readAsDataURL(event.target.files[0]);
    }

    // Función para previsualizar la imagen
    function previewImage(event) {
      const reader = new FileReader();
      reader.onload = function () {
        const output = document.getElementById("preview");
        output.src = reader.result;
      };
      reader.readAsDataURL(event.target.files[0]);
    }
  </script>
  <script>
    $(document).ready(function () {
      cargarVistazos();
      function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
            }
          }
        }
        return cookieValue;
      }

      const csrftoken = getCookie('csrftoken');

      $(document).on('click', '.borrar-vistazo', function (e) {
        e.preventDefault();
        const vistazoId = $(this).attr('data-id_estado');
        console.log(vistazoId);
        Swal.fire({
          title: '¿Estás seguro?',
          text: "¡No podrás revertir esto!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#d33',
          cancelButtonColor: '#3085d6',
          confirmButtonText: 'Sí, bórralo',
          cancelButtonText: 'Cancelar'
        }).then((result) => {
          if (result.isConfirmed) {
            fetch("{% url 'borrar_vistazo' %}", {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken  // Incluir el token CSRF
              },
              body: JSON.stringify({
                'id_estado': vistazoId
              })
            })
              .then(response => response.json())
              .then(data => {
                if (data.success) {
                  Swal.fire(
                    '¡Eliminado!',
                    data.message,
                    'success'
                  ).then(() => {
                    window.location.href = window.location.href;

                  });
                } else {
                  Swal.fire(
                    'Error',
                    data.error,
                    'error'
                  );
                }
              })
              .catch((error) => {
                Swal.fire(
                  'Error',
                  'Ocurrió un error al borrar el vistazo.',
                  'error'
                );
                console.error('Error:', error);
              });
          }
        });
      });

      function actualizarBarrasProgreso() {
        const progressBars = document.querySelectorAll(".progress-bar");
        progressBars.forEach(bar => {
          bar.style.width = "0%";
          bar.style.transition = "none";
        });

        const totalSlides = swiper.slides.length;
        swiper.slides.forEach((slide, index) => {
          if (index < swiper.activeIndex) {
            const progressBar = progressBars[index];
            if (progressBar) {
              progressBar.style.width = "100%";
              progressBar.style.transition = "none";
            }
          } else if (index === swiper.activeIndex) {
            const progressBar = progressBars[index];
            if (progressBar) {
              progressBar.style.transition = `width ${SWIPE_DURATION}ms linear`;
              progressBar.style.width = "100%";
            }
          }
        });
      }
    });

    function cargarVistazos() {
      fetch("{% url 'estados_usuario' %}")
        .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const contentType = response.headers.get("content-type");
          if (!contentType || !contentType.includes("application/json")) {
            throw new Error("La respuesta no es JSON.");
          }
          return response.json();
        })
        .then(data => {
          if (data.success && data.estados.length > 0) {
            const swiperContainer = document.querySelector(".swiper-container .swiper-wrapper");
            swiperContainer.innerHTML = "";

            data.estados.forEach((estado) => {
              const slideHTML = `
              <div class="swiper-slide d-flex align-items-center justify-content-center position-relative">
                ${estado.tipo_estado === "texto" ? `
                  <div class="text-story rounded shadow-lg ${estado.color_class}">
                    ${estado.texto || "Sin texto"}
                  </div>
                ` : `
                  <img src="${estado.ruta_imagen}" class="rounded shadow-lg" alt="Historia"
                       style="max-height: 85vh; max-width: 90%; object-fit: cover;" />
                `}
                <button class="btn text-white position-absolute borrar-vistazo"
                        style="top: 1rem; right: 1rem; font-size: 24px;"
                        data-id_estado="${estado.id_estado}">
                  ...
                </button>
              </div>
            `;
              swiperContainer.insertAdjacentHTML("beforeend", slideHTML);
            });

            swiper.update(); 
            actualizarBarrasProgreso(); 
          } else {
            console.warn("No hay vistazos disponibles.");
          }
        })
        .catch((error) => {
          console.error("Error al cargar los vistazos:", error);
        });
    }
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const modal = document.getElementById("customModal1");
      const progressBars = document.querySelectorAll(".progress-bar");
      const totalSlides = progressBars.length;
      const SWIPE_DURATION = 15000; // 15 seg

      let swiper;

      modal.addEventListener("shown.bs.modal", () => {
        swiper = new Swiper(".swiper-container", {
          loop: false,
          allowTouchMove: false,
          autoplay: {
            delay: SWIPE_DURATION,
            disableOnInteraction: false,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          on: {
            slideChange: function () {
              const idx = swiper.realIndex;
              progressBars.forEach((bar, i) => {
                if (i < idx) {
                  bar.style.width = "100%";
                  bar.style.transition = "none";
                } else {
                  bar.style.width = "0%";
                  bar.style.transition = "none";
                }
              });
              const currentBar = progressBars[idx];
              if (currentBar) {
                void currentBar.offsetWidth; // forzar "repaint"
                currentBar.style.transition = `width ${SWIPE_DURATION}ms linear`;
                currentBar.style.width = "100%";
              }
            },
            reachEnd: function () {
              setTimeout(() => {
                const modalInstance = bootstrap.Modal.getInstance(modal);
                if (modalInstance) {
                  modalInstance.hide();
                }
              }, SWIPE_DURATION);
            },
          },
        });

        if (progressBars.length > 0) {
          progressBars[0].style.transition = `width ${SWIPE_DURATION}ms linear`;
          progressBars[0].style.width = "100%";
        }
      });

      modal.addEventListener("hidden.bs.modal", () => {
        if (swiper) {
          swiper.destroy();
          swiper = null;
        }
        progressBars.forEach((bar) => {
          bar.style.width = "0%";
          bar.style.transition = "none";
        });
      });
    });

    function deleteStory(storyId) {
      if (confirm("¿Seguro que deseas eliminar esta historia?")) {
        console.log("Borrar historia con ID:", storyId);
      }
    }
  </script>

  {% endblock %}
</div>