  <!-- Footer -->
  <div class="hk-footer-wrap container">
                <footer class="footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <p>Pampered by<a href="#" class="text-dark" >Hencework</a> © 2019</p>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <p class="d-inline-block">Follow us</p>
                            <a href="#" class="d-inline-block btn btn-icon btn-icon-only btn-indigo btn-icon-style-4"><span class="btn-icon-wrap"><i class="fa fa-facebook"></i></span></a>
                            <a href="#" class="d-inline-block btn btn-icon btn-icon-only btn-indigo btn-icon-style-4"><span class="btn-icon-wrap"><i class="fa fa-twitter"></i></span></a>
                            <a href="#" class="d-inline-block btn btn-icon btn-icon-only btn-indigo btn-icon-style-4"><span class="btn-icon-wrap"><i class="fa fa-google-plus"></i></span></a>
                        </div>
                    </div>
                </footer>
            </div>
            <!-- /Footer -->
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /HK Wrapper -->
    <!-- jQuery -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/select2/dist/js/select2.full.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Slimscroll JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/dist/js/jquery.slimscroll.js"></script>

<!-- Fancy Dropdown JS -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/dist/js/dropdown-bootstrap-extended.js"></script>

<!-- FeatherIcons JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/dist/js/feather.min.js"></script>

<!-- Toggles JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/jquery-toggles/toggles.min.js"></script>
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/dist/js/toggle-data.js"></script>

<!-- Toastr JS -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/jquery-toast-plugin/dist/jquery.toast.min.js"></script>

<!-- Counter Animation JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/waypoints/lib/jquery.waypoints.min.js"></script>
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/jquery.counterup/jquery.counterup.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/raphael/raphael.min.js"></script>
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/morris.js/morris.min.js"></script>

<!-- Easy pie chart JS -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>

<!-- Apex JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/apexcharts/dist/apexcharts.min.js"></script>

<!-- EChartJS JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/echarts/dist/echarts-en.min.js"></script>

<!-- Init JavaScript -->
<script src="https://is3.cloudhost.id/texapp/cdn/cardinal/dist/js/init.js"></script>
<script src="https://is3.cloudhost.id/texapp/api/v2/assets/vendors/dropify/dist/dropify.min.js"></script>
    <!-- Data Table JavaScript -->
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-dt/js/dataTables.dataTables.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/jszip/dist/jszip.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/pdfmake/build/vfs_fonts.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="https://is3.cloudhost.id/texapp/cdn/cardinal/dist/js/dataTables-data.js"></script>
<script>
  $(document).ready(function() {

        
      $('.dropify').dropify({
         messages: {
            'default': 'Drag and drop a file here or click',
            'replace': 'Drag and drop or click to replace',
            'remove':  'Remove',
            'error':   'Ooops, something wrong happended.'
         }
      });
       

    var chart1; // Global variable for chart
    var chart2; // Global variable for chart
    var chart3; // Global variable for chart
    var chart4; // Global variable for chart


    // Fill select box with years from 2020 to current year
    var currentYear = new Date().getFullYear();

    var select = document.getElementById("tahun");
    for(var i = 2020; i <= currentYear; i++) {
        var option = document.createElement("option");
        option.text = i;
        option.value = i;
        if (i === currentYear) {
            option.selected = true; // Set selected attribute for current year
        }
        select.appendChild(option);
    }

    // Initial chart rendering
    var currentYear = new Date().getFullYear();
    $.ajax({
        url: 'dashboard/chartincome',
        method: 'GET',
        data: {
            year: currentYear
        },
        success: function(response) {
            updateChart1(response.totalIncomeMonthly);
            updateChart2(response.totalOrderMonthly);
            updateChart3(response.chartclient);
            updateChart4(response.recentorders);
            textclient(response.dataclient);
            textorders(response.dataorders);
            console.log(response);


        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });


      $('.dropify').dropify({
      messages: {
         'default': 'Drag and drop a file here or click',
         'replace': 'Drag and drop or click to replace',
         'remove':  'Remove',
         'error':   'Ooops, something wrong happended.'
      }
      });

      $('.dropify2').dropify();

         $('#tahun').change(function(){
            var selectedYear = $(this).val();

            $.ajax({
                  url: 'dashboard/chartincome',
                  type: 'GET',
                  data: {
                     year: selectedYear
                  },
                  success: function(response) {
                     updateChart1(response.totalIncomeMonthly);
                     updateChart2(response.totalOrderMonthly);
                     updateChart3(response.chartclient);
                     updateChart4(response.recentorders);
                     textorders(response.dataorders);

                     textclient(response.dataclient);


                  },
                  error: function(xhr, status, error) {
                     console.error(error);
                  }
            });
         });


  
    function updateChart1(data) {
		data.forEach(item => {
        item.amount = parseFloat(item.amount).toFixed(2);
    });

        var options = {
            chart: {
                height: 300,
				type: "line",
				parentHeightOffset: 0
			},
			colors: ["#727cf5", "#7ee5e5","#4d8af0"],
			grid: {
			borderColor: "rgba(77, 138, 240, .1)",
			padding: {
				bottom: -6
			}
			},
			stroke: {
			curve: "smooth",
			width: 3
			},
			dataLabels: {
			enabled: false
			},
            series: [{
                name: 'Total Income',
                data: data.map(item => parseFloat(item.amount)) // Data masih dalam bentuk angka
            }],
			markers: {
			size: 0,
			strokeColor: "#fff",
			strokeWidth: 3,
			strokeOpacity: 1,
			fillOpacity: 1,
			hover: {
				size: 6
			}
			},
            xaxis: {
                categories: data.map(item => item.month)
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return val.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' });
                    }
                }
            },
        };

        if(chart1) {
            chart1.destroy(); // Destroy previous chart if it exists
        }
        chart1 = new ApexCharts(document.getElementById('chart1'), options);
        chart1.render();
    }

    function updateChart2(data) {
    // Round the numbers to 2 decimal places
		data.forEach(item => {
			item.totalqc = parseFloat(item.totalqc).toFixed(2);
			item.qty = parseFloat(item.qty).toFixed(2);
			item.reject = parseFloat(item.reject).toFixed(2);
		});

		var options = {
			chart: {
				type: 'bar'
			},
			colors: ["#727cf5", "#65B741","#FF9843"],
			series: [{
				name: 'Total QC',
				data: data.map(item => parseFloat(item.totalqc))
			}, {
				name: 'Total Quantity',
				data: data.map(item => parseFloat(item.qty))
			}, {
				name: 'Total Reject',
				data: data.map(item => parseFloat(item.reject))
			}],
			xaxis: {
				categories: data.map(item => item.month)
			},			
			dataLabels: {
			enabled: false
			},
			
		};

		if(chart2) {
			chart2.destroy(); // Destroy previous chart if it exists
		}
		chart2 = new ApexCharts(document.getElementById('chart2'), options);
		chart2.render();
	}

   

    function updateChart3(data) {
    // Sorting data berdasarkan tanggal secara terbalik (dari yang paling lama)
    data.sort((a, b) => new Date(a.date_created) - new Date(b.date_created));

      var options = {
         chart: {
               type: "line",
               height: 60,
               sparkline: {
                  enabled: !0
               }
         },
         series: [{
               name: 'New Client',
               data: data.map(item => item.total_clients) // Data masih dalam bentuk angka
         }],

         stroke: {
               width: 2,
               curve: "smooth"
         },
         markers: {
               size: 0
         },
         xaxis: {
               categories: data.map(item => item.date_created)
            },			
         colors: ["#727cf5"],
         
      };

      if(chart3) {
         chart3.destroy(); // Destroy previous chart if it exists
      }
      chart3 = new ApexCharts(document.getElementById('chart3'), options);
      chart3.render();
   }

   function updateChart4(data) {
      data.sort((a, b) => new Date(a.tanggal_order) - new Date(b.tanggal_order));
      var options = {
         chart: {
         type: 'area',
         height: 60,
         sparkline: {
            enabled: !0
         }
         },
         plotOptions: {
         bar: {
            columnWidth: "60%"
         }
         },
         fill: {
         opacity: 0.3,
         colors: ['#00acf0'],
      },

         series: [{
         name: 'Total Orders',
               data: data.map(item => item.qty) // Data masih dalam bentuk angka
         }],
         labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
         xaxis: {
               categories: data.map(item => item.tanggal_order)
            },	

         
      };

      if(chart4) {
         chart4.destroy(); // Destroy previous chart if it exists
      }
      chart4 = new ApexCharts(document.getElementById('chart4'), options);
      chart4.render();
   }

   function textorders(data) {
      $('#totalOrders').text(data.total_orders_last_10_days);
      var percentageChange2 = data.percentage_change; // Menggunakan variabel yang benar
      var changeClass = (percentageChange2 > 0) ? 'text-success' : ((percentageChange2 < 0) ? 'text-danger' : '');
      $('#percentageChange2').text(percentageChange2.toFixed(1) + '%').addClass(changeClass);

   }

   function textclient(data) {
         $('#totalClients').text(data.total_clients_last_10_days);
         var percentageChange = data.percentage_change;
         var changeClass = (percentageChange > 0) ? 'text-success' : ((percentageChange < 0) ? 'text-danger' : '');
         $('#percentageChange').text(percentageChange.toFixed(1) + '%').addClass(changeClass);



      }





});

    

</script>
</body>

</html>