<form id="indexform" class="form-horizontal" method="POST" action="<?= $_SERVER['REQUEST_URI']; ?>">
    @csrf
    <div class="row">
        <div class="col-sm-5">
            <label class="col-md-4 col-form-label text-md-left">From <span style="color: red">*</span></label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="from" name="startdate" required="required"
                       autocomplete="off" placeholder="Start Date" value="<?= $startdate ?>">
            </div>
        </div>
        <div class="col-sm-5">
            <label class="col-md-4 col-form-label text-md-left">To <span style="color: red">*</span></label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="to" name="enddate" required="required"
                       autocomplete="off" placeholder="End Date" value="<?= $enddate ?>">
            </div>
        </div>
        <div class="col-sm-2">
            <label class="col-md-4 col-form-label text-md-left"></label><br><br>
            <button class="btn btn-default"> Review</button>
        </div>
    </div>
</form>

<div id="heatmap-data"></div>

<script type="text/javascript">
    function getPointCategoryName(point, dimension) {
        var series = point.series,
            isY = dimension === 'y',
            axis = series[isY ? 'yAxis' : 'xAxis'];
        return axis.categories[point[isY ? 'y' : 'x']];
    }

    Highcharts.chart('heatmap-data', {
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },
        title: {
            text: 'Incidents vs Gender'
        },
        xAxis: {
            categories: [@foreach($incidents as $incident) '{{ $incident->incident }}', @endforeach]
        },
        yAxis: {
            categories: [@foreach($genderData as $sex) '{{ $sex->gender }}', @endforeach],
            title: null,
            reversed: true
        },
        accessibility: {
            point: {
                descriptionFormatter: function (point) {
                    var ix = point.index + 1,
                        xName = getPointCategoryName(point, 'x'),
                        yName = getPointCategoryName(point, 'y'),
                        val = point.value;
                    return ix + '. ' + xName + '  ' + yName + ', ' + val + '.';
                }
            }
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: '#FF0000'
        },
        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },
        tooltip: {
            formatter: function () {
                return '<b>' + getPointCategoryName(this.point, 'x') + '</b> <br><b>' +
                    this.point.value + '</b> Incident(s) <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
            }
        },
        series: [{
            name: 'Incidents per gender',
            borderWidth: 1,
            data: @json($heatmapData),
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }],
        exporting: {
            enabled: true, // Enable export options
            buttons: {
                contextButton: {
                    menuItems: [
                        'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG', 'separator', 'downloadCSV', 'downloadXLS'
                    ]
                }
            }
        },
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    yAxis: {
                        labels: {
                            formatter: function () {
                                return this.value.charAt(0);
                            }
                        }
                    }
                }
            }]
        }
    });
</script>
