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

{% block title %} Productos {% endblock %}
<style>
  .restaurant-title {
    font-weight: bold;
    font-size: 24px;
  }

  .restaurant-info {
    font-size: 16px;
    color: #6c757d;
  }

  .search-bar {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .search-bar .custom-input {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px 12px;
    padding-right: 40px;
    /* Espacio para el botón */
    font-size: 14px;
    background: transparent;
  }

  .search-bar .btn-search {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 16px;
    color: #6c757d;
    cursor: pointer;
  }

  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px;
    /* Reduce el espacio interior */
  }

  .badge.bg-danger {
    background-color: #ea044e;
    font-size: 10px;
    padding: 0.3em 0.6em;
    display: inline-block;
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 4px;
    /* Reduce el espacio debajo del título */
  }

  .card-text {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 4px;
    /* Reduce el espacio debajo de la descripción */
  }

  .text-decoration-none {
    color: #007bff;
  }

  .text-decoration-none:hover {
    text-decoration: underline;
  }

  .card img {
    max-height: 100px;
    /* Ajusta la altura máxima */
    object-fit: contain;
    /* Asegura que la imagen mantenga su proporción */
    display: block;
    margin: auto;
    /* Centra horizontalmente si es necesario */
    margin-bottom: 4px;
    /* Reduce el espacio debajo de la imagen */
  }

  .row.g-0.align-items-center {
    align-items: center;
    /* Centra verticalmente el contenido */
  }

  .fs-5 {
    margin-bottom: 8px;
    /* Reduce el espacio debajo del precio */
  }

  .input-group {
    margin-right: 5px;
    max-width: 80px;
    /* Reduce el tamaño del grupo de botones */
  }

  .input-group .form-control {
    padding: 5px;
    font-size: 14px;
    text-align: center;
  }

  .btn-sm {
    font-size: 14px;
    padding: 5px 10px;
  }

  .btn-success {
    font-size: 14px;
    padding: 6px 20px;
    /* Aumenta el padding horizontal */
    background-color: #28a745;
    border: none;
    width: 100%;
    /* Puedes eliminar esto si no quieres que ocupe todo el ancho disponible */
    max-width: 150px;
    /* Define un ancho máximo para el botón */
  }


  .card-body {
    padding: 8px;
    /* Reduce el espacio interior del cuerpo de la tarjeta */
  }

  .img-fluid {
    display: block;
    margin: 0 auto;
    max-width: 120px;
    /* Ajusta el ancho máximo de la imagen */
    object-fit: contain;
  }
</style>
{% block body %}
<div class="container-fluid my-4">
  <h2 class="restaurant-title mb-1">Supermercados carbajal</h2>
  <p class="restaurant-info mb-3">35-55 min &middot; L44 envío &middot; Mínimo
    L79</p>

  <div class="search-bar d-flex align-items-center" style="max-width: 550px;">
    <input type="text" class="form-control custom-input" placeholder="Buscar productos...">
    <button class="btn btn-search">
      <i class="fas fa-search"></i>
    </button>
  </div>
</div>

<div class="container-fluid my-4">
  <h3 id="category-title" class="ms-3">Belleza y cuidado personal</h3>
  <!-- Contenedor de las tarjetas -->
  <div class="d-flex flex-wrap justify-content-center gap-3">
    <div class="card mb-3" style="max-width: 540px;">
      <div class="card-body">
        <span class="badge bg-danger text-uppercase mb-2">
          <i class="fas fa-star"></i> Más Vendido
        </span>
        <h5 class="card-title mb-2">Jabón el Indio 2</h5>
        <div class="text-center my-2">
          <img src="{% static 'app/assets/images/indio.png' %}" alt="Jabón el Indio" class="img-fluid rounded"
            style="max-width: 140px; max-height: 140px; object-fit: contain;">
        </div>
        <p class="card-text text-muted mb-1">Con sabor a manzana</p>
        <p class="fs-5 fw-bold text-success mb-3">L220</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="input-group" style="max-width: 120px;">
            <button class="btn btn-outline-secondary btn-sm">-</button>
            <input type="text" class="form-control text-center" value="1" readonly>
            <button class="btn btn-outline-secondary btn-sm">+</button>
          </div>
          <button class="btn btn-success btn-sm px-3">
            <i class="fas fa-shopping-cart me-1"></i> Agregar
          </button>
        </div>
      </div>
    </div>
    <div class="card mb-3" style="max-width: 540px;">
      <div class="card-body">
        <span class="badge bg-danger text-uppercase mb-2">
          <i class="fas fa-star"></i> Más Vendido
        </span>
        <h5 class="card-title mb-2">Colgate</h5>
        <div class="text-center my-2">
          <img src="{% static 'app/assets/images/pasta.png' %}" alt="Jabón el Indio" class="img-fluid rounded"
            style="max-width: 140px; max-height: 140px; object-fit: contain;">
        </div>
        <p class="card-text text-muted mb-1">Pasta de dientes colgates</p>
        <p class="fs-5 fw-bold text-success mb-3">L120</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="input-group" style="max-width: 120px;">
            <button class="btn btn-outline-secondary btn-sm">-</button>
            <input type="text" class="form-control text-center" value="1" readonly>
            <button class="btn btn-outline-secondary btn-sm">+</button>
          </div>
          <button class="btn btn-success btn-sm px-3">
            <i class="fas fa-shopping-cart me-1"></i> Agregar
          </button>
        </div>
      </div>
    </div>
    <div class="card mb-3" style="max-width: 540px;">
      <div class="card-body">
        <span class="badge bg-danger text-uppercase mb-2">
          <i class="fas fa-star"></i> Más Vendido
        </span>
        <h5 class="card-title mb-2">Gel</h5>
        <div class="text-center my-2">
          <img src="{% static 'app/assets/images/gel.png' %}" alt="Jabón el Indio" class="img-fluid rounded"
            style="max-width: 140px; max-height: 140px; object-fit: contain;">
        </div>
        <p class="card-text text-muted mb-1">Gel de Banio</p>
        <p class="fs-5 fw-bold text-success mb-3">L120</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="input-group" style="max-width: 120px;">
            <button class="btn btn-outline-secondary btn-sm">-</button>
            <input type="text" class="form-control text-center" value="1" readonly>
            <button class="btn btn-outline-secondary btn-sm">+</button>
          </div>
          <button class="btn btn-success btn-sm px-3">
            <i class="fas fa-shopping-cart me-1"></i> Agregar
          </button>
        </div>
      </div>
    </div>

    <div class="card mb-3" style="max-width: 540px;">
      <div class="card-body">
        <span class="badge bg-danger text-uppercase mb-2">
          <i class="fas fa-star"></i> Más Vendido
        </span>
        <h5 class="card-title mb-2">Dove</h5>
        <div class="text-center my-2">
          <img src="{% static 'app/assets/images/dove.png' %}" alt="Jabón el Indio" class="img-fluid rounded"
            style="max-width: 140px; max-height: 140px; object-fit: contain;">
        </div>
        <p class="card-text text-muted mb-1">Dosodorante de barra dove</p>
        <p class="fs-5 fw-bold text-success mb-3">L120</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="input-group" style="max-width: 120px;">
            <button class="btn btn-outline-secondary btn-sm">-</button>
            <input type="text" class="form-control text-center" value="1" readonly>
            <button class="btn btn-outline-secondary btn-sm">+</button>
          </div>
          <button class="btn btn-success btn-sm px-3">
            <i class="fas fa-shopping-cart me-1"></i> Agregar
          </button>
        </div>
      </div>
    </div>

  </div>
</div>


{% endblock %}
{% block scripts %}
<script>

</script>
{% endblock %}