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


{% block title %} Mis Pedidos {% endblock %}

{% block body %}

<style>

    </style>

<div class="">
    <h3 class=" mb-4 fw-bold">Mis pedidos</h3>
  
    <!-- Filtros -->
    <div class="d-flex justify-content-center mb-3 gap-2">
        <button class="btn  btn-sm d-flex align-items-center">
            <i class="fas fa-sliders-h me-1"></i> Filtros
          </button> 
      <button class="btn btn-outline-secondary btn-sm">Entregados</button>
      <button class="btn btn-outline-danger btn-sm">Cancelados</button>
    </div>
  
    <!-- Pedido 1 -->
    <a href="{% url 'detalle_mis_pedidos_disenio' %}" style="text-decoration: none; color: inherit;">
  <div class="card mb-3 shadow-sm w-100">
    <div class="card-body d-flex align-items-center">
      <!-- Imagen del comercio -->
      <div class="me-3">
        <img src="{% static 'app/assets/images/pizza.png' %}" alt="Pizza Hut" 
             class="img-fluid" style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px;">
      </div>

      <!-- Detalles del pedido -->
      <div class="flex-grow-1">
        <!-- Estado y hora de entrega -->
        <p class="mb-1 text-secondary fw-bold text-uppercase text-nowrap" style="font-size: 10px;">
          <span class="bg-success text-white p-1" style="border-radius: 5px;">Entregado</span> · 
          <span style="font-size: 8px;">30 de nov · 17:47 hs</span>
        </p>
        
        <!-- Nombre del comercio -->
        <h6 class="mb-1 fw-bold" style="font-size: 14px;">Pizza Hut - (Choluteca)</h6>

        <!-- Acciones -->
        <div class="d-flex flex-row align-items-center justify-content-between mt-2">
          <p class="text-muted mb-0" style="font-size: 12px;">L 488 · 1 producto</p>
          <button class="btn text-primary btn-sm d-flex align-items-center gap-2">
            <i class="fas fa-redo-alt"></i>Repetir
          </button>
        </div>
      </div>
    </div>
  </div>
</a>

     <div class="card mb-3 shadow-sm w-100">
        <div class="card-body d-flex align-items-center">
          <!-- Imagen del comercio -->
          <div class="me-3">
            <img src="{% static 'app/assets/images/birrieria.png' %}" alt="Birrieria El Pariente" 
                 class="img-fluid" style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px;">
          </div>
      
          <!-- Detalles del pedido -->
          <div class="flex-grow-1">
            <!-- Estado y hora de entrega -->
            <p class="mb-1 text-secondary fw-bold text-uppercase text-nowrap" style="font-size: 10px;">
              <span class="bg-success text-white p-1" style="border-radius: 5px;">Entregado</span> · 
              <span style="font-size: 8px;">16 de nov · 17:38 hs</span>
            </p>
      
            <!-- Nombre del comercio -->
            <h6 class="mb-1 fw-bold" style="font-size: 14px;">El Pariente - (Choluteca)</h6>
      
            <!-- Acciones -->
            <div class="d-flex flex-row align-items-center justify-content-between mt-2">
              <p class="text-muted mb-0" style="font-size: 12px;">L 303 · 1 producto</p>
              <button class="btn text-primary btn-sm d-flex align-items-center gap-2">
                <i class="fas fa-redo-alt"></i>Repetir
              </button>
            </div>
          </div>
        </div>
      </div>
      
    <!-- Pedido 3 -->
    <div class="card mb-3 shadow-sm w-100">
        <div class="card-body d-flex align-items-center">
          <!-- Imagen del comercio -->
          <div class="me-3">
            <img src="{% static 'app/assets/images/coco.png' %}" alt="Coco Baleadas - (Choluteca)" 
                 class="img-fluid" style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px;">
          </div>
      
          <!-- Detalles del pedido -->
          <div class="flex-grow-1">
            <!-- Estado y hora de entrega -->
            <p class="mb-1 text-secondary fw-bold text-uppercase text-nowrap" style="font-size: 10px;">
              <span class="bg-success text-white p-1" style="border-radius: 5px;">Entregado</span> · 
              <span style="font-size: 8px;">16 de julio · 19:38 hs</span>
            </p>
      
            <!-- Nombre del comercio -->
            <h6 class="mb-1 fw-bold" style="font-size: 14px;">Coco Baleadas - (Choluteca)</h6>
      
            <!-- Acciones -->
            <div class="d-flex flex-row align-items-center justify-content-between mt-2">
              <p class="text-muted mb-0" style="font-size: 12px;">L 265 · 3 productos</p>
              <button class="btn text-primary btn-sm d-flex align-items-center gap-2">
                <i class="fas fa-redo-alt"></i>Repetir
              </button>
            </div>
          </div>
        </div>
      </div> <!-- Pedido 2 -->
   
  </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-secondary"></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-danger"></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>

{% include 'pedidos/modales/m_calificar_estrellas.html' %}

{% endblock %}



{% block scripts %}


<script>
 </script>



{% endblock %}