

<div class="row">
<div class="col-lg-4">
    <table class="table table-bordered" style="width: 100%; border: 1px solid; font-family: 'Arial', sans-serif; font-size: 14px;">
        <thead>
            <tr>

                <th colspan="2" style="text-align: center;padding:10px;font-weight: bold !important; font-size: 18px;">Ranking %-tase Mutu</th>
            </tr>
        </thead>
        <tbody>

            @foreach($mutu_detail as $index => $row)
                @php
                    // Hitung warna gradasi dari hijau (#28a745) ke kuning (#ffc107) ke merah (#dc3545) berdasarkan urutan ranking
                    $total = count($mutu_detail);
                    $percent = $index / max(1, $total - 1); // 0 untuk atas (hijau), 1 untuk bawah (merah)

                    if ($percent <= 0.5) {
                        // Gradasi hijau (#28a745) ke kuning (#ffc107)
                        $ratio = $percent / 0.5;
                        $r = (int)(40 + $ratio * (255 - 40));    // 40 ke 255
                        $g = (int)(167 + $ratio * (193 - 167));  // 167 ke 193
                        $b = (int)(69 + $ratio * (7 - 69));      // 69 ke 7
                    } else {
                        // Gradasi kuning (#ffc107) ke merah (#dc3545)
                        $ratio = ($percent - 0.5) / 0.5;
                        $r = (int)(255 - $ratio * (255 - 220));  // 255 ke 220
                        $g = (int)(193 - $ratio * (193 - 53));   // 193 ke 53
                        $b = (int)(7 + $ratio * (69 - 7));       // 7 ke 69
                    }
                    $barColor = "rgb($r, $g, $b)";
                @endphp  <tr>
                    <td style="text-align:right;width:50%;padding:5px;">{{ $row->asman }}</td>
                    <td style="text-align: right;display: flex;align-items: center;gap: 8px;padding:5px;">
                        <div style="background: #e9ecef; border-radius: 4px; height: 12px; width: 100%;">
                            <div style="background: {{ $barColor }}; height: 100%; border-radius: 4px; width: {{ min(100, max(0, $row->mutu)) }}%;"></div>
                        </div>
                        <span style="font-size: 12px; color: #555;">{{ number_format($row->mutu, 2) }}</span>
                    </td>
                </tr>
            @endforeach
        </tbody>
        </table>
</div>

<div class="col-lg-4">
    <table class="table table-bordered" style="width: 100%; border: 1px solid; font-family: 'Arial', sans-serif; font-size: 14px;">
        <thead>
            <tr>

                <th colspan="2" style="text-align: center;padding:10px;font-weight: bold !important; font-size: 18px;">Growth Mutu (%)</th>
            </tr>
        </thead>
        @php
            // Urutkan growtharray dari nilai growth terbesar ke terkecil
            $sortedGrowth = $growtharray;
            usort($sortedGrowth, function($a, $b) {
                return $b['growth'] <=> $a['growth'];
            });
        @endphp
        @foreach($sortedGrowth as $index => $row)
            @php
                $total = count($sortedGrowth);
                $percent = $index / max(1, $total - 1);

                if ($percent <= 0.5) {
                    $ratio = $percent / 0.5;
                    $r = (int)(40 + $ratio * (255 - 40));
                    $g = (int)(167 + $ratio * (193 - 167));
                    $b = (int)(69 + $ratio * (7 - 69));
                } else {
                    $ratio = ($percent - 0.5) / 0.5;
                    $r = (int)(255 - $ratio * (255 - 220));
                    $g = (int)(193 - $ratio * (193 - 53));
                    $b = (int)(7 + $ratio * (69 - 7));
                }
                $barColor = "rgb($r, $g, $b)";
                $isPositive = $row['growth'] >= 0;
                $barWidth = min(100, abs($row['growth']));
            @endphp
            <tr>
                <td style="text-align:right;width:50%;padding:5px;">{{ $row['asman'] }}</td>
                <td style="padding:5px;">
                    <div style="display: flex; align-items: center;">
                        <div style="flex: 1;">
                            <div style="background: #e9ecef; border-radius: 4px; height: 12px; width: 100%; position: relative; display: flex; align-items: center;">
                                <div style="width: 50%; height: 100%; position: relative;">
                                    @if(!$isPositive)
                                        <div style="background: {{ $barColor }}; height: 100%; border-radius: 4px 0 0 4px; width: {{ ($barWidth / 2)*10 }}%; position: absolute; right: 0;"></div>
                                    @endif
                                </div>
                                <div style="width: 2px; height: 100%; background: #888;"></div>
                                <div style="width: 50%; height: 100%; position: relative;">
                                    @if($isPositive)
                                        <div style="background: {{ $barColor }}; height: 100%; border-radius: 0 4px 4px 0; width: {{ ($barWidth / 2)*10 }}%; position: absolute; left: 0;"></div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <span style="font-size: 12px; color: #555; margin-left: 8px; min-width: 50px; text-align: right;">
                            {{ number_format($row['growth'], 2) }}
                        </span>
                    </div>
                </td>
            </tr>
        @endforeach
        </tbody>
        </table>
</div>
@foreach($grafik as $index => $series)

        <div class="col-lg-4">
            <div id="chart-container-{{ $index }}" style="width: 100%; height: 400px; border: 1px solid; margin-bottom: 20px;"></div>
        </div>
    @endforeach
    
</div>


<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
<script>
// document.addEventListener('DOMContentLoaded', function () {
//   $(document).ready(function() {
@foreach($grafik as $index => $series)
        Highcharts.chart('chart-container-{{ $index }}', @json($series));
@endforeach
// });

</script>
