@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>

                            <!-- Judul di Tengah -->
                            {{-- <h5 class="mb-0 flex-grow-1 text-center">
                                Result {{ $title_menu }} - {{ $it->firstname }}
                            </h5> --}}

                            <!-- Placeholder untuk menjaga keseimbangan -->
                            <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">
                            <h4 class="mb-0" style="text-align: center"> Laporan Kinerja dan Proyeksi {{ $year }}
                            </h4>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <p>
                                Laporan ini disusun sebagai bentuk pertanggungjawaban atas pelaksanaan program kerja selama
                                tahun {{ $year }}, sekaligus sebagai dasar penyusunan rencana dan proyeksi kebutuhan
                                untuk
                                periode jangka menengah ke depan. Penyusunan laporan ini bertujuan untuk memberikan gambaran
                                komprehensif mengenai capaian kinerja, realisasi kegiatan, serta efisiensi pemanfaatan
                                sumber daya yang telah dilaksanakan.
                            </p>
                            <p></p>
                            <p>Dalam laporan ini, ditampilkan data historis dan proyeksi pada beberapa aspek penting,
                                termasuk di antaranya pengelolaan hardware dan software yang mendukung kegiatan operasional
                                dan transformasi digital. Hal ini sejalan dengan upaya strategis untuk memastikan bahwa
                                pertumbuhan dan pengembangan organisasi dapat berlangsung secara adaptif, berkelanjutan, dan
                                berbasis data. Dengan menyertakan tren pertumbuhan tahun-tahun sebelumnya dan proyeksi ke
                                depan, laporan ini diharapkan mampu menjadi acuan strategis dalam mengambil keputusan yang
                                tepat.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    @if ($kategori === null || $kategori === '' || $kategori->value == 'hard')
        <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">Hardware
                                </h5>

                                <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseHardware"
                                    role="button" aria-expanded="true" aria-controls="collapseHardware">
                                    <i class="fa fa-angle-down me-1"></i>
                                </a>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div class="collapse show" id="collapseHardware">
                                {{-- cpu --}}
                                <div class="row px-4 py-2">
                                    <h6>Bagian ini menyajikan data kinerja dan proyeksi kebutuhan perangkat keras (hardware)
                                        dari
                                        tahun
                                        {{ $year - 2 }} hingga {{ $year + 1 }}. Perangkat yang dimaksud mencakup
                                        Mini
                                        PC,
                                        CPU,
                                        dan Notebook, yang
                                        digunakan untuk mendukung operasional harian dan pengembangan sistem informasi.</h6>
                                    <h5 class="mb-0">1. Computer
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat CPU yang dimiliki dan direncanakan selama empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-cpu">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Jenis</th>
                                                    @foreach ($years as $year)
                                                        <th style="text-align: center">{{ $year }}@if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredCPU as $i => $item)
                                                    <tr>
                                                        <td style="text-align: center">{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }}</td>
                                                        @foreach ($item['values'] as $k => $val)
                                                            @php
                                                                $isPrediksi = $years[$k] > $currentYear;
                                                                if (!isset($total[$k])) {
                                                                    $total[$k] = 0;
                                                                }
                                                                $total[$k] += $val;

                                                                $prev = $k > 0 ? $item['values'][$k - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($k > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($total as $k => $val)
                                                        @php
                                                            $totalValues = $total;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} unit per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} unit</strong>.";
                                                            }
                                                        @endphp

                                                        @php
                                                            $prev = $k > 0 ? $total[$k - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$k] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($k > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                        <br>
                                        <div id="cpuBarChart" style="width: 100%; height: 400px;"></div>
                                        <hr class="horizontal dark mt-0">

                                        @if ($insight)
                                            <div class="px-4 py-3 mt-2"
                                                style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                                <strong>Kesimpulan:</strong><br>
                                                {!! $insight !!}
                                            </div>
                                        @endif


                                        {{-- <p>Catatan : ...</p>
                                    <h5><strong>Kesimpulan :</strong></h5>
                                    <h6>Tahun {{ $year }} mengalami .............. dibanding
                                        {{ $year - 1 }}
                                        Pertumbuhan rata-rata aktual {{ $year - 2 }} – {{ $year }} adalah ...
                                        unit per tahun sebagai
                                        acuan proyeksi pertumbuhan rata rata {{ $year + 1 }} – {{ $year + 3 }} per
                                        tahun</h6> --}}
                                    </div>

                                </div>
                                <br>

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

                                {{-- Monitor --}}
                                <div class="row px-4 py-2">
                                    <h5 class="mb-0">2. Monitor
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat Monitor yang dimiliki dan direncanakan selama
                                        empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-monitor">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Size</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredMonitor as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }}</td>
                                                        @foreach ($item['values'] as $m => $val)
                                                            @php
                                                                $isPrediksi = $years[$m] > $currentYear;
                                                                if (!isset($totalM[$m])) {
                                                                    $totalM[$m] = 0;
                                                                }
                                                                $totalM[$m] += $val;

                                                                $prev = $m > 0 ? $item['values'][$m - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($m > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalM as $m => $val)
                                                        @php
                                                            $totalValues = $totalM;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} unit per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} unit</strong>.";
                                                            }
                                                        @endphp
                                                        @php
                                                            $prev = $m > 0 ? $totalM[$m - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$m] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($m > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="monitorBarChart" style="width: 100%; height: 400px;"></div>
                                <hr class="horizontal dark mt-0">

                                @if ($insight)
                                    <div class="px-4 py-3 mt-2"
                                        style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                        <strong>Kesimpulan:</strong><br>
                                        {!! $insight !!}
                                    </div>
                                @endif
                                <br>
                                <hr class="horizontal dark mt-0">

                                {{-- Printer --}}
                                <div class="row px-4 py-2">
                                    {{-- Cek apakah ada output aneh di sini --}}
                                    <h5 class="mb-0">3. Printer
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat Printer yang dimiliki dan direncanakan selama
                                        empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-printer">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Ink</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredPrinter as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }} </td>
                                                        @foreach ($item['values'] as $p => $val)
                                                            @php
                                                                $isPrediksi = $years[$p] > $currentYear;
                                                                if (!isset($totalP[$p])) {
                                                                    $totalP[$p] = 0;
                                                                }
                                                                $totalP[$p] += $val;

                                                                $prev = $p > 0 ? $item['values'][$p - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($p > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalP as $p => $val)
                                                        @php
                                                            $totalValues = $totalP;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} unit per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} unit</strong>.";
                                                            }
                                                        @endphp

                                                        @php
                                                            $prev = $p > 0 ? $totalP[$p - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$p] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($p > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="printerBarChart" style="width: 100%; height: 400px;"></div>
                                <hr class="horizontal dark mt-0">

                                @if ($insight)
                                    <div class="px-4 py-3 mt-2"
                                        style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                        <strong>Kesimpulan:</strong><br>
                                        {!! $insight !!}
                                    </div>
                                @endif
                                <br>

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

                                {{-- Scanner --}}
                                <div class="row px-4 py-2">
                                    {{-- Cek apakah ada output aneh di sini --}}
                                    <h5 class="mb-0">4. Scanner
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat Scanner yang dimiliki dan direncanakan selama
                                        empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-scanner">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Size</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredScanner as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }} </td>
                                                        @foreach ($item['values'] as $sc => $val)
                                                            @php
                                                                $isPrediksi = $years[$sc] > $currentYear;
                                                                if (!isset($totalSC[$sc])) {
                                                                    $totalSC[$sc] = 0;
                                                                }
                                                                $totalSC[$sc] += $val;

                                                                $prev = $sc > 0 ? $item['values'][$sc - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($sc > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalSC as $sc => $val)
                                                        @php
                                                            $totalValues = $totalSC;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} unit per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} unit</strong>.";
                                                            }
                                                        @endphp

                                                        @php
                                                            $prev = $sc > 0 ? $totalSC[$sc - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$sc] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($sc > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="scannerBarChart" style="width: 100%; height: 400px;"></div>
                                <hr class="horizontal dark mt-0">

                                @if ($insight)
                                    <div class="px-4 py-3 mt-2"
                                        style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                        <strong>Kesimpulan:</strong><br>
                                        {!! $insight !!}
                                    </div>
                                @endif
                                <br>

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

                                {{-- Switch --}}
                                <div class="row px-4 py-2">
                                    {{-- Cek apakah ada output aneh di sini --}}
                                    <h5 class="mb-0">5. Switch
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat Switch yang dimiliki dan direncanakan selama empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-switch">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Port</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredSwitch as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }} </td>
                                                        @foreach ($item['values'] as $sw => $val)
                                                            @php
                                                                $isPrediksi = $years[$sw] > $currentYear;
                                                                if (!isset($totalSW[$sw])) {
                                                                    $totalSW[$sw] = 0;
                                                                }
                                                                $totalSW[$sw] += $val;

                                                                $prev = $sw > 0 ? $item['values'][$sw - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($sw > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalSW as $sw => $val)
                                                        @php
                                                            $totalValues = $totalSW;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} unit per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} unit</strong>.";
                                                            }
                                                        @endphp
                                                        @php
                                                            $prev = $sw > 0 ? $totalSW[$sw - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$sw] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($sw > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="switchBarChart" style="width: 100%; height: 400px;"></div>
                                <br>
                                <hr class="horizontal dark mt-0">

                                @if ($insight)
                                    <div class="px-4 py-3 mt-2"
                                        style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                        <strong>Kesimpulan:</strong><br>
                                        {!! $insight !!}
                                    </div>
                                @endif

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

                                {{-- OTHERS --}}
                                <div class="row px-4 py-2">
                                    {{-- Cek apakah ada output aneh di sini --}}
                                    <h5 class="mb-0">6. Others
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat Switch yang dimiliki dan direncanakan selama empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-others">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Port</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredOthers as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }} </td>
                                                        @foreach ($item['values'] as $o => $val)
                                                            @php
                                                                $isPrediksi = $years[$o] > $currentYear;
                                                                if (!isset($totalO[$o])) {
                                                                    $totalO[$o] = 0;
                                                                }
                                                                $totalO[$o] += $val;

                                                                $prev = $o > 0 ? $item['values'][$o - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($o > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalO as $o => $val)
                                                        @php
                                                            $totalValues = $totalO;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} unit per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} unit</strong>.";
                                                            }
                                                        @endphp
                                                        @php
                                                            $prev = $o > 0 ? $totalO[$o - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$o] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($o > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="othersBarChart" style="width: 100%; height: 400px;"></div>
                                <hr class="horizontal dark mt-0">

                                @if ($insight)
                                    <div class="px-4 py-3 mt-2"
                                        style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                        <strong>Kesimpulan:</strong><br>
                                        {!! $insight !!}
                                    </div>
                                @endif
                                <br>

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

                                {{-- MAINTENANCE --}}
                                <div class="row px-4 py-2">
                                    {{-- Cek apakah ada output aneh di sini --}}
                                    <h5 class="mb-0">7. Maintenance
                                    </h5>
                                    <p>Pemeliharaan infrastruktur Teknologi Informasi (IT) merupakan salah satu elemen kunci
                                        dalam menjaga kelangsungan operasional perusahaan. Selama tahun {{ $year - 1 }}
                                        ,
                                        Dept. MIS telah
                                        melaksanakan berbagai kegiatan maintenance untuk memastikan perangkat keras berjalan
                                        optimal serta mendukung kebutuhan bisnis secara berkelanjutan.</p>
                                    <p>
                                        Total kategori berdasarkan jumlah maintenance selama empat tahun (3 tahun historis
                                        dan 1
                                        tahun proyeksi ke depan):
                                        <br>
                                        Ringan : 1 x maintenance dalam 1 tahun
                                        <br>
                                        Medium : 2 x maintenance dalam 1 tahun
                                        <br>
                                        Not Maintain : Tidak dilakukan maintenance
                                    </p>


                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-mk">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Jenis</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredMaintenanceKategori as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }} </td>
                                                        @foreach ($item['values'] as $mk => $val)
                                                            @php
                                                                $isPrediksi = $years[$mk] > $currentYear;
                                                                if (!isset($totalMK[$mk])) {
                                                                    $totalMK[$mk] = 0;
                                                                }
                                                                $totalMK[$mk] += $val;

                                                                $prev = $mk > 0 ? $item['values'][$mk - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($mk > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalMK as $mk => $val)
                                                        @php
                                                            $prev = $mk > 0 ? $totalMK[$mk - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$mk] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($mk > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="mkBarChart" style="width: 100%; height: 400px;"></div>
                                <br>

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

                                {{-- MAINTENANCE 2 --}}
                                <div class="row px-4 py-2">
                                    {{-- Cek apakah ada output aneh di sini --}}
                                    {{-- <h5 class="mb-0">8. Maintenance Summary --}}
                                    </h5>
                                    <p>Total jumlah maintenance selama empat tahun (3 tahun historis dan 1 tahun proyeksi ke
                                        depan):</p>
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-ms">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Port</th>
                                                    @foreach ($years as $year)
                                                        <th scope="col" style="text-align: center">{{ $year }}
                                                            @if ($loop->last)
                                                                (Proyeksi)
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredMaintenanceSummary as $i => $item)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }} </td>
                                                        @foreach ($item['values'] as $ms => $val)
                                                            @php
                                                                $isPrediksi = $years[$ms] > $currentYear;
                                                                if (!isset($totalMS[$ms])) {
                                                                    $totalMS[$ms] = 0;
                                                                }
                                                                $totalMS[$ms] += $val;

                                                                $prev = $ms > 0 ? $item['values'][$ms - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($ms > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($totalMS as $ms => $val)
                                                        @php
                                                            $prev = $ms > 0 ? $totalMS[$ms - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$ms] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($ms > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>

                                </div>
                                <div id="msBarChart" style="width: 100%; height: 400px;"></div>
                                <br>

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


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <br>
    <input type="hidden" id="kategori" value="{{ $kategori->value ?? null }}">
    @if ($kategori === null || $kategori === '' || $kategori->value == 'soft')
        <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">Software
                                </h5>

                                <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseSoftware"
                                    role="button" aria-expanded="true" aria-controls="collapseHardware">
                                    <i class="fa fa-angle-down me-1"></i>
                                </a>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div class="collapse show" id="collapseSoftware">
                                {{-- SOFTWARE --}}
                                <div class="row px-4 py-2">
                                    {{-- <h6>Bagian ini menyajikan data kinerja dan proyeksi pengerjaan (hardware)
                                        dari
                                        tahun
                                        {{ $year - 2 }} hingga {{ $year + 1 }}. Perangkat yang dimaksud mencakup
                                        Mini
                                        PC,
                                        CPU,
                                        dan Notebook, yang
                                        digunakan untuk mendukung operasional harian dan pengembangan sistem informasi.</h6>
                                    <h5 class="mb-0">1. Computer
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat CPU yang dimiliki dan direncanakan selama empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p> --}}
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-software">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Kategori</th>
                                                    @foreach ($years as $year)
                                                        <th style="text-align: center">{{ $year }}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredSoftware as $i => $item)
                                                    <tr>
                                                        <td style="text-align: center">{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }}</td>
                                                        @foreach ($item['values'] as $soft => $val)
                                                            @php
                                                                $isPrediksi = $years[$soft] > $currentYear;
                                                                if (!isset($total[$soft])) {
                                                                    $total[$soft] = 0;
                                                                }
                                                                $total[$soft] += $val;

                                                                $prev = $soft > 0 ? $item['values'][$soft - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>{{ $val }}</strong><br>
                                                                @if ($soft > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($total as $soft => $val)
                                                        @php
                                                            $totalValues = $total;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);

                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>{$avgGrowth} poin per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>{$nextYearVal} poin</strong>.";
                                                            }
                                                        @endphp

                                                        @php
                                                            $prev = $soft > 0 ? $total[$soft - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$soft] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>{{ $val }}</strong><br>
                                                            @if ($soft > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                        <br>
                                        <div id="softwareBarChart" style="width: 100%; height: 400px;"></div>
                                        <hr class="horizontal dark mt-0">

                                        @if ($insight)
                                            <div class="px-4 py-3 mt-2"
                                                style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                                <strong>Kesimpulan:</strong><br>
                                                {!! $insight !!}
                                            </div>
                                        @endif

                                    </div>

                                </div>
                                <br>

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



                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <br>
    <input type="hidden" id="kategori" value="{{ $kategori->value ?? null }}">
    @if ($kategori === null || $kategori === '' || $kategori->value == 'gr')
        <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">Biaya GR
                                </h5>

                                <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseGR"
                                    role="button" aria-expanded="true" aria-controls="collapseHardware">
                                    <i class="fa fa-angle-down me-1"></i>
                                </a>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div class="collapse show" id="collapseGR">
                                {{-- SOFTWARE --}}
                                <div class="row px-4 py-2">
                                    {{-- <h6>Bagian ini menyajikan data kinerja dan proyeksi pengerjaan (hardware)
                                        dari
                                        tahun
                                        {{ $year - 2 }} hingga {{ $year + 1 }}. Perangkat yang dimaksud mencakup
                                        Mini
                                        PC,
                                        CPU,
                                        dan Notebook, yang
                                        digunakan untuk mendukung operasional harian dan pengembangan sistem informasi.</h6>
                                    <h5 class="mb-0">1. Computer
                                    </h5>
                                    <p>Rekapitulasi jumlah unit perangkat CPU yang dimiliki dan direncanakan selama empat
                                        tahun
                                        (3 tahun historis dan 1 tahun proyeksi ke depan):</p> --}}
                                    <div class="table-responsive">
                                        <table class="table display table-hover" id="tabel-gr">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th scope="col" style="text-align: center">No</th>
                                                    <th scope="col" style="text-align: center">Kategori</th>
                                                    @foreach ($years as $year)
                                                        <th style="text-align: center">{{ $year }}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($structuredGR as $i => $item)
                                                    <tr>
                                                        <td style="text-align: center">{{ $i + 1 }}</td>
                                                        <td>{{ $item['jenis'] }}</td>
                                                        @foreach ($item['values'] as $gr => $val)
                                                            @php
                                                                $isPrediksi = $years[$gr] > $currentYear;
                                                                if (!isset($total[$gr])) {
                                                                    $total[$gr] = 0;
                                                                }
                                                                $total[$gr] += $val;

                                                                $prev = $gr > 0 ? $item['values'][$gr - 1] : null;
                                                                $percent =
                                                                    $prev > 0
                                                                        ? round((($val - $prev) / $prev) * 100, 2)
                                                                        : 0;
                                                                $color = $percent < 0 ? 'red' : 'green';
                                                            @endphp
                                                            <td class="text-end pe-4"
                                                                style="text-align: right; {{ $isPrediksi ? 'background-color: #e0f3ff;' : '' }}">
                                                                <strong>Rp.
                                                                    {{ number_format($val, 0, ',', '.') }}</strong><br><br>
                                                                @if ($gr > 0)
                                                                    <span style="color: {{ $color }}">
                                                                        {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                    </span>
                                                                @endif
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="2">Total</th>
                                                    @foreach ($total as $gr => $val)
                                                        @php
                                                            $totalValues = $total;
                                                            $yearCount = count($totalValues);
                                                            $insight = '';

                                                            if ($yearCount >= 3) {
                                                                $prev = $totalValues[$yearCount - 3]; // 2024
                                                                $last = $totalValues[$yearCount - 2]; // 2025
                                                                $prevYear = $years[$yearCount - 3];
                                                                $lastYear = $years[$yearCount - 2];
                                                                $change =
                                                                    $prev > 0
                                                                        ? round((($last - $prev) / $prev) * 100, 2)
                                                                        : 0;

                                                                $changeText =
                                                                    $change < 0
                                                                        ? 'mengalami penurunan sebesar <strong>' .
                                                                            abs($change) .
                                                                            '%</strong>'
                                                                        : 'mengalami kenaikan sebesar <strong>+' .
                                                                            $change .
                                                                            '%</strong>';

                                                                $growth = $last - $totalValues[0];
                                                                $avgGrowth = round($growth / ($yearCount - 3), 1);
                                                                $rpavg = number_format($avgGrowth, 0, ',', '.');
                                                                $nextYear = $lastYear + 1;
                                                                $nextYearVal = $totalValues[$yearCount - 1] ?? '-';

                                                                $rpnext = number_format($nextYearVal, 0, ',', '.');

                                                                $insight = "Tahun <strong>{$lastYear}</strong> {$changeText} dibanding tahun <strong>{$prevYear}</strong>.<br> 
                                                            Rata-rata pertumbuhan aktual dari tahun <strong>{$years[0]}</strong> hingga <strong>{$lastYear}</strong> adalah <strong>Rp. {$rpavg} per tahun</strong>, 
                                                            sehingga diproyeksikan pada tahun <strong>{$nextYear}</strong> akan mencapai sekitar <strong>Rp. {$rpnext} </strong>.";
                                                            }
                                                        @endphp

                                                        @php
                                                            $prev = $gr > 0 ? $total[$gr - 1] : null;
                                                            $percent =
                                                                $prev > 0
                                                                    ? round((($val - $prev) / $prev) * 100, 2)
                                                                    : 0;
                                                            $color = $percent < 0 ? 'red' : 'green';
                                                        @endphp
                                                        <th class="text-end pe-4"
                                                            style="text-align: right; {{ $years[$gr] > $currentYear ? 'background-color: #e0f3ff;' : '' }}">
                                                            <strong>Rp.
                                                                {{ number_format($val, 0, ',', '.') }}</strong><br>
                                                            @if ($gr > 0)
                                                                <span style="color: {{ $color }}">
                                                                    {{ $percent > 0 ? '+' : '' }}{{ $percent }}%
                                                                </span>
                                                            @endif
                                                        </th>
                                                    @endforeach
                                                </tr>
                                            </tfoot>

                                        </table>
                                        <br>
                                        <div id="grBarChart" style="width: 100%; height: 400px;"></div>
                                        <hr class="horizontal dark mt-0">

                                        @if ($insight)
                                            <div class="px-4 py-3 mt-2"
                                                style="background-color: #f0f8ff; border-left: 4px solid #00b7bd; border-radius: 5px;">
                                                <strong>Kesimpulan:</strong><br>
                                                {!! $insight !!}
                                            </div>
                                        @endif

                                    </div>

                                </div>
                                <br>

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



                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <script>
        $(document).ready(function() {
            $('#tabel-cpu').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
            });

            $('#tabel-monitor').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
            });

            $('#tabel-printer').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
            });

            $('#tabel-scanner').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
            });

            $('#tabel-switch').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
            });
            $('#tabel-others').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
            });
            $('#tabel-ms').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
            });
            $('#tabel-mk').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
            });

            $('#tabel-software').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
            });

            $('#tabel-gr').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
            });

            var kategori = document.getElementById('kategori').value;


            const yearList = @json($yearList);

        });


        //cpu
        function renderBarChart(containerId, title, yearList, structuredData, customColors = {}) {
            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }
            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('cpuBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `CPU`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //monitor
        function renderBarChartMon(containerId, title, yearList, structuredData, customColors = {}) {

            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }
            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('monitorBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `MONITOR`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //printer
        function renderBarChartPrin(containerId, title, yearList, structuredData, customColors = {}) {
            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }

            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('printerBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `PRINTER`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //scanner
        function renderBarChartScan(containerId, title, yearList, structuredData, customColors = {}) {

            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }
            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('scannerBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `SCANNER`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //switch
        function renderBarChartSwitch(containerId, title, yearList, structuredData, customColors = {}) {

            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }
            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('switchBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `SWITCH`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //others
        function renderBarChartOthers(containerId, title, yearList, structuredData, customColors = {}) {

            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }
            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('othersBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `OTHERS`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }


        //MK
        function renderBarChartMK(containerId, title, yearList, structuredData, customColors = {}) {
            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }

            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('mkBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `MAINTENANCE`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //MS
        function renderBarChartMS(containerId, title, yearList, structuredData, customColors = {}) {
            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }

            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('msBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: `MAINTENANCE SUMMARY`,
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    bottom: 0
                },
                grid: {
                    left: 80,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

        }

        //SOftware
        function renderBarChartSoftware(containerId, title, yearList, structuredData, customColors = {}) {
            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }

            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: false,
                    position: 'inside',
                    formatter: function(params) {
                        return parseFloat(params.value).toFixed(1);
                    }
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('softwareBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        let year = params[0].axisValue;
                        let result = `<strong>${year}</strong><br/>`;
                        params.forEach(item => {
                            result +=
                                `${item.marker} ${item.seriesName}: <strong>${parseFloat(item.value).toFixed(1)}</strong><br/>`;
                        });
                        return result;
                    }
                },
                title: {
                    text: 'Software',
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    type: 'scroll', // scrollable
                    orient: 'horizontal', // arah horizontal (bawah chart)
                    bottom: 0, // posisi bawah
                    pageIconSize: 12, // ukuran tombol next/prev
                    pageButtonGap: 5, // jarak antar tombol
                    pageButtonPosition: 'end', // tombol di ujung kanan
                    pageFormatter: '{current}/{total}' // format pagination
                },
                grid: {
                    left: 100,
                    right: 80,
                    top: 50,
                    bottom: 50
                },
                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: value => value.toFixed(1)
                    }
                },
                series: series
            });
        }


        //GR
        function renderBarChartGR(containerId, title, yearList, structuredData, customColors = {}) {
            const tahunPrediksi = @json($year) + 1;
            modifiedYearList = yearList.map((y, i) =>
                i >= yearList.length - tahunPrediksi.length ? y + ' (Proyeksi)' : y
            );

            if (modifiedYearList.length > 0) {
                const lastIndex = modifiedYearList.length - 1;
                modifiedYearList[lastIndex] = modifiedYearList[lastIndex] + ' (Proyeksi)';
            }

            const series = structuredData.map(item => ({
                name: item.jenis,
                type: 'bar',
                stack: 'total',
                barWidth: '60%',
                label: {
                    show: false,
                    position: 'inside',
                    formatter: function(params) {
                        return parseFloat(params.value).toFixed(1);
                    }
                },
                data: item.values
            }));

            const chart = echarts.init(document.getElementById('grBarChart'));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        let year = params[0].axisValue;
                        let result = `<strong>${year}</strong><br/>`;
                        params.forEach(item => {
                            result +=
                                `${item.marker} ${item.seriesName}: <strong>${parseFloat(item.value).toFixed(1)}</strong><br/>`;
                        });
                        return result;
                    }
                },
                title: {
                    text: 'Biaya GR',
                    left: 'center'
                },
                legend: {
                    data: structuredData.map(item => item.jenis),
                    type: 'scroll', // scrollable
                    orient: 'horizontal', // arah horizontal (bawah chart)
                    bottom: 0, // posisi bawah
                    pageIconSize: 12, // ukuran tombol next/prev
                    pageButtonGap: 5, // jarak antar tombol
                    pageButtonPosition: 'end', // tombol di ujung kanan
                    pageFormatter: '{current}/{total}' // format pagination
                },
                grid: {
                    left: 120,
                    right: 80,
                    top: 50,
                    bottom: 80 // kasih ruang tambahan buat legend
                },

                xAxis: {
                    type: 'category',
                    data: modifiedYearList.map(String)
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: value => new Intl.NumberFormat('id-ID', {
                            style: 'currency',
                            currency: 'IDR',
                            minimumFractionDigits: 0
                        }).format(value),
                        overflow: 'break'
                    }
                },

                series: series
            });
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const kategori = document.getElementById('kategori').value;
            const yearList = @json($yearList);
            const cpuColors = {
                'CPU': '#5470C6',
                'LAPTOP': '#91CC75',
                'MINIPC': '#FAC858'
            };

            const monitorColors = {
                '17 Inch': '#73C0DE',
                '19 Inch': '#3BA272',
                '22 Inch': '#FC8452',
                '24 Inch': '#9A60B4',
                '32 Inch': '#EE6666'
                // tambah sesuai jenis monitor
            };
            if (kategori === '' || kategori === null || kategori === 'soft') {
                const structuredSoftware = @json($structuredSoftware);
                renderBarChartSoftware('softwareBarChart', 'Software per Tahun', yearList, structuredSoftware,
                    monitorColors);

                const structuredGR = @json($structuredGR);
                renderBarChartGR('grBarChart', 'GR per Tahun', yearList, structuredGR,
                    monitorColors);


            }
            if (kategori === '' || kategori === null || kategori === 'hard') {
                const cpuChart = echarts.init(document.getElementById('cpuBarChart'));


                const structuredCpu = @json($structuredCPU);
                const structuredMonitor = @json($structuredMonitor);
                const structuredPrinter = @json($structuredPrinter);
                const structuredScanner = @json($structuredScanner);
                const structuredSwitch = @json($structuredSwitch);
                const structuredOthers = @json($structuredOthers);
                const structuredMaintenanceKategori = @json($structuredMaintenanceKategori);
                const structuredMaintenanceSummary = @json($structuredMaintenanceSummary);

                renderBarChart('cpuBarChart', 'Perangkat CPU per Tahun', yearList, structuredCpu, cpuColors);
                renderBarChartMon('monitorBarChart', 'Monitor per Tahun', yearList, structuredMonitor,
                    monitorColors);
                renderBarChartPrin('printerBarChart', 'Printer per Tahun', yearList, structuredPrinter,
                    monitorColors);
                renderBarChartScan('scannerBarChart', 'Scanner per Tahun', yearList, structuredScanner,
                    monitorColors);
                renderBarChartSwitch('switchBarChart', 'Switch per Tahun', yearList, structuredSwitch,
                    monitorColors);
                renderBarChartOthers('switchBarChart', 'Switch per Tahun', yearList, structuredOthers,
                    monitorColors);
                renderBarChartMK('switchBarChart', 'Switch per Tahun', yearList, structuredMaintenanceKategori,
                    monitorColors);
                renderBarChartMS('switchBarChart', 'Switch per Tahun', yearList, structuredMaintenanceSummary,
                    monitorColors);
            }
        });
    </script>
@endsection