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

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

{% block body %}

<style>
.list-group-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.list-group-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
}

h6 {
  font-size: 1rem;
}

.text-muted {
  font-size: 0.85rem;
}

.btn-outline-primary, .btn-outline-danger {
  font-size: 0.8rem;
  padding: 5px;
}

@media (max-width: 768px) {
  .list-group-item {
    flex-direction: column;
    text-align: center;
  }

  .list-group-item .d-flex.align-items-center {
    justify-content: center;
    flex-wrap: wrap;
  }

  img {
    margin-bottom: 10px;
  }

  .form-check {
    margin-bottom: 10px;
  }
}

@media (min-width: 992px) { /* Escritorio */
  #contenedor-productos-pastas {
    display: flex;
    flex-wrap: nowrap; /* No permitir apilamiento */
    gap: 10px; /* Espaciado entre las tarjetas */
  }

  .card {
    flex: 0 0 auto; /* Asegura que las tarjetas no se expandan */
  }
}





</style>
<div class="container-fluid">
  <!-- Título general -->
  <h4 class="text-center my-3">Menú de Productos</h4>

  <!-- Botón para agregar sección -->
  <!-- Botón para abrir el modal -->
<div class="text-end mb-3">
  <button id="btnAgregarSeccion" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalAgregarSeccion">
    + Sección
  </button>
</div>

<!-- Modal -->
<div class="modal fade" id="modalAgregarSeccion" tabindex="-1" aria-labelledby="modalAgregarSeccionLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalAgregarSeccionLabel">Agregar Nueva Sección</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <form id="formAgregarSeccion">
          <div class="mb-3">
            <label for="nombreSeccion" class="form-label">Nombre de la Sección</label>
            <input type="text" class="form-control" id="nombreSeccion" placeholder="Ingrese el nombre">
          </div>
          <div class="mb-3">
            <label for="descripcionSeccion" class="form-label">Descripción</label>
            <textarea class="form-control" id="descripcionSeccion" rows="3" placeholder="Ingrese una descripción"></textarea>
          </div>
          <div class="mb-3">
            <label for="imagenSeccion" class="form-label">Imagen de la Sección</label>
            <input type="file" class="form-control" id="imagenSeccion" accept="image/*">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="guardarSeccion" class="btn btn-dark">Guardar</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="modalGuardarProducto" tabindex="-1" aria-labelledby="modalGuardarProductoLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalGuardarProductoLabel">Agregar Nuevo Producto</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <form id="formGuardarProducto">
          <!-- Nombre del Producto -->
          <div class="mb-3">
            <label for="nombreProducto" class="form-label">Nombre del Producto</label>
            <input type="text" class="form-control" id="nombreProducto" placeholder="Ingrese el nombre del producto" required>
          </div>
          <!-- Descripción del Producto -->
          <div class="mb-3">
            <label for="descripcionProducto" class="form-label">Descripción</label>
            <textarea class="form-control" id="descripcionProducto" rows="3" placeholder="Ingrese una descripción"></textarea>
          </div>
          <!-- Precio del Producto -->
          <div class="mb-3">
            <label for="precioProducto" class="form-label">Precio</label>
            <input type="number" class="form-control" id="precioProducto" placeholder="Ingrese el precio" required>
          </div>
          <!-- Imagen del Producto -->
          <div class="mb-3">
            <label for="imagenProducto" class="form-label">Imagen del Producto</label>
            <input type="file" class="form-control" id="imagenProducto" accept="image/*">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" id="guardarProducto">Guardar</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>



  <div class="accordion" id="menuAccordion">
    <!-- Secciones dinámicas -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingPastas">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePastas" aria-expanded="true" aria-controls="collapsePastas">
          Pastas
        </button>
      </h2>
      <div id="collapsePastas" class="accordion-collapse collapse show" aria-labelledby="headingPastas" data-bs-parent="#menuAccordion">
        <div class="accordion-body">
          <!-- Botón para agregar producto -->
          <div class="text-end mb-3">
            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalGuardarProducto">
              + Producto
            </button>
            
            
          </div>
          <div id="contenedor-productos-pastas" class="d-flex flex-wrap justify-content-start align-items-start">
            <!-- Las tarjetas se agregarán aquí -->
          </div>
          
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingMilanesas">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMilanesas" aria-expanded="false" aria-controls="collapseMilanesas">
          Milanesas
        </button>
      </h2>
      <div id="collapseMilanesas" class="accordion-collapse collapse" aria-labelledby="headingMilanesas" data-bs-parent="#menuAccordion">
        <div class="accordion-body">
          <!-- Botón para agregar producto -->
          <div class="text-end mb-3">
            <button class="btn btn-success btn-sm">
              + Producto
            </button>
          </div>
          <div id="contenedor-productos-milanesas"  class="d-flex flex-wrap justify-content-start align-items-start">
            <!-- Productos se llenan dinámicamente aquí -->
          </div>
        </div>
      </div>
    </div>
    <!-- Agrega más secciones aquí -->
  </div>
</div>

<nav class="navbar navbar-light bg-white fixed-bottom shadow" style="border-top: 2px solid #f9c74f;">
  <div class="container d-flex justify-content-around">
    <!-- Opción: Inicio -->
    <a href="#" class="text-center text-decoration-none active">
      <i class="fas fa-home fa-lg text-danger"></i>
      <p class="small mb-0 text-secondary">Inicio</p>
    </a>
    <!-- Opción: Promociones -->
    <a href="#" class="text-center text-decoration-none">
      <i class="fas fa-tags fa-lg text-secondary"></i>
      <p class="small mb-0 text-secondary">Promociones</p>
    </a>
    <!-- Opción: Pedidos -->
    <a href="{% url 'mis_pedidos_disenio' %}" class="text-center text-decoration-none">
      <i class="fas fa-shopping-cart fa-lg text-secondary"></i>
      <p class="small mb-0 text-secondary">Pedidos</p>
    </a>
    <!-- Opción: Mi Perfil -->
    <a href="#" class="text-center text-decoration-none">
      <i class="fas fa-user fa-lg text-secondary"></i>
      <p class="small mb-0 text-secondary">Mi Perfil</p>
    </a>
  </div>
</nav>

{% endblock %}
{% block scripts %}
<script>
  console.log('hola');
 



  const productosPorSeccion = {
  Pastas: ["Spaghetti", "Fettuccine Alfredo", "Lasagna"],
  Milanesas: ["Milanesa de pollo", "Milanesa de res"]
};

$(document).ready(function () {
  var toastMixin = Swal.mixin({
            toast: true,
            icon: 'success',
            title: 'General Title',
            animation: false,
            position: 'top-right',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        $('#guardarSeccion').on('click', function () {
  const nombreSeccion = $('#nombreSeccion').val();
  const descripcionSeccion = $('#descripcionSeccion').val();
  const imagenSeccion = $('#imagenSeccion')[0].files[0]; // Acceder al archivo cargado

  if (nombreSeccion && descripcionSeccion && imagenSeccion) {
    const formData = new FormData();
    formData.append('nombreSeccion', nombreSeccion);
    formData.append('descripcionSeccion', descripcionSeccion);
    formData.append('imagenSeccion', imagenSeccion);

    // Aquí puedes enviar los datos al servidor mediante AJAX
    console.log('Datos preparados para enviar:', formData);

    alert('Sección guardada exitosamente.');

    // Resetea el formulario
    $('#formAgregarSeccion')[0].reset();

    // Cierra el modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('modalAgregarSeccion'));
    modal.hide();
  } else {
    alert('Por favor, completa todos los campos.');
  }
});

  // Guardar nueva sección desde el modal
  $("#guardarSeccion").click(function () {
    const nuevaSeccion = $("#nombreSeccion").val().trim();

    const seccionID = nuevaSeccion.toLowerCase().replace(/\s+/g, "-"); // Crear un ID único

    // Crear el HTML para la nueva sección
    const nuevaSeccionHTML = `
      <div class="accordion-item">
        <h2 class="accordion-header" id="heading-${seccionID}">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${seccionID}" aria-expanded="false" aria-controls="collapse-${seccionID}">
            ${nuevaSeccion}
          </button>
        </h2>
        <div id="collapse-${seccionID}" class="accordion-collapse collapse" aria-labelledby="heading-${seccionID}" data-bs-parent="#menuAccordion">
          <div class="accordion-body">
            <div class="text-end mb-3">
              <button class="btn btn-success btn-sm">
                + Agregar Producto
              </button>
            </div>
            <div id="contenedor-productos-${seccionID}" class="list-group">
              <!-- Productos se llenan dinámicamente aquí -->
            </div>
          </div>
        </div>
      </div>
    `;

    // Agregar la nueva sección al acordeón
    $("#menuAccordion").append(nuevaSeccionHTML);

    // Cerrar el modal y limpiar el formulario
    $("#modalAgregarSeccion").modal("hide");
    $("#formAgregarSeccion")[0].reset();

    toastMixin.fire({
        icon: 'success',
        animation: true,
        title: 'Sección creada Exitosamente!'
    });
  });


  for (const [seccion, productos] of Object.entries(productosPorSeccion)) {
    const contenedor = $(`#contenedor-productos-${seccion.toLowerCase()}`);
    productos.forEach((producto) => {
      const item = `
        <div class="card mb-2" style="width: 250px; height: 100px;">
          <div class="row g-0 h-100">
            <!-- Imagen del producto -->
            <div class="col-4 d-flex align-items-center justify-content-center bg-light">
              <img src="https://via.placeholder.com/150" class="img-fluid rounded" alt="${producto}" style="max-height: 80px;">
            </div>
            <!-- Detalles del producto -->
            <div class="col-8">
              <div class="card-body p-2">
                <h6 class="card-title text-truncate mb-1 text-uppercase text-dark" style="font-size: 0.9rem;">${producto}</h6>
                <span class="mb-1 small text-muted">L300.00</span>
                
                <div class="d-flex justify-content-between align-items-center">
                  <!-- Switch -->
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="switch-${producto.toLowerCase().replace(/\s+/g, '-')}">
                  </div>
                  <!-- Botones de acción -->
                  <div>
                    <button class="btn btn-sm btn-outline-primary me-1" title="Editar">
                      <span class="material-icons" style="font-size: 1rem;">edit</span>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" title="Eliminar">
                      <span class="material-icons" style="font-size: 1rem;">delete</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      `;
      contenedor.append(item);
    });
  }

});

  </script>
{% endblock %}