@extends('layouts.master')

@section('title', 'Aksi Perubahan Iklim')

@section('content')
<div class="container-fluid my-4" style="font-family: 'Inter', sans-serif;">
    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 font-weight-bold text-teal">AKSI PERUBAHAN IKLIM</h5>
                <small class="text-muted">
                    Last update: <span class="text-danger">{{ $today }}</span>
                </small>
            </div>

            <!-- Statistik Atas -->
            <div class="row text-center mb-4">
                <div class="col-md-3 mb-3">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="text-muted">TOTAL AKSI</h6>
                        <h2 class="text-success">{{ number_format($stats['total_aksi'], 0, ',', '.') }}</h2>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="text-muted">TOTAL PENURUNAN EMISI</h6>
                        <h2 class="text-success">{{ number_format($stats['total_emisi'], 0, ',', '.') }}</h2>
                        <small>TON CO₂</small>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="text-muted">TOTAL ALOKASI</h6>
                        <h2 class="text-success">{{ number_format($stats['total_anggaran']/1000000000, 1, ',', '.') }}</h2>
                        <small>MILIAR IDR</small>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="text-muted">TOTAL REALISASI</h6>
                        <h2 class="text-success">{{ number_format($stats['total_alokasi']/1000000000, 1, ',', '.') }}</h2>
                        <small>MILIAR IDR</small>
                    </div>
                </div>
            </div>

            @php
                $colors = ['#a98ded', '#5ab4e5', '#f6d55c', '#ed6a5a', '#6cc070', '#ff8c42'];
                $labelsAksi = collect($charts['aksi'])->pluck('sektor')->toArray();
                $valuesAksi = collect($charts['aksi'])->pluck('persen')->toArray();

                $labelsEmisi = collect($charts['emisi'])->pluck('sektor')->toArray();
                $valuesEmisi = collect($charts['emisi'])->pluck('persen')->toArray();

                $labelsAnggaran = collect($charts['anggaran'])->pluck('sektor')->toArray();
                $valuesAnggaran = collect($charts['anggaran'])->pluck('persen')->toArray();

                $labelsAlokasi = collect($charts['alokasi'])->pluck('sektor')->toArray();
                $valuesAlokasi = collect($charts['alokasi'])->pluck('persen')->toArray();
            @endphp

            <!-- Bagian Chart -->
            <div class="row">
                <!-- Chart Aksi -->
                <div class="col-md-3 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-success text-white text-center">TOTAL AKSI</div>
                        <div class="card-body">
                            <canvas id="chartAksi"></canvas>
                            <div class="mt-3">
                                <small>
                                    @foreach($charts['aksi'] as $i => $row)
                                        <span class="d-block">
                                            <span style="color: {{ $colors[$i % count($colors)] }};">
                                                {{ $row['persen'] }}%
                                            </span> {{ $row['sektor'] }}
                                        </span>
                                    @endforeach
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chart Emisi -->
                <div class="col-md-3 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-success text-white text-center">TOTAL PENURUNAN EMISI</div>
                        <div class="card-body">
                            <canvas id="chartEmisi"></canvas>
                            <div class="mt-3">
                                <small>
                                    @foreach($charts['emisi'] as $i => $row)
                                        <span class="d-block">
                                            <span style="color: {{ $colors[$i % count($colors)] }};">
                                                {{ $row['persen'] }}%
                                            </span> {{ $row['sektor'] }}
                                        </span>
                                    @endforeach
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chart Anggaran -->
                <div class="col-md-3 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-success text-white text-center">TOTAL ALOKASI</div>
                        <div class="card-body">
                            <canvas id="chartAnggaran"></canvas>
                            <div class="mt-3">
                                <small>
                                    @foreach($charts['anggaran'] as $i => $row)
                                        <span class="d-block">
                                            <span style="color: {{ $colors[$i % count($colors)] }};">
                                                {{ $row['persen'] }}%
                                            </span> {{ $row['sektor'] }}
                                        </span>
                                    @endforeach
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chart Alokasi -->
                <div class="col-md-3 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-success text-white text-center">TOTAL REALISASI</div>
                        <div class="card-body">
                            <canvas id="chartAlokasi"></canvas>
                            <div class="mt-3">
                                <small>
                                    @foreach($charts['alokasi'] as $i => $row)
                                        <span class="d-block">
                                            <span style="color: {{ $colors[$i % count($colors)] }};">
                                                {{ $row['persen'] }}%
                                            </span> {{ $row['sektor'] }}
                                        </span>
                                    @endforeach
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const colors = @json($colors);

    const configPie = (labels, data) => ({
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: colors.slice(0, labels.length),
            }]
        }
    });

    new Chart(document.getElementById('chartAksi'), configPie(@json($labelsAksi), @json($valuesAksi)));
    new Chart(document.getElementById('chartEmisi'), configPie(@json($labelsEmisi), @json($valuesEmisi)));
    new Chart(document.getElementById('chartAnggaran'), configPie(@json($labelsAnggaran), @json($valuesAnggaran)));
    new Chart(document.getElementById('chartAlokasi'), configPie(@json($labelsAlokasi), @json($valuesAlokasi)));
</script>
@endsection