{{ extends "global/Page.html" }}

{{ block styles }}
<link href="{{ static 'custom.css' }}" rel="stylesheet"/>
{{ endblock }}

{{ block title }}
<div style="color: blue; text-align: center;">

{{ if en }}
    Final Results – Practice Rounds
{{ else }}
    Hasil Akhir Ronde Latihan
{{ endif }}

</div>
{{ endblock }}

{{ block content }}

<div class="card card-info">
    <p>

    {{ if en }}
        The table below summarizes your decisions across
        {{ player_in_all_rounds|length }} practice rounds.
    {{ else }}
        Tabel berikut merangkum hasil keputusan Anda dalam
        {{ player_in_all_rounds|length }} ronde latihan.
    {{ endif }}

    </p>
</div>

<div class="card">
    <div class="card-header">
        <b>

        {{ if en }}
            Round History
        {{ else }}
            Riwayat Ronde
        {{ endif }}

        </b>
    </div>

    <div class="table-responsive">
        <table class="table">
            <tr>

                {{ if en }}
                    <th>Round No.</th>
                    <th>Number of Boxes Collected</th>
                    <th>Bomb Collected</th>
                    <th>Round Payoff</th>
                {{ else }}
                    <th>Ronde</th>
                    <th>Kotak Dikumpulkan</th>
                    <th>Bom Terkena</th>
                    <th>Hasil</th>
                {{ endif }}

            </tr>

            {{ for p in player_in_all_rounds }}
            <tr {% if p.round_number == round_to_pay_lucky_trial %}style="background:#fff3cd; font-weight: bold;"{% endif %}>

                <td>{{ p.round_number }}</td>
                <td>{{ p.boxes_collected }}</td>

                <td>
                    {{ if p.bomb_exploded }}

                        {{ if en }}
                            Yes
                        {{ else }}
                            Ya
                        {{ endif }}

                    {{ else }}

                        {{ if en }}
                            No
                        {{ else }}
                            Tidak
                        {{ endif }}

                    {{ endif }}
                </td>

                <td>{{ p.payoff_lucky_trial }}</td>

            </tr>
            {{ endfor }}

        </table>
    </div>
</div>

<div class="card card-info">

    {{ if en }}

        <p>We will randomly select
        <b style="color: blue;">30% of participants</b>
        to receive a bonus from this game. </p>

        <p>If you are selected, you will receive the bonus based on your performance.</p><br/>

        <p>From the <b>2 rounds played</b>, one round will be randomly chosen.</p>

        <p>Selected round:
    <b>{{ round_to_pay_lucky_trial }}</b></p>

        <p>Your earnings from that round:
        <b>{{ paying_round_lucky_trial_payoff }}</b></p>

    {{ else }}

        Kami akan memilih
        <b style="color: blue;">30% dari peserta</b>
        untuk menerima bonus dari permainan ini. <br/>

        Apabila Anda merupakan salah satunya,
        Anda akan mendapatkan bonus berdasarkan hasil permainan Anda.<br/>

        <p>
        Dari <b>2 ronde yang dimainkan</b>, satu ronde dipilih secara acak.</p>

    <p>Ronde yang terpilih:
            <b>{{ round_to_pay_lucky_trial }}</b></p>
        <p>
        Pendapatan Anda dari ronde tersebut:
        <b>{{ paying_round_lucky_trial_payoff }}</b></p>

    {{ endif }}

</div>


<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
window.onload = function () {

{{ if paying_round_lucky_trial_payoff > 0 }}

    // 🎉 Celebration
    confetti({
        particleCount: 3500,
        spread: 3600,
        startVelocity: 80,
        gravity: 1.4,
        scalar: 1.2,
        origin: { x: 0.5, y: 0.5 }
    });

{{ else }}

    // 💥 FLASH IGNITION (white-hot core)
    confetti({
        particleCount: 80,
        spread: 360,
        startVelocity: 20,
        ticks: 30,
        gravity: 0.4,
        scalar: 1.4,
        shapes: ['circle'],
        colors: ['#ffffff', '#fff3b0'],
        origin: { x: 0.5, y: 0.15 }
    });

    // 🔥 MAIN FIREBALL
    setTimeout(() => {
        confetti({
            particleCount: 240,
            spread: 360,
            startVelocity: 10,
            gravity: 1.1,
            ticks: 90,
            decay: 0.92,
            scalar: 1.2,
            shapes: ['circle'],
            colors: ['#ff2a00', '#ff6a00', '#ffaa00'],
            origin: { x: 0.5, y: 0.15 }
        });
    }, 120);

    // ✨ EMBERS (afterburn sparks)
    setTimeout(() => {
        confetti({
            particleCount: 140,
            spread: 180,
            startVelocity: 8,
            gravity: 1.4,
            ticks: 120,
            decay: 0.95,
            scalar: 0.6,
            shapes: ['circle'],
            colors: ['#ff4500', '#ffae00'],
            origin: { x: 0.5, y: 0.15 }
        });
    }, 260);

    // 🌫 SMOKE / DEBRIS FALL
    setTimeout(() => {
        confetti({
            particleCount: 160,
            spread: 100,
            startVelocity: 8,
            gravity: 2.0,
            ticks: 160,
            decay: 0.96,
            scalar: 1.0,
            shapes: ['circle'],
            colors: ['#555555', '#333333', '#111111'],
            origin: { x: 0.5, y: 0.2 }
        });
    }, 380);

{{ endif }}

};
</script>

<br>
{{ next_button }}

{{ endblock }}