{% extends "base.html" %}

{% block title %}{{ 'payment'|t }} - {{ event.name }} - NetEvents{% endblock %}

{% block content %}
<style>
.payment-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.payment-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.payment-box h1 {
    margin-bottom: 20px;
    color: #2c3e50;
}
.order-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}
.order-summary h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c3e50;
}
.order-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.order-item:last-child {
    border-bottom: none;
}
.order-total {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px solid #ddd;
    font-size: 1.2em;
    font-weight: bold;
}
.price {
    color: #27ae60;
    font-weight: 500;
}
.payment-form {
    margin-top: 20px;
}
.payment-form .form-group {
    margin-bottom: 15px;
}
.payment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.payment-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.btn-pay {
    width: 100%;
    padding: 15px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}
.btn-pay:hover {
    background: #219a52;
}
.security-note {
    text-align: center;
    margin-top: 15px;
    color: #888;
    font-size: 12px;
}
.back-link {
    display: block;
    margin-bottom: 20px;
    color: #666;
}
</style>

<div class="payment-page">
    <a href="{{ url_for('register_event', code=event.code) }}" class="back-link">&larr; {{ 'back_to_registration'|t }}</a>

    <div class="payment-box">
        <h1>{{ 'complete_payment'|t }}</h1>

        <div class="order-summary">
            <h3>{{ 'order_summary'|t }}</h3>
            <div class="order-item">
                <span>{{ 'event_registration'|t }}</span>
                <span>{{ event.name }}</span>
            </div>
            <div class="order-item">
                <span>{{ 'attendee_type'|t }}:</span>
                <span>{{ pending.type_name }}</span>
            </div>
            <div class="order-item">
                <span>{{ 'attendee'|t }}:</span>
                <span>{{ pending.first_name }} {{ pending.last_name }}</span>
            </div>
            <div class="order-item">
                <span>{{ 'email'|t }}:</span>
                <span>{{ pending.email }}</span>
            </div>
            <div class="order-total">
                <span>{{ 'total'|t }}:</span>
                <span class="price">{{ pending.price|format_currency }} {{ get_currency_symbol() }}</span>
            </div>
        </div>

        <form method="POST" class="payment-form">
            <div class="form-group">
                <label for="card_name">{{ 'name_on_card'|t }}</label>
                <input type="text" id="card_name" name="card_name" required placeholder="{{ 'john_doe'|t }}">
            </div>

            <div class="form-group">
                <label for="card_number">{{ 'card_number'|t }}</label>
                <input type="text" id="card_number" name="card_number" required placeholder="{{ '1234_5678_9012_3456'|t }}" maxlength="19">
            </div>

            <div class="card-row">
                <div class="form-group">
                    <label for="expiry">{{ 'expiry_date'|t }}</label>
                    <input type="text" id="expiry" name="expiry" required placeholder="{{ 'mm/yy'|t }}" maxlength="5">
                </div>
                <div class="form-group">
                    <label for="cvv">{{ 'cvv'|t }}</label>
                    <input type="text" id="cvv" name="cvv" required placeholder="{{ '123'|t }}" maxlength="4">
                </div>
            </div>

            <button type="submit" class="btn-pay">{{ 'pay_now'|t }} - {{ pending.price|format_currency }} {{ get_currency_symbol() }}</button>
        </form>

        <p class="security-note">{{ 'payment_secure'|t }}</p>
    </div>
</div>

<script>
document.getElementById('card_number').addEventListener('input', function(e) {
    var value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    var matches = value.match(/\d{4,16}/g);
    var match = matches && matches[0] || '';
    var parts = [];
    for (var i = 0, len = match.length; i < len; i += 4) {
        parts.push(match.substring(i, i + 4));
    }
    if (parts.length) {
        e.target.value = parts.join(' ');
    } else {
        e.target.value = value;
    }
});

document.getElementById('expiry').addEventListener('input', function(e) {
    var value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    if (value.length >= 2) {
        e.target.value = value.substring(0, 2) + '/' + value.substring(2, 4);
    } else {
        e.target.value = value;
    }
});
</script>
{% endblock %}