@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Result '])

    @php
        $selectedYear = $selectedYear ?? date('Y');
        // Siapkan label periode
        $periodeLabels = [
            'P1' => "PERIODE 1 (Januari-Juni) $selectedYear",
            'P2' => "PERIODE 2 (Juli-Desember) $selectedYear"
        ];
    @endphp

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card mb-4">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <button class="btn btn-secondary mb-0" onclick="history.back()">
                                <i class="fas fa-circle-left me-1"></i>
                                <span class="font-weight-bold">Kembali</span>
                            </button>
                            <h5 class="mb-0 flex-grow-1 text-center" style="flex:1;">Hasil Survey Pelanggan Catering</h5>
                            <div style="width: 100px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Chart Periode 1 --}}
    @php
        $hasP1 = false;
        $katCount = count($chart_data['labels']);
        $selectedPeriod = request()->input('report-filter-month', '');
        foreach ($chart_data['datasets'] as $ds) {
            if ($katCount > 0 && count($ds['data']) >= $katCount && collect($ds['data'])->slice(0, $katCount)->filter(function($v){ return $v !== null && $v !== 0 && $v !== ''; })->count() > 0) {
                $hasP1 = true;
                break;
            }
        }
    @endphp
    @if($hasP1 && ($selectedPeriod == '' || $selectedPeriod == 'P1'))
    <div class="container-fluid mb-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-sm h-100">
                    <div class="card-header text-center">
                        <h5 class="mb-0" style="font-weight:bold;">HASIL SURVEY PELANGGAN CATERING</h5>
                        <div style="font-size:16px;font-weight:bold;text-decoration:underline;margin-top:5px;">
                            {{ $periodeLabels['P1'] }}
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="comparison-chart-p1" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Chart Periode 2 --}}
    @php
        $hasP2 = false;
        $katCount = count($chart_data['labels']);
        $selectedPeriod = request()->input('report-filter-month', '');
        foreach ($chart_data['datasets'] as $ds) {
            // Jika user pilih P2 saja, data ada di awal (slice 0..katCount)
            if ($selectedPeriod == 'P2' && $katCount > 0 && count($ds['data']) == $katCount) {
                if (collect($ds['data'])->filter(function($v){ return $v !== null && $v !== 0 && $v !== ''; })->count() > 0) {
                    $hasP2 = true;
                    break;
                }
            }
            // Jika user pilih ALL, data P2 ada di slice katCount..2*katCount
            if (($selectedPeriod == '' || $selectedPeriod == 'ALL') && $katCount > 0 && count($ds['data']) >= 2 * $katCount) {
                if (collect($ds['data'])->slice($katCount, $katCount)->filter(function($v){ return $v !== null && $v !== 0 && $v !== ''; })->count() > 0) {
                    $hasP2 = true;
                    break;
                }
            }
        }
    @endphp
    @if($hasP2 && ($selectedPeriod == 'P2' || $selectedPeriod == '' || $selectedPeriod == 'ALL'))
    <div class="container-fluid mb-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-sm h-100">
                    <div class="card-header text-center">
                        <h5 class="mb-0" style="font-weight:bold;">HASIL SURVEY PELANGGAN CATERING</h5>
                        <div style="font-size:16px;font-weight:bold;text-decoration:underline;margin-top:5px;">
                            {{ $periodeLabels['P2'] }}
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="comparison-chart-p2" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ECharts --}}
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chartData = {!! json_encode($chart_data) !!};

            function getPeriodeData(periode) {
                const labels = chartData.labels;
                const katCount = labels.length;
                const selectedPeriod = "{{ request()->input('report-filter-month', '') }}";
                let datasets = [];

                if (!labels || labels.length === 0) {
                    return { labels: [], datasets: [] };
                }

                if (periode === 'P2') {
                    if (selectedPeriod === 'P2') {
                        // Data hanya untuk P2, gunakan data apa adanya (tanpa slice)
                        datasets = (chartData.datasets || []).map(ds => ({
                            name: ds.name || ds.label || '',
                            type: 'bar',
                            data: ds.data && ds.data.length === katCount ? ds.data : [],
                            label: {
                                show: true,
                                position: 'top',
                                fontSize: 12,
                                color: '#333',
                                rotate: 0,
                                formatter: function(params) { return params.value; }
                            },
                            emphasis: { focus: 'series' },
                            barMaxWidth: 32,
                            barGap: '0%',
                            barCategoryGap: '40%'
                        }));
                    } else {
                        // ALL/empty: data P2 ada di tengah (slice katCount, katCount)
                        datasets = (chartData.datasets || []).map(ds => ({
                            name: ds.name || ds.label || '',
                            type: 'bar',
                            data: ds.data ? ds.data.slice(katCount, katCount * 2) : [],
                            label: {
                                show: true,
                                position: 'top',
                                fontSize: 12,
                                color: '#333',
                                rotate: 0,
                                formatter: function(params) { return params.value; }
                            },
                            emphasis: { focus: 'series' },
                            barMaxWidth: 32,
                            barGap: '0%',
                            barCategoryGap: '40%'
                        }));
                    }
                } else {
                    // Periode P1
                    datasets = (chartData.datasets || []).map(ds => ({
                        name: ds.name || ds.label || '',
                        type: 'bar',
                        data: ds.data ? ds.data.slice(0, katCount) : [],
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12,
                            color: '#333',
                            rotate: 0,
                            formatter: function(params) { return params.value; }
                        },
                        emphasis: { focus: 'series' },
                        barMaxWidth: 32,
                        barGap: '0%',
                        barCategoryGap: '40%'
                    }));
                }
                return { labels, datasets };
            }

            // Render chart untuk Periode 1
            (function() {
                const chartDom = document.getElementById('comparison-chart-p1');
                if (!chartDom) return;
                const myChart = echarts.init(chartDom);
                const periodeData = getPeriodeData('P1');

                const option = {
                    title: { show: false },
                    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                    legend: {
                        data: (chartData.datasets || []).map(ds => ds.name || ds.label || ''),
                        top: 10,
                        textStyle: { fontSize: 15 }
                    },
                    grid: { left: 40, right: 20, bottom: 40, top: 60, containLabel: true },
                    xAxis: {
                        type: 'category',
                        data: periodeData.labels,
                        axisLabel: {
                            rotate: 0,
                            fontSize: 12,
                            interval: 0,
                            formatter: function(value) { return value; }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 4,
                        interval: 0.5,
                        axisLabel: { fontSize: 13 }
                    },
                    series: periodeData.datasets,
                    color: [
                        '#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272'
                    ]
                };
                myChart.setOption(option);
                window.addEventListener('resize', function() { myChart.resize(); });
            })();

            // Render chart untuk Periode 2
            (function() {
                const chartDom = document.getElementById('comparison-chart-p2');
                if (!chartDom) return;
                const myChart = echarts.init(chartDom);
                const periodeData = getPeriodeData('P2');

                const option = {
                    title: { show: false },
                    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                    legend: {
                        data: (chartData.datasets || []).map(ds => ds.name || ds.label || ''),
                        top: 10,
                        textStyle: { fontSize: 15 }
                    },
                    grid: { left: 40, right: 20, bottom: 40, top: 60, containLabel: true },
                    xAxis: {
                        type: 'category',
                        data: periodeData.labels,
                        axisLabel: {
                            rotate: 0,
                            fontSize: 12,
                            interval: 0,
                            formatter: function(value) { return value; }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 4,
                        interval: 0.5,
                        axisLabel: { fontSize: 13 }
                    },
                    series: periodeData.datasets,
                    color: [
                        '#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272'
                    ]
                };
                myChart.setOption(option);
                window.addEventListener('resize', function() { myChart.resize(); });
            })();
        });
    </script>
@endsection