@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])

    <div class="container-fluid py-4">
        <!-- Filter Tahun -->
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4 ">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <label for="yearFilter" class="form-label">Pilih Tahun</label>
                        @php
                            $opsiTahun = DB::table('sys_enum')->where('idenum', 'tahun')->pluck('value')->toArray();
                            $tahunSekarang = date('Y');
                        @endphp
                        <select id="yearFilter" class="form-select" onchange="filterYear()">
                            <!-- Tahun akan dimasukkan di sini secara dinamis -->
                            @foreach ($opsiTahun as $tahun)
                                <option value="{{ $tahun }}" @if ($tahun == $tahunSekarang) selected @endif>
                                    {{ $tahun }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="chartsContainer">
            <!-- Dynamic chart containers will be inserted here -->
        </div>
    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Function to filter year
            window.filterYear = function() {
                let selectedYear = document.getElementById('yearFilter').value;
                loadChartData(selectedYear);
            };

            // Load initial chart data
            loadChartData(); // Call without year parameter to load default data

            // Function to load chart data via AJAX
            function loadChartData(year = null) {
                $.ajax({
                    url: '{{ url($url_menu) . '/ajax' }}', // Update with your correct API endpoint
                    type: 'GET',
                    data: year ? {
                        year: year
                    } : {}, // Send selected year if available
                    success: function(response) {
                        renderCharts(response);
                    },
                    error: function() {
                        alert('Terjadi kesalahan saat memuat data.');
                    }
                });
            }

            // Function to render the charts
            function renderCharts(chartsData) {
                $('#chartsContainer').empty(); // Clear any existing charts
                var vtitle = '-';
                var vfilter = '-';
                chartsData.forEach(function(chartData, index) {
                    (chartData.title == 'Line 1 (Slitter 1, 2, 8, H)') ? (vtitle = 'Line 1', vfilter =
                    '1') : '';
                    (chartData.title == 'Line 2 (Slitter 1, 2, 8, H)') ? (vtitle = 'Line 2', vfilter =
                    '2') : '';
                    (chartData.title == 'Line 1, 2, 4, 5, 6, 7, 8, 9, A, C, H, N, null (Slitter 7)') ?
                    (vtitle = 'Line 3', vfilter = '3') : '';
                    (chartData.title == 'Line 1, 2, 4, 5, 6, 7, 8, 9, A, C, H, N, null (Slitter A)') ?
                    (vtitle = 'Line 5', vfilter = '4') : '';
                    (chartData.title == 'Line 1, 2, 4, 5, 6, 7, 8, 9, A, C, H, N, null (Slitter X)') ?
                    (vtitle = 'Line 11', vfilter = '5') : '';
                    const chartContainer = `
                        <div class="col-lg-6 col-md-12 mb-4">
                            <div class="card shadow-sm">
                                <div class="card-header pb-0 bg-light">
                                    <h6 class="font-weight-bold">${vtitle}</h6>
                                </div>
                                <div class="card-body">
                                    <button class="btn btn-primary" onclick="showChart(${index}, '${chartData.title}', '${vfilter}')">View Chart</button>
                                    <canvas id="offgradeChart${index}" style="min-height: 300px; max-width: 100%; display: none;"></canvas>
                                </div>
                            </div>
                        </div>
                    `;
                    $('#chartsContainer').append(chartContainer);
                });
            }
        });

        // Function to render the chart when button is clicked
        function showChart(index, chartTitle, vfilter) {
            const canvas = document.getElementById(`offgradeChart${index}`);
            let selectedYear = document.getElementById('yearFilter').value;

            // Make the canvas visible
            canvas.style.display = "block";
            const ctx = canvas.getContext('2d');

            // Perform AJAX request to get data for this specific chart
            $.ajax({
                url: '{{ url($url_menu) . '/ajax2' }}', // Adjust the URL to your second endpoint
                type: 'GET',
                data: {
                    title: chartTitle,
                    tahun: selectedYear,
                    filter: vfilter
                },
                success: function(response) {
                    // Assuming response contains the chart data
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: response.labels,
                            datasets: [{
                                    label: '% Offgrade Before Upgrade',
                                    data: response.offgradeBefore,
                                    backgroundColor: 'rgba(0, 51, 153, 0.7)',
                                    borderColor: 'rgba(0, 51, 153, 1)',
                                    borderWidth: 1
                                },
                                {
                                    label: '% Offgrade After Upgrade',
                                    data: response.offgradeAfter,
                                    backgroundColor: 'rgba(255, 99, 71, 0.7)',
                                    borderColor: 'rgba(255, 99, 71, 1)',
                                    borderWidth: 1
                                }
                            ]
                        },
                        options: {
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 35,
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    },
                                    title: {
                                        display: true,
                                        text: 'Percentage (%)'
                                    }
                                },
                                x: {
                                    title: {
                                        display: true,
                                        text: 'Periode'
                                    }
                                }
                            },
                            responsive: true,
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'top'
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return context.dataset.label + ': ' + context.raw
                                                .toFixed(2) + '%';
                                        }
                                    }
                                }
                            }
                        }
                    });
                },
                error: function() {
                    alert('Terjadi kesalahan saat memuat data untuk chart.');
                }
            });
        }
    </script>
@endpush