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


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

{% block body %}

<style>

    </style>

<div class="w-100 p-0 " style="margin: 0;">
    <div class=" " style="border: none; margin: 0;">
      <!-- Estado del pedido -->
  
  
      <!-- Detalles del pedido -->
      <div class="card p-3 w-100" style="border: 1px solid #dee2e6; border-radius: 8px;">
        <div class="d-flex justify-content-center align-items-center text-center mb-3">
            <!-- Ícono del estado -->
            <div class="me-2 d-flex align-items-center justify-content-center">
              <i class="fas fa-check-circle text-success" style="font-size: 24px;"></i>
            </div>
            
            <!-- Información del estado -->
            <div>
              <h5 class="fw-bold mb-0">Entregado</h5>
              <p class="text-muted mb-0" style="font-size: 14px;">sáb 30 de nov, 05:47 pm</p>
            </div>
          </div>
          
      
          <!-- Botones de acción -->
          <div class="d-flex gap-2 mb-3">
            <button class="btn btn-danger btn-sm d-flex align-items-center justify-content-center gap-2 w-50" style="white-space: nowrap;">
              <i class="fas fa-redo-alt"></i> Repetir pedido
            </button>
            <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center gap-2 w-50" style="white-space: nowrap;">
              <i class="fas fa-star"></i> Opinar
            </button>
          </div>
          
        <h6 class="fw-bold">Tu pedido</h6>
        <hr class="my-2">
  
        <!-- Producto 1 -->
        <div class="d-flex align-items-center justify-content-between mb-3">
          <div class="d-flex align-items-center">
            <img <img src="{% static 'app/assets/images/chilaquiles.png' %}" alt="Turbo Chilaquiles" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;" class="me-3">
            <div>
              <p class="mb-0 fw-bold">Turbo Chilaquiles</p>
            </div>
          </div>
          <div class="text-end">
            <p class="mb-0">1x</p>
            <p class="mb-0 fw-bold">L 104</p>
          </div>
        </div>
  
        <!-- Producto 2 -->
        <div class="d-flex align-items-center justify-content-between mb-3">
          <div class="d-flex align-items-center">
            <img src="{% static 'app/assets/images/campenito.png' %}"  alt="Campeñito" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;" class="me-3">
            <div>
              <p class="mb-0 fw-bold">Campeñito</p>
            </div>
          </div>
          <div class="text-end">
            <p class="mb-0">1x</p>
            <p class="mb-0 fw-bold">L 112</p>
          </div>
        </div>
  
        <!-- Producto 3 -->
        <div class="d-flex align-items-center justify-content-between mb-3">
          <div class="d-flex align-items-center">
            <img src="{% static 'app/assets/images/pepsi.png' %}" alt="Refresco Pepsi 1.25 L" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;" class="me-3">
            <div>
              <p class="mb-0 fw-bold">Refresco Pepsi 1.25 L</p>
            </div>
          </div>
          <div class="text-end">
            <p class="mb-0">1x</p>
            <p class="mb-0 fw-bold">L 45</p>
          </div>
        </div>
  
        <hr class="my-2">
        
        <div class="d-flex justify-content-between align-items-center p-2">
            <!-- Información de entrega -->
            <div class="d-flex align-items-center">
              <!-- Ícono del repartidor -->
              <div class="me-2 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px; background-color: #f8f9fa; border-radius: 50%;">
                <i class="fas fa-user text-secondary" style="font-size: 16px;"></i>
              </div>
              <!-- Texto -->
              <div>
                <p class="mb-0 text-muted" style="font-size: 12px;">Chat</p>
              </div>
            </div>
            <!-- Botón de chat -->
            <div>
                <button
                class="btn btn-outline-secondary d-flex align-items-center justify-content-center"
                style="width: 36px; height: 36px; border-radius: 50%;"
                data-bs-toggle="modal"
                data-bs-target="#chatModal">
                <i class="fas fa-comment-alt" style="font-size: 16px;"></i>
              </button>
            </div>
          </div>
      </div>
   
      
    </div>
  </div>
  
<!-- Modal -->
<div class="modal fade" id="chatModal" tabindex="-1" aria-labelledby="chatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="modal-title" id="chatModalLabel">Chat</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <!-- Modal Body -->
        <div class="modal-body pb-5">
          <div class="d-flex flex-column align-items-start">
            <!-- Aquí puedes agregar mensajes o contenido que crezca dinámicamente -->
            <p class="text-muted">Aquí irán los mensajes...</p>
          </div>
        </div>
  
        <!-- Footer fijo -->
        <div class="d-flex gap-2 mb-3 ps-2">
            <!-- Botón 1 -->
            <button class="btn btn-outline-danger rounded-pill px-3" style="font-size: 12px; white-space: nowrap;">
              ¿Vienes en camino?
            </button>
            <!-- Botón 2 -->
            <button class="btn btn-outline-danger rounded-pill px-3" style="font-size: 12px; white-space: nowrap;">
              ¿Hay mucha demora?
            </button>
          </div>
          
          
  
          <!-- Campo de texto -->
          <div class="input-group">
            <input type="text" class="form-control rounded-start" placeholder="Escribí tu respuesta...">
            <button class="btn btn-danger rounded-end">
              <i class="fas fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
  

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

{% endblock %}



{% block scripts %}


<script>
 </script>



{% endblock %}