@extends('layout.dashboard.index')

@section('content')
    <div class="container-fluid">
        <div class="row my-5">
            <div class="col-md-8 my-auto">
                <p class="text-muted fw-medium mb-0">Gambaran strategis perencanaan anggaran dan kinerja pengeluaran aktual.</p>
            </div>
            <div class="col-md-4">
                <div class="row justify-content-end">
                    <div class="col-md-6">
                        <div class="d-flex gap-4">
                            <i class="bi bi-calendar-date-fill my-auto" style="font-size: 15pt"></i>
                            <select class="form-select form-select-sm" aria-label="Default select example" id="filterYear">
                                <option selected value="">Tahun</option>
                                @for ($year = date('Y'); $year >= date('Y') - 3; $year--)
                                    <option value="{{ $year }}" @selected($year == date('Y'))>
                                        {{ $year }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                        <div class="col-md-6">
                            <div class="d-flex gap-4">
                                <i class="bi bi-layers-fill my-auto" style="font-size: 15pt"></i>
                                <select class="form-select form-select-sm" aria-label="Default select example"
                                    name="filterDivision" id="filterDivision">
                                    <option selected value="">Semua Departemen</option>
                                </select>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="row g-4">
            <!-- Total Budget -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Total Rancangan Anggaran</p>
                            <h2 class="fw-bold mb-0" id="totalBudget">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-primary text-primary">
                            <i class="bi bi-cash-coin" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Realisasi Budget -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Realisasi Anggaran</p>
                            <h2 class="fw-bold mb-1" id="totalActual">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-info text-info">
                            <i class="bi bi-bar-chart-line" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sisa Anggaran -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Sisa Anggaran</p>
                            <h2 class="fw-bold mb-0" id="sisaAnggaran">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-warning text-warning">
                            <i class="bi bi-wallet" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tingkat Pemakaian -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Tingkat Pemakaian Anggaran</p>
                            <h2 class="fw-bold mb-1" id="persentaseTerpakai">0%</h2>
                        </div>
                        <div class="icon-box bg-light-success text-success">
                            <i class="bi bi-arrow-up-right-circle" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rata-rata Bulanan -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Rata-rata Pengeluaran Bulanan</p>
                            <h2 class="fw-bold mb-1" id="rataRataBulanan">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-danger text-danger">
                            <i class="bi bi-bank2" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row g-4 my-2">
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="mb-4">Budget vs Actual Trend</h5>
                        <div class="chart-container">
                            <canvas id="monthlyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="mb-4">Quarterly Performance</h5>
                        <div class="chart-container">
                            <canvas id="quarterlyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="mb-4">Budget Utilization by Departement</h5>
                        <div class="horizontal-chart-container">
                            <canvas id="divisionChart"></canvas>
                        </div>
                        {{-- <div class="utilization-list" id="divisionUtilization">
                            <!-- Akan diisi JavaScript -->
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="mb-4">Budget Distribution</h5>
                        <div class="distribution-container">
                            <div class="distribution-chart">
                                <canvas id="distributionChart"></canvas>
                            </div>
                            {{-- <div class="distribution-legend" id="distributionLegend">
                                <!-- Akan diisi JavaScript -->
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="mb-4">Top Cost Activities</h5>
                        <div class="horizontal-chart-container">
                            <canvas id="topActivitiesChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="mb-4">Risk & Alerts</h5>
                        <div class="alerts-list" id="riskAlerts">
                            <!-- Akan diisi JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        let monthlyChart, quarterlyChart;

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            initializeCharts();
            loadChartData();

            $.ajax({
                url: '/user/division',
                type: 'GET',
                beforeSend: function() {},
                success: function(response) {
                    if (response.success) {
                        let select = $('#filterDivision');
                        select.empty();
                        select.append('<option value="">Semua Departemen</option>');

                        $.each(response.data, function(index, division) {
                            select.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select.trigger('change');
                    }
                },
                error: function() {
                    alert('Data tidak ditemukan');
                }
            });
        });

        function initializeCharts() {
            // Monthly Chart
            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
            monthlyChart = new Chart(monthlyCtx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
                    datasets: [{
                            label: 'Budget',
                            data: [],
                            borderColor: '#36A2EB',
                            backgroundColor: 'rgba(54, 162, 235, 0.1)',
                            borderWidth: 3,
                            tension: 0.1,
                            fill: true
                        },
                        {
                            label: 'Actual',
                            data: [],
                            borderColor: '#FF6384',
                            backgroundColor: 'rgba(255, 99, 132, 0.1)',
                            borderWidth: 3,
                            tension: 0.1,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: false,
                            text: 'Monthly Budget vs Actual'
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                callback: function(value) {
                                    // return 'Rp ' + (value / 1000000).toFixed(1) + 'Jt';
                                    return 'Rp ' + formatNumber(value);
                                }
                            }
                        }
                    }
                }
            });

            // Quarterly Chart
            const quarterlyCtx = document.getElementById('quarterlyChart').getContext('2d');
            quarterlyChart = new Chart(quarterlyCtx, {
                type: 'bar',
                data: {
                    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                    datasets: [{
                            label: 'Budget',
                            data: [],
                            backgroundColor: 'rgba(54, 162, 235, 0.7)',
                            borderColor: '#36A2EB',
                            borderWidth: 1
                        },
                        {
                            label: 'Actual',
                            data: [],
                            backgroundColor: 'rgba(255, 99, 132, 0.7)',
                            borderColor: '#FF6384',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        title: {
                            display: false,
                            text: 'Quarterly Performance'
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                callback: function(value) {
                                    return 'Rp ' + formatNumber(value);
                                    // return 'Rp ' + (value / 1000000).toFixed(1) + 'Jt';
                                }
                            }
                        }
                    }
                }
            });

            // Division Utilization Chart (Horizontal Bar)
            const divisionCtx = document.getElementById('divisionChart').getContext('2d');
            divisionChart = new Chart(divisionCtx, {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                            label: 'Budget',
                            data: [],
                            backgroundColor: 'rgba(52,152,219,0.7)',
                            borderColor: '#3498db',
                            borderWidth: 1,
                            borderRadius: 6
                        },
                        {
                            label: 'Actual',
                            data: [],
                            backgroundColor: 'rgba(231,76,60,0.7)',
                            borderColor: '#e74c3c',
                            borderWidth: 1,
                            borderRadius: 6
                        }
                    ]
                },
                options: {
                    indexAxis: 'y', // Membuat horizontal bar
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    label += 'Rp ' + formatNumber(context.raw);
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0,0,0,0.03)',
                                display: false
                            },
                            ticks: {
                                callback: function(value) {
                                    return 'Rp' + formatNumber(value);
                                }
                            }
                        },
                        y: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // Top Activities Chart (Horizontal Bar)
            const topCtx = document.getElementById('topActivitiesChart').getContext('2d');
            topActivitiesChart = new Chart(topCtx, {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Actual Spending',
                        data: [],
                        backgroundColor: 'rgba(231,76,60,0.7)',
                        borderColor: '#e74c3c',
                        borderWidth: 1,
                        borderRadius: 6
                    }]
                },
                options: {
                    indexAxis: 'y', // Membuat horizontal bar
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'Rp ' + formatNumber(context.raw);
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0,0,0,0.03)',
                                display: false
                            },
                            ticks: {
                                callback: function(value) {
                                    return 'Rp' + formatNumber(value);
                                }
                            }
                        },
                        y: {
                            ticks: {
                                autoSkip: false
                            },
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // Distribution Chart (Doughnut)
            const distributionCtx = document.getElementById('distributionChart').getContext('2d');
            distributionChart = new Chart(distributionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Used', 'Remaining'],
                    datasets: [{
                        data: [0, 100],
                        backgroundColor: ['#3498db', 'rgba(231,76,60,0.7)'],
                        borderWidth: 0,
                        borderRadius: 10
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    let value = context.raw || 0;
                                    let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return `${label}: Rp ${formatNumber(value)} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }

        $('#filterYear, #filterDivision').change(function() {
            loadChartData();
        });

        function loadChartData() {
            const year = $('#filterYear').val();
            const divisionId = $('#filterDivision').val();

            $('#loading').addClass('active');
            $('#errorMessage').removeClass('active');

            $.ajax({
                url: "{{ route('dashboard-budget.chart') }}",
                method: 'GET',
                data: {
                    year: year,
                    // month: month,
                    division_id: divisionId
                },
                success: function(response) {
                    updateMatric(response.matric);
                    updateMonthlyChart(response.monthly);
                    updateQuarterlyChart(response.quarterly);
                    updateDivisionChart(response.divisionUtilization);
                    updateBudgetDistribution(response.budgetDistribution);
                    updateTopActivitiesChart(response.topActivities);
                    updateRiskAlerts(response.riskAlerts);
                    $('#loading').removeClass('active');
                },
                error: function(xhr, status, error) {
                    $('#loading').removeClass('active');
                    $('#errorMessage')
                        .addClass('active')
                        .text('Error loading data: ' + error);
                }
            });
        }

        function updateMatric(data) {
            $('#totalBudget').text('Rp ' + formatNumber(data.total_budget));
            $('#totalActual').text('Rp ' + formatNumber(data.total_actual));
            $('#sisaAnggaran').text('Rp ' + formatNumber(data.sisa_anggaran));
            $('#persentaseTerpakai').text(data.persentase_terpakai + '%');
            $('#rataRataBulanan').text('Rp ' + formatNumber(data.rata_rata_bulanan));
        }

        function updateMonthlyChart(data) {
            monthlyChart.data.datasets[0].data = data.budget;
            monthlyChart.data.datasets[1].data = data.actual;
            monthlyChart.update();
        }

        function updateQuarterlyChart(data) {
            quarterlyChart.data.datasets[0].data = data.budget;
            quarterlyChart.data.datasets[1].data = data.actual;
            quarterlyChart.update();
        }

        function updateDivisionChart(data) {
            divisionChart.data.labels = data.labels;
            divisionChart.data.datasets[0].data = data.budget;
            divisionChart.data.datasets[1].data = data.actual;
            divisionChart.update();
        }

        function updateBudgetDistribution(data) {
            // Update chart
            distributionChart.data.datasets[0].data = [data.used, data.remaining];
            distributionChart.update();

            // Update legend with better formatting
            // const legendHtml = `
        //     <div class="legend-item">
        //         <div class="legend-color used"></div>
        //         <span class="legend-label">Used Budget</span>
        //         <span class="legend-value">Rp ${formatNumber(data.used)}</span>
        //         <span class="legend-percent">(${data.used_percentage}%)</span>
        //     </div>
        //     <div class="legend-item">
        //         <div class="legend-color remaining"></div>
        //         <span class="legend-label">Remaining Budget</span>
        //         <span class="legend-value">Rp ${formatNumber(data.remaining)}</span>
        //         <span class="legend-percent">(${data.remaining_percentage}%)</span>
        //     </div>
        // `;

            // document.getElementById('distributionLegend').innerHTML = legendHtml;
        }

        function wrapLabel(str, maxWidth = 30) {
            const words = str.split(' ');
            const lines = [];
            let currentLine = '';

            words.forEach(word => {
                if ((currentLine + word).length > maxWidth) {
                    lines.push(currentLine.trim());
                    currentLine = '';
                }
                currentLine += word + ' ';
            });

            lines.push(currentLine.trim());
            return lines;
        }

        function updateTopActivitiesChart(data) {
            // Tambahkan division ke label
            topActivitiesChart.data.labels = data.labels.map((label, index) => {
                const fullLabel = `${label} (${data.divisions[index]})`;
                return wrapLabel(fullLabel, 30);
            });
            topActivitiesChart.data.datasets[0].data = data.data;
            topActivitiesChart.update();
        }

        function updateRiskAlerts(data) {
            let html = '';

            if (data.length === 0) {
                html =
                    '<div style="text-align: center; padding: 50px; color: #7f8c8d; background: #f8fafd; border-radius: 12px;">Tidak ada peringatan risiko</div>';
            } else {
                data.forEach(item => {
                    const statusClass = item.status === 'danger' ? 'danger' : (item.status === 'warning' ?
                        'warning' : '');

                    html += `
                        <div class="alert-item ${statusClass}">
                            <div class="alert-icon"><i class="bi bi-exclamation-triangle-fill text-warning"></i></div>
                            <div class="alert-content">
                                <div class="alert-title">${item.activity}</div>
                                <div class="alert-division">${item.division}</div>
                                <div class="alert-meta">
                                    <span class="alert-amount">Rp ${formatNumber(item.actual)} / Rp ${formatNumber(item.budget)}</span>
                                    <span class="alert-percentage">${item.percentage}%</span>
                                </div>
                            </div>
                        </div>
                    `;
                });
            }

            document.getElementById('riskAlerts').innerHTML = html;
        }

        function formatNumber(amount) {
            if (amount >= 1000000000) {
                return (amount / 1000000000).toFixed(2) + 'M';
            } else if (amount >= 1000000) {
                return (amount / 1000000).toFixed(2) + 'Jt';
            } else if (amount >= 1000) {
                return (amount / 1000).toFixed(2) + 'Rb';
            }
            return amount.toString();
        }

        function updateCharts() {
            loadChartData();
        }

        // Auto refresh setiap 5 menit
        setInterval(loadChartData, 300000);
    </script>
@endsection