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

<style>
  .story-container {
    padding: 10px;
  }

  .story-card {
    width: 70px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.7rem;
    /* Reduce el tamaño del texto */
  }

  .story-image {
    width: 60px;
    /* Reduce el tamaño del contenedor */
    height: 80px;
    /* Reduce la altura del contenedor */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    background-color: #f0f0f0;
  }

  .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }

  .story-title {
    margin-top: 5px;
    color: #555;
    font-weight: bold;
    font-size: 0.75rem;
    /* Reduce el tamaño de la fuente del título */
  }

  .plus-icon {
    font-size: 1.5rem;
    /* Reduce el tamaño del ícono "+" */
    color: #007bff;
    font-weight: bold;
  }

  .story-card:first-child .story-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #007bff;
  }

  .story-card:first-child .story-title {
    color: #007bff;
  }

  .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">
    <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-start">
        <!-- Crear Historia -->
        {% if productos %}
        <div class="me-3 text-center">
          <div id="btnUpload1"
            class="story-image d-flex align-items-center justify-content-center border border-primary rounded-circle"
            style="width: 80px; height: 80px; cursor: pointer">
            <span class="text-primary fs-1">+</span>
          </div>

          <p class="mt-2 text-primary" style="font-size: 0.9rem">Vistazo</p>
        </div>
        {% endif %}

        <!-- Historia 1 -->
        <div id="estadosContainer" class="d-flex flex-row align-items-start"></div>
      </div>
    </div>
  </div>

  <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 bg-dark text-white">
        <div class="modal-header border-0 d-flex flex-column align-items-start">
          <!-- Título Vistazos -->
          <h5 class="modal-title fw-bold" id="customModalLabel" style="font-size: 16px">
            Vistazos
          </h5>

          <!-- Contenedor para imagen y nombre -->
          <div class="d-flex align-items-center mt-2">
            <img src="{{ usuario.foto_perfil }}" alt="Avatar" class="rounded-circle me-2"
              style="width: 40px; height: 40px" />
            <h6 class="mb-0 fw-bold" style="font-size: 14px">
              {{ usuario.nombre }}
            </h6>
          </div>

          <!-- Botón cerrar -->
          <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0" data-bs-dismiss="modal"
            aria-label="Cerrar"></button>
        </div>

        <div class="modal-body">
          <!-- Contenedor para las imágenes -->
          <div id="imageList" class="d-flex flex-column overflow-auto px-3" style="max-height: 90vh">
            <!-- Las imágenes se agregarán dinámicamente aquí -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="repetirEstadoModal" tabindex="-1" aria-labelledby="repetirEstadoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="repetirEstadoLabel">
            Configurar Repetición del Estado
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="repetirFechaInput" class="form-label">Fecha</label>
            <input type="date" id="repetirFechaInput" class="form-control" />
          </div>
          <div class="mb-3">
            <label for="repetirDiaInput" class="form-label">Día</label>
            <input type="text" id="repetirDiaInput" class="form-control" placeholder="Ejemplo: Lunes, Martes" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            Cancelar
          </button>
          <button type="button" id="guardarRepeticionBtn" class="btn btn-primary">
            Guardar Repetición
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 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" 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 %}
  <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 '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>
  {% endblock %}
</div>