@extends('layouts.app')

@section('styles')
    <!-- Chart.js CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js/dist/Chart.min.css">
    <!-- End Chart.js CDN -->
    <style>
        .filter-section {
            background-color: #f5f5f5;
            padding: 5px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .browser-default {
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .browser-default:focus {
            border-color: #26a69a;
            outline: none;
            box-shadow: 0 0 5px rgba(38, 166, 154, 0.3);
        }
        .filter-section label {
            font-size: 14px;
            color: #666;
            display: block;
        }

        /* Style untuk tabel */
        .performance-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .performance-table th {
            background-color: #f8f9fa;
            color: #333;
            font-weight: 600;
            padding: 12px 15px;
            text-align: left;
            border-bottom: 2px solid #dee2e6;
        }

        .performance-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #dee2e6;
            color: #666;
        }

        .performance-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .performance-table th:first-child,
        .performance-table td:first-child {
            padding-left: 20px;
        }

        .performance-table th:last-child,
        .performance-table td:last-child {
            padding-right: 20px;
        }

        /* Style untuk bagian normalisasi */
        .normalisasi-section {
            padding: 20px;
        }

        .normalisasi-header {
            margin-bottom: 30px;
        }

        .normalisasi-header h1 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }

        .normalisasi-header .year-select {
            margin-top: 15px;
            max-width: 200px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .normalisasi-header .year-select label {
            color: #666;
            font-size: 14px;
            white-space: nowrap;
            margin: 0;
        }

        .normalisasi-header .year-select select {
            flex: 1;
        }

        .performance-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .performance-table th {
            background-color: #f8f9fa;
            color: #333;
            font-weight: 600;
            padding: 12px 15px;
            text-align: center;
            border-bottom: 2px solid #dee2e6;
        }

        .performance-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #dee2e6;
            color: #666;
            text-align: center;
        }

        .performance-table td:first-child {
            text-align: left;
        }

        .performance-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .performance-table th:first-child,
        .performance-table td:first-child {
            padding-left: 20px;
        }

        .performance-table th:last-child,
        .performance-table td:last-child {
            padding-right: 20px;
        }

        .chart-container {
            margin-top: 30px;
            padding: 20px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        /* Style untuk progress bar */
        .progress-container {
            width: 100%;
            background-color: #f5f5f5;
            border-radius: 4px;
            margin: 5px 0;
        }

        .progress-bar {
            height: 20px;
            border-radius: 4px;
            text-align: right;
            padding-right: 5px;
            line-height: 20px;
            color: rgb(20, 18, 18);
            font-size: 12px;
            font-weight: bold;
            background-color: #00ff00;
        }

        /* Menghapus kelas warna yang tidak digunakan */
        .progress-bar.low,
        .progress-bar.medium,
        .progress-bar.high {
            background-color: #00ff00;
        }
    </style>
@endsection

@section('content')
<!-- Filter Section -->
<div class="filter-section">
    <div class="row">
        <div class="col s12 m12 l4">
            <label for="filter_tahun">Filter Tahun</label>
            <select id="filter_tahun" class="browser-default">
                <option value="">Semua Tahun</option>
                @for($year = date('Y'); $year >= 2024; $year--)
                    <option value="{{ $year }}">{{ $year }}</option>
                @endfor
            </select>
        </div>
    </div>
</div>

<!--card stats start-->
<div id="card-stats">
    <div class="row">
        <div class="col s12 m4 l4">
            <div class="card">
                <div class="card-content  green white-text">
                    <p class="card-stats-title" id="title-irigasi"><i class="mdi-maps-terrain"></i> Luasan Daerah Irigasi</p>
                    <h4 class="card-stats-number">- Hektar</h4>
                </div>
            </div>
        </div>
        <div class="col s12 m4 l4">
            <div class="card">
                <div class="card-content blue-grey white-text">
                    <p class="card-stats-title" id="title-rawa"><i class="mdi-maps-terrain"></i> Luasan Daerah Rawa</p>
                    <h4 class="card-stats-number">- Hektar</h4>
                </div>
            </div>
        </div>
        <div class="col s12 m4 l4">
            <div class="card">
                <div class="card-content purple white-text">
                    <p class="card-stats-title" id="title-drainase"><i class="mdi-action-assessment"></i>Jumlah Drainase</p>
                    <h4 class="card-stats-number">- Unit</h4>
                </div>
            </div>
        </div>
    </div>
</div>
<!--card stats end-->

<div class="row">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-header cyan">
                <span class="card-title" id="title-sarpras">Kondisi Sarpras Pada Irigasi & Rawa</span>
            </div>
            <div class="card-content">
                <div class="row">
                    <div class="col s6 m3 l3">
                        <canvas id="primerPieChart" style="width:100%;height:100%;display:block;"></canvas>
                    </div>
                    <div class="col s6 m3 l3">
                        <canvas id="sekunderPieChart" style="width:100%;height:100%;display:block;"></canvas>
                    </div>
                    <div class="col s6 m3 l3">
                        <canvas id="tersierPieChart" style="width:100%;height:100%;display:block;"></canvas>
                    </div>
                    <div class="col s6 m3 l3">
                        <canvas id="pembuanganPieChart" style="width:100%;height:100%;display:block;"></canvas>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12 m12 l12">
                        <canvas id="stackedBarChart" style="width:100%;height:400px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-header cyan">
                <span class="card-title" id="title-luasan">Luasan Banjir / Drainase</span>
            </div>
            <div class="card-content">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <canvas id="drainaseBarChart" style="width:100%;height:400px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-content">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="normalisasi-section">
                            <div class="normalisasi-header">
                                <h1 class="center-align">Capaian Kinerja Normalisasi Sungai & Anak Sungai</h1>
                                <div class="year-select">
                                    <label for="filter_tahun_normalisasi">Tahun:</label>
                                    <select id="filter_tahun_normalisasi" class="browser-default">
                                        @for($year = date('Y'); $year >= 2024; $year--)
                                            <option value="{{ $year }}">{{ $year }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <table class="performance-table">
                                <thead>
                                    <tr>
                                        <th>Sungai / Anak Sungai</th>
                                        <th>Panjang (Meter)</th>
                                        <th>Normalisasi Terlaksana (Meter)</th>
                                        <th>Belum Terlaksana (Meter)</th>
                                        <th>Capaian Kinerja (%)</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div class="chart-container">
                                <canvas id="normalisasiBarChart" style="width:100%;height:400px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <!-- End Chart.js CDN -->
    <script>
        let primerChart, sekunderChart, tersierChart, pembuanganChart, stackedBarChart, drainaseBarChart, normalisasiBarChart;
        const kondisiLabels = ['Baik', 'Rusak Ringan', 'Rusak Sedang', 'Rusak Berat'];

        function getChartData(jenis, data) {
            return kondisiLabels.map(label => data[label] || 0);
        }

        function updateDashboard(tahun = '') {
            $.ajax({
                url: '{{ route('dashboard.data') }}',
                data: { tahun: tahun },
                success: function(res) {
                    $(".card-stats-number").eq(0).text(res.total_luas_irigasi + ' Hektar');
                    $(".card-stats-number").eq(1).text(res.total_luas_rawa + ' Hektar');
                    $(".card-stats-number").eq(2).text(res.jumlah_drainase + ' Unit');

                    let tahunTitle = tahun ? ' (' + tahun + ')' : '(Semua)';
                    $('#title-irigasi').html('<i class="mdi-maps-terrain"></i> Luasan Daerah Irigasi');
                    $('#title-rawa').html('<i class="mdi-maps-terrain"></i> Luasan Daerah Rawa');
                    $('#title-drainase').html('<i class="mdi-action-assessment"></i>Jumlah Drainase Tahun ' + tahunTitle);
                    $('#title-sarpras').text('Kondisi Sarpras Pada Irigasi & Rawa Tahun Data ' + tahunTitle);
                    $('#title-luasan').text('Luasan Banjir / Drainase');

                    const tahunLabels = res.luas_drainase_per_tahun.map(item => item.tahun);
                    const luasData = res.luas_drainase_per_tahun.map(item => item.total_luas);

                    if (drainaseBarChart) {
                        drainaseBarChart.data.labels = tahunLabels;
                        drainaseBarChart.data.datasets[0].data = luasData;
                        drainaseBarChart.update();
                    } else {
                        drainaseBarChart = new Chart(document.getElementById('drainaseBarChart').getContext('2d'), {
                            type: 'bar',
                            data: {
                                labels: tahunLabels,
                                datasets: [{
                                    label: 'Luas (m²)',
                                    data: luasData,
                                    backgroundColor: 'rgba(0, 188, 212, 0.7)',
                                    borderColor: 'rgba(0, 188, 212, 1)',
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                responsive: true,
                                plugins: {
                                    title: {
                                        display: true,
                                        text: 'Total Luas Drainase per Tahun',
                                        font: { size: 16 }
                                    },
                                    legend: {
                                        display: false
                                    },
                                    tooltip: {
                                        callbacks: {
                                            label: function(context) {
                                                let value = context.parsed.y;
                                                return `Luas: ${value.toLocaleString('id-ID')} m²`;
                                            }
                                        }
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        title: {
                                            display: true,
                                            text: 'Luas (m²)'
                                        },
                                        ticks: {
                                            callback: function(value) {
                                                return value.toLocaleString('id-ID');
                                            }
                                        }
                                    },
                                    x: {
                                        title: {
                                            display: true,
                                            text: 'Tahun'
                                        }
                                    }
                                }
                            }
                        });
                    }

                    const dataKondisi = res.kondisi_sarpras || {};
                    const primerData = getChartData('Saluran Primer', dataKondisi['Saluran Primer'] || {});
                    if (primerChart) primerChart.data.datasets[0].data = primerData;
                    else primerChart = new Chart(document.getElementById('primerPieChart').getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: kondisiLabels,
                            datasets: [{
                                data: primerData,
                                backgroundColor: [
                                    'rgba(76, 175, 80, 0.7)',
                                    'rgba(255, 193, 7, 0.7)',
                                    'rgba(255, 152, 0, 0.7)',
                                    'rgba(244, 67, 54, 0.7)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                title: { display: true, text: 'Kondisi Saluran Primer', font: { size: 16 }, align: 'center' },
                                legend: { display: true, position: 'right' },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            let label = context.label || '';
                                            let value = context.parsed;
                                            let dataArr = context.chart.data.datasets[0].data;
                                            let total = dataArr.reduce((a, b) => a + b, 0);
                                            let percent = total ? ((value / total) * 100).toFixed(1) + '%' : '0%';
                                            return label + ': ' + value + ' (' + percent + ')';
                                        }
                                    }
                                }
                            }
                        }
                    });
                    if (primerChart) primerChart.update();
                    const sekunderData = getChartData('Saluran Sekunder', dataKondisi['Saluran Sekunder'] || {});
                    if (sekunderChart) sekunderChart.data.datasets[0].data = sekunderData;
                    else sekunderChart = new Chart(document.getElementById('sekunderPieChart').getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: kondisiLabels,
                            datasets: [{
                                data: sekunderData,
                                backgroundColor: [
                                    'rgba(76, 175, 80, 0.7)',
                                    'rgba(255, 193, 7, 0.7)',
                                    'rgba(255, 152, 0, 0.7)',
                                    'rgba(244, 67, 54, 0.7)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                title: { display: true, text: 'Kondisi Saluran Sekunder', font: { size: 16 }, align: 'center' },
                                legend: { display: true, position: 'right' },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            let label = context.label || '';
                                            let value = context.parsed;
                                            let dataArr = context.chart.data.datasets[0].data;
                                            let total = dataArr.reduce((a, b) => a + b, 0);
                                            let percent = total ? ((value / total) * 100).toFixed(1) + '%' : '0%';
                                            return label + ': ' + value + ' (' + percent + ')';
                                        }
                                    }
                                }
                            }
                        }
                    });
                    if (sekunderChart) sekunderChart.update();
                    let tersierData = getChartData('Saluran Tersier', dataKondisi['Saluran Tersier'] || {});
                    const boxTersierData = getChartData('Box Tersier', dataKondisi['Box Tersier'] || {});
                    tersierData = tersierData.map((v, i) => v + (boxTersierData[i] || 0));
                    if (tersierChart) tersierChart.data.datasets[0].data = tersierData;
                    else tersierChart = new Chart(document.getElementById('tersierPieChart').getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: kondisiLabels,
                            datasets: [{
                                data: tersierData,
                                backgroundColor: [
                                    'rgba(76, 175, 80, 0.7)',
                                    'rgba(255, 193, 7, 0.7)',
                                    'rgba(255, 152, 0, 0.7)',
                                    'rgba(244, 67, 54, 0.7)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                title: { display: true, text: 'Kondisi Saluran Tersier', font: { size: 16 }, align: 'center' },
                                legend: { display: true, position: 'right' },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            let label = context.label || '';
                                            let value = context.parsed;
                                            let dataArr = context.chart.data.datasets[0].data;
                                            let total = dataArr.reduce((a, b) => a + b, 0);
                                            let percent = total ? ((value / total) * 100).toFixed(1) + '%' : '0%';
                                            return label + ': ' + value + ' (' + percent + ')';
                                        }
                                    }
                                }
                            }
                        }
                    });
                    if (tersierChart) tersierChart.update();
                    const pembuanganData = getChartData('Saluran Pembuang', dataKondisi['Saluran Pembuang'] || {});
                    if (pembuanganChart) pembuanganChart.data.datasets[0].data = pembuanganData;
                    else pembuanganChart = new Chart(document.getElementById('pembuanganPieChart').getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: kondisiLabels,
                            datasets: [{
                                data: pembuanganData,
                                backgroundColor: [
                                    'rgba(76, 175, 80, 0.7)',
                                    'rgba(255, 193, 7, 0.7)',
                                    'rgba(255, 152, 0, 0.7)',
                                    'rgba(244, 67, 54, 0.7)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                title: { display: true, text: 'Kondisi Saluran Pembuangan', font: { size: 16 }, align: 'center' },
                                legend: { display: true, position: 'right' },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            let label = context.label || '';
                                            let value = context.parsed;
                                            let dataArr = context.chart.data.datasets[0].data;
                                            let total = dataArr.reduce((a, b) => a + b, 0);
                                            let percent = total ? ((value / total) * 100).toFixed(1) + '%' : '0%';
                                            return label + ': ' + value + ' (' + percent + ')';
                                        }
                                    }
                                }
                            }
                        }
                    });
                    if (pembuanganChart) pembuanganChart.update();

                    const sarprasLain = res.sarpras_lain || {};
                    const barChartLabels = Object.keys(sarprasLain);
                    const barChartData = {
                        labels: barChartLabels,
                        datasets: kondisiLabels.map((label, index) => ({
                            label: label,
                            data: barChartLabels.map(jenis => sarprasLain[jenis]?.[label] || 0),
                            backgroundColor: [
                                'rgba(76, 175, 80, 0.7)',
                                'rgba(255, 193, 7, 0.7)',
                                'rgba(255, 152, 0, 0.7)',
                                'rgba(244, 67, 54, 0.7)'
                            ][index],
                            borderWidth: 1
                        }))
                    };

                    if (stackedBarChart) {
                        stackedBarChart.data = barChartData;
                        stackedBarChart.update();
                    } else {
                        stackedBarChart = new Chart(document.getElementById('stackedBarChart').getContext('2d'), {
                            type: 'bar',
                            data: barChartData,
                            options: {
                                indexAxis: 'y',
                                responsive: true,
                                plugins: {
                                    title: {
                                        display: true,
                                        text: 'Perbandingan Kondisi Sarpras Lainnya',
                                        font: { size: 16 }
                                    },
                                    tooltip: {
                                        mode: 'index',
                                        intersect: true
                                    },
                                    legend: {
                                        position: 'top'
                                    }
                                },
                                responsive: true,
                                scales: {
                                    x: {
                                        stacked: true,
                                        beginAtZero: true
                                    },
                                    y: {
                                        stacked: true
                                    }
                                }
                            }
                        });
                    }
                }
            });
        }

        function updateNormalisasiData(tahun) {
            $.ajax({
                url: "{{ url('dashboard/normalisasi-data') }}",
                data: { tahun: tahun },
                success: function(res) {
                    // Update tabel
                    const tbody = $('.performance-table tbody');
                    tbody.empty();

                    res.data.forEach(item => {
                        const row = `
                            <tr>
                                <td>${item.jenis}</td>
                                <td>${item.panjang.toLocaleString('id-ID')}</td>
                                <td>${item.normalisasi.toLocaleString('id-ID')}</td>
                                <td>${item.belum_normalisasi.toLocaleString('id-ID')}</td>
                                <td>
                                    <div class="progress-container">
                                        <div class="progress-bar" style="width: ${item.capaian}%">
                                            ${item.capaian.toFixed(2)}%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        `;
                        tbody.append(row);
                    });

                    // Update chart
                    const labels = res.data.map(item => item.jenis);
                    const panjangData = res.data.map(item => item.panjang);
                    const normalisasiData = res.data.map(item => item.normalisasi);
                    const belumNormalisasiData = res.data.map(item => item.belum_normalisasi);

                    if (normalisasiBarChart) {
                        normalisasiBarChart.data.labels = labels;
                        normalisasiBarChart.data.datasets[0].data = panjangData;
                        normalisasiBarChart.data.datasets[1].data = normalisasiData;
                        normalisasiBarChart.data.datasets[2].data = belumNormalisasiData;
                        normalisasiBarChart.update();
                    } else {
                        normalisasiBarChart = new Chart(document.getElementById('normalisasiBarChart').getContext('2d'), {
                            type: 'bar',
                            data: {
                                labels: labels,
                                datasets: [
                                    {
                                        label: 'Total Panjang',
                                        data: panjangData,
                                        backgroundColor: 'rgba(33, 150, 243, 0.7)',
                                        borderColor: 'rgba(33, 150, 243, 1)',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Normalisasi Terlaksana',
                                        data: normalisasiData,
                                        backgroundColor: 'rgba(76, 175, 80, 0.7)',
                                        borderColor: 'rgba(76, 175, 80, 1)',
                                        borderWidth: 1
                                    },
                                    {
                                        label: 'Belum Terlaksana',
                                        data: belumNormalisasiData,
                                        backgroundColor: 'rgba(244, 67, 54, 0.7)',
                                        borderColor: 'rgba(244, 67, 54, 1)',
                                        borderWidth: 1
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                plugins: {
                                    title: {
                                        display: true,
                                        text: 'Perbandingan Normalisasi Sungai & Anak Sungai',
                                        font: { size: 16 }
                                    },
                                    tooltip: {
                                        callbacks: {
                                            label: function(context) {
                                                let value = context.parsed.y;
                                                return `${context.dataset.label}: ${value.toLocaleString('id-ID')} meter`;
                                            }
                                        }
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        title: {
                                            display: true,
                                            text: 'Panjang (meter)'
                                        },
                                        ticks: {
                                            callback: function(value) {
                                                return value.toLocaleString('id-ID');
                                            }
                                        }
                                    }
                                }
                            }
                        });
                    }
                }
            });
        }

        $(document).ready(function() {
            updateDashboard($('#filter_tahun').val());
            $('#filter_tahun').on('change', function() {
                updateDashboard($(this).val());
            });

            // Initialize normalisasi data
            const initialYear = $('#filter_tahun_normalisasi').val();
            updateNormalisasiData(initialYear);

            // Handle normalisasi year change
            $('#filter_tahun_normalisasi').on('change', function() {
                updateNormalisasiData($(this).val());
            });
        });
    </script>
@endpush