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

{% block title %}Order completed{% endblock %}
{% block description %}{% endblock %}

{% block content %}<style>
.invoice-box {
    max-width: 600px;
    background: var(--bs-white);
    border-radius: 20px;
    border: 2px solid #000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}
[data-bs-theme="dark"] .invoice-box{background: var(--bs-black);}
.invoice-header {
    background: #000;
    color: #fff;
    padding: 30px;
    text-align: center;
}
[data-bs-theme="dark"] .invoice-header{background: var(--bs-gray-200); color: var(--bs-black);}
.receipt-line { border-top: 1px dashed #ccc; margin: 15px 0; }
.stamp {
    position: absolute;
    top: 140px;
    right: 150px;
    transform: rotate(15deg);
    opacity: 0.4;
    pointer-events: none;
}</style><div class="container my-5 text-center">
    <div class="mb-4">
        <i class="bi bi-bag-check-fill text-success" style="font-size: 4rem;"></i>
        <h1 class="fw-bold">ORDER COMPLETED!</h1>
        <p class="lead">Thank you for choosing the official gear.</p>
    </div>

    <div class="invoice-box mx-auto text-start">
        <div class="invoice-header">
            <h2 class="mb-0">{{team.name}} STORE</h2>
            <small class="opacity-75">Order #<span id="order_id">88291</span></small>
        </div>

        <div class="p-4">
            <div class="stamp text-danger border border-danger p-2 fw-bold h4">PAID</div>
            <div class="row mb-4">
                <div class="col-6">
                    <small class="text-muted text-uppercase d-block" style="font-size: 0.7rem;">Customer</small>
                    <span class="fw-bold" id="name_customer">--</span>
                </div>
                <div class="col-6 text-end">
                    <small class="text-muted text-uppercase d-block" style="font-size: 0.7rem;">Date</small>
                    <span class="fw-bold">{{now.strftime("%Y-%m-%d")}}</span>
                </div>
            </div>
            <h6 class="text-muted text-uppercase border-bottom pb-2">Product summary</h6>

            <div class="d-flex justify-content-between align-items-center mb-2">
                <span id="product"></span>
                <span id="price_product" class="fw-bold"></span>
            </div>
            <div class="receipt-line"></div>
            <div class="d-flex justify-content-between mb-1">
                <span class="small">Subtotal</span>
                <span id="subtotal" class="small">75.00 €</span>
            </div>
            <div class="d-flex justify-content-between mb-1">
                <span class="small">Shipping (Capsule)</span>
                <span class="small">0.00 €</span>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <h4 class="fw-bold mb-0">TOTAL</h4>
                <h3 id="total_price" class=" fw-bold text-orange mb-0" style="color: #ff8800;">75.00 €</h3>
            </div>

            <div class="mt-4 p-3 bg-light-subtle rounded-3 text-center border">
                <i class="bi bi-truck me-2 text-warning"></i>
                <small>You will receive the package in 2-4 days via UPS Express.</small>
            </div>
        </div>
    </div>

    <div class="mt-5 d-flex justify-content-center gap-3">
        <button class="btn btn-dark fw-bold px-4" onclick="window.print()">
            <i class="bi bi-printer me-2"></i> PRINT RECEIPT
        </button>
        <a href="{{url_for('team.index', team_id=team.id)}}" class="btn btn-outline-dark text-secondary fw-bold px-4">BACK TO CLUB</a>
    </div>
</div>
<script>
    if(localStorage.getItem('{{team.id}}_checkout')){
        const checkout = JSON.parse(localStorage.getItem('{{team.id}}_checkout'))

        checkout["order_id"] = Math.floor(Math.random() * 8000) + 200;
        checkout["order_date"] = '{{now.strftime("%Y-%m-%d")}}'

        document.getElementById('order_id').innerText = checkout["order_id"]

        const name =  checkout["nameCheckout"] + checkout["lastnameCheckout"]|| 'Convidat';
        document.getElementById('name_customer').innerText = name;

        document.getElementById('product').innerText = "1x " + checkout["name_item"];

        document.getElementById('price_product').innerText = checkout["price_item"]+ ".00 €"
        document.getElementById('subtotal').innerText = checkout["price_item"]+ ".00 €"
        document.getElementById('total_price').innerText = checkout["price_item"]+ ".00 €"

        localStorage.setItem('{{team.id}}_checkout', JSON.stringify(checkout));

    }
</script>
{% endblock %}