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

{% block title %}Purchase Complete{% endblock %}
{% block description %}{% endblock %}

{% block content %}
<style>
    .ticket {
        max-width: 600px;
        border-radius: 20px;
        border: 3px solid #000;
        display: flex;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    .ticket-left {
        background: #000;
        color: #fff;
        padding: 30px;
        writing-mode: vertical-rl;
        text-transform: uppercase;
        transform: rotate(180deg);
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 2px dashed rgba(255,255,255,0.3);
    }

    .ticket-body {
        padding: 30px;
        flex-grow: 1;
        position: relative;
        background-color: var(--bs-white);
    }
    .ticket-body::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        border-left: 2px dashed #ddd;
    }

    .qr-placeholder {
        width: 100px;
        height: 100px;
        background: var(--bs-white);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
    }
    [data-bs-theme="dark"] .qr-placeholder {background: var(--bs-black);}
    [data-bs-theme="dark"] .ticket-body {background-color: var(--bs-black);}
    .ticket-meta {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        margin: 15px 0;
    }
    .price-tag {
        font-size: 1.2rem;
        background: #000;
        color: #fff;
        padding: 3px 7px;
        border-radius: 5px;
        display: inline-block;
    }
</style>

<div class="container my-5 text-center">
    <div class="mb-4">
		<i class="bi bi-ticket-perforated-fill text-orange" style="font-size: 4rem;"></i>
        <h1 class="display-4 fw-bold text-uppercase">Purchase Complete!</h1>
        <p class="lead">Get ready for match day, your ticket is now available.</p>
    </div>

    <div class="ticket mx-auto mb-4">
    <div class="ticket-left">
        <span class="small fw-bold">GENERAL ADMISSION • {{team.stadium.name}}.</span>
    </div>

    <div class="ticket-body text-start">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <div>
                <h2 class="fw-bold text-orange mb-0" id="match">MRFC vs RR ARMY</h2>
                <h6 id="info_league" class="text-muted mb-0">HATTRICK LEAGUE • WEEK <span id="week">15</span></h6>
            </div>
            <div class="text-end" style="width: 150px">
                <div id="price_area" class="price-tag">30.00 €</div>
                <small class="d-block text-muted" style="font-size: 0.6rem;">VAT INCLUDED</small>
            </div>
        </div>
        <div class="ticket-meta">
            <div class="row text-center">
                <div class="col-4 border-end">
                    <small class="text-muted d-block text-uppercase" style="font-size: 0.7rem;">Stand / Sector</small>
                    <span class="fw-bold text-uppercase" id="select_area">GENERAL</span>
                </div>
                <div class="col-4 border-end">
                    <small class="text-muted d-block text-uppercase" style="font-size: 0.7rem;">Row</small>
                    <span class="fw-bold" id="row">07 (Z)</span>
                </div>
                <div class="col-4">
                    <small class="text-muted d-block text-uppercase" style="font-size: 0.7rem;">Seat</small>
                    <span class="fw-bold" id="seat">124</span>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-end">
            <div>
                <small class="text-muted d-block text-uppercase small">Ticket holder</small>
                <span class="h5 mb-0" id="name_ticket">NAME</span> <span class="h5 mb-0" id="num_tickets">1</span>
                <div class="mt-2">
                    <span class="badge bg-success small"><i class="bi bi-patch-check"></i> PAYMENT CONFIRMED</span>
                </div>
            </div>
            <div class="text-center">
                <div class="qr-placeholder mx-auto mb-1">
                    <i class="bi bi-qr-code fs-2"></i>
                </div>
                <small style="font-size: 0.6rem;" id="confirmation_code"></small>
            </div>
        </div>
    </div>
</div>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="alert alert-dark border-0 shadow-sm rounded-4 p-4 text-start border">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-shield-check text-success fs-2 me-3"></i>
                    <h5 class="mb-0 text-uppercase">SECURE TRANSACTION</h5>
                </div>
                <p class="small text-muted">
                    A PDF copy of the ticket has been sent to your email. The ticket charge will appear under the description <strong>TICKETING-{{range(300,500)|random}}</strong>. Remember to present the QR code at the stadium access control.
                </p>
                <div class="d-grid gap-2 mt-4">
                    <button class="btn btn-dark fw-bold" onclick="window.print()">
                        <i class="bi bi-printer me-2"></i> PRINT TICKET
                    </button>
                    <a href="{{url_for('team.index', team_id=team.id)}}" class="btn btn-outline-secondary fw-bold">BACK TO CLUB</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    if(localStorage.getItem('{{team.id}}_ticket')){
        const ticket = JSON.parse(localStorage.getItem('{{team.id}}_ticket'));
        if(ticket) {
            ticket["row"] = Math.floor(Math.random() * 10) + 2;
            ticket["seat"] = Math.floor(Math.random() * 10) + 1;
            ticket["confirmation_code"] = Math.random().toString(36).substring(2, 8).toUpperCase();
            ticket["row"] = ticket["row"]+" "+Math.random().toString(36).substring(5, 6).toUpperCase();
            document.getElementById('confirmation_code').innerText = "#-"+ticket["confirmation_code"]

            document.getElementById('name_ticket').innerText = ticket["name_ticket"] + " " + ticket["lastname_ticket"];
            document.getElementById('select_area').innerText = ticket["select_area"] || 'GENERAL';
            document.getElementById('price_area').innerText = ticket["price_area"]*ticket["num_tickets"]+".00 €"
            document.getElementById('num_tickets').innerText = "(x"+ticket["num_tickets"]+")"
            document.getElementById('row').innerText = ticket["row"]
            if(ticket["num_tickets"] > 1){
                document.getElementById('seat').innerText = ticket["seat"] +' - ' + (ticket["seat"]+Number(ticket["num_tickets"])-1)
            }else{
                document.getElementById('seat').innerText = ticket["seat"]
            }

            if(ticket["match"] == "friendly"){
                document.getElementById('match').innerText = "Friendly match"
                document.getElementById('info_league').remove()
            }else {
                const d = ticket["match"].split("_");
                document.getElementById('match').innerText = d[0]
                document.getElementById('week').innerText = d[1]
            }
            localStorage.setItem('{{team.id}}_ticket', JSON.stringify(ticket));
        }
    }
</script>{% endblock %}