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

{% block title %} Hacer Pedidos {% endblock %}

{% block body %}

<style>

</style>
<div class="container my-3">
  <div class="card p-3 mx-auto" style="border-radius: 10px; background-color: #f8f9fa; width: 100%; max-width: 800px;">
    <!-- Encabezado con Avatar e Input -->
    <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-2">
    <!-- 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-center 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>
    <div id="publicacionesContainer" class="mt-4"></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;">
        <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="{% static 'app/assets/images/birrieria.png' %}" 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">Birrieria El Pariente</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" 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">
                <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" class="d-none" 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">Agregar</button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" 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-lg">
      <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>
        <!-- Contenido del Modal -->
        <div class="modal-body">
          <!-- Opciones de Promoción -->
          <div class="row g-3">
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="Descuento">
                <span class="material-icons" style="font-size: 2rem; color: #007bff;">local_offer</span>
                <p class="mt-2">Descuento</p>
              </div>
            </div>
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="Regalo">
                <span class="material-icons" style="font-size: 2rem; color: #28a745;">card_giftcard</span>
                <p class="mt-2">Regalo</p>
              </div>
            </div>
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="Destacado">
                <span class="material-icons" style="font-size: 2rem; color: #ffc107;">star_rate</span>
                <p class="mt-2">Destacado</p>
              </div>
            </div>
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="2x1">
                <span class="material-icons" style="font-size: 2rem; color: #17a2b8;">repeat</span>
                <p class="mt-2">2x1</p>
              </div>
            </div>
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="Oferta Flash">
                <span class="material-icons" style="font-size: 2rem; color: #e83e8c;">flash_on</span>
                <p class="mt-2">Oferta Flash</p>
              </div>
            </div>
            <div class="col-6">
              <div class="p-3 border rounded text-center promotion-option" data-promotion="Combo">
                <span class="material-icons" style="font-size: 2rem; color: #6c757d;">shopping_cart</span>
                <p class="mt-2">Combo</p>
              </div>
            </div>
          </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>
  </div>

  {% endblock %}
  {% block scripts %}
  <script>
    $(document).ready(function () {
      // 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('text-dark p-1 rounded'); // Añadimos clases nuevas para el diseño

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

      // Manejar el clic en el botón "Publicar"
      $('#publicarBtn').click(function () {
        // Capturar el texto del campo de entrada
        let textoPublicacion = $('.modal-body input[type="text"]').val();
        // Capturar la imagen cargada (si existe)
        let imagenPublicacion = $('#fileInput')[0].files[0];

        // Capturar el estado de promoción desde el span
        let estadoPromocion = $('#promotion-status').html(); // Obtiene el contenido actual del <span>

        // Verificar que haya texto, imagen o estado
        if (!textoPublicacion && !imagenPublicacion && !estadoPromocion) {
          alert('Por favor, escribe algo, selecciona una promoción o sube una imagen para publicar.');
          return;
        }

        // Generar un ID único para la imagen
        let uniqueId = 'img_' + new Date().getTime();

        // Crear el HTML dinámico para mostrar la publicación
        let nuevaPublicacion = `
        <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/birrieria.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">Birrieria El Pariente</h6>
                    <div class="d-flex align-items-center">
                        <small class="text-muted me-2">Ahora</small>
                        ${estadoPromocion ? `<span>${estadoPromocion}</span>` : ''}
                    </div>
                </div>
            </div>
            <div class="mb-2">
                <!-- Texto de la publicación -->
                <p>${textoPublicacion}</p>
            </div>
            ${imagenPublicacion
            ? `<div class="mb-2">
                           <img src="#" alt="Imagen" id="${uniqueId}" style="width: 100%; border-radius: 10px;">
                       </div>`
            : ''}
        </div>
    `;

        // Agregar la publicación al contenedor
        $('#publicacionesContainer').append(nuevaPublicacion);

        // Si hay una imagen cargada, leerla y mostrarla
        if (imagenPublicacion) {
          let reader = new FileReader();
          reader.onload = function (e) {
            $(`#${uniqueId}`).attr('src', e.target.result);
          };
          reader.readAsDataURL(imagenPublicacion);
        }

        // Limpiar los campos del modal
        $('.modal-body input[type="text"]').val('');
        $('#fileInput').val(''); // Limpiar la imagen seleccionada
        $('#fileInput').next('img').remove(); // Eliminar cualquier previsualización de imagen anterior

        // Limpiar el estado de promoción
        $('#promotion-status').html('').removeClass(); // Restablecer el <span>

        // Cerrar el modal
        $('#customModal').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(""); // Limpiar el input de archivo
      });
      // Evento para abrir el modal al hacer clic en el input
      $('#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 %}