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

{% block title %}Ticketing{% endblock %}
{% block description %}Choose your seat and get your ticket to experience the match live at stadium{% endblock %}

{% block content %}
<section class="container my-5">
    <div class="text-center mb-5">
        <h1 class="fw-bold">STADIUM TICKETS</h1>
        <p class="lead text-muted">Compare the benefits of each zone</p>
    </div>
    <div class="table-responsive shadow-sm rounded-4 overflow-hidden mb-4">
        <table class="table table-hover align-middle bg-white mb-0">
            <thead class="bg-dark text-white text-center">
                <tr>
                    <th class="py-3" style="width: 30%;">BENEFITS</th>
                    <th class="py-3">General</th>
                    <th class="py-3">Lateral</th>
                    <th class="py-3 text-warning">Tribuna</th>
                    <th class="py-3 text-info">Executive Box</th>
                </tr>
            </thead>
            <tbody class="text-center roboto">
                <tr>
                    <td class="text-start fw-bold ps-4">Location in the stadium</td>
                    <td>North/South Goals</td>
                    <td>East Side</td>
                    <td>West Side</td>
                    <td>Upper Central Area</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold ps-4">Visibility</td>
                    <td>Normal</td>
                    <td>Normal/Good</td>
                    <td>Good</td>
                    <td>Excellent</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold ps-4">Catering</td>
                    <td>-</td>
                    <td>Snacks & Pastries</td>
                    <td>Drinks & Refreshments</td>
                    <td>Hot Food / Meals</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold ps-4">TSI View</td>
                    <td>❌</td>
                    <td>❌</td>
                    <td>✅ Basic Model</td>
                    <td>✅ Elite Pro Model</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold ps-4 text-orange">Match Price</td>
                    <td class="fw-bold">{{(ticketing.values()|list)[0]}} €</td>
                    <td class="fw-bold">{{(ticketing.values()|list)[1]}} €</td>
                    <td class="fw-bold text-warning fs-5">{{(ticketing.values()|list)[2]}} €</td>
                    <td class="fw-bold text-info fs-5">{{(ticketing.values()|list)[3]}} €</td>
                </tr>
            </tbody>
        </table>
    </div>
<div class="text-center">
        <h2 class="fw-bold">Buy Tickets</h2>
         <p class="text-muted">Choose your seat in the stands and get ready for the match.</p>
    </div>
    <div class="row g-4 mb-5 align-items-center">
        <div class="col-lg-6 text-center">
            <div class="p-4 bg-light-subtle rounded-4 shadow-sm border">
                <h3 class="mb-4">STADIUM MAP</h3>
                <div class="stadium-map d-flex flex-column gap-2 mx-auto" style="max-width: 400px;">
                    <div class="bg-info text-white p-3 rounded-pill shadow-sm" style="cursor:pointer;" onclick="document.getElementById('select_area').value='executive'">EXECUTIVE BOX</div>
                    <div class="d-flex gap-2">
                        <div class="bg-warning text-dark p-4 rounded flex-fill d-flex align-items-center justify-content-center" style="height: 150px; cursor:pointer;" onclick="document.getElementById('select_area').value='tribuna'">TRIBUNA</div>
                        <div class="bg-success text-white p-4 rounded flex-fill d-flex align-items-center justify-content-center fw-bold" style="height: 150px;">Pitch</div>
                        <div class="bg-dark text-white p-4 rounded flex-fill d-flex align-items-center justify-content-center" style="height: 150px; cursor:pointer;" onclick="document.getElementById('select_area').value='lateral'">LATERAL</div>
                    </div>
                    <div class="bg-secondary text-white p-3 rounded-pill shadow-sm" style="cursor:pointer;" onclick="document.getElementById('select_area').value='general'">GENERAL (GOALS)</div>
                </div>
                <p class="small text-muted mt-3 italic">* Click on the zones to select them quickly</p>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card border-0 shadow-lg p-4 rounded-4">
                <h3 class="mb-4 text-center">RESERVE YOUR SEAT</h3>
                <form id="formCompra" method="post" action="{{url_for('store.buy_tickets_payment', team_id=team.id)}}">
                    <div class="mb-4">
                        <label class="form-label fw-bold text-uppercase">1. Select the area</label>
                        <select class="form-select form-select-lg border-2 border-warning" id="select_area" name="select_area">{% for area, price in ticketing.items() %}
                            <option value="{{area}}" {%if loop.index==2%}selected{%endif%}>{{area|upper}} - {{price}} €</option>{% endfor %}
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold text-uppercase">2. How many tickets do you want?</label>
                        <input type="number" class="form-control form-control-lg border-2" value="1" min="1" max="3" name="num_tickets">
                    </div>
                    <input type="hidden" name="match" value="{{match}}">
                    <button type="submit" class="btn btn-warning btn-lg w-100 fw-bold py-3 shadow">
                        CONFIRM PURCHASE <i class="bi bi-ticket-perforated-fill ms-2"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>{% endblock %}