{{ 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 – Main Rounds
    {{ else }}
        Hasil Akhir – Ronde Utama
    {{ 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 }} main rounds.
        {{ else }}
            Tabel berikut merangkum hasil keputusan Anda selama
            {{ player_in_all_rounds|length }} ronde utama.
        {{ 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>
                <th>
                    {{ if en }}Round{{ else }}Ronde{{ endif }}
                </th>

                <th>
                    {{ if en }}
                        Boxes Collected
                    {{ else }}
                        Kotak Terkumpul
                    {{ endif }}
                </th>

                <th>
                    {{ if en }}
                        Bomb Collected
                    {{ else }}
                        Bom Terkena
                    {{ endif }}
                </th>

                <th>
                    {{ if en }}
                        Round Earnings
                    {{ else }}
                        Pendapatan Ronde
                    {{ endif }}
                </th>
            </tr>

            {{ for p in player_in_all_rounds }}
            <tr {% if p.round_number == round_to_pay_lucky %}
                    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 }}</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 task.</p>

        <p>If you are selected, your bonus will be based on
        <strong>one randomly selected round</strong>
        from the
        <strong>{{ C.NUM_ROUNDS }}</strong>
        rounds played.</p>


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

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

    {{ else }}

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

        <p>Jika Anda terpilih, bonus Anda akan ditentukan berdasarkan
        <strong>satu ronde yang dipilih secara acak</strong>
        dari
        <strong>{{ C.NUM_ROUNDS }}</strong>
            ronde yang dimainkan.</p>

        <p>Ronde yang terpilih:
            <b>{{ round_to_pay_lucky }}</b></p>

        <p>Pendapatan Anda dari ronde tersebut:
            <b>{{ paying_round_lucky_payoff }}</b></p>

    {{ endif }}

</div>

<br>
<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_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>
{{ next_button }}

{{ endblock }}