@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <!-- Tombol Kembali di Kiri -->
                            <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>
                            <div style="width: 100px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">


                            <h5 class="mb-0"> Result {{ $title_menu }}</h5>
                            {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}

                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">

                            <div class="table-responsive">
                                <table class="table display table-hover" id="tabel-dailya">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">IT Name</th>
                                            <th scope="col">Date</th>
                                            <th scope="col">Keterangan</th>
                                            <th scope="col">Pengerjaan</th>
                                            <th scope="col">Kategori</th>
                                            <th scope="col">User</th>
                                            <th scope="col">Departement</th>
                                            <th scope="col">Dampak</th>
                                            <th scope="col">Urgency</th>
                                            <th scope="col">Start</th>
                                            <th scope="col">Finish</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Poin</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($reportK as $d)
                                            <tr>
                                                <td>{{ $vcount++ }}</td>
                                                <td>{{ $d->it_name }}</td>

                                                <td>{{ $d->date }}</td>
                                                <td>{{ $d->ket }}</td>
                                                <td>{{ $d->pengerjaan }}</td>
                                                <td>{{ $d->kat_name }}</td>
                                                <td>{{ $d->user_name }}</td>
                                                <td>{{ $d->dept_name }}</td>
                                                <td>{{ $d->dampak_name }}</td>
                                                <td>{{ $d->urgency_name }}</td>
                                                <td>{{ $d->start }}</td>
                                                <td>{{ $d->finish }}</td>
                                                <td>{{ $d->status_name }}</td>
                                                <td style="text-align: right">{{ $d->poin }}</td>
                                            </tr>
                                        @endforeach
                                        {{-- ✅ Pastikan total poin ada dalam baris yang sesuai --}}

                                    </tbody>


                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Tabel Sum Of Point --}}
    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Sum of Poin</h5>
                            {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseSOP" role="button"
                                aria-expanded="false" aria-controls="collapseSOP">
                                <i class="fa fa-angle-down me-1"></i>
                            </a>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="collapse show" id="collapseSOP">
                            <div class="row px-4 py-2">
                                <div class="table-responsive">
                                    <div class="table-responsive">
                                        <table class="table display table-hover table-bordered" id="tabel-sop">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th rowspan="2" class="align-middle text-center">Tahun</th>
                                                    <th rowspan="2" class="align-middle text-center">Bulan</th>
                                                    <th colspan="{{ count($kategori) }}" class="text-center">Kategori</th>
                                                    <th rowspan="2" class="align-middle text-center">Grand Total</th>
                                                </tr>
                                                <tr>
                                                    @foreach ($kategori as $k)
                                                        <th class="text-center">{{ $k->name }}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>


                                            @php
                                                $rowspanCounts = [];
                                                $totalPerKategori = [];
                                                $groupedRows = [];

                                                // Kelompokkan data berdasarkan tahun untuk rowspan
                                                foreach ($sop_kategori as $row) {
                                                    $year = $row['year'];
                                                    $rowspanCounts[$year] = ($rowspanCounts[$year] ?? 0) + 1;
                                                    $groupedRows[$year][] = $row;
                                                }

                                                $currentYear = now()->year;

                                                $yearColors = [
                                                    '#f0f9ff', // biru muda
                                                    '#fff7e6', // oranye muda
                                                    '#ffe9e6', // peach pastel
                                                    '#fef6ff', // ungu pastel
                                                    '#fff0f6', // pink pastel
                                                ];

                                                $colorMap = [];
                                                $i = 0;

                                                foreach ($groupedRows as $year => $rows) {
                                                    $colorMap[$year] =
                                                        $year == $currentYear
                                                            ? '#d1fae5' // hijau muda untuk tahun sekarang
                                                            : $yearColors[$i++ % count($yearColors)];
                                                }

                                            @endphp

                                            {{-- Style untuk pewarnaan background per tahun --}}
                                            @php
                                                $dynamicStyle = '';
                                                foreach ($colorMap as $year => $color) {
                                                    $dynamicStyle .= ".bg-tahun-{$year} td { background-color: {$color} !important; }\n";
                                                }
                                            @endphp

                                            <style>
                                                {!! $dynamicStyle !!}
                                            </style>

                                            @foreach ($groupedRows as $year => $rows)
                                                <tbody id="group-{{ $year }}"
                                                    class="bg-tahun-{{ $year }}">

                                                    @php
                                                        $rowspan = count($rows) + 1; // +1 untuk baris total
                                                        $yearGrandTotal = 0;

                                                        // hitung total poin per tahun
                                                        foreach ($rows as $r) {
                                                            foreach ($kategori as $k) {
                                                                $yearGrandTotal += $r['items'][$k->value] ?? 0;
                                                            }
                                                        }
                                                    @endphp

                                                    @foreach ($rows as $index => $row)
                                                        <tr class="{{ $index !== 0 ? 'row-detail-' . $year : '' }}">
                                                            @if ($index === 0)
                                                                <td rowspan="{{ $rowspan }}"
                                                                    class="align-middle text-center">
                                                                    <div
                                                                        class="d-flex align-items-center justify-content-center gap-2">
                                                                        <i class="fas fa-minus-circle text-secondary"
                                                                            style="cursor: pointer; font-size: 14px;"
                                                                            onclick="toggleYear({{ $year }}, this)"
                                                                            title="Minimize/Maximize"></i>
                                                                        <span
                                                                            style="font-size: 14px;">{{ $year }}</span>
                                                                    </div>
                                                                </td>
                                                            @endif

                                                            <td class="text-center">
                                                                {{ \Carbon\Carbon::create()->month($row['month'])->translatedFormat('F') }}
                                                            </td>

                                                            @foreach ($kategori as $k)
                                                                @php
                                                                    $val = $row['items'][$k->value] ?? 0;
                                                                    $totalPerKategori[$k->value] =
                                                                        ($totalPerKategori[$k->value] ?? 0) + $val;
                                                                @endphp
                                                                <td class="text-end">{{ number_format($val, 1) }}</td>
                                                            @endforeach

                                                            @if ($index === 0)
                                                                <td rowspan="{{ $rowspan }}"
                                                                    class="align-middle text-center">
                                                                    {{ number_format($yearGrandTotal, 1) }}
                                                                </td>
                                                            @endif
                                                        </tr>
                                                    @endforeach


                                                    <tr
                                                        class="bg-light fw-bold border-top border-2 border-secondary-subtle">

                                                        <td class="text-end" style="border: 1px solid #dadada;">
                                                            Total {{ $year }}
                                                            :
                                                        </td>
                                                        @foreach ($kategori as $k)
                                                            @php
                                                                $totalTahunPerKategori = 0;
                                                                foreach ($rows as $r) {
                                                                    $totalTahunPerKategori +=
                                                                        $r['items'][$k->value] ?? 0;
                                                                }
                                                            @endphp
                                                            <td class="text-end" style="border: 1px solid #dadada;">
                                                                {{ number_format($totalTahunPerKategori, 1) }}</td>
                                                        @endforeach

                                                    </tr>

                                                </tbody>
                                            @endforeach



                                            <tfoot>
                                                <tr>
                                                    <td colspan="2" class="text-end fw-bold">Grand Total</td>
                                                    @foreach ($kategori as $k)
                                                        <td class="text-end fw-bold">
                                                            {{ number_format($totalPerKategori[$k->value] ?? 0, 1) }}
                                                        </td>
                                                    @endforeach
                                                    <td class="text-center fw-bold">
                                                        {{ number_format(array_sum($totalPerKategori), 1) }}</td>
                                                </tr>
                                            </tfoot>
                                        </table>


                                    </div>

                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Planning --}}
    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Chart Kategori per Bulan</h5>

                        </div>
                        <hr class="horizontal dark mt-0">
                        <div id="chart-kat-month" style="height: 375px;">

                        </div>
                        <br>
                        <hr class="horizontal dark mt-0">
                        <br>
                        <div id="chart-kat-month-line" style="height: 375px;">

                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Chart Kategori per Tahun</h5>

                        </div>
                        <hr class="horizontal dark mt-0">
                        <div id="chart-kat-year" style="height: 375px;">

                        </div>
                        <br>
                        <hr class="horizontal dark mt-0">
                        <br>
                        <div id="chart-kat-year-line" style="height: 375px;">

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function decodeHtmlEntities(str) {
            var txt = document.createElement("textarea");
            txt.innerHTML = str;
            return txt.value;
        }

        $(document).ready(function() {
            $('#tabel-dailya').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false
            });


            renderchartmonth();
            renderchartmonthline();
            renderchartyear();
            renderchartyearLine();

            const sop_year = @json($sop_year);
            // console.log('sop_year', sop_year);
        });


        function renderchartmonth() {
            const sop_month = @json($sop_kategori);
            const kategoriLabelMap = @json($kategori_labels);

            const warnaKategori = {
                /* ... punyamu tadi ... */ };

            const xAxis = [];
            const kategoriSet = new Set();
            const kategoriList = [];

            // 🔹 0. Urutkan key berdasarkan year & month (numerik)
            const sortedKeys = Object.keys(sop_month).sort((a, b) => {
                // asumsi key = "YYYY-M" atau "YYYY-MM"
                const [ya, ma] = a.split('-').map(Number);
                const [yb, mb] = b.split('-').map(Number);

                if (ya !== yb) return ya - yb;
                return ma - mb;
            });

            // 1. Ambil semua bulan dan kategori unik
            sortedKeys.forEach(key => {
                const row = sop_month[key];
                xAxis.push(`${row.year}-${String(row.month).padStart(2, '0')}`);

                Object.keys(row.items).forEach(kat => {
                    if (!kategoriSet.has(kat)) {
                        kategoriSet.add(kat);
                        kategoriList.push(kat);
                    }
                });
            });

            // 2. Buat series per kategori
            const seriesMap = {};
            kategoriList.forEach(kat => {
                seriesMap[kat] = {
                    name: kategoriLabelMap[kat] || kat,
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: warnaKategori[kat] || undefined
                    },
                    data: []
                };
            });

            // 3. Isi data per kategori per bulan (pakai sortedKeys juga)
            sortedKeys.forEach(key => {
                const row = sop_month[key];
                kategoriList.forEach(kat => {
                    const val = row.items[kat] || 0;
                    seriesMap[kat].data.push(parseFloat(val.toFixed(2)));
                });
            });

            // 3b. Hitung total poin dan urutkan kategori berdasarkan total tertinggi
            const totalPerKategori = {};
            kategoriList.forEach(kat => {
                totalPerKategori[kat] = seriesMap[kat].data.reduce((sum, val) => sum + val, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // 4. Susun ulang legend & series berdasarkan urutan baru
            const series = kategoriList.map(kat => seriesMap[kat]);
            const legendData = kategoriList.map(kat => kategoriLabelMap[kat] || kat);

            const chartDom = document.getElementById('chart-kat-month');
            const myChart = echarts.init(chartDom);

            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }


        function renderchartmonthline() {
            const rawData = Object.values(@json($sop_kat_echarts)); // Flat array
            const kategoriLabelMap = @json($kategori_labels);

            // Warna custom kategori (user-defined)
            const warnaKategori = {
                'APK': '#1E90FF', // Aplikasi - Biru tua
                'TSIX': '#87CEFA', // TSI - Biru muda
                'WEBX': '#FF69B4', // Web - Pink
                'SNS': '#40E0D0', // SNS - Tosca
                'SERV': '#FFB6C1', // Server - Merah muda
                'SAPX': '#32CD32', // SAP - Hijau
                'OTHE': '#FFD700', // Other - Kuning
                'JAVA': '#FF6347', // Javas - Merah
                'APPL': '#00CED1',
                'CCTV': '#FFA500',
                'HARD': '#7FFFD4',
                'MAGA': '#00FA9A',
                'NETW': '#ADD8E6',
                'SOFT': '#F08080',
                'VIRUS': '#FF8C69',
                'WINDOWS': '#00BFFF'
            };

            // Ambil kategori unik dan xAxis
            const kategoriSet = new Set();
            const bulanSet = new Set();
            rawData.forEach(row => {
                kategoriSet.add(row.kategori);
                bulanSet.add(row.bulan);
            });
            const kategoriList = Array.from(kategoriSet);
            const bulanList = Array.from(bulanSet).sort();

            // Buat series per kategori
            const seriesMap = {};
            kategoriList.forEach(kat => {
                seriesMap[kat] = {
                    name: kategoriLabelMap[kat] || kat,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: warnaKategori[kat] || undefined
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                };
            });

            // Isi data per kategori (0 jika kosong)
            bulanList.forEach(bulan => {
                kategoriList.forEach(kat => {
                    const entry = rawData.find(r => r.bulan === bulan && r.kategori === kat);
                    seriesMap[kat].data.push(entry ? parseFloat(entry.poin.toFixed(2)) : 0);
                });
            });
            // 3b. Hitung total poin dan urutkan kategori berdasarkan total tertinggi
            const totalPerKategori = {};
            kategoriList.forEach(kat => {
                totalPerKategori[kat] = seriesMap[kat].data.reduce((sum, val) => sum + val, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // 4. Susun ulang legend & series berdasarkan urutan baru
            const series = kategoriList.map(kat => seriesMap[kat]);
            const legendData = kategoriList.map(kat => kategoriLabelMap[kat] || kat);


            // Render chart
            const chartDom = document.getElementById('chart-kat-month-line');
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: bulanList
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }

        function renderchartyear() {
            const sop_year = @json($sop_year);
            const kategoriLabelMap = @json($kategori_labels);


            // Warna tetap per kategori
            const warnaKategori = {
                'APK': '#1E90FF', // Aplikasi - Biru tua
                'TSIX': '#87CEFA', // TSI - Biru muda
                'WEBX': '#FF69B4', // Web - Pink
                'SNS': '#40E0D0', // SNS - Tosca
                'SERV': '#FFB6C1', // Server - Merah muda
                'SAPX': '#32CD32', // SAP - Hijau
                'OTHE': '#FFD700', // Other - Kuning
                'JAVA': '#FF6347', // Javas - Merah
                'APPL': '#00CED1', // Aqua marine
                'CCTV': '#FFA500', // Oranye
                'HARD': '#7FFFD4', // Aquamarine terang
                'MAGA': '#00FA9A', // Spring green
                'NETW': '#ADD8E6', // Light blue
                'SOFT': '#F08080', // Light coral
                'VIRUS': '#FF8C69', // Salmon
                'WINDOWS': '#00BFFF' // Deep sky blue
            };


            const xAxis = [];
            const kategoriSet = new Set();
            const kategoriList = [];

            // 1. Ambil semua bulan dan kategori unik
            Object.keys(sop_year).sort().forEach(key => {
                const row = sop_year[key];
                xAxis.push(`${key}`); // karena key sudah tahun
                Object.keys(row).forEach(kat => {
                    if (!kategoriSet.has(kat)) {
                        kategoriSet.add(kat);
                        kategoriList.push(kat);
                    }
                });
            });


            // 2. Buat series per kategori
            const seriesMap = {};
            kategoriList.forEach(kat => {
                seriesMap[kat] = {
                    name: kategoriLabelMap[kat] || kat,
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: warnaKategori[kat] || undefined
                    },
                    data: []
                };
            });

            // 3. Isi data per kategori per bulan
            Object.keys(sop_year).sort().forEach(key => {
                const row = sop_year[key];
                kategoriList.forEach(kat => {
                    const val = row[kat] || 0;
                    seriesMap[kat].data.push(parseFloat(val.toFixed(2)));
                });
            });
            // 3b. Hitung total poin dan urutkan kategori berdasarkan total tertinggi
            const totalPerKategori = {};
            kategoriList.forEach(kat => {
                totalPerKategori[kat] = seriesMap[kat].data.reduce((sum, val) => sum + val, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // 4. Susun ulang legend & series berdasarkan urutan baru
            const series = kategoriList.map(kat => seriesMap[kat]);
            const legendData = kategoriList.map(kat => kategoriLabelMap[kat] || kat);


            // 4. Render chart
            const chartDom = document.getElementById('chart-kat-year');
            const myChart = echarts.init(chartDom);

            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }

        function renderchartyearLine() {
            const rawData = Object.values(@json($sop_kat_year)); // Flat array
            const kategoriLabelMap = @json($kategori_labels);

            // Warna custom kategori (user-defined)
            const warnaKategori = {
                'APK': '#1E90FF', // Aplikasi - Biru tua
                'TSIX': '#87CEFA', // TSI - Biru muda
                'WEBX': '#FF69B4', // Web - Pink
                'SNS': '#40E0D0', // SNS - Tosca
                'SERV': '#FFB6C1', // Server - Merah muda
                'SAPX': '#32CD32', // SAP - Hijau
                'OTHE': '#FFD700', // Other - Kuning
                'JAVA': '#FF6347', // Javas - Merah
                'APPL': '#00CED1',
                'CCTV': '#FFA500',
                'HARD': '#7FFFD4',
                'MAGA': '#00FA9A',
                'NETW': '#ADD8E6',
                'SOFT': '#F08080',
                'VIRUS': '#FF8C69',
                'WINDOWS': '#00BFFF'
            };

            // Ambil kategori unik dan xAxis
            const kategoriSet = new Set();
            const tahunSet = new Set();
            rawData.forEach(row => {
                kategoriSet.add(row.kategori);
                tahunSet.add(row.tahun);
            });
            const tahunList = Array.from(tahunSet).sort();

            const kategoriList = Array.from(kategoriSet);


            // Buat series per kategori
            const seriesMap = {};
            kategoriList.forEach(kat => {
                seriesMap[kat] = {
                    name: kategoriLabelMap[kat] || kat,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: warnaKategori[kat] || undefined
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                };
            });

            // Isi data per kategori (0 jika kosong)
            tahunList.forEach(tahun => {
                kategoriList.forEach(kat => {
                    const entry = rawData.find(r => r.tahun == tahun && r.kategori === kat);
                    seriesMap[kat].data.push(entry ? parseFloat(entry.poin.toFixed(2)) : 0);
                });
            });

            // 3b. Hitung total poin dan urutkan kategori berdasarkan total tertinggi
            const totalPerKategori = {};
            kategoriList.forEach(kat => {
                totalPerKategori[kat] = seriesMap[kat].data.reduce((sum, val) => sum + val, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // 4. Susun ulang legend & series berdasarkan urutan baru
            const series = kategoriList.map(kat => seriesMap[kat]);
            const legendData = kategoriList.map(kat => kategoriLabelMap[kat] || kat);


            // Render chart
            const chartDom = document.getElementById('chart-kat-year-line');
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: tahunList
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }


        function toggleYear(year, icon) {
            const rows = document.querySelectorAll(`.row-detail-${year}`);
            rows.forEach(row => row.classList.toggle('d-none'));
            let isHidden = false;

            rows.forEach(row => {
                const currentlyHidden = row.style.display === 'none';
                row.style.display = currentlyHidden ? '' : 'none';
                if (!currentlyHidden) isHidden = true;
            });

            // Ganti ikon: + saat di minimize, − saat normal
            if (icon) {
                icon.classList.remove('fa-minus-circle', 'fa-plus-circle');
                icon.classList.add(isHidden ? 'fa-plus-circle' : 'fa-minus-circle');
            }
        }

        // Toggle icons when collapsing
        $('#collapseSOP').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapseSOP').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapseSOP').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapseSOP').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });

        // Toggle icons when collapsing
        $('#collapsePP').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapsePP').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapsePP').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapsePP').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });

        // Toggle icons when collapsing
        $('#collapsePlan').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapsePlan').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapsePlan').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapsePlan').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });
    </script>
@endsection