{% extends "tienda/base.html" %}
{% load static %}

{% block content %}
<div class="row mt-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h1>Pedidos Asignados</h1>
                <p class="text-muted mb-0">Pedidos pendientes para enviar: <strong>{{ total_pedidos }}</strong></p>
            </div>
            <a href="{% url 'mis_productos' %}" class="btn btn-outline-secondary">↩️ Volver a Mis Productos</a>
        </div>
        <hr>
    </div>
</div>

{% if pedidos %}
<div class="row">
    {% for item in pedidos %}
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <div>
                    <strong>Pedido #{{ item.order.id }}</strong> - {{ item.product_name }}
                </div>
                <span class="badge 
                    {% if item.status == 'pending' %}bg-warning
                    {% elif item.status == 'processing' %}bg-info
                    {% elif item.status == 'shipped' %}bg-success
                    {% endif %}">
                    {{ item.get_status_display }}
                </span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Información del Pedido</h6>
                        <ul class="list-unstyled">
                            <li><strong>Comprador:</strong> {{ item.order.buyer.username|default:"Invitado" }}</li>
                            <li><strong>Email:</strong> {{ item.order.buyer.email|default:"N/A" }}</li>
                            <li><strong>Cantidad:</strong> {{ item.quantity }}</li>
                            <li><strong>Precio total:</strong> {{ item.total_price }}€</li>
                            <li><strong>Fecha:</strong> {{ item.created_at|date:"d/m/Y H:i" }}</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Cambiar Estado</h6>
                        <form method="POST" action="{% url 'cambiar_estado_pedido' item.id %}" class="mb-3">
                            {% csrf_token %}
                            <div class="input-group">
                                <select name="estado" class="form-select" required>
                                    <option value="">Seleccionar estado...</option>
                                    <option value="pending" {% if item.status == 'pending' %}selected{% endif %}>Pendiente</option>
                                    <option value="processing" {% if item.status == 'processing' %}selected{% endif %}>En preparación</option>
                                    <option value="shipped" {% if item.status == 'shipped' %}selected{% endif %}>Enviado</option>
                                </select>
                                <button type="submit" class="btn btn-primary">Actualizar</button>
                            </div>
                        </form>

                        <h6>Enviar Mensaje al Comprador</h6>
                        <form method="POST" action="{% url 'enviar_mensaje_pedido' item.id %}">
                            {% csrf_token %}
                            <div class="mb-2">
                                <textarea name="mensaje" class="form-control" rows="3" placeholder="Escribe tu mensaje aquí..." required></textarea>
                            </div>
                            <button type="submit" class="btn btn-success btn-sm">📧 Enviar Mensaje</button>
                        </form>
                    </div>
                </div>

                {% if item.messages.all %}
                <hr>
                <h6>Historial de Mensajes</h6>
                <div class="messages-container" style="max-height: 200px; overflow-y: auto;">
                    {% for msg in item.messages.all %}
                    <div class="alert alert-light py-2 mb-2">
                        <small class="text-muted">{{ msg.created_at|date:"d/m/Y H:i" }} - <strong>{{ msg.sender.username }}</strong></small>
                        <p class="mb-0">{{ msg.message }}</p>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="row mt-5">
    <div class="col-12 text-center">
        <div class="alert alert-info d-inline-block p-5">
            <h3>No tienes pedidos asignados</h3>
            <p class="mb-3">Cuando alguien compre tus productos, aparecerán aquí.</p>
            <a href="{% url 'mis_productos' %}" class="btn btn-primary">Ir a Mis Productos</a>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}