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

{% block title %}User profile{% endblock %}
{% block description %}User profile{% endblock %}
{% block head_meta %}<style>
.header-muten {
    background: linear-gradient(135deg, var(--bs-orange) 0%, orange 100%);
    color: white; padding: 30px; border-radius: 0 0 30px 30px;
    border-bottom: 5px solid var(--bs-blue);
}
.ki-status {
    border-left: 5px solid var(--bs-blue); padding: 15px;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}
.qr-card {
    background: var(--bs-white); border: 2px dashed var(--bs-blue);
    min-height: 180px;
}
[data-bs-theme="dark"] .qr-card { background: var(--bs-gray-500);}
.card-ticket {
    border-left: 8px solid var(--bs-orange);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 20px;
}
.card-store {
    border-left: 8px solid var(--bs-blue);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 20px;
}</style>{% endblock %}
{% block content %}
<div class="container mt-4">
    <div class="header-muten text-center shadow">
        <h1 id="member" class="display-5 fw-bold">EMETE HATTRICK</h1>
        <div class="mt-2">
            <span class="badge bg-light text-dark">ID: #<span id="id_member">1234</span></span> <span class="mx-2">|</span>
            <small><i class="bi bi-calendar3"></i> Member since: <strong id="year_member">2022<span></span></strong></small>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-md-6 mb-4">
            <div class="ki-status bg-light-subtle h-100">
                <h2 class="h5 text-muted text-uppercase">Membership status</h2>
                <div class="d-flex align-items-center mb-2">
                    <span class="badge bg-success me-2">Active</span>
                    <span id="season" class="text-primary fw-bold">Season</span>
                </div>
                <span id="membership_type" class="text-primary fw-bold"></span>
            </div>
        </div>
        <div id="member_card" class="col-md-6 mb-4"></div>
    </div>
    <div class="card qr-card shadow-sm">
        <div class="card-body text-center d-flex flex-column justify-content-center">
            <h2 class="card-title text-primary">Member QR profile</h2>
            <div class="display-2 text-dark">
                <i class="bi bi-qr-code"></i>
            </div>
        </div>
    </div>
<div class="container mt-4">
    <div class="row mt-4">
        <div class="col-md-6 mb-4">
            <h2 class="h5 text-uppercase text-muted mb-3"><i class="bi bi-ticket-perforated"></i> Next Event</h2>
            <div id="cardtiquet" class="card-ticket bg-light-subtle">
                <i class="bi bi-ticket-perforated-fill me-2 display-4"></i>
                <h3 id="match">MATCH</h3>
                <p class="mb-1 text-muted">Area: <strong id="area"></strong> (<span id="num_tickets"></span>)</p>
                <p class="mb-1 text-muted">Location: row <span id="row"></span> -- Seat/s <span id="seat"></span></p>
                <p class="mb-0 small text-primary">Status: <strong>Confirmed</strong></p>
                <hr>
                <div class="text-end">
                    <small class="text-muted">Ticket ID: #<span id="confirmation_code"></span></small> </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <h2 class="h5 text-uppercase text-muted mb-3"><i class="bi bi-bag-heart"></i> Last Item Purchased</h2>
            <div id="cardcheckout" class="card-store bg-light-subtle">
                <i class="bi bi-bag-check-fill me-2 display-4"></i>
                <h3><span id="productname">productname</span></h3>
                <p class="mb-1 text-muted">Purchased on: <span id="datecheckout"></span></p>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span id="pricecheckout" class="badge bg-warning text-dark fs-6">Zenis</span> <span id="idcheckout" class="small text-muted">id</span>
                </div>
                <hr>
                <p class="mb-0 small"><em>Package delivered to destination</em></p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="alert alert-light border text-center">
                <small>Do you have any issues with your ticket? Please contact our support team.</small>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    if(localStorage.getItem("{{team.id}}_memberData")){
        const member =  JSON.parse(localStorage.getItem("{{team.id}}_memberData"));

        document.getElementById("member").innerText= member["name"] + " "+ member["lastname"];
        document.getElementById("id_member").innerText= member["id_member"];
        document.getElementById("year_member").innerText= member["year_member"];
        if(member["membership_type"] === 2){
            document.getElementById("season").innerText = document.getElementById("season").innerText+ " "+ member["current_season"];
            document.getElementById("membership_type").innerText = "Membership Type: Adult";

            document.getElementById("member_card").innerHTML= `{% include team.id+'/includes/_adult_card.html' %}`
            document.getElementById("name_member_card").innerText= member.name+' '+ member.lastname;
            document.getElementById("id_member_card").innerText=member.id_member;
            document.getElementById("year_member_card").innerText=member.year_member;
            document.getElementById("season_card").innerText= "Season "+ member["current_season"];
        }else{
            document.getElementById("membership_type").innerText = "Membership Type: Young";
            document.getElementById("season").innerText= "";

            document.getElementById("member_card").innerHTML= `{% include team.id+'/includes/_young_card.html' %}`
            document.getElementById("name_member_card").innerText= member.name+' '+ member.lastname;
            document.getElementById("id_member_card").innerText=member.id_member;
            
        }
    }
    if(localStorage.getItem("{{team.id}}_ticket")) {
        const ticket = JSON.parse(localStorage.getItem("{{team.id}}_ticket"));
        match = ticket["match"].split("_")[0];
        document.getElementById("match").innerText = match;
        document.getElementById("area").innerText = ticket["select_area"].toUpperCase();
        document.getElementById("num_tickets").innerText = "x "+ ticket["num_tickets"];
        document.getElementById("confirmation_code").innerText = ticket["confirmation_code"];
        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"]
        }
    }else {
        document.getElementById("cardtiquet").innerHTML = `<i class="bi bi-ticket-perforated-fill me-2 display-4"></i> <p><strong>No tickets yet</strong></p>`
    }

    if(localStorage.getItem("{{team.id}}_checkout")) {
        const checkout = JSON.parse(localStorage.getItem("{{team.id}}_checkout"));
        document.getElementById("productname").innerText = checkout["name_item"];
        document.getElementById("datecheckout").innerText = checkout["order_date"];
        document.getElementById("pricecheckout").innerText = checkout["price_item"]+".00 €";
        document.getElementById("idcheckout").innerText = "Order ID: #"+checkout["order_id"];
    }else {
        document.getElementById("cardcheckout").innerHTML = `<i class="bi bi-bag-check-fill me-2 display-4"></i> <p><strong>No orders found.</strong></p>`
    }
</script>
{% endblock %}