{% extends team.id+'/base.html' %}

{% block title %}payment tickets{% endblock %}
{% block description %}Complete your payment to confirm your match tickets and secure your seat at the stadium.{% endblock %}

{% block content %}
<style>
.step-badge { width: 30px; height: 30px; background: #ff8800; color: white; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px; }
</style>
<div class="container checkout-container my-5">
    <div class="text-center mb-5">
        <h1 class="fw-bold text-uppercase">Complete your order</h1>
        <p class="text-muted">You are one step away from getting your pass to access the stadium.</p>
    </div>

    <div class="row g-5">
        <div class="col-md-7">
            <h2 class="mb-4"><span class="step-badge">1</span> SHIPPING DETAILS</h2>
            <form id="form-checkout" method="post" action="{{url_for('store.buy_tickets_processing', team_id=team.id)}}">
                <div class="row g-3 mb-4">
                    <div class="col-sm-6">
                        <label class="form-label small fw-bold">First name</label>
                        <input type="text" class="form-control" name="name_ticket" required>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label small fw-bold">Last name</label>
                        <input type="text" class="form-control" name="lastname_ticket" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-bold">City Address</label>
                        <input type="text" class="form-control" placeholder="Mayor Street 4" name="addres_ticket" required>
                    </div>
                </div>

                <h2 class="mb-4"><span class="step-badge">2</span> PAYMENT METHOD</h2>
                <div class="card p-3 border-0 shadow-sm mb-4">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="radio" name="payment" id="visa" checked>
                        <label class="form-check-label d-flex justify-content-between w-100" for="visa">
                            <span>Credit Card (Visa / Mastercard / Amex)</span>
                            <i class="bi bi-credit-card"></i>
                        </label>
                    </div>
                    <div class="row g-3" id="dades-targeta">
                        <div class="col-12">
                            <input type="text" class="form-control" placeholder="Card number (•••• •••• •••• ••••)">
                        </div>
                        <div class="col-6">
                            <input type="text" class="form-control" placeholder="MM/AA">
                        </div>
                        <div class="col-6">
                            <input type="text" class="form-control" placeholder="CVV">
                        </div>
                    </div>
                    <hr>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="payment" id="paypal">
                        <label class="form-check-label d-flex justify-content-between w-100" for="paypal">
                            <span>PayPal</span>
                            <i class="bi bi-paypal text-primary"></i>
                        </label>
                    </div>
                </div>
                <input type="hidden" name="select_area" value="{{data['select_area']}}">
                <input type="hidden" name="num_tickets" value="{{data['num_tickets']}}">
                <input type="hidden" name="match" value="{{data['match']}}">
                <button type="submit" class="btn btn-dark w-100 py-3 fw-bold shadow">
                    CONFIRM AND PAY NOW
                </button>
            </form>
        </div>

        <div class="col-md-5">
            <div class="card border-0 shadow-sm rounded-4 p-4 bg-light-subtle">
                <h2 class="fw-bold mb-3">YOUR ORDER</h2>
                <div class="d-flex justify-content-between mb-2">
                    <span>{{data["num_tickets"]}}x {{data["select_area"] | capitalize }}</span>
                    <span class="fw-bold">{{data["price_area"]}}.00 €</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Shipping</span>
                    <span class="text-success fw-bold">Free</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-0">
                    <span class="h5 fw-bold">TOTAL</span>
                    <span class="h4 fw-bold text-orange" style="color:#ff8800">{{data["price_area"]|int * data["num_tickets"]|int}}.00 €</span>
                </div>
                <p class="text-muted small mt-2">VAT included in all products.</p>

                <div class="mt-4 p-3 bg-light-subtle rounded border border-warning shadow-sm">
                    <small class="d-block mb-1 text-uppercase fw-bold text-warning" style="font-size: 0.7rem;">Club Guarantee</small>
                    <p class="small mb-0 italic">If the service is not delivered as expected, you are eligible for a refund.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}