{% extends "global/Page.html" %}
{% load otree %}

{% block title %}{% endblock %}

{% block content %}

<style>
    /* Same spacing system as other pages */
    .p1-wrap{
        max-width: 980px;
        margin: 0 auto;
    }

    .p1-wrap p{
        margin-bottom: 14px;
        line-height: 1.35;
    }

    .p1-section{
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* Scenario header */
    .scenario-title{
        margin-top: 0;
        margin-bottom: 14px;
    }

    /* Slider allocation block */
    .alloc-wrap{
        margin-top: 24px;
    }

    .alloc-row{
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .alloc-col{
        width: 34%;
        font-weight: 600;
    }

    .alloc-col.left{
        text-align: left;
    }

    .alloc-col.right{
        text-align: right;
    }

    .alloc-col > div:first-child{
        white-space: nowrap;   /* prevents "Temps sur les exercices de logique" from breaking */
    }

    .alloc-mid{
        width: 32%;            /* balanced total: 34 + 32 + 34 = 100 */
        text-align: center;
        margin-left: 45px;
    }

    .alloc-mid input[type="range"]{
        width: 100%;
    }

    /* Pilot rows */
    .pilot-row{
        margin-top: 18px;
        padding-top: 12px;
        border-top: 1px solid #ddd;
    }

    .pilot-rate{
        margin: 0 0 10px 0;
        text-align: center;
    }

    /* Keep consistent spacing before button */
    .next-wrap{
        margin-top: 24px;
    }

    .p1-subtitle-card {
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 28px 0 14px 0;
    }

    .p1-subtitle-card h5 {
        margin: 0;
    }

    /* Standard activity boxes */
    .activity-title-box {
        display: inline-block;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 8px 16px;
        background: #fafafa;
        font-weight: 600;
        margin: 18px 0 10px 0;
    }

    /* Generic box style */
    .result-box{
        max-width: 760px;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 14px 18px;
        background: #fafafa;
        margin: 0 auto;
    }

    /* Rows inside definition box */
    .score-row{
        display: flex;
        gap: 0px;
        padding: 14px 0;
        align-items: baseline;
    }

    .score-row + .score-row{
        border-top: 1px solid #efefef;
    }

    .score-label{
        min-width: 140px;
        font-weight: 600;
    }

    /* Table */
    .score-table{
        margin: 0 auto;
    }

    /* Harmonize table spacing */
    table.table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    table.table th,
    table.table td{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    table.table thead th{
        background: #fafafa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
    }
    table.table tbody td{
        text-align: center;
        vertical-align: middle;
    }

    /* Responsive */
    @media (max-width: 768px){
        .alloc-row{
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .alloc-col,
        .alloc-mid{
            width: 100%;
            text-align: left;
            left: 0;
        }

        .alloc-col.right{
            text-align: left;
        }
    }

    .recap-gray {
        color: #6b6b6b;
    }

    .recap-gray th,
    .recap-gray td {
        color: #6b6b6b;
    }

    .scenario-rules ul > li {
    margin-bottom: 6px;
}

.scenario-rules ul > li:last-child {
    margin-bottom: 0;
}
.sort-arrow{
  font-size: 12px;
  color: #666;
  margin-left: 0px;
}
    .rank-sub{
  margin-top: 6px;
  font-size: 16px;
  color: #666;
  font-weight: 400;
}

</style>

<div class="p1-wrap">
    {% if player.round_number == 1 %}
    <div class="p1-subtitle-card">
        <h4 xmlns="http://www.w3.org/1999/html">Scénario 1 : {{ scenario_title }}</h4>
    </div>
    {% elif player.round_number ==  2 %}
    <div class="p1-subtitle-card">
        <h4 xmlns="http://www.w3.org/1999/html">Scénario 2 : {{ scenario_title }}</h4>
    </div>
    {% else %}
    <div class="p1-subtitle-card">
        <h4 xmlns="http://www.w3.org/1999/html">Scénario 3 : {{ scenario_title }}</h4>
    </div>
    {% endif %}
    <br>

    <div class="activity-title-box">
        À l'issue de ce scénario, vous connaîtrez :
    </div>
    <div class="scenario-rules">
    {{ scenario_rules_html|safe }}
</div>


    {% if scenario_label == "A" %}
        <p>Vous verrez donc :</p>

        <table class="table score-table">
            <thead>
                <tr>
                    <th>Participant</th>
                    <th>Temps passé</th>
                    <th>Performance</th>
                    <th>Productivité</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-weight: 600;">Vous</td>
                    <td style="font-weight: 600;"><i>Votre décision</i></td>
                    <td style="font-weight: 600;"><i>Votre performance</i></td>
                    <td style="font-weight: 600;"><i>Votre productivité</i></td>
                </tr>
            </tbody>
        </table>

    {% elif scenario_label == "C" %}
        <p>Par exemple, si votre <strong>performance</strong> vous classe en 5ème position, vous verrez donc :</p>
        <table class="table">
            <thead>
                <tr>
                    <th><span class="sort-arrow">↓</span> Classement <span class="sort-arrow">↓</span><div class="rank-sub">(basé sur la performance)</div></th>
                    <th>Participant</th>
                    <th>Temps passé</th>
                    <th class="rank-key"> <span class="sort-arrow">↓</span> Performance <span class="sort-arrow">↓</span>
                    <th>Productivité</th>
                </tr>
            </thead>
            <tbody>
                {% for r in table_rows %}
                <tr {% if r.participant == "Vous" %}style="font-weight: bold;"{% endif %}>
                    <td>{{ r.rank }}</td>
                    <td>{{ r.participant }}</td>
                    <td>{{ r.time }}</td>
                    <td><i>{{ r.performance }}</i></td>
                    <td><i>{{ r.productivity }}</i></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

    {% else %}
        <p>Par exemple, si votre <strong>performance</strong> vous classe en 5ème position, vous verrez donc :</p>
        <table class="table">
            <thead>
                <tr>
                    <th><span class="sort-arrow">↓</span> Classement <span class="sort-arrow">↓</span><div class="rank-sub">(basé sur la performance)</div></th>
                    <th>Participant</th>
                    <th>Temps passé</th>
                    <th class="rank-key"> <span class="sort-arrow">↓</span> Performance <span class="sort-arrow">↓</span></th>
                    <th>Productivité</th>
                </tr>
            </thead>
            <tbody>
                {% for r in table_rowsNoScores %}
                <tr {% if r.participant == "Vous" %}style="font-weight: bold;"{% endif %}>
                    <td>{{ r.rank }}</td>
                    <td>{{ r.participant }}</td>
                    <td>{{ r.time }}</td>
                    <td><i>{{ r.performance }}</i></td>
                    <td><i>{{ r.productivity }}</i></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}

    <div class="activity-title-box">
        Votre décision
    </div>

    <div class="p1-section">
        <p>
            Vous disposez de {{ total_minutes }} minutes au total et devez consacrer au moins
            {{ min_puzzle }} minutes aux exercices de logique et au moins {{ min_slider }} minute à
            l'activité des curseurs.
        </p>
        <p>
            <strong>Comment voulez-vous répartir votre temps entre les deux activités ?</strong> <button type="button" class="btn btn-outline-secondary btn-sm ms-auto" data-bs-toggle="modal" data-bs-target="#rappelsModal">
        Voir les rappels
    </button>
        </p>
            <!-- Trigger button -->


<!-- Modal -->
<div class="modal fade" id="rappelsModal" tabindex="-1" aria-labelledby="rappelsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="rappelsModalLabel">Rappels</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <ul>
                    <li>
                        Lors de la Partie 1, vous avez obtenu les scores suivants :
                    </li>
                </ul>

                <table class="table score-table">
                    <thead>
                        <tr>
                            <th>Participant</th>
                            <th>Temps passé</th>
                            <th>Performance</th>
                            <th>Productivité</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="font-weight: 600;">Vous</td>
                            <td style="font-weight: 600;">5 minutes</td>
                            <td style="font-weight: 600;">{{ num_correct }}</td>
                            <td style="font-weight: 600;">{{ correct_per_min }}</td>
                        </tr>
                    </tbody>
                </table>

                <ul>
                    <li>
                        Les personnes ayant participé à la toute première session de l’expérience étaient des <strong>étudiant·e·s</strong> recruté·e·s de la même manière que vous. Ces personnes ont :
                        <ul style="margin-top: 8px; margin-bottom: 14px;">
                            <li>
                                dû consacrer <strong>exactement 10 minutes à l'activité des exercices de logique</strong>.
                            </li>
                            <li>
                                également reçu {{ piece_rate }}€ par exercice correctement résolu.
                            </li>
                            <li>
                                vu les exercices dans le même ordre que vous les verrez.
                            </li>
                        </ul>
                    </li>
                    <li>
                        <strong>
                            Les résultats dans ce type d'exercices de logiques sont souvent liés à la réussite scolaire et aux revenus futurs.
                        </strong>
                    </li>
                </ul>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>

        </div>
    </div>
</div>
        {% if is_pilot %}
        <div class="p1-section">
            <p>
                Vous allez faire ce <strong>choix pour 5 taux de rémunération différents</strong> de l'activité des curseurs.
                Pour chaque ligne, le taux correspondant est indiqué.
            </p>

            <p>
                Chacun de vos choix <strong>peut être sélectionné</strong> par l’ordinateur et affecter la suite de l’expérience.
            </p>
        </div>
        {% endif %}
    </div>

    <div class="alloc-wrap p1-section">
        {% if not is_pilot %}
        <div class="alloc-row">

            <div class="alloc-col left">
                <div>Temps sur les exercices de logique</div>
                <div style="font-size: 1em;">
                    <span id="puzzle_val"></span> minutes
                </div>
            </div>

            <div class="alloc-mid">
                <input
                    type="range"
                    id="puzzle_slider"
                    min="{{ min_puzzle }}"
                    max="{{ max_puzzle }}"
                    step="1"
                    value="{{ start_puzzle_minutes }}"
                    aria-label="Allocation du temps"
                >
            </div>

            <div class="alloc-col right">
                <div>Temps sur les curseurs</div>
                <div style="font-size: 1em;">
                    <span id="slider_val"></span> minutes
                </div>
            </div>

        </div>

        <input type="hidden" name="puzzle_minutes" id="puzzle_minutes_hidden">

        {% else %}
            {% for r in pilot_rates %}
            <div class="pilot-row">

                <p class="pilot-rate">
                    <strong>Paiement par minute <br> pour les curseurs</strong> :
                    <span
                        id="rate_{{ r.rate_id }}"
                        data-slider-rate="{{ r.slider_rate }}"
                    ></span>
                    €
                </p>

                <div class="alloc-row">

                    <div class="alloc-col left" style="font-weight: 400;">
                        <div>Temps sur les <strong>exercices de logique</strong></div>
                        <div style="font-size: 1em;">
                            <strong><span id="puzzle_val_{{ r.rate_id }}"></span> minutes</strong>
                        </div>
                    </div>

                    <div class="alloc-mid">
                        <input
                            type="range"
                            id="puzzle_slider_{{ r.rate_id }}"
                            min="{{ min_puzzle }}"
                            max="{{ max_puzzle }}"
                            step="1"
                            value="{{ r.start_value }}"
                            aria-label="Allocation du temps"
                        >
                    </div>

                    <div class="alloc-col right" style="font-weight: 400;">
                        <div>Temps sur les <strong>curseurs</strong></div>
                        <div style="font-size: 1em;">
                            <strong><span id="slider_val_{{ r.rate_id }}"></span> minutes</strong>
                        </div>
                    </div>

                </div>

                <input type="hidden" name="{{ r.field_name }}" id="puzzle_minutes_hidden_{{ r.rate_id }}">
            </div>
            {% endfor %}

            <script>
            document.addEventListener("DOMContentLoaded", function () {
                const total = Number({{ total_minutes }});
                const minSlider = Number({{ min_slider }});
                const maxPuzzle = total - minSlider;

                function parseRate(x) {
                    if (x === undefined || x === null) return NaN;
                    const s = String(x)
                        .replace(',', '.')
                        .replace(/[^0-9.\-]/g, '');
                    return Number(s);
                }

                function bindOne(rateId) {
                    const slider = document.getElementById("puzzle_slider_" + rateId);
                    const puzzleVal = document.getElementById("puzzle_val_" + rateId);
                    const sliderVal = document.getElementById("slider_val_" + rateId);
                    const hidden = document.getElementById("puzzle_minutes_hidden_" + rateId);
                    const rateSpan = document.getElementById("rate_" + rateId);

                    if (!slider || !puzzleVal || !sliderVal || !hidden) return;

                    if (rateSpan) {
                        const raw = rateSpan.dataset.sliderRate;
                        const rawRate = parseRate(raw);
                        rateSpan.textContent = Number.isFinite(rawRate) ? (rawRate * 7).toFixed(2) : '';
                    }

                    function update() {
                        let pm = Number(slider.value);

                        if (pm > maxPuzzle) {
                            pm = maxPuzzle;
                            slider.value = String(maxPuzzle);
                        }

                        const sm = total - pm;

                        puzzleVal.textContent = pm;
                        sliderVal.textContent = sm;
                        hidden.value = pm;
                    }

                    slider.addEventListener("input", update);
                    update();
                }

                const pilotSliders = document.querySelectorAll('input[type="range"][id^="puzzle_slider_"]');
                pilotSliders.forEach(function (el) {
                    const rateId = el.id.replace("puzzle_slider_", "");
                    bindOne(rateId);
                });
            });
            </script>
        {% endif %}
    <div style="text-align:right; margin-top:18px;">
    <button type="button" class="btn btn-primary" id="reviewBtn">
        Suivant
    </button>
    </div>
    </div>



    <script>
    document.addEventListener("DOMContentLoaded", function () {
        const slider = document.getElementById("puzzle_slider");
        const puzzleVal = document.getElementById("puzzle_val");
        const sliderVal = document.getElementById("slider_val");
        const hidden = document.getElementById("puzzle_minutes_hidden");

        const total = Number({{ total_minutes }});
        const minSlider = Number({{ min_slider }});
        const maxPuzzle = total - minSlider;

        function update() {
            let pm = Number(slider.value);

            if (pm > maxPuzzle) {
                pm = maxPuzzle;
                slider.value = String(maxPuzzle);
            }

            const sm = total - pm;

            puzzleVal.textContent = pm;
            sliderVal.textContent = sm;
            hidden.value = pm;
        }

        slider.addEventListener("input", update);
        update();
    });
    </script>


<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Confirmation de vos réponses</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body" id="confirmModalBody">
                <!-- filled dynamically by JS -->
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    ← Modifier ma décision
                </button>
                <button type="button" class="btn btn-primary" id="confirmSubmitBtn">
                    Confirmer et continuer →
                </button>
            </div>

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

<script>
    document.getElementById('reviewBtn').addEventListener('click', function () {

        {% if not is_pilot %}
            const puzzleMinutes = document.getElementById('puzzle_minutes_hidden')?.value || '?';
            const sliderMinutes = Number({{ total_minutes }}) - Number(puzzleMinutes);

            const html = `
                <p>Vous avez décidé de passer <strong>${puzzleMinutes} minutes</strong> sur les exercices de logique
                et <strong>${sliderMinutes} minutes</strong> sur les curseurs.</p>
                <p>Souhaitez-vous confirmer ce choix ?</p>
            `;

            document.getElementById('confirmModalBody').innerHTML = html;

            const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
            modal.show();

        {% else %}
            document.getElementById('form').submit();
        {% endif %}

    });

    document.getElementById('confirmSubmitBtn').addEventListener('click', function () {
        document.getElementById('form').submit();
    });
</script>
{% endblock %}