@extends('layouts.app')
@section('title', 'Indicator Analysis - NGBVD')
@section('content')
<div class="ngbvd-page-header mb-3"><div><span class="ngbvd-kicker">Indicators</span><h2 class="ngbvd-page-title">Indicator Analysis</h2><p class="ngbvd-page-subtitle">Compare incident categories against gender, age and other survivor indicators.</p></div></div>
<div class="row">
    @php
        $cards = [
            ['title'=>'Gender by Incident','key'=>'gender','desc'=>'Incident category distribution by survivor gender'],
            ['title'=>'Religion by Incident','key'=>'religion','desc'=>'Incident category distribution by survivor religion'],
            ['title'=>'Time of Day by Incident','key'=>'time','desc'=>'Incident timing against incident category'],
            ['title'=>'Marital Status by Incident','key'=>'marital','desc'=>'Incident category distribution by marital status'],
        ];
    @endphp
    @foreach($cards as $card)
    <div class="col-md-6 col-xl-3"><div class="card ngbvd-form-card"><div class="card-block"><h5>{{ $card['title'] }}</h5><p class="text-muted">{{ $card['desc'] }}</p><a class="btn ngbvd-btn-primary btn-block" href="{{ route('/indicator/{gender}', encrypt($card['key'])) }}">Open Analysis</a></div></div></div>
    @endforeach
</div>
@if(isset($heatmapData) && count($heatmapData))
<div class="card ngbvd-form-card mt-3"><div class="card-block"><div id="indicatorHeatmap" style="min-height:520px"></div></div></div>
@push('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/heatmap.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/export-data.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){ if(!window.Highcharts){return;} Highcharts.chart('indicatorHeatmap',{ chart:{type:'heatmap'}, title:{text:'Indicator Analysis'}, xAxis:{categories:[@foreach($incidents ?? [] as $incident)'{{ $incident->incident ?? $incident->name ?? '' }}',@endforeach]}, yAxis:{categories:[@foreach(($genderData ?? $religionData ?? $timeData ?? $maritalData ?? []) as $row)'{{ $row->gender ?? $row->religion ?? $row->timeofday ?? $row->maritalstatus ?? '' }}',@endforeach], title:null}, colorAxis:{min:0, minColor:'#ffffff', maxColor:'#1f5eff'}, series:[{name:'Cases', borderWidth:1, data:@json($heatmapData), dataLabels:{enabled:true,color:'#000'}}]}); });
</script>
@endpush
@endif
@endsection