{{ block title }}
Practice Task
{{ endblock }}

{{ block content }}
<style>
    /* Slider styles */
    input[type="range"]::-webkit-slider-runnable-track {
        background: #ccc;
    }
    input[type="range"]::-webkit-slider-thumb {
        background: #666;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/modules/heatmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/modules/exporting.js"></script>

<!-- Slider -->
<div style="display: flex; align-items: center; gap: 10px;">
    <span>No smoothing on Your Initial Submission</span>
    <input
        type="range"
        id="degreeSlider"
        max="21"
        min="0"
        value="21"
        oninput="updatePlot(this.value)"
        style="direction: rtl; flex: 1;"
    >
    <span>Max smoothing on Your Initial Submission</span>
</div>
<span id="degreeValue" style="display: none;"></span>

<input type="hidden" name="selected_degree" id="selected_degree" value="21">

<!-- Buttons -->
<p>
<form method="post" style="margin-top: -20px;">
    <input type="hidden" name="advance_dataset" id="advance_dataset">
    <button type="submit" class="btn btn-primary"
        onclick="document.getElementById('advance_dataset').value = '0';">Go back and create a new Initial Submission</button>
    <button type="submit" class="btn btn-primary"
        onclick="document.getElementById('advance_dataset').value = '1';">Submit your current Best Guess</button>
</form>
</p>

<p><button type="button" class="btn btn-secondary" onclick="toggleHeatmap()">Show Possible Payments</button></p>

<!-- Overlay container -->
<div style="position: relative; width: 900px; height: 600px; margin-top: 1px;">
    <!-- Bottom: colored heatmap -->
    <div id="heatmap-color"
         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: none;"></div>

    <!-- Middle: Chart.js scatter -->
    <canvas id="polynomialChart"
         style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>

    <!-- Top: transparent heatmap for tooltips -->
    <div id="heatmap-tooltips"
         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; display: none;"></div>
</div>

<script>
    // Make Chart.js canvas fully transparent (removes gray tint)
    const transparentBackgroundPlugin = {
        id: 'transparentBackground',
        beforeDraw: (chart, args, options) => {
            const ctx = chart.ctx;
            ctx.save();
            ctx.globalCompositeOperation = 'destination-over';
            ctx.fillStyle = 'rgba(0, 0, 0, 0)';
            ctx.fillRect(0, 0, chart.width, chart.height);
            ctx.restore();
        }
    };

    var all_coefficients = JSON.parse('{{ all_coefficients_json|safe }}');
    var min_x = {{ min_x }};
    var max_x = {{ max_x }};
    var min_y = {{ min_y }};
    var max_y = {{ max_y }};

    var data_list_raw = {{ data_list|safe }};
    var player_coordinates_raw = {{ player_coordinates|safe }};

    var data_list = data_list_raw.map(point => ({ x: point[0], y: point[1] }));
    var playerCoordinates = player_coordinates_raw.map(point => ({ x: point[0], y: point[1] }));

    function evaluatePolynomial(coeffs, x) {
        return coeffs.reduce((sum, coeff, index) => sum + coeff * Math.pow(x, coeffs.length - index - 1), 0);
    }

    function generateData(degree) {
        let data = [];
        if (degree == 21) {
            data = playerCoordinates;
        }
        else {
            let coeffs = all_coefficients[degree] || [];
            for (let x = min_x; x <= max_x; x += 0.01) {
                let yval = evaluatePolynomial(coeffs, x);
                if (yval < min_y) yval = min_y;
                else if (yval > max_y) yval = max_y;
                data.push({ x: x, y: yval });
            }
        }
        return data;
    }

    // Create Chart.js chart
    var ctx = document.getElementById("polynomialChart").getContext("2d");
    var chart = new Chart(ctx, {
        type: "scatter",
        data: {
            datasets: [
                {
                    label: "Your Best Guess",
                    data: generateData(21),
                    borderColor: "#00BFFF",
                    showLine: true,
                    fill: false,
                    pointRadius: 0
                },
                {
                    label: "Your Initial Submission",
                    data: playerCoordinates,
                    borderColor: "black",
                    borderDash: [5, 5],
                    showLine: true,
                    fill: false,
                    pointRadius: 0
                },
                {
                    label: "Data",
                    data: data_list,
                    borderColor: "#E69F00",
                    pointBackgroundColor: "rgba(230, 159, 0, 0.5)",
                    pointRadius: 4,
                    showLine: false,
                    fill: false
                }
            ]
        },
        plugins: [transparentBackgroundPlugin],

        options: {
            plugins: { tooltip: { enabled: false } },
            scales: {
                x: {
                    type: "linear",
                    min: min_x,
                    max: max_x
                },
                y: {
                    type: "linear",
                    min: min_y,
                    max: max_y
                }
            }
        }
    });

    function updatePlot(degree) {
        document.getElementById("degreeValue").textContent = degree;
        chart.data.datasets[0].data = generateData(degree);
        chart.update();

        document.getElementById("selected_degree").value = degree;

        // Hide both heatmap layers if visible
        document.getElementById("heatmap-color").style.display = "none";
        document.getElementById("heatmap-tooltips").style.display = "none";
    }

    const heatmapDataAll = {{ heatmap_data|safe }};

    function toggleHeatmap() {
        const selectedDegree = document.getElementById("selected_degree").value;
        const rawData = heatmapDataAll[selectedDegree];

        const isHidden = document.getElementById("heatmap-color").style.display === "none";

        if (isHidden) {
            document.getElementById("heatmap-color").style.display = "block";
            document.getElementById("heatmap-tooltips").style.display = "block";

            const data = rawData.map(([xy, value]) => {
                const [x, y] = xy;
                return { x: x, y: y, value: value };
            });

            const xVals = [...new Set(data.map(d => d.x))];
            const yVals = [...new Set(data.map(d => d.y))];
            const grid = data.map(d => [
                xVals.indexOf(d.x),
                yVals.indexOf(d.y),
                d.value
            ]);

            // === BOTTOM COLORED HEATMAP ===
            Highcharts.chart('heatmap-color', {
                chart: {
                    type: 'heatmap',
                    backgroundColor: 'transparent',
                    width: 890,
                    height: 422,
                    margin: [23, 0, 0, 27], // top, right, bottom, left
                    spacing: [0, 0, 0, 0],
                    plotBorderWidth: 0
                },
                exporting: { enabled: false },
                title: { text: null },
                xAxis: { visible: false, min: 0, max: xVals.length - 1 },
                yAxis: { visible: false, min: 0, max: yVals.length - 1 },
                colorAxis: {
                    min: 0,
                    max: 25,
                    stops: [
                        [0, '#000000'],
                        [1, '#FFFFFF']
                    ]
                },
                tooltip: { enabled: false }, // no tooltips on bottom layer
                legend: { enabled: false },
                series: [{
                    borderWidth: 0,
                    data: grid
                }],
                credits: { enabled: false }
            });

            // === TOP TRANSPARENT TOOLTIP HEATMAP ===
            Highcharts.chart('heatmap-tooltips', {
                chart: {
                    type: 'heatmap',
                    backgroundColor: 'transparent',
                    width: 890,
                    height: 422,
                    margin: [23, 0, 0, 27], // top, right, bottom, left
                    spacing: [0, 0, 0, 0],
                    plotBorderWidth: 0
                },
                exporting: { enabled: false },
                title: { text: null },
                xAxis: { visible: false, min: 0, max: xVals.length - 1 },
                yAxis: { visible: false, min: 0, max: yVals.length - 1 },
                colorAxis: { visible: false }, // no visible color
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        const xReal = xVals[this.point.x];
                        const yReal = yVals[this.point.y];
                        return `x: ${xReal.toFixed(1)}, y: ${yReal.toFixed(1)}<br>Payment: ${this.point.value.toFixed(2)}`;
                    }
                },
                legend: { enabled: false },
                series: [{
                    borderWidth: 0,
                    data: grid,
                    opacity: 0 // invisible but interactive
                }],
                credits: { enabled: false }
            });

        } else {
            document.getElementById("heatmap-color").style.display = "none";
            document.getElementById("heatmap-tooltips").style.display = "none";
        }

    }
</script>


{{ endblock }}