@extends('layouts.master')
@section('title', 'Dashboard')
@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<style>
    body {
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 500px;
        background-image: url("{{ asset('images/logo_cetak.png') }}");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.1;
        z-index: -1;
    }

    /* Card Styling */
    .card {
        border: none;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.5s ease;
        background: rgba(255, 255, 255, 0.95);
        margin-bottom: 35px;
        overflow: hidden;
        position: relative;
        backdrop-filter: blur(5px);
    }
    
    .card:hover {
        transform: translateY(-12px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    }

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(78,84,200,0.1), rgba(143,148,251,0.1));
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .card:hover::before {
        opacity: 1;
    }

    .card-header {
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        color: white;
        border-radius: 25px 25px 0 0 !important;
        font-weight: 700;
        padding: 30px 35px;
        font-size: 1.4rem;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .card-body {
        padding: 35px;
    }

    /* Chart Styling */
    canvas {
        min-height: 500px;
        background: rgba(255, 255, 255, 0.99);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }
    
    /* Status Card Styling */
    .status-card {
        transition: all 0.5s ease;
        border: none;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(78,84,200,0.05);
    }
    
    .status-card:hover {
        transform: translateY(-12px) scale(1.03);
    }
    
    .status-icon {
        font-size: 3.5rem;
        margin-bottom: 25px;
        transition: all 0.4s ease;
        display: inline-block;
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .status-card:hover .status-icon {
        transform: scale(1.25) rotate(5deg);
    }
    
    .status-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: #2d3436;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .status-count {
        font-size: 3rem;
        font-weight: 800;
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    
    .status-label {
        color: #636e72;
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Data Summary Styling */
    .data-summary {
        background: linear-gradient(135deg, rgba(78,84,200,0.95), rgba(143,148,251,0.95));
        backdrop-filter: blur(5px);
        color: white;
        padding: 40px;
        border-radius: 30px;
        margin-bottom: 40px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(78,84,200,0.2);
    }

    .data-summary::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
        transform: skewY(-5deg);
    }

    .data-summary h2 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 20px;
        text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
        letter-spacing: 1px;
    }

    .data-summary p {
        font-size: 1.3rem;
        opacity: 0.95;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Chart Container Styling */
    .chart-container {
        background: rgba(255, 255, 255, 0.95);
        padding: 35px;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(78,84,200,0.05);
    }

    /* Data Labels & Icons */
    .data-label {
        font-size: 1.1rem;
        color: #636e72;
        margin-top: 10px;
        display: block;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .data-icon {
        font-size: 1.4rem;
        margin-right: 10px;
        vertical-align: middle;
        color: #4e54c8;
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .data-icon:hover {
        transform: rotate(15deg);
    }

    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }

    .card, .data-summary, .chart-container {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .status-icon {
        animation: pulse 2s infinite;
    }

    .card-body > * {
        position: relative;
        z-index: 1;
    }
</style>

@section('content')
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col-12">
                <div class="data-summary w-100 rounded-lg shadow-lg p-5" style="background: linear-gradient(135deg, rgba(78,84,200,0.15), rgba(143,148,251,0.12)); border: 1px solid rgba(78,84,200,0.1); backdrop-filter: blur(15px); margin-bottom: -1px;">
                    <div class="d-flex align-items-center position-relative overflow-hidden">
                        <div class="position-relative z-index-1 me-5">
                            <div class="icon-wrapper p-3 rounded-circle" style="background: linear-gradient(135deg, rgba(78,84,200,0.25), rgba(143,148,251,0.25)); box-shadow: 0 8px 20px rgba(78,84,200,0.15);">
                                <i class="fas fa-chart-bar fa-4x animate__animated animate__pulse animate__infinite text-primary" style="filter: drop-shadow(0 0 12px rgba(78,84,200,0.35));"></i>
                            </div>
                        </div>
                        <div class="position-relative z-index-1">
                            <h2 class="mb-3 fw-bold" style="font-size: 3rem; background: linear-gradient(135deg, #4e54c8, #8f94fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.08);">Rekapitulasi Data Simpun Banjar</h2>
                            <p class="mb-0" style="font-size: 1.3rem; letter-spacing: 0.8px; color: rgba(78,84,200,0.7); font-weight: 500;">Visualisasi Data Penerbitan dan Permohonan KRK</p>
                        </div>
                        <div class="position-absolute top-0 end-0 h-100 w-50" style="background: linear-gradient(135deg, transparent, rgba(78,84,200,0.08)); transform: skewX(-30deg) translateX(20%); backdrop-filter: blur(10px);"></div>
                        <div class="position-absolute top-0 end-0 h-100 w-25" style="background: linear-gradient(135deg, transparent, rgba(143,148,251,0.1)); transform: skewX(-15deg); backdrop-filter: blur(8px);"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 mb-5 mt-4">
                <div class="d-flex justify-content-end mb-3">
                    <select id="yearSelect" class="form-select" style="width: auto; background: rgba(255,255,255,0.95); border: 1px solid rgba(78,84,200,0.2); border-radius: 10px; padding: 8px 15px; font-weight: 500; color: #4e54c8;">
                        @php
                            $currentYear = date('Y');
                            $startYear = 2020;
                        @endphp
                        @for($year = $currentYear; $year >= $startYear; $year--)
                            <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>
                                Tahun {{ $year }}
                            </option>
                        @endfor
                    </select>
                </div>
                <div class="chart-container p-3 rounded-lg shadow-lg" style="background: rgba(255,255,255,0.95); border: 1px solid rgba(78,84,200,0.1);">
                    <canvas id="myBarChart"></canvas>
                </div>
            </div>
        </div>

        <div class="row mx-4">
            <div class="col-lg-8 mb-5">
                <div class="card h-100">
                    <div class="chart-container" style="height: 500px; position: relative; padding: 15px;">
                        <canvas id="myPieChart" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-5">
                <div class="card hover-shadow-lg h-100">
                    <div class="card-body text-center d-flex flex-column justify-content-center" style="background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98)); padding: 1.5rem;">
                        <div class="mb-3">
                            <i class="fas fa-users fa-3x text-primary animate__animated animate__pulse" style="filter: drop-shadow(0 0 10px rgba(78,84,200,0.3));"></i>
                        </div>
                        <div class="mt-2">
                            <h5 class="mb-2 fw-bold">
                                <i class="fas fa-file-alt data-icon"></i>
                                Total Permohonan Masuk
                            </h5>
                            <h2 class="mb-2" style="font-size: 3rem; background: linear-gradient(135deg, #4e54c8, #8f94fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
                                {{ $statusKRK->sum('total') }}
                            </h2>
                            <span class="data-label" style="font-size: 1rem; color: #666;">
                                Total Keseluruhan Data
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var ctx = document.getElementById('myPieChart').getContext('2d');
                var statusData = @json($statusKRK);
                
                var colors = [
                    'rgba(66, 133, 244, 0.85)',  // Biru
                    'rgba(52, 168, 83, 0.85)',   // Hijau 
                    'rgba(251, 188, 5, 0.85)',   // Kuning
                    'rgba(234, 67, 53, 0.85)',   // Merah
                    'rgba(26, 115, 232, 0.85)'   // Biru Tua
                ];

                var pieChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: [
                            'Pengajuan Baru',
                            'Persetujuan Kepala Bidang', 
                            'Forum Penataan Ruang (FPR)',
                            'Tanda Tangan Kepala Dinas',
                            'Terbit'
                        ],
                        datasets: [{
                            data: statusData.map(item => item.total),
                            backgroundColor: colors,
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    font: {
                                        family: "'Poppins', sans-serif",
                                        size: 13
                                    },
                                    padding: 15,
                                    usePointStyle: true,
                                    generateLabels: function(chart) {
                                        const datasets = chart.data.datasets;
                                        return datasets[0].data.map((data, i) => ({
                                            text: `${chart.data.labels[i]} (${data})`,
                                            fillStyle: datasets[0].backgroundColor[i],
                                            strokeStyle: '#fff',
                                            lineWidth: 1,
                                            hidden: false,
                                            index: i
                                        }));
                                    }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Distribusi Status Permohonan KRK',
                                font: {
                                    family: "'Poppins', sans-serif", 
                                    size: 24,
                                    weight: '800'
                                },
                                color: '#2d3436',
                                padding: {
                                    top: 25,
                                    bottom: 35
                                }
                            },
                            tooltip: {
                                backgroundColor: '#fff',
                                titleColor: '#2d3436',
                                bodyColor: '#636e72',
                                titleFont: {
                                    family: "'Poppins', sans-serif",
                                    size: 14
                                },
                                bodyFont: {
                                    family: "'Poppins', sans-serif",
                                    size: 13
                                },
                                borderColor: 'rgba(0,0,0,0.1)',
                                borderWidth: 1,
                                padding: 15,
                                cornerRadius: 8,
                                displayColors: true,
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed || 0;
                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                        const percentage = ((value / total) * 100).toFixed(1);
                                        return `${label}: ${value} (${percentage}%)`;
                                    }
                                }
                            }
                        },
                        layout: {
                            padding: 20
                        },
                        animation: {
                            duration: 1500,
                            easing: 'easeInOutQuart'
                        }
                    }
                });
            });
        </script>

        
        <div class="row mx-4">
            @foreach($statusKRK as $status)
            <div class="col-lg-4 mb-4">
                <div class="card status-card h-100 hover-shadow-lg" 
                     onmouseover="this.style.transform='scale(1.03)'; this.style.transition='all 0.3s ease'"
                     onmouseout="this.style.transform='scale(1)'"
                     onclick="showPemohonList({{ $status->id_status }}, '{{ addslashes(json_encode($status->pemohon)) }}')"
                     style="cursor: pointer;">
                    <div class="card-body text-center p-4" style="position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95)); border-radius: 20px;">
                        <!-- Background Icon -->
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.1; font-size: 12rem; z-index: 0;">
                            @if($status->id_status == 1)
                                <i class="fas fa-file-alt"></i>
                            @elseif($status->id_status == 2)
                                <i class="fas fa-search"></i>
                            @elseif($status->id_status == 3)
                                <i class="fas fa-sync-alt"></i>
                            @elseif($status->id_status == 4)
                                <i class="fas fa-map-marked-alt"></i>
                            @elseif($status->id_status == 5)
                                <i class="fas fa-user-check"></i>
                            @elseif($status->id_status == 6)
                                <i class="fas fa-user-shield"></i>
                            @elseif($status->id_status == 7)
                                <i class="fas fa-signature"></i>
                            @elseif($status->id_status == 8)
                                <i class="fas fa-file-contract"></i>
                            @elseif($status->id_status == 9)
                                <i class="fas fa-users-cog"></i>
                            @elseif($status->id_status == 10)
                                <i class="fas fa-ban"></i>
                            @endif
                        </div>

                        <!-- Content -->
                        <div style="position: relative; z-index: 1;">
                            <div class="status-icon-wrapper mb-4 animate__animated animate__fadeIn">
                                @if($status->id_status == 1)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #4A90E2, #357ABD); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Pengajuan Baru</h4>
                                @elseif($status->id_status == 2)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #50C1E9, #3AA1C9); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Verifikasi Data</h4>
                                @elseif($status->id_status == 3)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #F6BB42, #E8AA2E); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Perbaikan Data</h4>
                                @elseif($status->id_status == 4)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #48CFAD, #37BC9B); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Verifikasi Lapangan</h4>
                                @elseif($status->id_status == 5)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #AC92EC, #967ADC); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Persetujuan Kepala Bidang</h4>
                                @elseif($status->id_status == 6)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #EC87C0, #D770AD); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Persetujuan Sekertaris Dinas</h4>
                                @elseif($status->id_status == 7)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #A0D468, #8CC152); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Tanda Tangan Kepala Dinas</h4>
                                @elseif($status->id_status == 8)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #2ECC71, #27AE60); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Terbit</h4>
                                @elseif($status->id_status == 9)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #5D9CEC, #4A89DC); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Forum Penataan Ruang (FPR)</h4>
                                @elseif($status->id_status == 10)
                                    <h4 class="status-title mt-3 fw-bold" style="background: linear-gradient(45deg, #ED5565, #DA4453); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Ditolak</h4>
                                @endif
                            </div>

                            <h2 class="status-count mb-3 animate__animated animate__fadeInUp" style="font-size: 3.5rem; background: linear-gradient(135deg, #4e54c8, #8f94fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 3px 3px 6px rgba(0,0,0,0.1);">
                                {{ $status->total }}
                            </h2>

                            <p class="status-label mb-0 animate__animated animate__fadeIn" style="color: #6c7293; font-size: 1.2rem; font-weight: 500;">
                                <i class="fas fa-users data-icon me-2" style="color: #4e54c8;"></i>
                                <span>Klik untuk lihat detail</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Modal untuk menampilkan daftar pemohon -->
        <div class="modal fade" id="pemohonListModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content" style="background: linear-gradient(135deg, #f6f8fd, #f1f4f9); border: none; border-radius: 15px;">
                    <div class="modal-header border-0">
                        <h5 class="modal-title fw-bold" style="background: linear-gradient(135deg, #4e54c8, #8f94fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            Daftar Pemohon
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="pemohon-list" style="max-height: 60vh; overflow-y: auto;">
                            <!-- Daftar pemohon akan diisi melalui JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function showPemohonList(statusId, pemohonData) {
                try {
                    const modal = new bootstrap.Modal(document.getElementById('pemohonListModal'));
                    const pemohonList = document.querySelector('.pemohon-list');
                    
                    let pemohon;
                    try {
                        pemohon = JSON.parse(decodeURIComponent(pemohonData.replace(/\\/g, '')));
                    } catch (e) {
                        console.error('Error parsing pemohon data:', e);
                        pemohon = [];
                    }
                    
                    pemohonList.innerHTML = '';
                    
                    if (!Array.isArray(pemohon) || pemohon.length === 0) {
                        pemohonList.innerHTML = `
                            <div class="alert alert-info text-center">
                                <i class="fas fa-info-circle me-2"></i>
                                Tidak ada data pemohon untuk status ini
                            </div>
                        `;
                    } else {
                        pemohon.forEach((p, index) => {
                            const nama = p.nama_pemohon || 'Nama tidak tersedia';
                            
                            pemohonList.innerHTML += `
                                <div class="pemohon-item p-3 mb-3 animate__animated animate__fadeIn" 
                                     style="background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-circle me-3" 
                                                 style="background: ${getRandomGradient()}; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                                                ${nama.charAt(0).toUpperCase()}
                                            </div>
                                            <div>
                                                <h6 class="mb-1 fw-bold" style="color: #2d3436;">${nama}</h6>
                                            </div>
                                        </div>
                                        <div>
                                            <span class="badge" 
                                                  style="background: ${getStatusColor(statusId)};">
                                                ${getStatusLabel(statusId)}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            `;
                        });
                    }
                    
                    modal.show();
                } catch (error) {
                    console.error('Error showing pemohon list:', error);
                    alert('Terjadi kesalahan saat memuat data pemohon. Silakan coba lagi.');
                }
            }

            // Tambahkan fungsi untuk mendapatkan warna status
            function getStatusColor(statusId) {
                const colors = {
                    1: '#4A90E2',
                    2: '#50C1E9',
                    3: '#F6BB42',
                    4: '#48CFAD',
                    5: '#AC92EC',
                    6: '#EC87C0',
                    7: '#A0D468',
                    8: '#2ECC71',
                    9: '#5D9CEC',
                    10: '#ED5565'
                };
                return colors[statusId] || '#6c757d';
            }

            function getStatusLabel(statusId) {
                const statusLabels = {
                    1: 'Pengajuan Baru',
                    2: 'Verifikasi Data',
                    3: 'Perbaikan Data',
                    4: 'Verifikasi Lapangan',
                    5: 'Persetujuan Kepala Bidang',
                    6: 'Persetujuan Sekertaris Dinas',
                    7: 'Tanda Tangan Kepala Dinas',
                    8: 'Terbit',
                    9: 'Forum Penataan Ruang',
                    10: 'Ditolak'
                };
                return statusLabels[statusId] || 'Status Tidak Diketahui';
            }

            function getRandomGradient() {
                const gradients = [
                    'linear-gradient(45deg, #4A90E2, #357ABD)',
                    'linear-gradient(45deg, #50C1E9, #3AA1C9)',
                    'linear-gradient(45deg, #F6BB42, #E8AA2E)',
                    'linear-gradient(45deg, #48CFAD, #37BC9B)',
                    'linear-gradient(45deg, #AC92EC, #967ADC)'
                ];
                return gradients[Math.floor(Math.random() * gradients.length)];
            }

            function formatDate(dateString) {
                if (!dateString) return 'Tanggal tidak tersedia';
                try {
                    const options = { year: 'numeric', month: 'long', day: 'numeric' };
                    return new Date(dateString).toLocaleDateString('id-ID', options);
                } catch (error) {
                    return dateString;
                }
            }
        </script>

    <!-- Tombol WhatsApp Mengambang -->
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('myBarChart').getContext('2d');
            let myBarChart;
            
            function initChart(chartData, permohonanData) {
                // Gradient untuk dataset pertama
                const gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
                gradient1.addColorStop(0, 'rgba(78, 84, 200, 0.9)');
                gradient1.addColorStop(1, 'rgba(78, 84, 200, 0.3)');
                
                // Gradient untuk dataset kedua
                const gradient2 = ctx.createLinearGradient(0, 0, 0, 400);
                gradient2.addColorStop(0, 'rgba(143, 148, 251, 0.9)');
                gradient2.addColorStop(1, 'rgba(143, 148, 251, 0.3)');

                if (myBarChart) {
                    myBarChart.destroy();
                }

                myBarChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
                        datasets: [{
                            label: 'Data Penerbitan KRK',
                            data: chartData,
                            backgroundColor: gradient1,
                            borderColor: 'rgba(78, 84, 200, 1)',
                            borderWidth: 2,
                            borderRadius: 15,
                            barPercentage: 0.8,
                            categoryPercentage: 0.9
                        },
                        {
                            label: 'Data Permohonan Masuk',
                            data: permohonanData,
                            backgroundColor: gradient2,
                            borderColor: 'rgba(143, 148, 251, 1)',
                            borderWidth: 2,
                            borderRadius: 15,
                            barPercentage: 0.8,
                            categoryPercentage: 0.9
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)',
                                    borderDash: [10, 10]
                                },
                                ticks: {
                                    font: {
                                        family: "'Poppins', sans-serif",
                                        size: 14,
                                        weight: '600'
                                    },
                                    padding: 15,
                                    callback: function(value) {
                                        return value + ' Data';
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    font: {
                                        family: "'Poppins', sans-serif",
                                        size: 14,
                                        weight: '600'
                                    },
                                    padding: 15
                                }
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                align: 'center',
                                labels: {
                                    padding: 35,
                                    usePointStyle: true,
                                    pointStyle: 'circle',
                                    font: {
                                        family: "'Poppins', sans-serif",
                                        size: 15,
                                        weight: '700'
                                    },
                                    generateLabels: function(chart) {
                                        const datasets = chart.data.datasets;
                                        return datasets.map((dataset, i) => ({
                                            text: dataset.label + ' (' + dataset.data.reduce((a,b) => a + b, 0) + ' Total)',
                                            fillStyle: dataset.backgroundColor,
                                            strokeStyle: dataset.borderColor,
                                            lineWidth: dataset.borderWidth,
                                            pointStyle: 'circle',
                                            hidden: !chart.isDatasetVisible(i),
                                            index: i
                                        }));
                                    }
                                }
                            },
                            title: {
                                display: true,
                                text: 'Grafik Data Penerbitan KRK Berdasarkan Bulan',
                                font: {
                                    family: "'Poppins', sans-serif",
                                    size: 24,
                                    weight: '800'
                                },
                                padding: {
                                    top: 25,
                                    bottom: 45
                                },
                                color: '#2d3436'
                            },
                            tooltip: {
                                backgroundColor: 'rgba(255, 255, 255, 0.99)',
                                titleColor: '#2d3436',
                                titleFont: {
                                    family: "'Poppins', sans-serif",
                                    size: 16,
                                    weight: '800'
                                },
                                bodyColor: '#636e72',
                                bodyFont: {
                                    family: "'Poppins', sans-serif",
                                    size: 15,
                                    weight: '600'
                                },
                                borderColor: 'rgba(0,0,0,0.1)',
                                borderWidth: 1,
                                padding: 18,
                                cornerRadius: 12,
                                displayColors: true,
                                callbacks: {
                                    label: function(context) {
                                        return context.dataset.label + ': ' + context.parsed.y + ' Data';
                                    }
                                }
                            }
                        },
                        animation: {
                            duration: 3000,
                            easing: 'easeInOutQuart'
                        }
                    }
                });
            }

            // Inisialisasi chart dengan data awal
            initChart(@json(array_values($chartData)), @json(array_values($permohonanData ?? array_fill(0, 12, 0))));

            // Event listener untuk perubahan tahun
            document.getElementById('yearSelect').addEventListener('change', function() {
                const selectedYear = this.value;
                
                fetch(`{{ url('/get-chart-data') }}/${selectedYear}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.chartData && data.permohonanData) {
                            initChart(Object.values(data.chartData), Object.values(data.permohonanData));
                        } else {
                            console.error('Invalid data format received:', data);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Terjadi kesalahan saat memuat data. Silakan coba lagi.');
                    });
            });
        });
    </script>

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .float {
            position: fixed;
            width: 70px;
            height: 70px;
            bottom: 50px;
            right: 50px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 35px;
            box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.5s ease;
        }

        .float:hover {
            background-color: #128C7E;
            color: #FFF;
            transform: scale(1.2) rotate(20deg);
            box-shadow: 0 15px 35px rgba(18, 140, 126, 0.5);
        }

        .my-float {
            margin: auto;
        }
    </style>