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

{% block title %}Crear Vistazo{% endblock %}

{% block body %}
<div class="container my-4">

  <h2 class="mb-4">Crear un nuevo Vistazo</h2>

  <!-- Pestañas para elegir: Texto con fondo / Subir Imagen -->
  <ul class="nav nav-tabs" id="estadoTabs" role="tablist">
    <!-- Pestaña 1: Texto -->
    <li class="nav-item" role="presentation">
      <button
        class="nav-link active"
        id="texto-tab"
        data-bs-toggle="tab"
        data-bs-target="#tab-texto"
        type="button"
        role="tab"
        aria-controls="tab-texto"
        aria-selected="true"
      >
        Texto con fondo
      </button>
    </li>
    <!-- Pestaña 2: Imagen -->
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        id="imagen-tab"
        data-bs-toggle="tab"
        data-bs-target="#tab-imagen"
        type="button"
        role="tab"
        aria-controls="tab-imagen"
        aria-selected="false"
      >
        Subir Imagen
      </button>
    </li>
  </ul>

  <!-- Contenido de las pestañas -->
  <div class="tab-content" id="estadoTabsContent">
    <!-- TAB 1: Texto con fondo -->
    <div
      class="tab-pane fade show active p-3"
      id="tab-texto"
      role="tabpanel"
      aria-labelledby="texto-tab"
    >
      <label class="form-label fw-bold">Elige un color de fondo:</label>
      <div class="d-flex mb-2" style="gap: 10px;">
        <!-- Paletas de colores más suaves -->
        <div
          class="color-swatch"
          style="width: 30px; height: 30px; background: #a8d5e2; cursor:pointer; border-radius:4px;"
          data-color="#a8d5e2"
        ></div>
        <div
          class="color-swatch"
          style="width: 30px; height: 30px; background: #f2c1c1; cursor:pointer; border-radius:4px;"
          data-color="#f2c1c1"
        ></div>
        <div
          class="color-swatch"
          style="width: 30px; height: 30px; background: #c3e6cb; cursor:pointer; border-radius:4px;"
          data-color="#c3e6cb"
        ></div>
        <div
          class="color-swatch"
          style="width: 30px; height: 30px; background: #d1c4e9; cursor:pointer; border-radius:4px;"
          data-color="#d1c4e9"
        ></div>
      </div>

      <!-- Vista previa: texto con fondo -->
      <div
        id="textPreview"
        class="p-4 text-center text-dark mb-3"
        style="min-height: 150px; border-radius: 8px; background: #a8d5e2; display: flex; align-items: center; justify-content: center;"
      >
        <span id="textPreviewContent" style="font-size: 1.2rem;">¡Escribe algo!</span>
      </div>

      <!-- Campo de texto -->
      <textarea
        id="postText"
        class="form-control"
        rows="3"
        placeholder="¿Qué estás pensando?"
      ></textarea>
    </div>

    <!-- TAB 2: Subir Imagen -->
    <div
      class="tab-pane fade p-3"
      id="tab-imagen"
      role="tabpanel"
      aria-labelledby="imagen-tab"
    >
      <label for="postImage" class="form-label fw-bold">Selecciona una imagen:</label>
      <input
        type="file"
        id="postImage"
        class="form-control mb-3"
        accept="image/*"
      />

      <!-- Vista previa de la imagen -->
      <div
        id="imagePreviewContainer"
        class="text-center"
        style="display:none;"
      >
        <img
          id="imagePreview"
          src="#"
          alt="Vista previa"
          class="img-fluid rounded"
          style="max-height: 300px;"
        />
      </div>
    </div>
  </div>
  <!-- Fin .tab-content -->

  <!-- Opcional: Repetir el estado en días específicos -->
  <div class="mt-4">
    <h5>Repetir este vistazo</h5>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="lunesCheck"
        value="lunes"
      />
      <label class="form-check-label" for="lunesCheck">Lunes</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="martesCheck"
        value="martes"
      />
      <label class="form-check-label" for="martesCheck">Martes</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="miercolesCheck"
        value="miercoles"
      />
      <label class="form-check-label" for="miercolesCheck">Miércoles</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="juevesCheck"
        value="jueves"
      />
      <label class="form-check-label" for="juevesCheck">Jueves</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="viernesCheck"
        value="viernes"
      />
      <label class="form-check-label" for="viernesCheck">Viernes</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="sabadoCheck"
        value="sabado"
      />
      <label class="form-check-label" for="sabadoCheck">Sábado</label>
    </div>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="checkbox"
        id="domingoCheck"
        value="domingo"
      />
      <label class="form-check-label" for="domingoCheck">Domingo</label>
    </div>

    <!-- Hora para la publicación diaria -->
    <div class="mt-3">
      <label for="repetirHora" class="form-label fw-bold">Hora de publicación diaria:</label>
      <input
        type="time"
        id="repetirHora"
        class="form-control"
      />
    </div>
  </div>

  <!-- Botón para crear el estado -->
  <div class="mt-4">
    <button id="btnCrearEstado" class="btn btn-primary">
      Crear Vistazo
    </button>
  </div>

</div> <!-- Fin container -->
{% endblock body %}

{% block scripts %}
<!-- SweetAlert2 JS (si no lo has incluido en la sección head) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // --- SECCIÓN: Manejo de color de fondo ---
    var colorSwatches = document.querySelectorAll(".color-swatch");
    var textPreview = document.getElementById("textPreview");
    var textPreviewContent = document.getElementById("textPreviewContent");
    var selectedColor = "#a8d5e2"; // Color por defecto

    Array.prototype.forEach.call(colorSwatches, function(swatch) {
        swatch.addEventListener("click", function() {
            // Quitar bordes previos
            Array.prototype.forEach.call(colorSwatches, function(s) {
                s.style.border = "none";
            });
            // Borde en el seleccionado
            this.style.border = "2px solid #000";
            selectedColor = this.getAttribute("data-color");
            textPreview.style.background = selectedColor;
        });
    });

    // --- SECCIÓN: Vista previa de texto ---
    var postText = document.getElementById("postText");
    postText.addEventListener("input", function() {
        var content = this.value.trim() === "" ? "¡Escribe algo!" : this.value;
        textPreviewContent.textContent = content;
    });

    // --- SECCIÓN: Vista previa de imagen ---
    var postImage = document.getElementById("postImage");
    var imagePreviewContainer = document.getElementById("imagePreviewContainer");
    var imagePreview = document.getElementById("imagePreview");

    postImage.addEventListener("change", function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.setAttribute("src", e.target.result);
                imagePreviewContainer.style.display = "block";
            };
            reader.readAsDataURL(file);
        } else {
            imagePreview.setAttribute("src", "#");
            imagePreviewContainer.style.display = "none";
        }
    });

    // --- SECCIÓN: Botón para crear el estado ---
    var btnCrearEstado = document.getElementById("btnCrearEstado");

    btnCrearEstado.addEventListener("click", function(e) {
        e.preventDefault();

        // Detectar cuál pestaña está activa
        var activeTab = document.querySelector('.nav-link.active').id;

        var ruta_imagen = null;
        var texto = null;
        var color = null;
        var tipo_estado = "texto";

        if (activeTab === "texto-tab") {
            // Datos del estado tipo "texto"
            texto = postText.value.trim();
            color = selectedColor;
            tipo_estado = "texto";

            if (!texto) {
                Swal.fire({
                    icon: "warning",
                    title: "¡Atención!",
                    text: "Por favor, ingresa algún texto para el vistazo.",
                    confirmButtonText: "Entendido",
                });
                return;
            }

            // Enviar directo
            enviarDatos("texto", texto, color, null);

        } else if (activeTab === "imagen-tab") {
            // Datos del estado tipo "imagen"
            var file = postImage.files[0];
            if (!file) {
                Swal.fire({
                    icon: "warning",
                    title: "¡Atención!",
                    text: "Por favor, selecciona una imagen para el vistazo.",
                    confirmButtonText: "Entendido",
                });
                return;
            }

            // Convertir la imagen a Base64 antes de enviar
            var reader = new FileReader();
            reader.onload = function(e2) {
                var base64Img = e2.target.result;
                enviarDatos("imagen", null, null, base64Img);
            };
            reader.readAsDataURL(file);
        }
    });

    // --- SECCIÓN: Función para armar el payload y enviarlo ---
    function enviarDatos(tipoEstado, texto, color, rutaImagen) {
        // Obtener los días de repetición marcados
        var dias = [];
        var diasCheckboxes = [
            "lunesCheck",
            "martesCheck",
            "miercolesCheck",
            "juevesCheck",
            "viernesCheck",
            "sabadoCheck",
            "domingoCheck"
        ];
        for (var i = 0; i < diasCheckboxes.length; i++) {
            var checkbox = document.getElementById(diasCheckboxes[i]);
            if (checkbox && checkbox.checked) {
                dias.push(checkbox.value);
            }
        }

        // Obtener hora de publicación
        var repetirHoraInput = document.getElementById("repetirHora");
        var repetirHora = repetirHoraInput.value ? repetirHoraInput.value : null;

        // Construir el payload
        var payload = {
            // Coincide con los campos que tu backend espera
            tipo_estado: tipoEstado,       // "texto" o "imagen"
            texto: texto,
            color_fondo: color,
            ruta_imagen: rutaImagen,
            repetir: (dias.length > 0 && repetirHora !== null) ? 1 : 0, // 1 si hay repetición, 0 si no
            dias_repeticion: dias,
            hora_repeticion: repetirHora
        };

        // Validar si no hay ni texto ni imagen
        if (!texto && !rutaImagen) {
            Swal.fire({
                icon: "error",
                title: "¡Error!",
                text: "Debes ingresar un texto o una imagen para el vistazo.",
                confirmButtonText: "Entendido",
            });
            return;
        }

        // Enviar con fetch al backend
        var csrfToken = "{{ csrf_token }}";

        fetch("{% url 'vistazos/insertar_estado_comercio' %}", {
            method: "POST",
            headers: {
                "X-CSRFToken": csrfToken,
                "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            if (data.save === 1) {
                Swal.fire({
                    icon: "success",
                    title: "¡Éxito!",
                    text: "Vistazo guardado exitosamente.",
                    confirmButtonText: "Genial",
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "{% url 'publicaciones' %}";
                    }
                });
            } else {
                Swal.fire({
                    icon: "error",
                    title: "¡Error!",
                    text: "Error al guardar el vistazo: " + data.error,
                    confirmButtonText: "Entendido",
                });
            }
        })
        .catch(function(error) {
            console.error("Error al enviar el vistazo:", error);
            Swal.fire({
                icon: "error",
                title: "¡Error!",
                text: "Ocurrió un error al guardar el vistazo. Por favor, intenta nuevamente.",
                confirmButtonText: "Entendido",
            });
        });
    }
});


</script>
{% endblock scripts %}