<?php 
 $thntnm = Session::get('tahuntanam');
        if($thntnm == '2425'){
            $tahunprod = '2025';
        }else if($thntnm == '2526'){
            $tahunprod = '2026';
        }else if($thntnm == '2627'){
            $tahunprod = '2027';
        }
?> 
<div class="col-lg-12 col-md-12 mb-4">
    <div class="card">
        <div class="card-body">
            <div class="d-flex no-block">
                <div>
                    <h3 class="card-title m-b-5"><span class="lstick"></span>Realisasi Mutu A dan B (%)<small> (Tanggal
                            SD: <input type="date" class="form-sm-control" id="periode_mutuab"
                                value="<?php echo date('Y-m-d', strtotime('-1 day')); ?>">)
                        </small></h3>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class=" form-group row">
                <label for="ipt" class=" control-label col-md-4"> </label>
                <div class="col-md-8">

                    <input type="radio" value="kebun" name="filtermutu" class="filled-in" id="n-q" checked="checked" />
                    <label for="n-q"> Kebun </label>

                    <input type="radio" value="rayon" name="filtermutu" class="filled-in" id="n-r" />
                    <label for="n-r"> Rayon </label>

                    <input type="radio" value="cluster" name="filtermutu" class="filled-in" id="n-s" />
                    <label for="n-s"> Cluster </label>

                    <input type="radio" value="jawanonjawa" name="filtermutu" class="filled-in" id="n-t" />
                    <label for="n-t"> Luar Jawa </label>
                </div>
            </div>

            <select id="clusterFilterMutu" name="customfiltermutu" class="form-sm-control">
               <option value="" selected>Total KSO</option>
                        <option value="SUMATERA 1">
                            SUMATERA 1
                        </option>
                        <option value="SUMATERA 2">
                            SUMATERA 2
                        </option>
                        <option value="JATENG">
                            JATENG
                        </option>
                        <option value="JATIM 1">
                            JATIM 1
                        </option>
                        <option value="JATIM 2">
                            JATIM 2
                        </option>
                        <option value="SULAWESI">
                            SULAWESI
                        </option>
            </select>
            <select id="kebunFilterMutu" name="customfiltermutu" class="form-sm-control">
              
            </select>

            <div id="chartdivmutu" class="p-relative" style="height:360px;"></div>
        </div>
    </div>
   <script>
     $("#kebunFilterMutu").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:nama_kebun:nama_kebun') !!}",
            {  initial_text : 'Semua Kebun'});
     loadChartmutu2024real('kebun');
     
                      $('input[name="filtermutu"]').change(function() {
                var filter = $(this).val();
                $(this).prop('checked', true);
                loadChartmutu2024real(filter);
            });
        $('select[name="customfiltermutu"]').change(function() {
                var filter = $('input[name="filtermutu"]:checked').val();
                console.log(filter);
                loadChartmutu2024real(filter);
            });          
        
            $('#periode_mutuab').change(function() {
                var filter = $('input[name="filtermutu"]:checked').val();
                console.log(filter);
                loadChartmutu2024real(filter);
            });
        
      function loadChartmutu2024real(filter) {
            var clusterFilterMutu = $('#clusterFilterMutu').val();
            var kebunFilterMutu = $('#kebunFilterMutu').val();
            var tglmutuab = $('#periode_mutuab').val();
            var customfilterMutu = '';
            if(filter == 'kebun') {
                $('#kebunFilterMutu').hide();
                $('#clusterFilterMutu').show();
                customfilterMutu = clusterFilterMutu;
            } else if(filter == 'rayon') {
                $('#kebunFilterMutu').show();
                $('#clusterFilterMutu').hide();
                customfilterMutu = kebunFilterMutu;
            } else {
                $('#kebunFilterMutu').hide();
                $('#clusterFilterMutu').hide();
                customfilterMutu = '';
            }

                $.ajax({
                    url: "{{ url('/dashboard/mutuperrayon') }}",
                    type: "GET",
                    data: { filter: filter, customfilter: customfilterMutu, tgl: tglmutuab },
                    beforeSend: function() {
                        $('#chartdivmutu').html('<p>Loading...</p>');
                    },
                    success: function(response) {
                        Highcharts.chart('chartdivmutu', {
                            chart: { 
                                type: 'column'
                            },
                            title: { text: 'Mutu (%)' },
                            legend: {
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                borderColor: '#d1ecf1',
                                borderWidth: 1,
                                itemStyle: {
                                    color: '#333',
                                    fontWeight: 'bold',
                                    fontSize: '12px'
                                },
                                itemHoverStyle: {
                                    color: '#ff9800'
                                }
                            },
                            xAxis: { categories: response.nama_rayon },
                            yAxis: { title: { text: 'Mutu (%)' } },
                            plotOptions: {
                                column: {
                                    borderRadius: 6,
                                    pointPadding: 0.15,
                                    groupPadding: 0.1,
                                    borderWidth: 0,
                                    shadow: false
                                }
                            },
                            series: [
                                 
                                {
                                    
                                
                                    name: 'Mutu {{ $tahunprod-1 }}',
                                    data: response.mutu_2024,
                                    color: 'darkgrey',
                                    dataLabels: {
                                        enabled: true,
                                        color: 'darkgrey',
                                        style: {
                                            fontWeight: 'bold',
                                            textOutline: '0px'
                                        }
                                    }
                                },
                                {
                                    name: 'Mutu Realisasi',
                                    data: response.mutu,
                                    color: 'orange',
                                    dataLabels: {
                                        enabled: true,
                                        color: 'blue',
                                        style: {
                                            fontWeight: 'bold',
                                            textOutline: '0px'
                                        }
                                    }
                                }
                               
                            ]
                        });
                    },
                    error: function() {
                        // alert("Gagal mengambil data.");
                    }
                });
            }

   </script>