@extends('layouts.template_admin')

@section('title', 'Dashboard | Mutu RSAB Harapan Kita')
@section('custom_css')
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="card-title fs-4 fw-bold">Dashboard Analisis</div>
        <div class="mt-5">
            <div class="d-flex gap-2 align-items-end">
                <div class="form-group w-75">
                    <label for="select_unit_kerja" class="form-label">Unit Kerja</label>
                    <select id="select_unit_kerja" class="select2 form-select" multiple>
                        @foreach ($list_unit_kerja as $item)
                            <option value="{{ $item }}">{{ $item }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-100">
                    <div class="btn btn-primary" id="search_button">
                        Cari
                    </div>
                </div>
            </div>
            <div class="mt-3" id="body_chart" style="max-height: 80vh; overflow-y: auto;">
                
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom_js')
<script>
    $(document).ready(function(){
        $(".select2").select2();
        $('#search_button').click(function(){
            get_data_analisis();
        })
    });

    function get_data_analisis() {
        $('#body_chart').html(`<div class="p-10 d-flex justify-content-center">
                    <div>
                        <!-- Fold -->
                        <div class="sk-fold">
                        <div class="sk-fold-cube"></div>
                        <div class="sk-fold-cube"></div>
                        <div class="sk-fold-cube"></div>
                        <div class="sk-fold-cube"></div>
                        </div>
                    </div>
                </div>`);
        $.ajax({
            url: "{{ url('/admin/get_data_dashboard_jawaban') }}",
            type: "POST",
            data: {
                unit_kerja: $('#select_unit_kerja').val(),
                _token: "{{ csrf_token() }}"
            },
            success: function(res) {
                $('#body_chart').html("");
                res.data.forEach((element, index) => {
                    const id = `chart_analisis_${index}`;
                    $('#body_chart').append(`<div id="${id}" class="my-3"></div>`);
                    generateChart(element.jawaban, id, element.soal);
                });
            }
        });
    }

    function generateChart(data, id, soal) {
        Highcharts.chart(id, {
            chart: { type: 'column' },
            title: { text: soal },
            xAxis: {
                categories: [soal]   // cuma 1 kategori (soal)
            },
            yAxis: {
                min: 0,
                max: 100
            },
            credits: { enabled: false },
            tooltip: {
                useHTML: true,
                formatter: function() {
                    console.log(this.point);
                    
                    const totalUser = this.point.total_user ?? 0;
                    const totalSemua = this.point.total_semua ?? 0;
                    return `
                        <b>${this.series.name}</b><br>
                        Nilai: ${this.y}%<br>
                        Total Jawaban: ${totalUser}<br>
                        Total Semua: ${totalSemua}
                    `;
                }
            },
            series: data.map(j => ({
                name: j.name,
                type: 'column',
                data: [{y: j.y, total_user: j.value, total_semua: j.total}]
            })),
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.y + '%';   // ⬅️ Tampilkan angka + %
                }
            }
        });

    }

</script>
@endsection