<?php 
 $thntnm = Session::get('tahuntanam');
        if($thntnm == '2425'){
            $tahunprod = '2025';
        }else if($thntnm == '2526'){
            $tahunprod = '2026';
        }else if($thntnm == '2627'){
            $tahunprod = '2027';
        }
?>

<div class="row">
    <div class="col-12">
        <div class="card" style="background-color: #ffffff00;">
            <div class="card-body">
                <div class="row text-center">
                    <!-- Luas -->
                    <div class="col-lg-12 col-sm-12 col-12 pt-2" style="background: #3b69e4;">
                        <h4 class="text-white" style="padding: 9px;">REALISASI PRODUKSI TS MKSO <?php echo $tahunprod; ?> (LAPORAN GILING PRODIS CONSOLE) S/D <?php echo  date("d-m-Y", strtotime(date("Y-m-d") . ' -1 day')); ?> </h4>
                    </div>
                </div>
                <div class="row text-center" id="loadlkp" style="background: #1E90FF;">
                    <!-- Luas -->
                    <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="border-end h-100">
                            <div class="pt-3">
                                <i class="fas fa-map mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Luas</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">Ha</h3>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- Tebu -->
                    <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="border-end h-100">
                            <div class="pt-3">
                                <i class="fas fa-chart-line mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Protas</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">Ton/Ha</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Protas -->
                    <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="border-end h-100">
                            <div class="pt-3">
                                <i class="fas fa-seedling mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Tebu</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rendemen -->
                    <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="border-end h-100">
                            <div class="pt-3">
                                <i class="fas fa-percent mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Rendemen</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">%</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hablur -->
                    <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="border-end h-100">
                            <div class="pt-3">
                                <i class="fas fa-cube mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Hablur</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Gumil -->
                   <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="border-end h-100">
                            <div class="pt-3">
                                <i class="fas fa-box mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Gumil</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tetes -->
                    <div class="col-lg col-sm-6 col-6" style="padding: 8px 8px 8px 8px;">
                        <div class="h-100">
                            <div class="pt-3">
                                <i class="fas fa-tint mb-2 text-white" style="font-size: 24px;"></i>
                                <h6 class="text-white">Tetes</h6>
                                <h2 class="text-white mb-0"></h2>
                                <h3 class="text-white mb-0">Ton</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row text-center">
                    <!-- Luas -->
                    <div class="col-lg-12 col-sm-12 col-12" style="background: #04427f;">
                        <h4 class="text-white" style="border-top: 1px solid #004b93;border-bottom: 1px solid #004b93;padding: 9px;">PENCAPAIAN REAL SD TERHADAP RKAP <?php echo $tahunprod; ?></h4>
                    </div>
                </div>
                <div class="row text-center" id="loadlkppersen" style="background: #04427f;">
                    <!-- Luas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Luas</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- Tebu -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Protas</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Protas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Tebu</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rendemen -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Rendemen</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hablur -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Hablur</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Gumil -->
                   <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Gumil</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tetes -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="h-100">
                            <div class="">
                                <h6 class="text-white">Tetes</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row text-center" id="loadlkprkap" style="background: #04427f;">
                    <!-- Luas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Luas</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- Tebu -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Protas</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Protas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Tebu</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rendemen -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Rendemen</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hablur -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Hablur</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Gumil -->
                   <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Gumil</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tetes -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="h-100">
                            <div class="">
                                <h6 class="text-white">Tetes</h6>
                                <h2 class="badge badge-dark" style="font-size: 14px;font-weight:bold;"></h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row text-center">
                    <!-- Luas -->
                    <div class="col-lg-12 col-sm-12 col-12" style="background: #042c54;">
                        <h4 class="text-white" style="border-top: 1px solid #004b93;border-bottom: 1px solid #004b93;padding: 9px;">JAWA</h4>
                    </div>
                </div>
                <div class="row text-center" id="loadlkpjawa" style="background: #042c54;">
                    <!-- Luas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Luas</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ha</h3>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- Tebu -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Protas</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton/Ha</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Protas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Tebu</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rendemen -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Rendemen</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">%</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hablur -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Hablur</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Gumil -->
                   <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Gumil</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tetes -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="h-100">
                            <div class="">
                                <h6 class="text-white">Tetes</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row text-center">
                    <!-- Luas -->
                    <div class="col-lg-12 col-sm-12 col-12" style="background: #042c54;">
                        <h4 class="text-white" style="border-top: 1px solid #004b93;border-bottom: 1px solid #004b93;padding: 9px;">LUAR JAWA</h4>
                    </div>
                </div>

                <div class="row text-center" id="loadlkpnonjawa" style="background: #042c54;">
                    <!-- Luas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Luas</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ha</h3>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- Tebu -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Protas</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton/Ha</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Protas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Tebu</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rendemen -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Rendemen</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">%</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hablur -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Hablur</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Gumil -->
                   <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Gumil</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tetes -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="h-100">
                            <div class="">
                                <h6 class="text-white">Tetes</h6>
                                <h2 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-warning mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="row text-center">
                        <div class="col-lg-12 col-sm-12 col-12" style="background: #104187;">
                            <h4 class="text-white" style="border-top: 1px solid #004b93;border-bottom: 1px solid #004b93;padding: 9px;">REAL <?php echo $tahunprod-1; ?> DI HARI GILING KE-<span id="hgsama"></span></h4>
                        </div>
                </div>

                <div class="row text-center" id="loadlkpthnlalu" style="background: #104187;">
                    <!-- Luas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Luas</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">Ha</h3>
                            </div>
                        </div>
                    </div>
                                        
                    <!-- Tebu -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Protas</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">Ton/Ha</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Protas -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Tebu</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rendemen -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Rendemen</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">%</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hablur -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Hablur</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Gumil -->
                   <div class="col-lg col-sm-6 col-6">
                        <div class="border-end h-100">
                            <div class="">
                                <h6 class="text-white">Gumil</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tetes -->
                    <div class="col-lg col-sm-6 col-6">
                        <div class="h-100">
                            <div class="">
                                <h6 class="text-white">Tetes</h6>
                                <h2 class="text-white mb-0" style="font-size: 16px;font-weight:bold;"></h2>
                                <h3 class="text-white mb-0" style="font-size: 16px;font-weight:bold;">Ton</h3>
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
        </div>
    </div>
</div>
<script>
  loaddataconsolelkp();
  setTimeout(() => {
      loaddataconsolelkpthnlalu();    
  }, 1000);

  function loaddataconsolelkp() {
    $.ajax({
        url: '{{ url('dataprodisconsole/tarikdataconsolelkpdashboard') }}', // URL endpoint to fetch data
        type: 'GET',
        dataType: "json",
        success: function(response) {
            if (response.status === 'success') {
                // Assuming response.data is an array with values for "Luas", "Tebu", etc.
                console.log(response.data);

                // Dynamically update the content of #loadlkp
                $('#loadlkp .col-lg').each(function(index) {
                    // Ensure that we have enough data to update the values
                    if (response.data[index+1]) {
                        // Example: Update the content of each section based on the index
                        let text = response.data[index+1];
                        const myArray = text.split(".");
                        const data1 = myArray[1] ? myArray[0]+"."+myArray[1].substring(0, 2) : myArray[0];

                        $(this).find('h2').text(swapCommasAndDots(data1));
                    }
                });

                $('#loadlkppersen .col-lg').each(function(index) {
                    // Ensure that we have enough data to update the values
                    if (index == 0) {
                        // Example: Update the content of each section based on the index

                        var text = (parseFloat(response.data[1].replace(/,/g, '')) / parseFloat(response.rkap.luas_ha))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

                        function progressHtml(percentValue) {
                                    const p = Number(percentValue) || 0;
                                    const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    const color = p < 50 ? '#dc3545' : '#28a745';
                                    const width = Math.max(0, Math.min(100, p)); // clamp 0..100

                                    return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                        '<span>' + formatted + '%</span>' +
                                        '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                        '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                        '</div>' +
                                        '</div>';
                                }
                        $(this).find('h2').html(progressHtml(text));
                    
                    }else if (index == 2) {
                        // Example: Update the content of each section based on the index
                        var text = (parseFloat(response.data[3].replace(/,/g, '')) / parseFloat(response.rkap.tebu_ton))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        function progressHtml(percentValue) {
                                    const p = Number(percentValue) || 0;
                                    const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    const color = p < 50 ? '#dc3545' : '#28a745';
                                    const width = Math.max(0, Math.min(100, p)); // clamp 0..100

                                    return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                        '<span>' + formatted + '%</span>' +
                                        '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                        '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                        '</div>' +
                                        '</div>';
                                }
                        $(this).find('h2').html(progressHtml(text));
                    }else if (index == 1) {
                        // Example: Update the content of each section based on the index
                        var text = (parseFloat(response.data[2].replace(/,/g, '')) / parseFloat(response.rkap.protas))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        function progressHtml(percentValue) {
                                    const p = Number(percentValue) || 0;
                                    const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    const color = p < 50 ? '#dc3545' : '#28a745';
                                    const width = Math.max(0, Math.min(100, p)); // clamp 0..100

                                    return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                        '<span>' + formatted + '%</span>' +
                                        '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                        '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                        '</div>' +
                                        '</div>';
                                }
                        $(this).find('h2').html(progressHtml(text));

                    }else if (index == 3) {
                        // Example: Update the content of each section based on the index
                        var text = (parseFloat(response.data[4].replace(/,/g, '')) / parseFloat(response.rkap.rendemen))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        function progressHtml(percentValue) {
                                    const p = Number(percentValue) || 0;
                                    const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    const color = p < 50 ? '#dc3545' : '#28a745';
                                    const width = Math.max(0, Math.min(100, p)); // clamp 0..100

                                    return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                        '<span>' + formatted + '%</span>' +
                                        '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                        '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                        '</div>' +
                                        '</div>';
                                }
                        $(this).find('h2').html(progressHtml(text));
                    }else if (index == 4) {
                        // Example: Update the content of each section based on the index
                        var text = (parseFloat(response.data[5].replace(/,/g, '')) / parseFloat(response.rkap.hablur))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        function progressHtml(percentValue) {
                                    const p = Number(percentValue) || 0;
                                    const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    const color = p < 50 ? '#dc3545' : '#28a745';
                                    const width = Math.max(0, Math.min(100, p)); // clamp 0..100

                                    return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                        '<span>' + formatted + '%</span>' +
                                        '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                        '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                        '</div>' +
                                        '</div>';
                                }
                        $(this).find('h2').html(progressHtml(text));
 
                    }else if (index == 5) {
                        // Example: Update the content of each section based on the index
                        var text = (parseFloat(response.data[6].replace(/,/g, '')) / parseFloat(response.rkap.gula_milik))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        function progressHtml(percentValue) {
                                    const p = Number(percentValue) || 0;
                                    const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                    const color = p < 50 ? '#dc3545' : '#28a745';
                                    const width = Math.max(0, Math.min(100, p)); // clamp 0..100

                                    return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                        '<span>' + formatted + '%</span>' +
                                        '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                        '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                        '</div>' +
                                        '</div>';
                                }
                        $(this).find('h2').html(progressHtml(text));
                    }else if (index == 6) {
                        // Example: Update the content of each section based on the index
                        var text = (parseFloat(response.data[7].replace(/,/g, '')) / parseFloat(response.rkap.tetes_milik))*100;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                            function progressHtml(percentValue) {
                                        const p = Number(percentValue) || 0;
                                        const formatted = p.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                        const color = p < 50 ? '#dc3545' : '#28a745';
                                        const width = Math.max(0, Math.min(100, p)); // clamp 0..100
    
                                        return '<div style="display:flex;align-items:center;justify-content:flex-end;">' +
                                            '<span>' + formatted + '%</span>' +
                                            '<div style="width:42px;height:10px;margin-left:10px;background-color:#ccc;border-radius:5px;overflow:hidden;">' +
                                            '<div style="width:' + width + '%;height:100%;background-color:' + color + ';"></div>' +
                                            '</div>' +
                                            '</div>';
                                    }
                        $(this).find('h2').html(progressHtml(text));
                    }
                });

                $('#loadlkprkap .col-lg').each(function(index) {
                    // Ensure that we have enough data to update the values
                    if (index == 0) {
                        // Example: Update the content of each section based on the index
                        var text = response.rkap.luas_ha;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    
                    }else if (index == 2) {
                        // Example: Update the content of each section based on the index
                        let text = response.rkap.tebu_ton;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 1) {
                        // Example: Update the content of each section based on the index
                        let text = response.rkap.protas;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 3) {
                        // Example: Update the content of each section based on the index
                        let text = response.rkap.rendemen;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 4) {
                        // Example: Update the content of each section based on the index
                        let text = response.rkap.hablur;
                        // const myArray = text.split(".");        
                        // const data1 = myArray[0]+"."+myArray[1].substring(0, 2);
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 5) {
                        // Example: Update the content of each section based on the index
                        let text = response.rkap.gula_milik;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 6) {
                        // Example: Update the content of each section based on the index
                        let text = response.rkap.tetes_milik

                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }
                });


                $('#loadlkpjawa .col-lg').each(function(index) {
                    // Ensure that we have enough data to update the values
                    console.log("data:"+response.luas_jawa);
                    if (index == 0) {
                        // Example: Update the content of each section based on the index
                        var text = response.luas_jawa;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    
                    }else if (index == 1) {
                        // Example: Update the content of each section based on the index
                        let text = response.protas_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 2) {
                        // Example: Update the content of each section based on the index
                        let text = response.tebu_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 3) {
                        // Example: Update the content of each section based on the index
                        let text = response.rendemen_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 4) {
                        // Example: Update the content of each section based on the index
                        let text = response.hablur_jawa;
                        // const myArray = text.split(".");        
                        // const data1 = myArray[0]+"."+myArray[1].substring(0, 2);
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 5) {
                        // Example: Update the content of each section based on the index
                        let text = response.gula_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 6) {
                        // Example: Update the content of each section based on the index
                        let text = response.tetes_jawa

                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }

                });

                $('#loadlkpnonjawa .col-lg').each(function(index) {
                    console.log("data:"+index);
                    // Ensure that we have enough data to update the values
                    if (index == 0) {
                        // Example: Update the content of each section based on the index
                        let text = response.luas_non_jawa;


                        var formattedText = (Math.floor(parseFloat(text) * 100) / 100).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 1) {
                        // Example: Update the content of each section based on the index
                        let text = response.protas_non_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 2) {
                        // Example: Update the content of each section based on the index
                        let text = response.tebu_non_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 3) {
                        // Example: Update the content of each section based on the index
                        let text = response.rendemen_non_jawa;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 4) {
                        // Example: Update the content of each section based on the index
                        let text = response.hablur_non_jawa;
                        // const myArray = text.split(".");        
                        // const data1 = myArray[0]+"."+myArray[1].substring(0, 2);
                        var formattedText = (Math.floor(parseFloat(text) * 100) / 100).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 5) {
                        // Example: Update the content of each section based on the index
                        let text = response.gula_non_jawa;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }else if (index == 6) {
                        // Example: Update the content of each section based on the index
                        let text = response.tetes_non_jawa
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                    }

                });
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX error: ' + status + ' - ' + error);
        }
    });
}

function loaddataconsolelkpthnlalu() {
    $.ajax({
        url: '{{ url('dashboard/produksi_2024') }}', // URL endpoint to fetch data
        type: 'GET',
        dataType: "json",
        success: function(response) {


              

               $("#hgsama").text(response.hg);

                $('#loadlkpthnlalu .col-lg').each(function(index) {
                    // Ensure that we have enough data to update the values
                    if (index == 0) {
                        // Example: Update the content of each section based on the index
                        var text = response.luas_tebang;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                                                var realsdhi = $('#loadlkp .col-lg').eq(0).find('h2').text().replace(/\./g, '').replace(',', '.');
                                                console.log("realsdhi1:"+realsdhi);
                    }else if (index == 1) {
                        // Example: Update the content of each section based on the index
                        var text = response.protas;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                        var realsdhi = $('#loadlkp .col-lg').eq(1).find('h2').text().replace(/\./g, '').replace(',', '.');
                        console.log("realsdhi2:"+realsdhi);
                    }else if (index == 2) {
                        // Example: Update the content of each section based on the index
                        var text = response.netto_tebu;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                        var realsdhi = $('#loadlkp .col-lg').eq(2).find('h2').text().replace(/\./g, '').replace(',', '.');
                        console.log("realsdhi3:"+realsdhi);
                    }else if (index == 3) {
                        // Example: Update the content of each section based on the index
                        var text = response.rendemen;


                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                        var realsdhi = $('#loadlkp .col-lg').eq(3).find('h2').text().replace(/\./g, '').replace(',', '.');
                        console.log("realsdhi4:"+realsdhi);
                    }else if (index == 4) {
                        // Example: Update the content of each section based on the index
                        var text = response.hablur;
                        // const myArray = text.split(".");        
                        // const data1 = myArray[0]+"."+myArray[1].substring(0, 2);
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                        var realsdhi = $('#loadlkp .col-lg').eq(4).find('h2').text().replace(/\./g, '').replace(',', '.');
                        console.log("realsdhi5:"+realsdhi);
                    }else if (index == 5) {
                        // Example: Update the content of each section based on the index
                        var text = response.gula;
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                        var realsdhi = $('#loadlkp .col-lg').eq(5).find('h2').text().replace(/\./g, '').replace(',', '.');
                        console.log("realsdhi6:"+realsdhi);
                    }else if (index == 6) {
                        // Example: Update the content of each section based on the index
                        var text = response.tetes
                        var formattedText = parseFloat(text).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        $(this).find('h2').text(formattedText);
                        var realsdhi = $('#loadlkp .col-lg').eq(6).find('h2').text().replace(/\./g, '').replace(',', '.');
                        console.log("realsdhi7:"+realsdhi);
                    }


                        var persen = 0;
                        if (parseFloat(realsdhi) > 0) {
                            persen = ((parseFloat(realsdhi)/parseFloat(text)) * 100) - 100;
                        }
                        var persenFormatted = parseFloat(persen).toFixed(2).replace('.', ',');
                        let icon = '';
                        if (persen > 0) {
                            icon = '<i class="fas fa-arrow-up" style="color: #28a745; margin-right: 4px;"></i>';
                        } else if (persen < 0) {
                            icon = '<i class="fas fa-arrow-down" style="color: #dc3545; margin-right: 4px;"></i>';
                        } else {
                            icon = '<i class="fas fa-minus" style="color: #ffc107; margin-right: 4px;"></i>';
                        }
                        function progressHtml(percentValue) {

                                    return '<div style="font-size:14px;color:#ffc107;display:grid;align-items:center;gap:4px;    position: absolute;top: 32px;right: 18px;">' +
                                                icon +
                                                '<span class="badge badge-dark">' + persenFormatted + '%</span>' +
                                            '</div>';
                                }
                        $(this).find('h2').after(progressHtml(persen));


                });
            
        },
        error: function(xhr, status, error) {
            console.error('AJAX error: ' + status + ' - ' + error);
        }
    });
}

function swapCommasAndDots(str) {
    return str.replace(/[,\.]/g, function(match) {
        return match === ',' ? '.' : ',';
    });
}

function swapAndFormatNumber(str) {
    // Tukar koma jadi titik dan titik jadi koma
    let swapped = str.replace(/[,\.]/g, match => (match === ',' ? '.' : ','));

    // Ubah ke angka (menggunakan titik sebagai desimal)
    let number = parseFloat(swapped.replace(',', '.'));

    // Jika bukan angka yang valid, kembalikan string awal
    if (isNaN(number)) return str;

    // Format menjadi 2 desimal dan ubah titik jadi koma
    return number.toFixed(2).replace('.', ',');
}

</script>