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

{% block title %} Hacer Pedidos {% endblock %}
<style>

  </style>
{% block body %}
<div
class="d-flex justify-content-center align-items-center ">
<div class="input-group"
    style="max-width: 600px; width: 100%">
    <input
        type="text"
        class="form-control"
        placeholder="Buscar productos..." />
    <button class="btn btn-danger" type="button">
        <i class="fas fa-search"></i>
    </button>
</div>
</div>
<div class="d-flex align-items-center ">
  <section class="carousel-section custom-carousel-container">
      <div
          class="custom-carousel d-flex align-items-center gap-3">
          <!-- Filtro -->
          <div class="text-center">
            <button
            class="btn rounded-circle"
            style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
            <i class="fas fa-shopping-cart"></i>
            </button>
            <p class="small mt-1" style="color: #212529;">Supermercados</p>
        </div>
        <div class="text-center">
          <button
          class="btn rounded-circle"
          style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
          <i class="fas fa-store"></i>
          </button>
          <p class="small mt-1" style="color: #212529;">Tiendas</p>
      </div>
      
        
          <div class="text-center">
            <button
            class="btn rounded-circle"
            style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
            <i class="fas fa-box-open"></i>
            </button>
            <p class="small mt-1" style="color: #212529;">Abarroteria</p>
        </div>
        
        
          <!-- Todos -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
        style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
       
        <i class="fas fa-cut"></i>
              </button>
              <p class="small mt-1">Baberia</p>
          </div>
          <!-- Sugeridos -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
        style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
       
        <i class="fas fa-car"></i>
              </button>
              <p class="small mt-1">Carwash</p>
          </div>
          <!-- Favoritos -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-prescription-bottle-alt"></i>
              </button>
              <p class="small mt-1">Farmacia</p>
          </div>
          <!-- Electrónica -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-tools"></i>
              </button>
              <p class="small mt-1">Ferreteria</p>
          </div>
          <!-- Ropa -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-hotel"></i>
              </button>
              <p class="small mt-1">Hoteles</p>
          </div>
          <!-- Belleza -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-print"></i>
              </button>
              <p class="small mt-1">Imprenta</p>
          </div>
          <!-- Libros -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-utensils"></i>
              </button>
              <p class="small mt-1">Restaurante</p>
          </div>
          <!-- Deportes -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-magic"></i>
              </button>
              <p class="small mt-1">Salón de Belleza</p>
          </div>
          <!-- Hogar -->
          <div class="text-center">
              <button
              class="btn rounded-circle"
              style="width: 50px; height: 50px; background-color: #f8f9fa; color: #212529; border: 1px solid #dee2e6;">
             
              <i class="fas fa-spa"></i>
              </button>
              <p class="small mt-1">Span</p>
          </div>
      </div>
  </section>
</div> 

<section id="card-carousel" class="carousel-section container-fuid ">
  <h5 id="category-title" class=" fw-bold" style="color: #212529; padding: 5px 10px; border-radius: 4px; display: inline-block;">
    Supermercados
  </h5>
  <div class="custom-carousel-wrapper position-relative">
    <!-- Carrusel -->
    <div class="custom-carousel d-flex ">
      <!-- Tarjeta 1 -->
      <a href="{% url 'listado_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/carbajal.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">Carbajal</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-danger small">Cerrado</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/selecto.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">Selecto</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-success small">Abierto</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/la  colonia.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">La Colonia</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-success small">Abierto</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/monjaras.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">Mojaras</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-success small">Abierto</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/carbajal.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">Carbajal</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-danger small">Cerrado</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      
    
    </div>
  </div>
</section>

<section id="card-carousel" class="carousel-section container-fuid mt-3">
  <h5 id="category-title" class=" fw-bold" style="color: #212529; padding: 5px 10px; border-radius: 4px; display: inline-block;">
    Tienda
  </h5>
  <div class="custom-carousel-wrapper position-relative">
    <!-- Carrusel -->
    <div class="custom-carousel d-flex ">
      <!-- Tarjeta 1 -->
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/jestereo.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">Jestereo</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-danger small">Cerrado</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/lady.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">Lady Lee</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-success small">Abierto</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a>
      <a href="{% url 'solicitar_productos_disenio' %}" class="text-decoration-none text-dark">
        <div class="card mb-2 h-100 me-3 flex-shrink-0 position-relative" style="width: 300px; height: 120px;">
          <div class="row g-0 h-100">
            <!-- Columna de la imagen -->
            <div class="col-5 d-flex align-items-center justify-content-center bg-light">
              <div class="overflow-hidden rounded" style="width: 100%; height: 100%;">
                <img src="{% static 'app/assets/images/curacao.png' %}" alt="Carbajal" class="img-fluid w-100 h-100" style="object-fit: cover;">
              </div>
            </div>
            <!-- Columna de los detalles -->
            <div class="col-7">
              <div class="card-body p-1">
                
                <h6 class="card-title mb-1 fw-bold text-truncate badge bg-secondary text-uppercase">La Curacao</h6>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-wallet"></i> Acepta pago online
                </p>
                <p class="text-muted mb-1 small text-truncate">
                  <i class="fas fa-clock"></i> 8:00 AM - 8:00 PM
                </p>
                <span class="badge bg-success small">Abierto</span>
              </div>
            </div>
          </div>
          <!-- Calificación en la esquina superior derecha -->
          <div class="position-absolute top-0 end-0  p-1 rounded-start" style="font-size: 12px;">
            <span class=""><i class="fas fa-star text-warning"></i></span> 4.8
          </div>
        </div>
      </a> 
    </div>
  </div>
</section>

<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>
 /*  document.addEventListener('DOMContentLoaded', function () {
  const carousels = document.querySelectorAll('.custom-carousel'); // Seleccionar todos los carruseles

  carousels.forEach((carouselWrapper, index) => {
    // Crear botones de navegación dinámicamente
    const leftButton = document.createElement('div');
    const rightButton = document.createElement('div');

    leftButton.className = 'custom-carousel-button custom-left';
    rightButton.className = 'custom-carousel-button custom-right';

    leftButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
    rightButton.innerHTML = '<i class="fas fa-chevron-right"></i>';

    // Insertar los botones en el contenedor del carrusel
    carouselWrapper.parentNode.insertBefore(leftButton, carouselWrapper);
    carouselWrapper.parentNode.appendChild(rightButton);

    const scrollStep = 160; // Ajustar según el tamaño de los elementos visibles

    // Función para verificar la visibilidad de los botones
    function updateButtonVisibility() {
      leftButton.style.display = carouselWrapper.scrollLeft > 0 ? 'flex' : 'none';
      rightButton.style.display =
        carouselWrapper.scrollLeft + carouselWrapper.clientWidth <
        carouselWrapper.scrollWidth
          ? 'flex'
          : 'none';
    }

    // Inicializa la visibilidad de los botones
    updateButtonVisibility();

    // Manejador de clics para el botón derecho
    rightButton.addEventListener('click', function () {
      let newScroll = carouselWrapper.scrollLeft + scrollStep;
      carouselWrapper.scrollTo({ left: newScroll, behavior: 'smooth' });
    });

    // Manejador de clics para el botón izquierdo
    leftButton.addEventListener('click', function () {
      let newScroll = carouselWrapper.scrollLeft - scrollStep;
      carouselWrapper.scrollTo({ left: newScroll, behavior: 'smooth' });
    });

    // Actualizar visibilidad de botones después de cada scroll
    carouselWrapper.addEventListener('scroll', updateButtonVisibility);

    // Recalcular límites y visibilidad de botones al redimensionar la ventana
    window.addEventListener('resize', updateButtonVisibility);
  });
});
 */

$(document).ready(function () {
  // Manejo de clics en los elementos del carrusel
  $('.custom-carousel-item').click(function () {
    // Obtener la categoría y el destino de la sección
    const category = $(this).data('category');
    const targetSection = $(this).data('target');

    // Actualizar el título en la sección correspondiente
    $('#' + targetSection + ' #category-title').text(category);

    // Desplazarse suavemente a la sección correspondiente
    $('html, body').animate(
      {
        scrollTop: $('#' + targetSection).offset().top,
      },
      800 // 800ms para desplazamiento suave
    );
  });

  // Seleccionar todos los carruseles de la página
  const $carousels = $('.custom-carousel');

  $carousels.each(function () {
    const $carousel = $(this); // Carrusel actual
    let touchStartX = 0;
    let scrollStart = 0;

    // Manejo del inicio del toque
    $carousel.on('touchstart', function (e) {
      touchStartX = e.originalEvent.touches[0].clientX; // Registrar la posición inicial del toque
      scrollStart = $carousel.scrollLeft(); // Posición inicial del scroll
    });

    // Manejo del movimiento táctil
    $carousel.on('touchmove', function (e) {
      const touchEndX = e.originalEvent.touches[0].clientX;
      const touchDiff = touchStartX - touchEndX;

      $carousel.scrollLeft(scrollStart + touchDiff); // Ajustar el scroll nativo
    });
  });
});

</script>
{% endblock %}