@extends('layouts.app')
@section('content')

<div class="row mb-2">
    <div class="col-12 col-lg-3">
        <div class="card" style="background: linear-gradient(135deg, #3bb54a 60%, #b6e388 100%); color: #fff; cursor:pointer;" id="card-unit">
            <div class="card-body p-2">
                <div style="display:flex; align-items:center;">
                    <div class="m-r-20 align-self-center">
                        <i class="fas fa-building mb-2" style="font-size: 40px; color:#fff;"></i>
                    </div>
                    <div class="align-self-center">
                        <div class="mb-2 mt-3">
                            <select id="unit" class="form-control" style="background:rgba(255,255,255,0.8); color:#333;">
                                <option value="" selected>SEMUA UNIT</option>
                                @foreach($unit as $u)
                                <option value="{{ $u->kode_unit }}">{{ $u->unit }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-3">
        <div class="card" style="background: linear-gradient(135deg, #1e90ff 60%, #a0c4ff 100%); color: #fff; cursor:pointer;" id="card-total">
            <div class="card-body p-2">
                <div style="display:flex; align-items:center;">
                    <div class="m-r-20 align-self-center">
                        <i class="fas fa-users mb-2" style="font-size: 40px; color:#fff;"></i>
                    </div>
                    <div class="align-self-center">
                        <h6 class="m-t-10 m-b-0 text-white">Total Karyawan</h6>
                        <h2 class="m-t-0 text-white" id="totalKaryawan">1000</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-3">
        <div class="card" style="background: linear-gradient(135deg, #ffa500 60%, #ffe29a 100%); color: #fff; cursor:pointer;" id="card-umur">
            <div class="card-body p-2">
                <div style="display:flex; align-items:center;">
                    <div class="m-r-20 align-self-center">
                        <i class="fas fa-user-clock mb-2" style="font-size: 40px; color:#fff;"></i>
                    </div>
                    <div class="align-self-center">
                        <h6 class="m-t-10 m-b-0 text-white">Rata2 Umur</h6>
                        <h2 class="m-t-0 text-white" id="rataUmur">1000</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-3">
        <div class="card" style="background: linear-gradient(135deg, #dc3545 60%, #ffb3b3 100%); color: #fff; cursor:pointer;" id="card-biaya">
            <div class="card-body p-2">
                <div style="display:flex; align-items:center;">
                    <div class="m-r-20 align-self-center">
                        <i class="fas fa-money-bill-wave mb-2" style="font-size: 40px; color:#fff;"></i>
                    </div>
                    <div class="align-self-center">
                        <h6 class="m-t-10 m-b-0 text-white">Rata2 Biaya Karyawan</h6>
                        <h2 class="m-t-0 text-white" id="rataBiaya">1000</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="demografi-header d-flex" style="background: linear-gradient(90deg, #ff6f61 0%, #6a82fb 60%, #fc5c7d 100%); padding: 7px 25px 0px; cursor:pointer; transition: box-shadow 0.2s;">
    <h2 class="text-white w-100" style="font-weight:bold; text-shadow: 2px 2px 4px #333; letter-spacing:1px; text-align:left;">LAPORAN BIAYA SDM MSKO</h2>

        <span id="infoTambahan" class="text-white text-right w-100 mt-2" style="font-weight:bold;">Informasi tambahan di sini</span>

</div>

<div class="row">
    <div class="col-lg-12 col-md-8 ">
        <div class="mb-3" style="width: 100%; margin: 0 auto;">
            <div id="ajaxDataContainer" class="row"></div>
        </div>
    </div>
    <div class="col-lg-12 col-md-8 ">
        <div class="mb-3" style="width: 100%; margin: 0 auto;">            
            <div class="row">
                <div class="col-lg-4 col-md-8 mb-4">
                    <div id="chartContainer1" style="width: 100%; height: 400px;"></div>
                </div>
                <div class="col-lg-4 col-md-8 mb-4">
                    <div id="chartContainer2" style="width: 100%; height: 400px;"></div>
                </div>
                <div class="col-lg-4 col-md-8 mb-4">
                    <div id="chartContainer3" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="demografi-header" style="background: linear-gradient(90deg, #ff6f61 0%, #36d1c4 60%, #6a82fb 100%); padding: 7px 25px 0px; cursor:pointer; transition: box-shadow 0.2s;">
    <h2 class="text-white" style="font-weight:bold; text-shadow: 2px 2px 4px #333; letter-spacing:1px;">DEMOGRAFI SDM MKSO</h2>
</div>

<div class="row">
    <div class="col-lg-4 col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div id="pieChartGender" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div id="barChartEducation" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div id="barChartJabatan" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div id="stepAreaChartUmur" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div id="columnChartStatus" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <div id="pieChartGolongan" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>
</div>


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Set the current year in the input field
fetchData();
fetchDataGrafikBiayaSdm();
fetchPieChartGender();
fetchBarChartEducation();
fetchBarChartJabatan();
fetchStepAreaChartUmur();
fetchColumnChartStatus();
fetchPieChartGolongan();
fetchTotalKaryawan();
fetchRataUmur();
fetchRataBiaya();

});
document.getElementById('unit').addEventListener('change', function () {
   fetchData();
   fetchDataGrafikBiayaSdm();
   fetchPieChartGender();
    fetchBarChartEducation();
    fetchBarChartJabatan();
    fetchStepAreaChartUmur();
    fetchColumnChartStatus();
    fetchPieChartGolongan();
    fetchTotalKaryawan();
    fetchRataUmur();
    fetchRataBiaya();
});


document.addEventListener('DOMContentLoaded', function () {
    // Card hover effect
    document.querySelectorAll('.card').forEach(function(card){
        card.addEventListener('mouseenter', function(){
            card.style.boxShadow = '0 8px 24px rgba(0,0,0,0.15)';
            card.style.transform = 'scale(1.03)';
            card.style.transition = 'all 0.2s';
        });
        card.addEventListener('mouseleave', function(){
            card.style.boxShadow = '';
            card.style.transform = '';
        });
    });

    // Optional: Card click interaction (e.g., scroll to section)
    document.getElementById('card-total').onclick = function() {
        document.getElementById('pieChartGender').scrollIntoView({behavior:'smooth'});
    };
    document.getElementById('card-umur').onclick = function() {
        document.getElementById('stepAreaChartUmur').scrollIntoView({behavior:'smooth'});
    };
    document.getElementById('card-biaya').onclick = function() {
        document.getElementById('chartContainer1').scrollIntoView({behavior:'smooth'});
    };
});




document.addEventListener('DOMContentLoaded', function () {
    const demografiHeader = document.querySelector('.demografi-header');
    if (demografiHeader) {
        demografiHeader.addEventListener('mouseenter', function(){
            demografiHeader.style.boxShadow = '0 8px 24px rgba(54,209,196,0.25)';
            demografiHeader.style.transform = 'scale(1.01)';
        });
        demografiHeader.addEventListener('mouseleave', function(){
            demografiHeader.style.boxShadow = '';
            demografiHeader.style.transform = '';
        });
        demografiHeader.addEventListener('click', function(){
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }
});



function fetchData() {

    const unit = document.getElementById('unit').value;
    fetch(`{{ url('dashboard/getbiayasdm') }}?unit=${encodeURIComponent(unit)}`)
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                const container = document.getElementById('ajaxDataContainer');
                container.innerHTML = `
               
                       <div class="col-lg-4 col-md-6 col-6 mb-3">
                                <div class="card bg-default">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="stats">
                                                <h3 class="">Biaya Karyawan <span class="text-info">Tetap</span></h2>
                                                <h1 class="text-dark">${data.data[0].total_kary_tetap_real.toLocaleString('id-ID')}</h2>
                                                <h4 class="text-danger">${data.data[0].total_kary_tetap_rkap.toLocaleString('id-ID')} (RKAP)</h6>
                                                
                                            </div>
                                            <div class="stats-icon text-right ml-auto">
                                                <i class="fas fa-users display-5 op-3 text-success"></i>
                                                <h1 class="text-info">${data.data[0].persen_kary_tetap}%</h1>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-6 mb-3">
                                <div class="card bg-default ">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="stats">
                                                <h3 class="">Biaya Karyawan <span class="text-danger">Non Tetap</span></h2>
                                                <h1 class="text-dark">${data.data[0].total_kary_non_tetap_real.toLocaleString('id-ID')}</h2>
                                                <h4 class="text-danger">${data.data[0].total_kary_non_tetap_rkap.toLocaleString('id-ID')} (RKAP)</h6>
                                                
                                            </div>
                                            <div class="stats-icon text-right ml-auto">
                                                <i class="fas fa-users display-5 op-3 text-success"></i>
                                                <h1 class="text-info">${data.data[0].persen_kary_non_tetap}%</h1>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-6 mb-3">
                                <div class="card bg-default">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="stats">
                                                <h3 class="">Biaya Karyawan <span class="text-warning">Outsourcing</span></h2>
                                                <h1 class="text-dark">${data.data[0].total_kary_os_real.toLocaleString('id-ID')}</h2>
                                                <h4 class="text-danger">${data.data[0].total_kary_os_rkap.toLocaleString('id-ID')} (RKAP)</h6>
                                                
                                            </div>
                                            <div class="stats-icon text-right ml-auto">
                                                <i class="fas fa-users display-5 op-3 text-success"></i>
                                                <h1 class="text-info">${data.data[0].persen_kary_os}%</h1>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                   
                `;

                if (data.data[0].bulan && data.data[0].tahun) {
                    document.getElementById('infoTambahan').textContent = `Angka dalam ribuan, Periode S/D: ${data.data[0].bulan} ${data.data[0].tahun}`;
                }
            } else {
                alert('Gagal mengambil data.');
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            alert('Terjadi kesalahan saat mengambil data.');
        });
}


function fetchDataGrafikBiayaSdm() { 

    const unit = document.getElementById('unit').value;

        $.ajax({
            url: "{{ url('/dashboard/getbiayasdmunit') }}",
            type: "GET",
            data: {
                unit: unit
            },
            success: function(response) {
                Highcharts.chart('chartContainer1', {
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Biaya SDM Karyawan Tetap'
                    },
                    xAxis: {
                        categories: response.categori,
                        title: {
                            text: 'Bulan'
                        }
                    },
                    yAxis: [{
                        title: {
                            text: 'Realisasi Karyawan Tetap (Rp)',
                        },
                        opposite: false
                    }],
                    series: [{
                        name: 'Realisasi Karyawan Tetap',
                        type: 'column',
                        color: {
                            linearGradient: [0, 0, 0, 300],
                            stops: [
                             [0, '#a0c4ff'], // biru tua
                            [1, '#00A8EB']  // biru muda
                            ]
                        },

                        data: response.real_tetap,                        
                        dataLabels: {
                            enabled: true,                            
                            color: '#2a0589',
                            style: {
                                fontWeight: 'bold',
                                textOutline: '0px'
                            }
                        }
                    }]
                });

                Highcharts.chart('chartContainer2', {
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Biaya SDM Karyawan Non Tetap'
                    },
                    xAxis: {
                        categories: response.categori,
                        title: {
                            text: 'Bulan'
                        }
                    },
                    yAxis: [{
                        title: {
                            text: 'Realisasi Karyawan Non Tetap (Rp)',
                        },
                        opposite: false
                    }],
                    series: [{
                        name: 'Realisasi Karyawan Non Tetap',
                        type: 'column',
                        color: {
                            linearGradient: [0, 0, 0, 300],
                            stops: [
                             [0, '#a0c4ff'], // biru tua
                            [1, '#00A8EB']  // biru muda
                            ]
                        },

                        data: response.real_non_tetap,                        
                        dataLabels: {
                            enabled: true,                            
                            color: '#2a0589',
                            style: {
                                fontWeight: 'bold',
                                textOutline: '0px'
                            }
                        }
                    }]
                });

                Highcharts.chart('chartContainer3', {
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: 'Biaya SDM Karyawan Outsourcing'
                    },
                    xAxis: {
                        categories: response.categori,
                        title: {
                            text: 'Bulan'
                        }
                    },
                    yAxis: [{
                        title: {
                            text: 'Realisasi Karyawan Outsourcing (Rp)',
                        },
                        opposite: false
                    }],
                    series: [{
                        name: 'Realisasi Karyawan Outsourcing',
                        type: 'column',
                        color: {
                            linearGradient: [0, 0, 0, 300],
                            stops: [
                             [0, '#a0c4ff'], // biru tua
                            [1, '#00A8EB']  // biru muda
                            ]
                        },
                        data: response.real_os,                        
                        dataLabels: {
                            enabled: true,                            
                            color: '#2a0589',
                            style: {
                                fontWeight: 'bold',
                                textOutline: '0px'
                            }
                        }
                    }]
                });
            },
            error: function() {
                console.error("Failed to fetch data for Protas and Rendemen.");
            }
        });
}



function fetchPieChartGender() {
    const unit = document.getElementById('unit').value;
    fetch(`{{ url('dashboard/getgendersdmunit') }}?unit=${encodeURIComponent(unit)}`)
        .then(response => response.json())
        .then(result => {
            if (result.status === 'success') {
                Highcharts.chart('pieChartGender', {
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: 'Komposisi Gender Karyawan'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%'
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)'
                            }
                        }
                    },
                    series: [{
                        name: 'Jumlah',
                        colorByPoint: true,
                        data: result.data
                    }]
                });
                // Remove existing infoDiv if present before appending a new one
                const parent = document.getElementById('pieChartGender').parentNode;
                const oldInfoDiv = parent.querySelector('.periode-info-gender');
                if (oldInfoDiv) {
                    oldInfoDiv.remove();
                }
                const infoDiv = document.createElement('div');
                infoDiv.className = 'periode-info-gender';
                infoDiv.style.marginTop = '20px';
                infoDiv.style.textAlign = 'center';
                // Konversi bulan ke bahasa Indonesia
                const bulanIndo = [
                    "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                    "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                ];
                let bulan = result.bulan;
                let tahun = result.tahun;
                // Jika bulan berupa angka (misal: 1, 2, dst), konversi ke nama bulan
                if (!isNaN(parseInt(bulan))) {
                    bulan = bulanIndo[parseInt(bulan) - 1];
                }
                infoDiv.innerHTML = `<span style="font-size:16px; color:#555;">Periode: <b>${bulan} ${tahun}</b></span>`;
                parent.appendChild(infoDiv);
            }
        })
        .catch(error => {
            console.error('Error fetching gender chart:', error);
        });
}



    function fetchBarChartEducation() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/geteducationsdmunit') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(result => {
            if (result.status === 'success') {
                Highcharts.chart('barChartEducation', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Komposisi Pendidikan Karyawan'
                },
                xAxis: {
                    categories: result.data.map(item => item.name),
                    title: {
                    text: 'Pendidikan'
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                    text: 'Jumlah'
                    },
                    allowDecimals: false
                },
                legend: { enabled: false },
                plotOptions: {
                    bar: { // Ganti dari column ke bar
                    colorByPoint: true,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y}'
                    }
                    }
                },
                series: [{
                    name: 'Jumlah',
                    data: result.data
                }]
                });
                // Remove existing infoDiv if present before appending a new one
                const parent = document.getElementById('barChartEducation').parentNode;
                const oldInfoDiv = parent.querySelector('.periode-info-education');
                if (oldInfoDiv) {
                    oldInfoDiv.remove();
                }
                const infoDiv = document.createElement('div');
                infoDiv.className = 'periode-info-education';
                infoDiv.style.marginTop = '20px';
                infoDiv.style.textAlign = 'center';
                // Konversi bulan ke bahasa Indonesia
                const bulanIndo = [
                    "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                    "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                ];
                let bulan = result.bulan;
                let tahun = result.tahun;
                // Jika bulan berupa angka (misal: 1, 2, dst), konversi ke nama bulan
                if (!isNaN(parseInt(bulan))) {
                    bulan = bulanIndo[parseInt(bulan) - 1];
                }
                infoDiv.innerHTML = `<span style="font-size:16px; color:#555;">Periode: <b>${bulan} ${tahun}</b></span>`;
                parent.appendChild(infoDiv);
            }
            })
            .catch(error => {
            console.error('Error fetching education chart:', error);
            });
    }


    function fetchBarChartJabatan() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/getjabatansdmunit') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success') {
                    Highcharts.chart('barChartJabatan', {
                        chart: {
                            type: 'column',
                            options3d: {
                                enabled: true,
                                alpha: 15,
                                beta: 15,
                                depth: 50,
                                viewDistance: 25
                            }
                        },
                        title: {
                            text: 'Komposisi Jabatan Karyawan'
                        },
                        xAxis: {
                            categories: result.data.map(item => item.name),
                            title: { text: 'Jabatan' }
                        },
                        yAxis: {
                            min: 0,
                            title: { text: 'Jumlah' },
                            allowDecimals: false
                        },
                        plotOptions: {
                            column: {
                                depth: 25,
                                colorByPoint: true,
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        },
                        legend: { enabled: false },
                        series: [{
                            name: 'Jumlah',
                            data: result.data
                        }]
                    });
                    // Remove existing infoDiv if present before appending a new one
                    const parent = document.getElementById('barChartJabatan').parentNode;
                    const oldInfoDiv = parent.querySelector('.periode-info-jabatan');
                    if (oldInfoDiv) {
                        oldInfoDiv.remove();
                    }
                    const infoDiv = document.createElement('div');
                    infoDiv.className = 'periode-info-jabatan';
                    infoDiv.style.marginTop = '20px';
                    infoDiv.style.textAlign = 'center';
                    // Konversi bulan ke bahasa Indonesia
                    const bulanIndo = [
                        "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                        "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                    ];
                    let bulan = result.bulan;
                    let tahun = result.tahun;
                    // Jika bulan berupa angka (misal: 1, 2, dst), konversi ke nama bulan
                    if (!isNaN(parseInt(bulan))) {
                        bulan = bulanIndo[parseInt(bulan) - 1];
                    }
                    infoDiv.innerHTML = `<span style="font-size:16px; color:#555;">Periode: <b>${bulan} ${tahun}</b></span>`;
                    parent.appendChild(infoDiv);
                }
            })
            .catch(error => {
                console.error('Error fetching jabatan chart:', error);
            });
    }
    

    function fetchStepAreaChartUmur() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/getumursdmunit') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success') {
                    Highcharts.chart('stepAreaChartUmur', {
                        chart: {
                            type: 'area'
                        },
                        title: {
                            text: 'Distribusi Umur Karyawan'
                        },
                        xAxis: {
                            categories: result.data.map(item => item.name),
                            title: { text: 'Rentang Umur' },
                            tickmarkPlacement: 'on'
                        },
                        yAxis: {
                            title: { text: 'Jumlah' },
                            allowDecimals: false
                        },
                        tooltip: {
                            shared: true,
                            valueSuffix: ' orang'
                        },
                        plotOptions: {
                            area: {
                                step: 'center',
                                marker: {
                                    enabled: true,
                                    symbol: 'circle',
                                    radius: 4
                                },
                                fillOpacity: 0.5,
                                color: {
                                    linearGradient: [0, 0, 0, 300],
                                    stops: [
                                        [0, '#007bff'],
                                        [1, '#dc3545']
                                    ]
                                },
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.y}',
                                    style: {
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'Jumlah',
                            data: result.data.map(item => ({
                                y: item.y,
                                color: item.color
                            })),
                            step: 'center'
                        }]
                    });
                    // Remove existing infoDiv if present before appending a new one
                    const parent = document.getElementById('stepAreaChartUmur').parentNode;
                    const oldInfoDiv = parent.querySelector('.periode-info-umur');
                    if (oldInfoDiv) {
                        oldInfoDiv.remove();
                    }
                    const infoDiv = document.createElement('div');
                    infoDiv.className = 'periode-info-umur';
                    infoDiv.style.marginTop = '20px';
                    infoDiv.style.textAlign = 'center';
                    // Konversi bulan ke bahasa Indonesia
                    const bulanIndo = [
                        "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                        "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                    ];
                    let bulan = result.bulan;
                    let tahun = result.tahun;
                    // Jika bulan berupa angka (misal: 1, 2, dst), konversi ke nama bulan
                    if (!isNaN(parseInt(bulan))) {
                        bulan = bulanIndo[parseInt(bulan) - 1];
                    }
                    infoDiv.innerHTML = `<span style="font-size:16px; color:#555;">Periode: <b>${bulan} ${tahun}</b></span>`;
                    parent.appendChild(infoDiv);
                }
            })
            .catch(error => {
                console.error('Error fetching umur chart:', error);
            });
    }


    function fetchColumnChartStatus() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/getstatussdmunit') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success') {
                    Highcharts.chart('columnChartStatus', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: 'Status Karyawan'
                        },
                        xAxis: {
                            categories: result.data.map(item => item.name),
                            title: { text: 'Status' }
                        },
                        yAxis: {
                            min: 0,
                            title: { text: 'Jumlah' },
                            allowDecimals: false
                        },
                        legend: { enabled: false },
                        plotOptions: {
                            column: {
                                colorByPoint: true,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.y}'
                                }
                            }
                        },
                        series: [{
                            name: 'Jumlah',
                            data: result.data
                        }]
                    });
                    // Remove existing infoDiv if present before appending a new one
                    const parent = document.getElementById('columnChartStatus').parentNode;
                    const oldInfoDiv = parent.querySelector('.periode-info-status');
                    if (oldInfoDiv) {
                        oldInfoDiv.remove();
                    }
                    const infoDiv = document.createElement('div');
                    infoDiv.className = 'periode-info-status';
                    infoDiv.style.marginTop = '20px';
                    infoDiv.style.textAlign = 'center';
                    // Konversi bulan ke bahasa Indonesia
                    const bulanIndo = [
                        "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                        "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                    ];
                    let bulan = result.bulan;
                    let tahun = result.tahun;
                    // Jika bulan berupa angka (misal: 1, 2, dst), konversi ke nama bulan
                    if (!isNaN(parseInt(bulan))) {
                        bulan = bulanIndo[parseInt(bulan) - 1];
                    }
                    infoDiv.innerHTML = `<span style="font-size:16px; color:#555;">Periode: <b>${bulan} ${tahun}</b></span>`;
                    parent.appendChild(infoDiv);
                }
            })
            .catch(error => {
                console.error('Error fetching status chart:', error);
            });
    }
    

    function fetchPieChartGolongan() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/getgolongansdmunit') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success') {
                    Highcharts.chart('pieChartGolongan', {
                        chart: {
                            type: 'area',
                            options3d: {
                                enabled: true,
                                alpha: 15,
                                beta: 15,
                                depth: 50,
                                viewDistance: 25
                            }
                        },
                        title: {
                            text: 'Distribusi Golongan Karyawan'
                        },
                        xAxis: {
                            categories: result.data.map(item => item.name),
                            title: { text: 'Golongan' },
                            tickmarkPlacement: 'on'
                        },
                        yAxis: {
                            title: { text: 'Jumlah' },
                            allowDecimals: false
                        },
                        tooltip: {
                            shared: true,
                            valueSuffix: ' orang'
                        },
                        plotOptions: {
                            area: {
                                step: 'center',
                                marker: {
                                    enabled: true,
                                    symbol: 'circle',
                                    radius: 4
                                },
                                fillOpacity: 0.5,
                                depth: 25,
                                color: {
                                    linearGradient: [0, 0, 0, 300],
                                    stops: [
                                        [0, '#28a745'],
                                        [1, '#ffc107']
                                    ]
                                },
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.y}',
                                    style: {
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'Jumlah',
                            data: result.data.map(item => ({
                                y: item.y,
                                color: item.color
                            })),
                            step: 'center'
                        }]
                    });

                    // Remove existing infoDiv if present before appending a new one
                    const parent = document.getElementById('pieChartGolongan').parentNode;
                    const oldInfoDiv = parent.querySelector('.periode-info-golongan');
                    if (oldInfoDiv) {
                        oldInfoDiv.remove();
                    }
                    const infoDiv = document.createElement('div');
                    infoDiv.className = 'periode-info-golongan';
                    infoDiv.style.marginTop = '20px';
                    infoDiv.style.textAlign = 'center';
                    // Konversi bulan ke bahasa Indonesia
                    const bulanIndo = [
                        "Januari", "Februari", "Maret", "April", "Mei", "Juni",
                        "Juli", "Agustus", "September", "Oktober", "November", "Desember"
                    ];
                    let bulan = result.bulan;
                    let tahun = result.tahun;
                    // Jika bulan berupa angka (misal: 1, 2, dst), konversi ke nama bulan
                    if (!isNaN(parseInt(bulan))) {
                        bulan = bulanIndo[parseInt(bulan) - 1];
                    }
                    infoDiv.innerHTML = `<span style="font-size:16px; color:#555;">Periode: <b>${bulan} ${tahun}</b></span>`;
                    parent.appendChild(infoDiv);
                }
            })
            .catch(error => {
                console.error('Error fetching golongan chart:', error);
            });
    }


    function fetchTotalKaryawan() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/gettotkaryawan') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success' && data.data.jml_kary !== undefined) {
                    document.getElementById('totalKaryawan').textContent = data.data.jml_kary.toLocaleString('id-ID');
                }
            })
            .catch(error => {
                console.error('Error fetching total karyawan:', error);
            });
    }

    function fetchRataUmur() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/getrataumurkaryawan') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success' && data.data.rata_umur !== undefined) {
                    document.getElementById('rataUmur').textContent = data.data.rata_umur.toLocaleString('id-ID');
                }
            })
            .catch(error => {
                console.error('Error fetching rata-rata umur:', error);
            });
    }


    function fetchRataBiaya() {
        const unit = document.getElementById('unit').value;
        fetch(`{{ url('dashboard/getratabiayakaryawan') }}?unit=${encodeURIComponent(unit)}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success' && data.data[0].rata_biaya_sdm !== undefined) {
                    document.getElementById('rataBiaya').textContent = data.data[0].rata_biaya_sdm.toLocaleString('id-ID');
                }
            })
            .catch(error => {
                console.error('Error fetching rata-rata biaya:', error);
            });
    }

   

</script>



@stop