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

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

    @php
        $selectedPeriodVar = $selectedPeriod ?? '';
    @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;">Result Report Catering</h5>
                            <div style="width: 100px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Card per Katering --}}
    <div class="container-fluid">
        <div class="row">
            @if (!empty($comparison_chart))
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card shadow-sm">
                            <div class="card-header">
                                <h6 class="mb-0">Perbandingan Grand Total Semua Katering</h6>
                            </div>
                            <div class="card-body">
                                <div id="comparisonChart" style="width: 100%; height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            @foreach ($katerings as $katering)
                @php
                    // Tentukan periode yang akan ditampilkan di tabel
                    $periodeKeys = [];
                    if (!empty($selectedPeriod)) {
                        $periodeKeys[] = $selectedPeriod;
                    } else {
                        $periodeKeys = ['P1', 'P2'];
                    }
                @endphp
                @if (empty($selectedKatering) || $selectedKatering == $katering['id_catering'])
                    <div class="col-md-6 mb-4">
                        <div class="card shadow-sm h-100">
                            <div class="card-header">
                                <h6 class="mb-0">{{ $katering['nama'] }}</h6>
                            </div>
                            <div class="card-body">
                                <div id="chart-katering-{{ $katering['id_catering'] }}" style="width: 100%; height: 300px;"></div>
                                {{-- Tabel Rekap --}}
                                <div class="card mt-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">Rekap Per Periode - {{ $katering['nama'] }} (Th.
                                            {{ $katering['tahun'] }})</h6>
                                    </div>
                                    <div class="card-body p-2">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-hover align-middle mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th class="text-center">Kategori</th>
                                                        @foreach ($periodeKeys as $periodeKey)
                                                            <th class="text-center">
                                                                {{ $periodeKey }}<br>
                                                                <span class="text-secondary small">
                                                                    @if ($periodeKey == 'P1')
                                                                        Periode 1 (Jan - Jun)
                                                                    @else
                                                                        Periode 2 (Jul - Des)
                                                                    @endif
                                                                </span>
                                                            </th>
                                                        @endforeach
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $kategoriList = [
                                                            'sidak' => 'Sidak Average',
                                                            'temuan' => 'Temuan',
                                                            'kepuasan' => 'Kepuasan Catering',
                                                            'mcu' => 'MCU',
                                                        ];
                                                    @endphp

                                                    @foreach ($kategoriList as $key => $label)
                                                        <tr>
                                                            <td class="text-center">
                                                                <strong>{{ $label }}</strong><br>
                                                                <span
                                                                    class="text-secondary small">{{ $desc[$key] ?? '' }}</span>
                                                            </td>
                                                            @foreach ($periodeKeys as $periodeKey)
                                                                @php
                                                                    $matchingRow = collect($periode)->first(function (
                                                                        $item,
                                                                    ) use ($katering, $periodeKey) {
                                                                        return $item['id_catering'] ==
                                                                            $katering['id_catering'] &&
                                                                            $item['periode'] == $periodeKey;
                                                                    });
                                                                @endphp
                                                                <td class="text-center">
                                                                    @if ($key === 'mcu')
                                                                        @if (!empty($matchingRow[$key]))
                                                                            <i class="fas fa-check-circle text-success"
                                                                                style="font-size: 1.3em;"></i>
                                                                        @else
                                                                            <i class="far fa-circle text-secondary"
                                                                                style="font-size: 1.3em;"></i>
                                                                        @endif
                                                                    @else
                                                                        {{ isset($matchingRow[$key]) ? $matchingRow[$key] : 0 }}
                                                                    @endif
                                                                </td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach

                                                    {{-- Total --}}
                                                    <tr style="background: #f8fafc; font-weight: bold;">
                                                        <td class="text-center">Total</td>
                                                        @foreach ($periodeKeys as $periodeKey)
                                                            @php
                                                                $matchingRow = collect($periode)->first(function (
                                                                    $item,
                                                                ) use ($katering, $periodeKey) {
                                                                    return $item['id_catering'] ==
                                                                        $katering['id_catering'] &&
                                                                        $item['periode'] == $periodeKey;
                                                                });
                                                            @endphp
                                                            <td class="text-center">
                                                                {{ ($matchingRow['sidak'] ?? 0) + ($matchingRow['temuan'] ?? 0) + ($matchingRow['kepuasan'] ?? 0) + ($matchingRow['mcu'] ?? 0) }}
                                                            </td>
                                                        @endforeach
                                                    </tr>

                                                    {{-- Grand Total --}}
                                                    <tr style="background: #e2e8f0; font-weight: bold;">
                                                        <td class="text-center">Grand Total</td>
                                                        <td class="text-center" colspan="{{ count($periodeKeys) }}">
                                                            {{ collect($periode)->reduce(function ($carry, $row) use ($katering, $periodeKeys) {
                                                                if ($row['id_catering'] == $katering['id_catering'] && in_array($row['periode'], $periodeKeys)) {
                                                                    return $carry + ($row['sidak'] ?? 0) + ($row['temuan'] ?? 0) + ($row['kepuasan'] ?? 0) + ($row['mcu'] ?? 0);
                                                                }
                                                                return $carry;
                                                            }, 0) }}
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                {{-- End Tabel --}}
                            </div>
                        </div>
                    </div>
                    @if (!empty($selectedKatering))
                        @break
                    @endif
                @endif
            @endforeach
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Chart per katering
            @foreach ($chart_data as $chart)
                var chartKatering{{ $chart['id_catering'] }} = echarts.init(document.getElementById('chart-katering-{{ $chart['id_catering'] }}'));
                
                var optionKatering{{ $chart['id_catering'] }} = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Grand Total'],
                        axisLabel: {
                            fontSize: 13
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 5,
                        axisLabel: {
                            fontSize: 13
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e9ecef'
                            }
                        }
                    },
                    series: [{
                        name: '{{ $chart['nama'] }}',
                        type: 'bar',
                        data: [{{ $chart['grand_total'] }}],
                        itemStyle: {
                            color: 'rgba(54, 162, 235, 0.7)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 2,
                            borderRadius: 6
                        },
                        barMaxWidth: 40,
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12,
                            fontWeight: 'bold',
                            distance: 6
                        }
                    }]
                };
                
                chartKatering{{ $chart['id_catering'] }}.setOption(optionKatering{{ $chart['id_catering'] }});
                
                // Responsive resize
                window.addEventListener('resize', function() {
                    chartKatering{{ $chart['id_catering'] }}.resize();
                });
            @endforeach
        });
    </script>

    <script>
        @if (!empty($comparison_chart))
            document.addEventListener('DOMContentLoaded', function() {
                var comparisonChart = echarts.init(document.getElementById('comparisonChart'));
                
                var optionComparison = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['PERIODE 1', 'PERIODE 2'],
                        top: 10
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: {!! json_encode(collect($comparison_chart)->pluck('nama')) !!},
                        axisLabel: {
                            fontSize: 13,
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 5,
                        axisLabel: {
                            fontSize: 13
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e9ecef'
                            }
                        }
                    },
                    series: [
                        {
                            name: 'PERIODE 1',
                            type: 'bar',
                            data: {!! json_encode(collect($comparison_chart)->pluck('P1')) !!},
                            itemStyle: {
                                color: 'rgba(102, 102, 255, 0.7)',
                                borderColor: 'rgba(102, 102, 255, 1)',
                                borderWidth: 2,
                                borderRadius: 6
                            },
                            barMaxWidth: 40,
                            label: {
                                show: true,
                                position: 'top',
                                fontSize: 12,
                                fontWeight: 'bold',
                                distance: 6
                            }
                        },
                        {
                            name: 'PERIODE 2',
                            type: 'bar',
                            data: {!! json_encode(collect($comparison_chart)->pluck('P2')) !!},
                            itemStyle: {
                                color: 'rgba(255, 99, 132, 0.7)',
                                borderColor: 'rgba(255, 99, 132, 1)',
                                borderWidth: 2,
                                borderRadius: 6
                            },
                            barMaxWidth: 40,
                            label: {
                                show: true,
                                position: 'top',
                                fontSize: 12,
                                fontWeight: 'bold',
                                distance: 6
                            }
                        }
                    ]
                };
                
                comparisonChart.setOption(optionComparison);
                
                // Responsive resize
                window.addEventListener('resize', function() {
                    comparisonChart.resize();
                });
            });
        @endif
    </script>
@endsection