{% extends "shop/base.html" %}
{% load i18n %}

{% block title %}{% trans "Checkout" %} - Fursuit Shop{% endblock %}

{% block extra_css %}
<style>
.checkout-steps {
    display: flex;
    margin-bottom: 2rem;
}

.step {
    flex: 1;
    text-align: center;
    padding: 1rem;
    position: relative;
}

.step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: #dee2e6;
    transform: translateY(-50%);
}

.step:last-child::after {
    display: none;
}

.step.active {
    color: var(--bs-primary);
    font-weight: bold;
}

.step.completed {
    color: var(--bs-success);
}

.step.completed .step-number {
    background: var(--bs-success);
}

.step-number {
    width: 2rem;
    height: 2rem;
    background: var(--bs-gray);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}

.active .step-number {
    background: var(--bs-primary);
}

.payment-method {
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method:hover {
    transform: translateY(-2px);
}

.payment-method.selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.payment-method.selected .payment-check {
    opacity: 1;
}

.payment-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- Checkout-Schritte -->
    <div class="checkout-steps">
        <div class="step {% if step == 'address' %}active{% elif step == 'payment' or step == 'confirm' %}completed{% endif %}">
            <div class="step-number">1</div>
            <div class="step-title">{% trans "Shipping" %}</div>
        </div>
        <div class="step {% if step == 'payment' %}active{% elif step == 'confirm' %}completed{% endif %}">
            <div class="step-number">2</div>
            <div class="step-title">{% trans "Payment" %}</div>
        </div>
        <div class="step {% if step == 'confirm' %}active{% endif %}">
            <div class="step-number">3</div>
            <div class="step-title">{% trans "Confirm" %}</div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Lieferadresse -->
            {% if step == 'address' %}
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="card-title h4 mb-4">{% trans "Shipping Address" %}</h3>
                        <form method="post" action="{% url 'shop:checkout' %}">
                            {% csrf_token %}
                            <input type="hidden" name="step" value="address">
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="firstName" class="form-label">{% trans "First Name" %}</label>
                                    <input type="text" class="form-control" id="firstName" name="first_name" 
                                           value="{{ form.first_name.value|default:'' }}" required>
                                    {% if form.first_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.first_name.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="lastName" class="form-label">{% trans "Last Name" %}</label>
                                    <input type="text" class="form-control" id="lastName" name="last_name"
                                           value="{{ form.last_name.value|default:'' }}" required>
                                    {% if form.last_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.last_name.errors }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label for="email" class="form-label">{% trans "Email" %}</label>
                                    <input type="email" class="form-control" id="email" name="email"
                                           value="{{ form.email.value|default:'' }}" required>
                                    {% if form.email.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.email.errors }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label for="address" class="form-label">{% trans "Street Address" %}</label>
                                    <input type="text" class="form-control" id="address" name="address"
                                           value="{{ form.address.value|default:'' }}" required>
                                    {% if form.address.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.address.errors }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label for="city" class="form-label">{% trans "City" %}</label>
                                    <input type="text" class="form-control" id="city" name="city"
                                           value="{{ form.city.value|default:'' }}" required>
                                    {% if form.city.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.city.errors }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-3">
                                    <label for="zip" class="form-label">{% trans "ZIP Code" %}</label>
                                    <input type="text" class="form-control" id="zip" name="zip"
                                           value="{{ form.zip.value|default:'' }}" required>
                                    {% if form.zip.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.zip.errors }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-3">
                                    <label for="country" class="form-label">{% trans "Country" %}</label>
                                    <select class="form-select" id="country" name="country" required>
                                        <option value="">{% trans "Choose..." %}</option>
                                        <option value="DE" {% if form.country.value == 'DE' %}selected{% endif %}>Deutschland</option>
                                        <option value="AT" {% if form.country.value == 'AT' %}selected{% endif %}>Österreich</option>
                                        <option value="CH" {% if form.country.value == 'CH' %}selected{% endif %}>Schweiz</option>
                                    </select>
                                    {% if form.country.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.country.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-grid">
                                <button class="btn btn-primary btn-lg" type="submit">
                                    {% trans "Continue to Payment" %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            <!-- Zahlungsmethode -->
            {% elif step == 'payment' %}
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="card-title h4 mb-4">{% trans "Payment Method" %}</h3>
                        <form method="post" action="{% url 'shop:checkout' %}" id="paymentForm">
                            {% csrf_token %}
                            <input type="hidden" name="step" value="payment">
                            <input type="hidden" name="payment_method" id="selectedPayment" value="{{ form.payment_method.value|default:'' }}">

                            <div class="row g-4">
                                <!-- PayPal -->
                                <div class="col-md-4">
                                    <div class="card h-100 payment-method {% if form.payment_method.value == 'paypal' %}selected{% endif %}"
                                         onclick="selectPayment('paypal')">
                                        <div class="payment-check text-primary">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </div>
                                        <div class="card-body text-center">
                                            <i class="bi bi-paypal display-4"></i>
                                            <h5 class="mt-3">PayPal</h5>
                                            <p class="text-muted small mb-0">
                                                {% trans "Fast and secure payment with PayPal" %}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Kreditkarte -->
                                <div class="col-md-4">
                                    <div class="card h-100 payment-method {% if form.payment_method.value == 'credit_card' %}selected{% endif %}"
                                         onclick="selectPayment('credit_card')">
                                        <div class="payment-check text-primary">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </div>
                                        <div class="card-body text-center">
                                            <i class="bi bi-credit-card display-4"></i>
                                            <h5 class="mt-3">{% trans "Credit Card" %}</h5>
                                            <p class="text-muted small mb-0">
                                                {% trans "Pay with Visa, Mastercard, or American Express" %}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Überweisung -->
                                <div class="col-md-4">
                                    <div class="card h-100 payment-method {% if form.payment_method.value == 'bank_transfer' %}selected{% endif %}"
                                         onclick="selectPayment('bank_transfer')">
                                        <div class="payment-check text-primary">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </div>
                                        <div class="card-body text-center">
                                            <i class="bi bi-bank display-4"></i>
                                            <h5 class="mt-3">{% trans "Bank Transfer" %}</h5>
                                            <p class="text-muted small mb-0">
                                                {% trans "Pay via bank transfer" %}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if form.payment_method.errors %}
                                <div class="alert alert-danger mt-3">
                                    {{ form.payment_method.errors }}
                                </div>
                            {% endif %}

                            <hr class="my-4">

                            <div class="d-flex justify-content-between">
                                <a href="{% url 'shop:checkout' %}?step=address" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-left"></i> 
                                    {% trans "Back to Shipping" %}
                                </a>
                                <button class="btn btn-primary" type="submit">
                                    {% trans "Continue to Confirmation" %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            <!-- Bestellbestätigung -->
            {% elif step == 'confirm' %}
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="card-title h4 mb-4">{% trans "Order Confirmation" %}</h3>
                        
                        <!-- Lieferadresse -->
                        <div class="mb-4">
                            <h5>{% trans "Shipping Address" %}</h5>
                            <p class="mb-0">{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</p>
                            <p class="mb-0">{{ order.shipping_address.address }}</p>
                            <p class="mb-0">{{ order.shipping_address.zip }} {{ order.shipping_address.city }}</p>
                            <p>{{ order.shipping_address.get_country_display }}</p>
                        </div>

                        <!-- Zahlungsmethode -->
                        <div class="mb-4">
                            <h5>{% trans "Payment Method" %}</h5>
                            <p>
                                {% if order.payment_method == 'paypal' %}
                                    <i class="bi bi-paypal"></i> PayPal
                                {% elif order.payment_method == 'credit_card' %}
                                    <i class="bi bi-credit-card"></i> {% trans "Credit Card" %}
                                {% else %}
                                    <i class="bi bi-bank"></i> {% trans "Bank Transfer" %}
                                {% endif %}
                            </p>
                        </div>

                        <!-- Bestellte Artikel -->
                        <div class="mb-4">
                            <h5>{% trans "Order Items" %}</h5>
                            {% for item in cart.items.all %}
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div>
                                        <span class="fw-bold">{{ item.quantity }}x</span>
                                        {{ item.product.name }}
                                        {% if item.size %}
                                            <small class="text-muted">({{ item.size }})</small>
                                        {% endif %}
                                    </div>
                                    <span>{{ item.get_subtotal }} €</span>
                                </div>
                            {% endfor %}
                        </div>

                        <hr>

                        <!-- Gesamtbetrag -->
                        <div class="mb-4">
                            <div class="d-flex justify-content-between mb-2">
                                <span>{% trans "Subtotal" %}</span>
                                <span>{{ cart.get_total }} €</span>
                            </div>
                            {% if cart.get_total < 200 %}
                                <div class="d-flex justify-content-between">
                                    <span>{% trans "Shipping" %}</span>
                                    <span>5.99 €</span>
                                </div>
                            {% else %}
                                <div class="d-flex justify-content-between text-success">
                                    <span>{% trans "Shipping" %}</span>
                                    <span>{% trans "FREE" %}</span>
                                </div>
                            {% endif %}
                            <hr>
                            <div class="d-flex justify-content-between fw-bold">
                                <span>{% trans "Total" %}</span>
                                <span>
                                    {% if cart.get_total < 200 %}
                                        {{ cart.get_total|add:"5.99" }} €
                                    {% else %}
                                        {{ cart.get_total }} €
                                    {% endif %}
                                </span>
                            </div>
                        </div>

                        <form method="post" action="{% url 'shop:checkout' %}">
                            {% csrf_token %}
                            <input type="hidden" name="step" value="confirm">
                            
                            <div class="d-flex justify-content-between">
                                <a href="{% url 'shop:checkout' %}?step=payment" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-left"></i> 
                                    {% trans "Back to Payment" %}
                                </a>
                                <button type="submit" class="btn btn-success">
                                    <i class="bi bi-check-circle"></i> 
                                    {% trans "Place Order" %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Bestellübersicht -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{% trans "Order Summary" %}</h5>
                    
                    {% for item in cart.items.all %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <span class="fw-bold">{{ item.quantity }}x</span>
                                {{ item.product.name }}
                            </div>
                            <span>{{ item.get_subtotal }} €</span>
                        </div>
                    {% endfor %}

                    <hr>

                    <div class="d-flex justify-content-between mb-2">
                        <span>{% trans "Subtotal" %}</span>
                        <span>{{ cart.get_total }} €</span>
                    </div>
                    {% if cart.get_total < 200 %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>{% trans "Shipping" %}</span>
                            <span>5.99 €</span>
                        </div>
                    {% else %}
                        <div class="d-flex justify-content-between mb-2 text-success">
                            <span>{% trans "Shipping" %}</span>
                            <span>{% trans "FREE" %}</span>
                        </div>
                    {% endif %}
                    <hr>
                    <div class="d-flex justify-content-between fw-bold">
                        <span>{% trans "Total" %}</span>
                        <span>
                            {% if cart.get_total < 200 %}
                                {{ cart.get_total|add:"5.99" }} €
                            {% else %}
                                {{ cart.get_total }} €
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if step == 'payment' %}
<script>
function selectPayment(method) {
    // Alle payment-method Cards zurücksetzen
    document.querySelectorAll('.payment-method').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Ausgewählte Card markieren
    const selectedCard = document.querySelector(`.payment-method[onclick="selectPayment('${method}')"]`);
    if (selectedCard) {
        selectedCard.classList.add('selected');
    }
    
    // Hidden Input aktualisieren
    document.getElementById('selectedPayment').value = method;
}
</script>
{% endif %}
{% endblock %}