{{extends 'pre_survey/BasePage.html'}}
{{ block title }}
{{ endblock }}

{{ block content }}

<!-- site-specific CSS -->
<style type="text/css">
    #hsgraph {
        height: 400px;
    }
    .highcharts-figure,
    .highcharts-data-table table {
        min-width: 310px;
        max-width: 800px;
        margin: 1em auto;
    }
    /* ... (rest of your CSS is fine, keeping it brief here) ... */
</style>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div class="container">
    <div class="panel info">
        <h3 class="lead center">
            <b>Allocation choice 4</b>
        </h3>
    </div>
</div>

<div class="container">
    <div class="block block-radius block-primary">
        <div class="block-content">
            <p>
                Please choose your preferred allocation of points between you and the other person from the list allocations shown in the figure below.
            </p>
            
            <figure class="highcharts-figure">
                <div id="hsgraph"></div>
            </figure>
            
            <div style="text-align: center; margin-top: 20px;">
                <span style="display:inline-block; vertical-align: middle;">My choice is Allocation:</span>
                <span style="display:inline-block; vertical-align: middle; margin-left: 10px;">
                    <!-- The formfield will render as a dropdown now -->
                    {{ formfield player.Epper_allocation_04 label="" }}
                </span>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="center">
        <button class="btn btn-primary btn-large">Next</button>
    </div>
</div>

<!-- script for chart -->
<script>
// Custom template helper
Highcharts.Templating.helpers.abs = value => Math.abs(value);

// Age categories
const categories = ['1', '2', '3', '4', '5', '6', '7'];

Highcharts.chart('hsgraph', {
    chart: { type: 'bar' },
    title: { text: null },
    xAxis: [{
        categories: categories,
        reversed: true,
        labels: { format: 'Allocation # {value}' }, // Fixed format string
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
    }, { // mirror axis on right side
        opposite: true,
        reversed: true,
        categories: categories,
        linkedTo: 0,
        labels: { enabled: false },
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
    }],
    yAxis: {
        title: { text: null },
        labels: { enabled: false },
        gridLineWidth: 0,
    },
    tooltip: {
        // Simple tooltip to avoid syntax errors
        formatter: function () {
            return '<b>Allocation ' + this.x + '</b><br/>' +
                   this.series.name + ': ' + Math.abs(this.y);
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    var color = this.y < 0.0 ? '#8FA2CA' : '#9CAD9F';
                    return '<span style="color: ' + color + '">' + Math.abs(this.y) + ' </span>'; 
                },
                inside: false,
                padding: 10,
                y: -1
            }
        },
        series: { stacking: 'normal' }
    },
    series: [{
        name: 'Points you receive',
        data: {{ C.Epper_alloc_09_me|json }},   // Added |json
        enableMouseTracking: true, // changed to true so tooltip works
        color: '#8FA2CA'
    }, {
        name: 'Points other person receives',
        data: {{ C.Epper_alloc_09_other|json }}, // Added |json
        enableMouseTracking: true,
        color: '#B5C6B8'
    }],
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'top',
        floating: false,
        x: 0,
        y: 0
    },
    credits: { enabled: false },
});
</script>

{{ endblock }}