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

{% block title %}Partie 2 de l'expérience{% endblock %}

{% block content %}

<style>
    .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;
    }

    .p1-wrap ol,
    .p1-wrap ul {
        margin-top: 0;
        margin-bottom: 14px;
    }

    .p1-wrap li {
        margin-bottom: 8px;
        line-height: 1.35;
    }

    .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;
    }

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

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

    .p1-final-instruction {
        margin-top: 48px;   /* increase or decrease to taste */
    }

    .slider-page {
        max-width: 700px;
        margin: 10px auto 0 auto;
        text-align: center;
    }

    .slider-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 40px;
        margin-bottom: 6px;
    }

    .slider-track {
        position: relative;
        width: 350px;
    }

    #slider_demo_input {
        width: 100%;
    }

    .slider-bubble {
        position: absolute;
        top: -28px;
        transform: translateX(-50%);
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-size: 0.85rem;
        white-space: nowrap;
        pointer-events: none;
    }

    .slider-target {
        font-size: 1rem;
        text-align: left;
        min-width: 120px;
    }
    /* 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;
    }
</style>

<div class="p1-wrap">

    <div class="p1-section">

        <p>
            Cette partie dure 16 minutes au total.
        </p>

        <div class="p1-subtitle-card">
            <h5>Votre mission</h5>
        </div>

        <p>
            Durant ces 16 minutes, vous <strong>effectuerez deux activités</strong> :
        </p>

        <div class="activity-title-box">
            Activité 1 – Exercices de logique
        </div>

        <p>
            <ul style="margin-top: 0; margin-bottom: 14px;">
                <li><strong>Objectif :</strong> résoudre le même type d’exercices que précédemment.</li>
                <li><strong>Durée :</strong> 10 minutes.</li>
                <li><strong>Rémunération :</strong> {{ piece_rate }}€ par exercice correctement résolu.</li>
            </ul>

        </p>

        <div class="activity-title-box">
            Activité 2 – Curseur
        </div>

        <ul style="margin-top: 0; margin-bottom: 14px;">
                <li><strong>Principe :</strong> toutes les 7,5 secondes, un curseur et une position cible apparaîtront à l'écran.</li>
                <li><strong>Objectif :</strong> déplacer le curseur jusqu’à la position indiquée.</li>
                <li><strong>Durée :</strong> 6 minutes.</li>
                <li><strong>Rémunération :</strong> En plaçant correctement chacun des curseurs, vous gagnerez 0,40€
            par minute. Chaque erreur réduit votre rémunération totale pour cette activité de 0,05€.</li>
                <li><strong>Exemple :</strong> Faites glisser le point rond jusqu’au nombre indiqué comme cible à droite du curseur.</li>
            </ul>

        <div class="slider-page" aria-hidden="true">
            <div class="slider-wrapper">
                <div class="slider-track">
                    <input
                        id="slider_demo_input"
                        type="range"
                        min="0"
                        max="100"
                        value="50"
                    >
                    <div id="slider_demo_bubble" class="slider-bubble">50</div>
                </div>

                <div class="slider-target">
                    Cible&nbsp;: <span id="slider_demo_target">10</span>
                </div>
            </div>
        </div>

        <div class="p1-subtitle-card">
            <h5 xmlns="http://www.w3.org/1999/html">Paiement</h5>
    </div>
    <p>
        Si cette partie est sélectionnée pour votre paiement final, vous gagnerez la <strong>somme des rémunérations</strong>
    obtenues pour chaque activité.
    <p>
        Ce montant s’ajoutera aux 6,0€ garantis que vous recevrez pour votre participation.
    </p>

    <div class="p1-subtitle-card">
            <h5 xmlns="http://www.w3.org/1999/html">Rappels</h5>
        </div>
        <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>
                <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 class="p1-final-instruction">
            <p>
                Dès que vous êtes prêt, cliquez sur le bouton Suivant pour commencer.
            </p>
        </div>

    </div>

    <div style="text-align:right;">
        {{ next_button }}
    </div>

</div>

<script>
(function () {
    var slider = document.getElementById('slider_demo_input');
    var bubble = document.getElementById('slider_demo_bubble');
    var targetEl = document.getElementById('slider_demo_target');

    if (!slider || !bubble || !targetEl) return;

    var target = 10;

    function updateBubble() {
        var val = Number(slider.value);
        var min = Number(slider.min);
        var max = Number(slider.max);

        var percent = (val - min) / (max - min);
        var trackWidth = slider.getBoundingClientRect().width;
        var thumbOffset = 14;

        var left = percent * (trackWidth - 2 * thumbOffset) + thumbOffset;

        bubble.style.left = left + 'px';
        bubble.textContent = val;
        targetEl.textContent = target;
    }

    slider.addEventListener('input', updateBubble);
    slider.addEventListener('change', updateBubble);

    updateBubble();
    window.addEventListener('resize', updateBubble);
})();
</script>

{% endblock %}