@extends('layouts.master')

@section('content')
    <div class="card shadow-sm" style="font-family: 'Inter', sans-serif;">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 font-weight-bold">{{ @$title }}</h5>
            <form
                method="GET"
                id="yearForm"
                action="{{ route($route.'.index') }}"
                class="d-inline"
            >
                 <x-adaptation-year-select
                    :selectedYear="$selectedYear"
                    name="adaptationYear"
                    onchange="document.getElementById('yearForm').submit()"
                />
            </form>
        </div>

        <div class="card-body">
            <!-- Alerts -->
        
            <div class="row flex justify-content-end items-center ml-6 mb-4">
                <div class="flex gap-2 mr-4">
                    <a href="{{ route('modules.formAdaptasi.create', ['reset' => 1]) }}">
                        <button class="button-action btn btn-success">Aksi Baru</button>
                    </a>
                    <a href="{{ route($route.'.aksi') }}">
                        <button class="button-action btn btn-primary">
                            Aksi Perubahan Iklim
                        </button>
                    </a>
                </div>
            </div>

            <br/>

            {{-- Charts Row --}}
            <div class="row mb-5">
                <div class="col-lg-4">
                    <p class="h6">AKSI</p>
                    <canvas id="aksiChart" height="100"></canvas>
                </div>
                <div class="col-lg-4">
                    <p class="h6">ALOKASI (Miliar Rupiah)</p>
                    <canvas id="anggaranChart" height="100"></canvas>
                </div>
                <div class="col-lg-4">
                    <p class="h6">REALISASI (Miliar Rupiah)</p>
                    <canvas id="realisasiChart" height="100"></canvas>
                </div>
            </div>

            {{-- Table --}}
            <div class="table-responsive">
                <table id="adaptasiTable" class="table table-bordered table-striped align-middle">
                    <thead class="table-info text-white text-center">
                        <tr>
                            <th>Nama Kegiatan</th>
                            <th>Tahun</th>
                            <th>Bidang PRK</th>
                            <th>Sub- Bidang PRK</th>
                            <th style="width:80px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($tableData as $a)
                            <tr>
                                <td>{{ $a->nama_kegiatan }}</td>
                                <td class="text-center">{{ $a->tahun_kegiatan }}</td>
                                <td>{{ $a->sektor }}</td>
                                <td>{{ $a->sub_sektor }}</td>
                                <td class="text-center">
                                    <a href="{{ route($route.'adaptasi.view', $a->id) }}" class="text-secondary me-2">
                                        <i class="ti ti-eye"></i>
                                    </a>
                                    <a href="{{ route($route.'adaptasi.edit', $a->id) }}" class="text-secondary">
                                        <i class="ti ti-pencil"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />    
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css"/>
    <style>
        #map { min-height: 600px; }
        .leaflet-container { background: #fff; }
    </style>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // === DataTables init ===
    $('#adaptasiTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        lengthChange: true,
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data per halaman",
            zeroRecords: "Tidak ada data ditemukan",
            emptyTable: "Tidak ada data.",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            infoEmpty: "Tidak ada data tersedia",
            infoFiltered: "(difilter dari _MAX_ total data)"
        },
        footerCallback: function (row, data, start, end, display) {
            $(this.api().column(0).footer()).html('TOTAL (Semua Tahun {{ $selectedYear }})');
        }
    });

    // === Util warna untuk dataset ===
    function getColor(i) {
        const palette = [
            'rgba(255,99,132,0.6)',
            'rgba(54,162,235,0.6)',
            'rgba(255,206,86,0.6)',
            'rgba(75,192,192,0.6)',
            'rgba(153,102,255,0.6)',
            'rgba(255,159,64,0.6)',
            'rgba(199,199,199,0.6)',
            'rgba(100,181,246,0.6)',
            'rgba(76,175,80,0.6)',
            'rgba(121,85,72,0.6)'
        ];
        return palette[i % palette.length];
    }

    // === Formatter Miliar Rupiah (2 desimal, trailing zero dipangkas oleh Intl) ===
    // function fmtMiliarFromBillion(b) {
    //     return new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(b) + ' M';
    // }
    function parseIdrToNumber(v) {
        if (typeof v === 'number') return v;
        if (v == null) return 0;
        const s = String(v).replace(/\s/g,'').replace(/\./g,'').replace(',', '.');
        const n = Number(s);
        return isNaN(n) ? 0 : n;
    }
    function toBillion(v) { return parseIdrToNumber(v) / 1_000_000_000; }
    function pickDecimals(maxAbs) {
        if (maxAbs >= 1)     return 2;
        if (maxAbs >= 0.1)   return 3;
        if (maxAbs >= 0.01)  return 4;
        if (maxAbs >= 0.001) return 5;
        return 6;
    }
    function fmtMiliar(v, d) {
        return new Intl.NumberFormat('id-ID', { maximumFractionDigits: d }).format(v) + ' M';
    }

    // === Chart AKSI (bukan rupiah) ===
    const barData = @json($barData);
    const years = barData.map(d => d.year);
    const sectors = barData.length ? Object.keys(barData[0].jumlah || {}) : [];
    const aksiDatasets = sectors.map((sec, idx) => ({
        label: sec,
        data: years.map(y => {
            const row = barData.find(d => d.year === y) || {};
            return (row.jumlah && row.jumlah[sec]) ? row.jumlah[sec] : 0;
        }),
        backgroundColor: getColor(idx),
        borderColor: getColor(idx).replace('0.6','1'),
        borderWidth: 1
    }));

    new Chart(document.getElementById('aksiChart'), {
        type: 'bar',
        data: { labels: years, datasets: aksiDatasets },
        options: {
            plugins: {
                legend: { position: 'top' },
                tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y}` } }
            },
            scales: {
                x: { stacked: true },
                y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Jumlah Kegiatan' } }
            }
        }
    });

    // === Chart Anggaran & Realisasi (Rupiah → Miliar) ===
    const budget    = @json($budgetData);
    const realisasi = @json($realisasiData);
    const labels    = ['APBN','APBD','Swasta','Lain-lain'];

    const anggaranValuesB  = [
        toBillion(budget?.apbn),   toBillion(budget?.apbd),
        toBillion(budget?.swasta), toBillion(budget?.lainlain)
    ];
    const realisasiValuesB = [
        toBillion(realisasi?.apbn),   toBillion(realisasi?.apbd),
        toBillion(realisasi?.swasta), toBillion(realisasi?.lainlain)
    ];

    // Tentukan jumlah desimal per chart berdasarkan nilai maksimum
    const decAnggaran  = pickDecimals(Math.max(...anggaranValuesB.map(Math.abs), 0));
    const decRealisasi = pickDecimals(Math.max(...realisasiValuesB.map(Math.abs), 0));

    const colors          = ['#0575E6','#FFA500','#8A2BE2','#00BFA6'];
    const realisasiColors = ['#7ed957','#ffd966','#bdb2ff','#80cbc4'];

    function createBarChart(canvasId, datasetLabel, valuesB, colorsArr, decimals) {
        const ctx = document.getElementById(canvasId).getContext('2d');

        const datasets = labels.map((label, i) => ({
            label: label,
            data: [valuesB[i]], // satu nilai per kategori
            backgroundColor: colorsArr[i],
            datalabels: {
            anchor: 'end',
            align: 'right',
            formatter: v => fmtMiliar(v, decimals),
            clip: false
            }
        }));

        new Chart(ctx, {
            type: 'bar',
            data: {
            labels: [datasetLabel], // cuma 1 kategori "Anggaran" atau "Realisasi"
            datasets: datasets
            },
            options: {
            indexAxis: 'y',
            plugins: {
                legend: { display: true, position: 'top' },
                tooltip: {
                callbacks: {
                    label: (ctx) => {
                    const v = ctx.parsed.x ?? ctx.parsed.y ?? 0;
                    return `${ctx.dataset.label}: ${fmtMiliar(v, decimals)}`;
                    }
                }
                }
            },
            scales: {
                x: {
                beginAtZero: true,
                suggestedMax: Math.max(...valuesB) * 1.1 || 1,
                title: { display: true, text: 'Miliar Rupiah (M)' },
                ticks: {
                    callback: (value) => fmtMiliar(value, decimals)
                }
                },
                y: { ticks: { autoSkip: false } }
            }
            },
            plugins: [ ChartDataLabels ]
        });
    }


        createBarChart('anggaranChart',  '',  anggaranValuesB,  colors,          decAnggaran);
        createBarChart('realisasiChart', '', realisasiValuesB, realisasiColors, decRealisasi);
    });
        </script>
@endsection