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

{% block title %}Your Cart{% endblock %}
{% block description %}Welcome to {{team.name}} digital home in Hattrick. Tickets, membership cards, and all the latest news on our players in one place.{% endblock %}

{% block content %}
<div class="container my-5">
    <h1 class="fw-bold text-uppercase mb-4"><i class="bi bi-cart3 me-2"></i> Your Cart</h1>
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 p-4">
                <div class="table-responsive">
                    {% if not item %}
                    <p class="fs-4 mb-0 fw-bold text-center">Your bag is empty.</p>
                    {% else %}
                    <table class="table align-middle">
                        <thead>
                            <tr class="text-muted small text-uppercase">
                                <th>Product</th>
                                <th>Quantity</th>
                                <th class="text-end">Price</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="list_products">
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{url_for('static', filename='img/store/'+item["id"]+'.png')}}" class="product-img me-3" alt="{{item["name"]}}">
                                        <div>
                                            <p class="mb-0 fw-bold">{{item["name"]}}</p>
                                            {#<small class="text-muted">Talla: L</small>#}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="input-group input-group-sm" style="width: 100px;">
                                        <button class="btn btn-outline-secondary">-</button>
                                        <input type="text" class="form-control text-center" value="1">
                                        <button class="btn btn-outline-secondary">+</button>
                                    </div>
                                </td>
                                <td class="text-end fw-bold">{{item["price"]}}.00 €</td>
                                <td class="text-end"><a href="{{url_for('store.cart', team_id=team.id)}}" class="btn btn-sm text-danger"><i class="bi bi-trash"></i></a></td>
                            </tr>
                        </tbody>
                    </table>
                    {% endif %}
                </div>
                <a href="{{url_for('store.index', team_id=team.id)}}" class="text-decoration-none small text-orange mt-3 d-inline-block">
                    <i class="bi bi-arrow-left"></i> CONTINUE SHOPPING
                </a>
            </div>
        </div>
        <div class="col-lg-4">
            {% if item %}<div class="card border-0 shadow-sm rounded-4 p-4 summary-card">
                <h2 class="fw-bold mb-4">SUMMARY</h2>

                <div class="d-flex justify-content-between mb-2">
                    <span>Subtotal</span>
                    <span class="fw-bold">{{item["price"]}}.00 €</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Shipping fees</span>
                    <span class="text-success fw-bold">FREE</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-4">
                    <span class="h5 fw-bold">TOTAL</span>
                    <span class="h4 fw-bold text-orange">{{item["price"]}}.00 €</span>
                </div>
                <div class="mb-4">
                    <label class="form-label small text-uppercase">Promo Code</label>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Ex: KAMEHAMEHA">
                        <button class="btn btn-dark">APPLY</button>
                    </div>
                </div>
                {% if not item %}
                <button class="btn btn-orange w-100 py-3 fw-bold shadow" disabled>Checkout <i class="bi bi-arrow-right ms-2"></i></button>
                {% else %}
               <form action="{{url_for('store.cart_payment', team_id=team.id)}}" method="POST">
                   <input type="hidden" name="item_id" value="{{ item['id'] }}">
                   <button type="submit" class="btn btn-orange w-100 py-3 fw-bold shadow">Checkout <i class="bi bi-arrow-right ms-2"></i></button>
               </form>
               {% endif %}
                <div class="text-center mt-3">
                    <img src="https://cdn-icons-png.flaticon.com/512/196/196578.png" height="30" class="me-2" alt="Visa">
                    <img src="https://cdn-icons-png.flaticon.com/512/196/196561.png" height="30" class="me-2" alt="Mastercard">
                    <img src="https://cdn-icons-png.flaticon.com/512/5968/5968245.png" height="30" class="me-2" alt="American Express">
                    <p class="text-muted mt-2" style="font-size: 0.7rem;">Secure payment via banking service</p>
                </div>
            </div>{% endif %}
        </div>
    </div>
</div>
{% endblock %}