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

{% block content %}
<div class="row mt-4">
    <div class="col-12">
        <h2>Métodos de Pago</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'portal_usuario' %}">Portal de Usuario</a></li>
                <li class="breadcrumb-item active">Métodos de Pago</li>
            </ol>
        </nav>
    </div>
</div>

<!-- Menú de navegación del portal -->
<div class="row mt-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <a href="{% url 'portal_usuario' %}" class="btn btn-outline-primary">Inicio</a>
            <a href="{% url 'mis_compras' %}" class="btn btn-outline-primary">Compras</a>
            <a href="{% url 'mis_recibos' %}" class="btn btn-outline-primary">Recibos</a>
            <a href="{% url 'editar_perfil' %}" class="btn btn-outline-primary">Mi Perfil</a>
            <a href="{% url 'direcciones_usuario' %}" class="btn btn-outline-primary">Direcciones</a>
            <a href="{% url 'metodos_pago' %}" class="btn btn-primary">Métodos de Pago</a>
            <a href="{% url 'mensajes_comprador' %}" class="btn btn-outline-primary">Mensajes</a>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- Tarjetas guardadas -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">💳 Tarjetas</h5>
                <a href="{% url 'agregar_tarjeta' %}" class="btn btn-sm btn-success">➕ Añadir tarjeta</a>
            </div>
            <div class="card-body">
                {% with has_card=False %}
                {% for metodo in metodos %}{% if metodo.method_type == 'card' %}
                <div class="d-flex justify-content-between align-items-center border rounded p-3 mb-2">
                    <div>
                        <span class="fw-semibold">{{ metodo.label }}</span>
                        {% if metodo.is_default %}<span class="badge bg-secondary ms-2">Predeterminada</span>{% endif %}
                    </div>
                    <form method="POST" action="{% url 'eliminar_metodo_pago' metodo.id %}" onsubmit="return confirm('¿Eliminar esta tarjeta?');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-outline-danger">Eliminar</button>
                    </form>
                </div>
                {% endif %}{% endfor %}
                {% endwith %}
                {% if not cards_exist %}
                <p class="text-muted mb-0">No tienes tarjetas guardadas.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Cuentas PayPal guardadas -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">🅿️ PayPal</h5>
                <a href="{% url 'agregar_paypal' %}" class="btn btn-sm btn-warning">➕ Añadir PayPal</a>
            </div>
            <div class="card-body">
                {% for metodo in metodos %}{% if metodo.method_type == 'paypal' %}
                <div class="d-flex justify-content-between align-items-center border rounded p-3 mb-2">
                    <div>
                        <span class="fw-semibold">{{ metodo.paypal_email }}</span>
                        {% if metodo.is_default %}<span class="badge bg-secondary ms-2">Predeterminada</span>{% endif %}
                    </div>
                    <form method="POST" action="{% url 'eliminar_metodo_pago' metodo.id %}" onsubmit="return confirm('¿Eliminar esta cuenta de PayPal?');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-outline-danger">Eliminar</button>
                    </form>
                </div>
                {% endif %}{% endfor %}
                {% if not paypal_exist %}
                <p class="text-muted mb-0">No tienes cuentas de PayPal guardadas.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}