proyecto-final/tienda/templates/tienda/checkout.html

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

{% block head %}
<script src="https://js.stripe.com/v3/"></script>
<script src="https://www.paypal.com/sdk/js?client-id={{ paypal_client_id }}&currency=EUR" defer></script>
<style>
    #card-element {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 12px;
        background-color: #fff;
    }
    #card-element.StripeElement--focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    }
    #card-element.StripeElement--invalid {
        border-color: #dc3545;
    }
    #card-errors { color: #dc3545; font-size: 0.875rem; margin-top: 4px; }
    .payment-tab-content { display: none; }
    .payment-tab-content.active { display: block; }
    #paypal-button-container { min-height: 50px; }
</style>
{% endblock %}

{% block content %}
<div class="row mt-2">
    <div class="col-md-12">
        {% csrf_token %}

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1>Checkout</h1>
            <a href="{% url 'view_cart' %}" class="btn btn-outline-secondary">← Volver al carrito</a>
        </div>

        {% if cart_items %}
        {% if stock_issues %}
        <div class="alert alert-warning">
            <strong>No hay stock suficiente para algunos productos:</strong>
            <ul class="mb-0 mt-2">
                {% for issue in stock_issues %}
                <li>{{ issue.product_name }} - disponible: {{ issue.available }}, en carrito: {{ issue.requested }}</li>
                {% endfor %}
            </ul>
            <div class="mt-2">Vuelve al carrito y ajusta las cantidades antes de pagar.</div>
        </div>
        {% endif %}

        <div class="alert alert-info">
            Al pulsar en pagar se reservará tu stock durante <strong>{{ reservation_minutes }} minutos</strong>.
            Si el pago no se completa en ese tiempo, la reserva se cancelará automáticamente.
        </div>

        <!-- Step 1: Dirección de envío -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title mb-3">1) Selecciona la dirección de envío</h5>
                {% if addresses %}
                <div class="mb-3">
                    <label for="shipping-address" class="form-label">Dirección</label>
                    <select id="shipping-address" class="form-select" required>
                        <option value="">Selecciona una dirección...</option>
                        {% for address in addresses %}
                        <option value="{{ address.id }}" {% if address.is_default %}selected{% endif %}>
                            {{ address.full_name }} - {{ address.address_line_1 }}, {{ address.postal_code }} {{ address.city }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% else %}
                <div class="alert alert-warning mb-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <span>No tienes direcciones de envío creadas.</span>
                    <a href="{% url 'crear_direccion' %}" class="btn btn-primary btn-sm">Crear dirección</a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Resumen del pedido -->
        <div class="table-responsive mb-4">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>Producto</th>
                        <th class="text-end">Precio (sin IVA)</th>
                        <th class="text-end">Cantidad</th>
                        <th class="text-end">Stock actual</th>
                        <th class="text-end">Subtotal (con IVA)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in cart_items %}
                    <tr>
                        <td>{{ item.product.name }}</td>
                        <td class="text-end">{{ item.product.price|format_price }}€</td>
                        <td class="text-end">{{ item.quantity }}</td>
                        <td class="text-end">{{ item.product.stock }}</td>
                        <td class="text-end">{{ item.get_subtotal_with_vat|format_price }}€</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="4" class="text-end">Subtotal:</th>
                        <th class="text-end">{{ cart.get_total|format_price }}€</th>
                    </tr>
                    <tr>
                        <th colspan="4" class="text-end">IVA (21%):</th>
                        <th class="text-end text-success">+{{ cart.get_vat_amount|format_price }}€</th>
                    </tr>
                    <tr style="background-color: #f8f9fa;">
                        <th colspan="4" class="text-end" style="font-size: 1.1rem;">Total:</th>
                        <th class="text-end" style="font-size: 1.1rem;">{{ cart.get_total_with_vat|format_price }}€</th>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Step 2: Método de pago -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title mb-3">2) Selecciona tu método de pago</h5>

                <!-- Tabs -->
                <ul class="nav nav-tabs mb-3" id="paymentTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="tab-card" data-tab="pane-card" type="button"
                                role="tab" aria-selected="true" aria-controls="pane-card" tabindex="0">
                            💳 Tarjeta
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-paypal" data-tab="pane-paypal" type="button"
                                role="tab" aria-selected="false" aria-controls="pane-paypal" tabindex="-1">
                            🅿️ PayPal
                        </button>
                    </li>
                </ul>

                <!-- Tarjeta tab -->
                <div id="pane-card" class="payment-tab-content active"
                     role="tabpanel" aria-labelledby="tab-card" tabindex="0">
                    {% if saved_cards %}
                    <fieldset class="mb-3">
                        <legend class="fw-semibold fs-6 mb-2">Selección de tarjeta</legend>
                        {% for card in saved_cards %}
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="saved_card_choice" id="card-{{ card.id }}" value="{{ card.id }}" data-pm-id="{{ card.stripe_payment_method_id }}" {% if card.is_default %}checked{% endif %}>
                            <label class="form-check-label" for="card-{{ card.id }}">
                                {{ card.label }}
                                {% if card.is_default %}<span class="badge bg-secondary ms-1">Predeterminada</span>{% endif %}
                            </label>
                        </div>
                        {% endfor %}
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="radio" name="saved_card_choice" id="card-new" value="new">
                            <label class="form-check-label" for="card-new">Usar nueva tarjeta</label>
                        </div>
                    </fieldset>
                    {% endif %}

                    <div id="new-card-section" {% if saved_cards %}style="display:none;"{% endif %}>
                        <div class="mb-3">
                            <label class="form-label">Número de tarjeta</label>
                            <div id="card-element"></div>
                            <div id="card-errors" role="alert"></div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="save-card-checkbox">
                            <label class="form-check-label" for="save-card-checkbox">
                                Guardar esta tarjeta para futuras compras
                            </label>
                        </div>
                    </div>

                    <button
                        id="pay-card-btn"
                        class="btn btn-primary"
                        {% if not addresses or stock_issues %}disabled{% endif %}>
                        💳 Pagar con tarjeta
                    </button>
                    <div id="card-spinner" class="spinner-border spinner-border-sm ms-2 text-primary d-none" role="status"></div>
                </div>

                <!-- PayPal tab -->
                <div id="pane-paypal" class="payment-tab-content"
                     role="tabpanel" aria-labelledby="tab-paypal" tabindex="0">
                    {% if saved_paypal %}
                    <div class="alert alert-light border mb-3">
                        <small class="text-muted">Cuenta PayPal guardada:</small>
                        <strong class="d-block">{{ saved_paypal.paypal_email }}</strong>
                    </div>
                    {% endif %}
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="save-paypal-checkbox">
                        <label class="form-check-label" for="save-paypal-checkbox">
                            Guardar esta cuenta de PayPal para futuras compras
                        </label>
                    </div>
                    <div id="paypal-errors" class="alert alert-danger d-none mt-2" role="alert"></div>
                    <div id="paypal-button-container"></div>
                    {% if not addresses or stock_issues %}
                    <div class="alert alert-warning mt-2">Selecciona una dirección de envío válida para activar el pago.</div>
                    {% endif %}
                </div>

            </div>
        </div>

        <!-- Resultado inline -->
        <div id="payment-result" class="d-none"></div>

        {% else %}
        <div class="alert alert-info">Tu carrito está vacío.</div>
        {% endif %}
    </div>
</div>

<script>
const CSRF_TOKEN = document.querySelector('[name=csrfmiddlewaretoken]').value;
const STRIPE_KEY = '{{ stripe_publishable_key }}';
const HAS_STOCK_ISSUES = {{ stock_issues|yesno:"true,false" }};
const HAS_ADDRESS = {{ addresses|yesno:"true,false" }};

// ---- Tab switching ----
const paymentTabs = Array.from(document.querySelectorAll('#paymentTabs .nav-link[role="tab"]'));

function activateTab(tab) {
    paymentTabs.forEach(b => {
        const isSelected = b === tab;
        b.classList.toggle('active', isSelected);
        b.setAttribute('aria-selected', isSelected ? 'true' : 'false');
        b.setAttribute('tabindex', isSelected ? '0' : '-1');
    });
    document.querySelectorAll('.payment-tab-content').forEach(p => p.classList.remove('active'));
    document.getElementById(tab.dataset.tab).classList.add('active');
}

paymentTabs.forEach(btn => {
    btn.addEventListener('click', () => activateTab(btn));
    btn.addEventListener('keydown', e => {
        const idx = paymentTabs.indexOf(e.currentTarget);
        if (e.key === 'ArrowRight') {
            e.preventDefault();
            const next = paymentTabs[(idx + 1) % paymentTabs.length];
            activateTab(next);
            next.focus();
        } else if (e.key === 'ArrowLeft') {
            e.preventDefault();
            const prev = paymentTabs[(idx - 1 + paymentTabs.length) % paymentTabs.length];
            activateTab(prev);
            prev.focus();
        } else if (e.key === 'Home') {
            e.preventDefault();
            activateTab(paymentTabs[0]);
            paymentTabs[0].focus();
        } else if (e.key === 'End') {
            e.preventDefault();
            activateTab(paymentTabs[paymentTabs.length - 1]);
            paymentTabs[paymentTabs.length - 1].focus();
        }
    });
});

// ---- Saved card / new card toggle ----
document.querySelectorAll('input[name="saved_card_choice"]').forEach(radio => {
    radio.addEventListener('change', () => {
        const newSection = document.getElementById('new-card-section');
        if (newSection) {
            newSection.style.display = radio.value === 'new' ? 'block' : 'none';
        }
    });
});

// ---- Stripe ----
const stripe = Stripe(STRIPE_KEY);
const elements = stripe.elements();
const cardElement = elements.create('card', { hidePostalCode: true });
cardElement.mount('#card-element');
cardElement.on('change', e => {
    document.getElementById('card-errors').textContent = e.error ? e.error.message : '';
});

document.getElementById('pay-card-btn').addEventListener('click', async () => {
    if (HAS_STOCK_ISSUES || !HAS_ADDRESS) return;

    const addressId = document.getElementById('shipping-address').value;
    if (!addressId) {
        const cardErrors = document.getElementById('card-errors');
        if (cardErrors) cardErrors.textContent = 'Selecciona una dirección de envío para continuar.';
        return;
    }

    const cardErrorsEl = document.getElementById('card-errors');
    if (cardErrorsEl) cardErrorsEl.textContent = '';
    const btn = document.getElementById('pay-card-btn');
    const spinner = document.getElementById('card-spinner');
    btn.disabled = true;
    spinner.classList.remove('d-none');

    // Determine if using saved card or new card
    const savedCardRadio = document.querySelector('input[name="saved_card_choice"]:checked');
    const usingSavedCard = savedCardRadio && savedCardRadio.value !== 'new';
    const savedPmId = usingSavedCard ? savedCardRadio.dataset.pmId : null;
    const saveCard = !usingSavedCard && document.getElementById('save-card-checkbox')?.checked;

    try {
        // 1. Create PaymentIntent
        const piResp = await fetch('{% url "crear_payment_intent" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
            body: JSON.stringify({
                shipping_address_id: addressId,
                saved_payment_method_id: usingSavedCard ? savedCardRadio.value : null,
                save_card: saveCard,
            }),
        });
        const piData = await piResp.json();
        if (!piResp.ok) { throw new Error(piData.error || 'Error al crear el pago'); }

        const clientSecret = piData.client_secret;

        // 2. Confirm payment
        let confirmResult;
        if (usingSavedCard) {
            confirmResult = await stripe.confirmCardPayment(clientSecret, {
                payment_method: savedPmId,
            });
        } else {
            confirmResult = await stripe.confirmCardPayment(clientSecret, {
                payment_method: { card: cardElement },
            });
        }

        if (confirmResult.error) {
            throw new Error(confirmResult.error.message);
        }

        const pi = confirmResult.paymentIntent;
        if (pi.status !== 'succeeded') {
            throw new Error('El pago no fue completado.');
        }

        // 3. Confirm on server
        const confirmPayload = { payment_intent_id: pi.id };
        if (!usingSavedCard && saveCard) {
            confirmPayload.payment_method_id = pi.payment_method;
        }
        const confirmResp = await fetch('{% url "confirmar_pago_tarjeta" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
            body: JSON.stringify(confirmPayload),
        });
        const confirmData = await confirmResp.json();
        if (!confirmResp.ok) { throw new Error(confirmData.error || 'Error al confirmar el pedido'); }

        // 4. Show success
        showSuccess(confirmData.transaction_code);

    } catch (err) {
        document.getElementById('card-errors').textContent = err.message;
        btn.disabled = false;
        spinner.classList.add('d-none');
    }
});

// ---- PayPal ----
{% if not stock_issues and addresses %}
paypal.Buttons({
    createOrder: async () => {
        const addressId = document.getElementById('shipping-address').value;
        if (!addressId) {
            const paypalErrors = document.getElementById('paypal-errors');
            if (paypalErrors) {
                paypalErrors.textContent = 'Selecciona una dirección de envío para continuar.';
                paypalErrors.classList.remove('d-none');
            }
            return Promise.reject(new Error('Sin dirección'));
        }
        const paypalErrorsEl = document.getElementById('paypal-errors');
        if (paypalErrorsEl) paypalErrorsEl.classList.add('d-none');
        const resp = await fetch('{% url "crear_orden_paypal" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
            body: JSON.stringify({ shipping_address_id: addressId }),
        });
        const data = await resp.json();
        if (!resp.ok) { throw new Error(data.error || 'Error al crear la orden'); }
        return data.id;
    },
    onApprove: async (data) => {
        const savePaypal = document.getElementById('save-paypal-checkbox')?.checked || false;
        const resp = await fetch('{% url "capturar_orden_paypal" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
            body: JSON.stringify({ orderID: data.orderID, save_paypal: savePaypal }),
        });
        const result = await resp.json();
        if (!resp.ok) { throw new Error(result.error || 'Error al capturar el pago'); }
        showSuccess(result.transaction_code);
    },
    onError: (err) => {
        const paypalErrors = document.getElementById('paypal-errors');
        if (paypalErrors) {
            paypalErrors.textContent = 'Error en el pago con PayPal: ' + err;
            paypalErrors.classList.remove('d-none');
        }
    },
}).render('#paypal-button-container');
{% endif %}

// ---- Success helper ----
function showSuccess(transactionCode) {
    const resultDiv = document.getElementById('payment-result');
    resultDiv.classList.remove('d-none');
    resultDiv.innerHTML = `
        <div class="alert alert-success p-4 text-center">
            <h4>¡Pago completado!</h4>
            <p>Tu pedido ha sido procesado correctamente.</p>
            ${transactionCode ? `<p><strong>Código de transacción:</strong> ${transactionCode}</p>` : ''}
            <a href="{% url 'index' %}" class="btn btn-primary mt-2">Volver a la tienda</a>
            <a href="{% url 'mis_compras' %}" class="btn btn-outline-primary mt-2 ms-2">Ver mis compras</a>
        </div>
    `;
    window.scrollTo({ top: resultDiv.offsetTop - 20, behavior: 'smooth' });
}
</script>
{% endblock %}