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

{% 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>Mis Productos</h1>
                <p class="text-muted mb-0">Productos que has creado: <strong>{{ total_productos }}</strong></p>
            </div>
            <div class="d-flex gap-2">
                <a href="{% url 'pedidos_vendedor' %}" class="btn btn-outline-primary">📦 Pedidos Asignados</a>
                <a href="{% url 'crear_producto' %}" class="btn btn-primary">
                    ➕ Crear Nuevo Producto
                </a>
            </div>
        </div>
        <hr>
    </div>
</div>

{% if productos %}
<div class="table-responsive">
    <table class="table table-striped align-middle">
        <thead>
            <tr>
                <th style="width: 90px;">Imagen</th>
                <th>Producto</th>
                <th>Categoría</th>
                <th class="text-end">Precio (sin IVA)</th>
                <th class="text-end">Precio (con IVA)</th>
                <th class="text-end">Acciones</th>
            </tr>
        </thead>
        <tbody>
            {% for producto in productos %}
            <tr>
                <td>
                    {% if producto.primary_image %}
                    <img src="{{ producto.primary_image.image.url }}" alt="{{ producto.primary_image.alt|default:producto.name }}" class="rounded" style="width: 70px; height: 70px; object-fit: cover;">
                    {% else %}
                    <div class="bg-secondary d-flex align-items-center justify-content-center rounded" style="width: 70px; height: 70px;">
                        <span class="text-white small">Sin</span>
                    </div>
                    {% endif %}
                </td>
                <td>
                    <div class="fw-semibold">{{ producto.name }}</div>
                    <div class="text-muted small">{{ producto.briefdesc|truncatewords:12 }}</div>
                </td>
                <td>{{ producto.category.name }}</td>
                <td class="text-end">{{ producto.price|format_price }}€</td>
                <td class="text-end text-success"><strong>{{ producto.get_price_with_vat|format_price }}€</strong></td>
                <td class="text-end">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{% url 'editar_producto' producto.id %}" class="btn btn-outline-primary btn-sm">Editar</a>
                        <form method="POST" action="{% url 'borrar_producto' producto.id %}" onsubmit="return confirm('¿Seguro que quieres borrar este producto?');">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-outline-danger btn-sm">Borrar</button>
                        </form>
                        <a href="{% url 'producto' producto.id %}" class="btn btn-primary btn-sm">Ver</a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</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 has creado ningún producto todavía</h3>
            <p class="mb-3">Empieza a crear productos para verlos aquí.</p>
            <a href="{% url 'crear_producto' %}" class="btn btn-primary">Crear Mi Primer Producto</a>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}