{{ block title }}
    Part II
{{ endblock }}

{{ block content }}
<style>
    .hl-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
    .hl-row { background: #fff; border: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .hl-row td { padding: 15px; vertical-align: middle; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
    .hl-row td:first-child { border-left: 1px solid #dee2e6; border-radius: 8px 0 0 8px; text-align: center; }
    .hl-row td:last-child { border-right: 1px solid #dee2e6; border-radius: 0 8px 8px 0; }
    .btn-check { display: none; }
    .btn-outline-a { color: #007bff; border: 2px solid #007bff; width: 60px; font-weight: bold; }
    .btn-check:checked + .btn-outline-a { background-color: #007bff; color: white; }
    .btn-outline-b { color: #28a745; border: 2px solid #28a745; width: 60px; font-weight: bold; }
    .btn-check:checked + .btn-outline-b { background-color: #28a745; color: white; }
</style>

<div class="container">
    <div class="alert alert-secondary">Please select your preferred option (A or B) in each row:</div>
    
    <table class="hl-table">
        <thead>
            <tr class="text-center text-muted">
                <th>#</th>
                <th style="width: 35%;">Option A</th>
                <th style="width: 20%;">Your Decision</th>
                <th style="width: 35%;">Option B</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hl-row">
                <td>1</td>
                <td class="text-end small">1/10 chance winning ${{ Constants.HL_A1 }},<br> 9/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_1" id="hl_1_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_1_a">A</label>
                        <input type="radio" class="btn-check" name="hl_1" id="hl_1_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_1_b">B</label>
                    </div>
                </td>
                <td class="text-start small">1/10 chance winning ${{ Constants.HL_B1 }},<br> 9/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>2</td>
                <td class="text-end small">2/10 chance winning ${{ Constants.HL_A1 }},<br> 8/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_2" id="hl_2_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_2_a">A</label>
                        <input type="radio" class="btn-check" name="hl_2" id="hl_2_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_2_b">B</label>
                    </div>
                </td>
                <td class="text-start small">2/10 chance winning ${{ Constants.HL_B1 }},<br> 8/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>3</td>
                <td class="text-end small">3/10 chance winning ${{ Constants.HL_A1 }},<br> 7/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_3" id="hl_3_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_3_a">A</label>
                        <input type="radio" class="btn-check" name="hl_3" id="hl_3_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_3_b">B</label>
                    </div>
                </td>
                <td class="text-start small">3/10 chance winning ${{ Constants.HL_B1 }},<br> 7/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>4</td>
                <td class="text-end small">4/10 chance winning ${{ Constants.HL_A1 }},<br> 6/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_4" id="hl_4_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_4_a">A</label>
                        <input type="radio" class="btn-check" name="hl_4" id="hl_4_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_4_b">B</label>
                    </div>
                </td>
                <td class="text-start small">4/10 chance winning ${{ Constants.HL_B1 }},<br> 6/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>5</td>
                <td class="text-end small">5/10 chance winning ${{ Constants.HL_A1 }},<br> 5/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_5" id="hl_5_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_5_a">A</label>
                        <input type="radio" class="btn-check" name="hl_5" id="hl_5_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_5_b">B</label>
                    </div>
                </td>
                <td class="text-start small">5/10 chance winning ${{ Constants.HL_B1 }},<br> 5/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>6</td>
                <td class="text-end small">6/10 chance winning ${{ Constants.HL_A1 }},<br> 4/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_6" id="hl_6_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_6_a">A</label>
                        <input type="radio" class="btn-check" name="hl_6" id="hl_6_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_6_b">B</label>
                    </div>
                </td>
                <td class="text-start small">6/10 chance winning ${{ Constants.HL_B1 }},<br> 4/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>7</td>
                <td class="text-end small">7/10 chance winning ${{ Constants.HL_A1 }},<br> 3/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_7" id="hl_7_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_7_a">A</label>
                        <input type="radio" class="btn-check" name="hl_7" id="hl_7_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_7_b">B</label>
                    </div>
                </td>
                <td class="text-start small">7/10 chance winning ${{ Constants.HL_B1 }},<br> 3/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>8</td>
                <td class="text-end small">8/10 chance winning ${{ Constants.HL_A1 }},<br> 2/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_8" id="hl_8_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_8_a">A</label>
                        <input type="radio" class="btn-check" name="hl_8" id="hl_8_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_8_b">B</label>
                    </div>
                </td>
                <td class="text-start small">8/10 chance winning ${{ Constants.HL_B1 }},<br> 2/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>9</td>
                <td class="text-end small">9/10 chance winning ${{ Constants.HL_A1 }},<br> 1/10 chance winning ${{ Constants.HL_A2 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_9" id="hl_9_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_9_a">A</label>
                        <input type="radio" class="btn-check" name="hl_9" id="hl_9_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_9_b">B</label>
                    </div>
                </td>
                <td class="text-start small">9/10 chance winning ${{ Constants.HL_B1 }},<br> 1/10 chance winning ${{ Constants.HL_B2 }}</td>
            </tr>

            <tr class="hl-row">
                <td>10</td>
                <td class="text-end small">10/10 chance winning ${{ Constants.HL_A1 }}</td>
                <td class="text-center">
                    <div class="btn-group">
                        <input type="radio" class="btn-check" name="hl_10" id="hl_10_a" value="A" required>
                        <label class="btn btn-outline-a" for="hl_10_a">A</label>
                        <input type="radio" class="btn-check" name="hl_10" id="hl_10_b" value="B" required>
                        <label class="btn btn-outline-b" for="hl_10_b">B</label>
                    </div>
                </td>
                <td class="text-start small">10/10 chance winning ${{ Constants.HL_B1 }}</td>
            </tr>
        </tbody>
    </table>

    <div class="next-btn-wrap" style="text-align: center;">
    <button class="otree-next-button btn btn-primary">Submit my choices</button>
</div>
</div>

<script>
    document.querySelector('.otree-next-button').onclick = function(e) {
        const totalRows = document.querySelectorAll('.hl-row').length;
        const checkedCount = document.querySelectorAll('input[type="radio"]:checked').length;

        if (checkedCount < totalRows) {
            e.preventDefault();
            alert("You have not finished all questions! Please make sure all 10 decisions are selected as A or B.");
            
            const rows = document.querySelectorAll('.hl-row');
            for (let row of rows) {
                if (!row.querySelector('input:checked')) {
                    row.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    row.style.backgroundColor = '#fff3f3';
                    break;
                }
            }
        }
    };
</script>
{{ endblock }}