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

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

{% block body %}
<div class="container my-4">
  <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: Programación del estado -->
  <div class="mt-4">
    <h5>Opciones de programación</h5>

    <!-- Opciones de programación: Publicar inmediatamente, Programar una vez, Repetir semanalmente -->
    <div class="mb-3">
      <div class="form-check">
        <input
          class="form-check-input"
          type="radio"
          name="programacionOption"
          id="publicarInmediatamente"
          value="inmediato"
          checked
        />
        <label class="form-check-label" for="publicarInmediatamente">
          Publicar inmediatamente
        </label>
      </div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="radio"
          name="programacionOption"
          id="programarUnaVez"
          value="una_vez"
        />
        <label class="form-check-label" for="programarUnaVez">
          Programar una vez
        </label>
      </div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="radio"
          name="programacionOption"
          id="programarSemanalmente"
          value="semanal"
        />
        <label class="form-check-label" for="programarSemanalmente">
          Programar con repetición semanal
        </label>
      </div>
    </div>

    <!-- Contenedor para programación una vez -->
    <div id="programacionUnaVezContainer" style="display: none; margin-top: 10px;">
      <label for="fechaProgramada" class="form-label fw-bold">Fecha y hora de publicación:</label>
      <input type="datetime-local" id="fechaProgramada" class="form-control" />
    </div>

    <!-- Contenedor para programación semanal -->
    <div id="programacionSemanalContainer" style="display: none; margin-top: 10px;">
      <!-- Checkbox para marcar los días de repetición -->
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          id="repetirSemanalmenteCheck"
          value="1"
        />
        <label class="form-check-label" for="repetirSemanalmenteCheck">
          Repetir semanalmente
        </label>
      </div>

      <!-- Selección de días para repetición -->
      <div id="diasRepeticionContainer" style="display: none; margin-top: 10px;">
        <h6>Días de repetición:</h6>
        <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>
      </div>

      <!-- Hora para la publicación -->
      <div class="mt-3">
        <label for="repetirHora" class="form-label fw-bold">Hora de publicación:</label>
        <input type="time" id="repetirHora" class="form-control" />
      </div>
    </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() {
    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() {
            Array.prototype.forEach.call(colorSwatches, function(s) {
                s.style.border = "none";
            });
            this.style.border = "2px solid #000";
            selectedColor = this.getAttribute("data-color");
            textPreview.style.background = selectedColor;
        });
    });

    var postText = document.getElementById("postText");
    postText.addEventListener("input", function() {
        var content = this.value.trim() === "" ? "¡Escribe algo!" : this.value;
        textPreviewContent.textContent = content;
    });

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

    // Manejo de opciones de programación
    var programacionOptionRadios = document.getElementsByName("programacionOption");
    var programacionSemanalContainer = document.getElementById("programacionSemanalContainer");
    var programacionUnaVezContainer = document.getElementById("programacionUnaVezContainer");

    programacionOptionRadios.forEach(function(radio) {
        radio.addEventListener("change", function() {
            if (this.value === "semanal") {
                programacionSemanalContainer.style.display = "block";
                programacionUnaVezContainer.style.display = "none";
            } else if (this.value === "una_vez") {
                programacionSemanalContainer.style.display = "none";
                programacionUnaVezContainer.style.display = "block";
            } else { // Inmediato
                programacionSemanalContainer.style.display = "none";
                programacionUnaVezContainer.style.display = "none";
            }
        });
    });

    var repetirSemanalmenteCheck = document.getElementById("repetirSemanalmenteCheck");
    var diasRepeticionContainer = document.getElementById("diasRepeticionContainer");

    repetirSemanalmenteCheck.addEventListener("change", function() {
        if (this.checked) {
            diasRepeticionContainer.style.display = "block";
        } else {
            diasRepeticionContainer.style.display = "none";
            // Desmarcar todos los días si se desactiva la repetición semanal
            var diasChecks = diasRepeticionContainer.querySelectorAll('input[type="checkbox"]');
            diasChecks.forEach(function(checkbox) {
                checkbox.checked = false;
            });
        }
    });

    var btnCrearEstado = document.getElementById("btnCrearEstado");

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

        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") {
            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;
            }

            // No retorno aquí; permitimos continuar para recopilar programación
        } else if (activeTab === "imagen-tab") {
            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;
            }

            var reader = new FileReader();
            reader.onload = function(e2) {
                var base64Img = e2.target.result;
                enviarDatos("imagen", null, null, base64Img);
            };
            reader.readAsDataURL(file);
            return; // Esperamos que el FileReader termine
        }

        // Para texto, continuamos aquí
        enviarDatos("texto", texto, color, null);
    });

    function enviarDatos(tipoEstado, texto, color, rutaImagen) {
        var programacionOption = document.querySelector('input[name="programacionOption"]:checked').value;
        var repetir = 0;
        var dias_repeticion = [];
        var hora_repeticion = null;
        var fecha_inicio_publicacion = null;

        if (programacionOption === "semanal") {
            repetir = repetirSemanalmenteCheck.checked ? 1 : 0;
            if (repetir) {
                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_repeticion.push(checkbox.value);
                    }
                }

                var repetirHoraInput = document.getElementById("repetirHora");
                repetirHora = repetirHoraInput.value ? repetirHoraInput.value : null;

                if (dias_repeticion.length === 0 || !repetirHora) {
                    Swal.fire({
                        icon: "warning",
                        title: "¡Atención!",
                        text: "Por favor, selecciona al menos un día y una hora para la repetición semanal.",
                        confirmButtonText: "Entendido",
                    });
                    return;
                }
            }
        } else if (programacionOption === "una_vez") {
            var fechaProgramadaInput = document.getElementById("fechaProgramada");
            fecha_inicio_publicacion = fechaProgramadaInput.value ? new Date(fechaProgramadaInput.value) : null;

            if (!fecha_inicio_publicacion) {
                Swal.fire({
                    icon: "warning",
                    title: "¡Atención!",
                    text: "Por favor, selecciona una fecha y hora para la publicación.",
                    confirmButtonText: "Entendido",
                });
                return;
            }

            // Convertir a formato 'YYYY-MM-DD HH:MM:SS'
            var year = fecha_inicio_publicacion.getFullYear();
            var month = ("0" + (fecha_inicio_publicacion.getMonth() + 1)).slice(-2);
            var day = ("0" + fecha_inicio_publicacion.getDate()).slice(-2);
            var hours = ("0" + fecha_inicio_publicacion.getHours()).slice(-2);
            var minutes = ("0" + fecha_inicio_publicacion.getMinutes()).slice(-2);
            var seconds = ("0" + fecha_inicio_publicacion.getSeconds()).slice(-2);
            fecha_inicio_publicacion = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        } else if (programacionOption === "inmediato") {
            // Publicar inmediatamente: usar la hora actual
            var now = new Date();
            var year = now.getFullYear();
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var day = ("0" + now.getDate()).slice(-2);
            var hours = ("0" + now.getHours()).slice(-2);
            var minutes = ("0" + now.getMinutes()).slice(-2);
            var seconds = ("0" + now.getSeconds()).slice(-2);
            fecha_inicio_publicacion = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            // No repetir
            repetir = 0;
        }

        var payload = {
            tipo_estado: tipoEstado,      
            texto: texto,
            color_fondo: color,
            ruta_imagen: rutaImagen,
            repetir: repetir, 
            dias_repeticion: dias_repeticion,
            hora_repeticion: repetir ? document.getElementById("repetirHora").value : null,
            fecha_inicio_publicacion: fecha_inicio_publicacion
        };

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

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