{{-- Core JS --}}
<!-- build:js assets/vendor/js/core.js -->
<script src="{{asset('assets/vendor/libs/jquery/jquery.js')}}"></script>
<script src="{{asset('assets/vendor/libs/popper/popper.js')}}"></script>
<script src="{{asset('assets/vendor/js/bootstrap.js')}}"></script>
<script src="{{asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js')}}"></script>
<script src="{{asset('assets/vendor/libs/node-waves/node-waves.js')}}"></script>

<script src="{{asset('assets/vendor/libs/hammer/hammer.js')}}"></script>
<script src="{{asset('assets/vendor/libs/i18n/i18n.js')}}"></script>
<script src="{{asset('assets/vendor/libs/typeahead-js/typeahead.js')}}"></script>

<script src="{{asset('assets/vendor/js/menu.js')}}"></script>
<!-- endbuild -->

<!-- Vendors JS -->
{{-- <script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{asset('assets/vendor/libs/tagify/tagify.js')}}"></script>
<script src="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.js')}}"></script>
<script src="{{asset('assets/vendor/libs/typeahead-js/typeahead.js')}}"></script>
<script src="{{asset('assets/vendor/libs/bloodhound/bloodhound.js')}}"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.13.6/datatables.min.js"></script>
<script src="{{asset('assets/vendor/js/splide.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script src="{{asset('assets/vendor/libs/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-responsive/datatables.responsive.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons/datatables-buttons.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/jszip/jszip.js')}}"></script>
<script src="{{asset('assets/vendor/libs/pdfmake/pdfmake.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons/buttons.html5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons/buttons.print.js')}}"></script>
<script src="{{asset('assets/js/charts-apex.js')}}"></script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>

{{-- HIGHCHARTS --}}
{{-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> --}}
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://www.highcharts.com/samples/static/jquery.combobox.js"></script>

<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>



<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
<!-- Row Group JS -->
<script src="{{asset('assets/vendor/libs/datatables-rowgroup/datatables.rowgroup.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-rowgroup-bs5/rowgroup.bootstrap5.js')}}"></script>
<!-- Form Validation -->
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>

{{-- Swall --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.0/dist/sweetalert2.all.min.js" integrity="sha256-IW9RTty6djbi3+dyypxajC14pE6ZrP53DLfY9w40Xn4=" crossorigin="anonymous"></script>

<!-- Flat Picker -->

<!-- Main JS -->
<script src="{{asset('assets/js/main.js')}}"></script>

<!-- Page JS -->


{{-- <script>
    /**
   * This is a complicated demo of Highcharts Maps, not intended to get you up to
   * speed quickly, but to show off some basic maps and features in one single
   * place. For the basic demo, check out
   * https://www.highcharts.com/maps/demo/geojson instead.
   *
   * @todo
   * - Remove jQuery where not necessary
   */

  // Base path to maps
  const baseMapPath = 'https://code.highcharts.com/mapdata/';

  let showDataLabels = false, // Switch for data labels enabled/disabled
      mapCount = 0,
      mapOptions = '';

  // Populate dropdown menus and turn into jQuery UI widgets
  $.each(Highcharts.mapDataIndex, (mapGroup, maps) => {
      if (mapGroup !== 'version') {
          mapOptions += `<option class="option-header">${mapGroup}</option>`;
          $.each(maps, (desc, path) => {
              mapOptions += `<option value="${path}">${desc}</option>`;
              mapCount += 1;
          });
      }
  });
  const searchText = `Search ${mapCount} maps`;
  mapOptions =
      `<option value="custom/world.js">${searchText}</option>${mapOptions}`;
  $('#mapDropdown').append(mapOptions).combobox();

  // Change map when item selected in dropdown
  $('#mapDropdown').on('change', async function () {
      const $selectedItem = $('option:selected', this),
          mapDesc = $selectedItem.text(),
          mapKey = this.value.slice(0, -3),
          svgPath = baseMapPath + mapKey + '.svg',
          geojsonPath = baseMapPath + mapKey + '.geo.json',
          topojsonPath = baseMapPath + mapKey + '.topo.json',
          javascriptPath = baseMapPath + this.value,
          isHeader = $selectedItem.hasClass('option-header');

      // Dim or highlight search box
      if (mapDesc === searchText || isHeader) {
          $('.custom-combobox-input').removeClass('valid');
          location.hash = '';
      } else {
          $('.custom-combobox-input').addClass('valid');
          location.hash = mapKey;
      }

      if (isHeader) {
          return false;
      }

      // Show loading
      if (Highcharts.charts[0]) {
          Highcharts.charts[0].showLoading(
              '<i class="fa fa-spinner fa-spin fa-2x"></i>'
          );
      }

      // Load the map
      let filesize = '';
      const mapData = await fetch(topojsonPath)
          .then(response => {
              const size = response.headers.get('content-length');
              if (size) {
                  filesize = Math.round(size / 1024) + ' kB';
              }

              return response.json();
          })
          .catch(e => console.log('Error', e));

      if (!mapData) {
          if (Highcharts.charts[0]) {
              Highcharts.charts[0].showLoading(
                  '<i class="fa fa-frown"></i> Map not found'
              );
          }
          return;
      }

      // Update info box download links
      $('#download').html(
          '<small>' + filesize + '</small> <br><br>' +
          '<a class="button" target="_blank" href="https://jsfiddle.net/gh/get/jquery/1.11.0/' +
              'highcharts/highcharts/tree/master/samples/mapdata/' + mapKey + '">' +
              'View clean demo</a>' +
              '<div class="or-view-as">... or view as ' +
              '<a target="_blank" href="' + svgPath + '">SVG</a>, ' +
              '<a target="_blank" href="' + geojsonPath + '">GeoJSON</a>, ' +
              '<a target="_blank" href="' + topojsonPath + '">TopoJSON</a>, ' +
              '<a target="_blank" href="' + javascriptPath + '">JavaScript</a>.</div>'
      );

      // Generate non-random data for the map
      const data = mapData.objects.default.geometries.map((g, value) => ({
          key: g.properties['hc-key'],
          value
      }));

      // Show arrows the first time a real map is shown
      if (mapDesc !== searchText) {
          $('.selector .prev-next').show();
          $('#side-box').show();
      }

      // Is there a layer above this?
      const match = mapKey
          .match(/^(countries\/[a-z]{2}\/[a-z]{2})-[a-z0-9]+-all$/);
      let parent;
      if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country
          parent = {
              desc: 'World',
              key: 'custom/world'
          };
      } else if (match) { // admin1
          parent = {
              desc: $('option[value="' + match[1] + '-all.js"]').text(),
              key: match[1] + '-all'
          };
      }
      $('#up').html('');
      if (parent) {
          $('#up').append(
              $('<a><i class="fa fa-angle-up"></i> ' + parent.desc + '</a>')
                  .attr({
                      title: parent.key
                  })
                  .on('click', function () {
                      $('#mapDropdown').val(parent.key + '.js').trigger('change');
                  })
          );
      }

      // Data labels formatter. Use shorthand codes for world and US
      const formatter = function () {
          return (
              mapKey === 'custom/world' ||
              mapKey === 'countries/us/us-all'
          ) ?
              (this.point.properties && this.point.properties['hc-a2']) :
              this.point.name;
      };

      // On point click, look for a detailed map to drill into
      const onPointClick = function () {
          const key = this.key;
          $('#mapDropdown option').each(function () {
              if (this.value === `countries/${key.substr(0, 2)}/${key}-all.js`) {
                  $('#mapDropdown').val(this.value).trigger('change');
              }
          });
      };

      const fitToGeometry = (mapKey === 'custom/world') ? {
          type: 'MultiPoint',
          coordinates: [
              // Alaska west
              [-164, 54],
              // Greenland north
              [-35, 84],
              // New Zealand east
              [179, -38],
              // Chile south
              [-68, -55]
          ]
      } : undefined;

      // Instantiate chart
      console.time('map');
      Highcharts.mapChart('container', {

          chart: {
              map: mapData
          },

          title: {
              text: null
          },

          accessibility: {
              series: {
                  descriptionFormat: '{series.name}, map with {series.points.length} areas.',
                  pointDescriptionEnabledThreshold: 50
              }
          },

          mapNavigation: {
              enabled: true,
              buttonOptions: {
                  alignTo: 'spacingBox',
                  x: 10
              }
          },

          mapView: {
              fitToGeometry
          },

          colorAxis: {
              min: 0,
              stops: [
                  [0, '#EFEFFF'],
                  [0.5, Highcharts.getOptions().colors[0]],
                  [
                      1,
                      Highcharts.color(Highcharts.getOptions().colors[0])
                          .brighten(-0.5).get()
                  ]
              ]
          },

          legend: {
              layout: 'vertical',
              align: 'left',
              verticalAlign: 'bottom'
          },

          series: [{
              data,
              joinBy: ['hc-key', 'key'],
              name: 'Random data',
              dataLabels: {
                  enabled: showDataLabels,
                  formatter,
                  style: {
                      fontWeight: 100,
                      fontSize: '10px',
                      textOutline: 'none'
                  }
              },
              point: {
                  events: {
                      click: onPointClick
                  }
              }
          }, {
              type: 'mapline',
              name: 'Lines',
              accessibility: {
                  enabled: false
              },
              data: Highcharts.geojson(mapData, 'mapline'),
              /*
              data: [{
                  geometry: mapData.objects.default['hc-recommended-mapview'].insets[0].geoBounds
              }],
              // */
              nullColor: '#333333',
              showInLegend: false,
              enableMouseTracking: false
          }]
      });
      console.timeEnd('map');

      showDataLabels = $('#chkDataLabels').prop('checked');
  });

  // Toggle data labels - Note: Reloads map with new random data
  $('#chkDataLabels').on('change', function () {
      showDataLabels = $('#chkDataLabels').prop('checked');
      $('#mapDropdown').trigger('change');
  });

  // Switch to previous map on button click
  $('#btn-prev-map').on('click', function () {
      $('#mapDropdown option:selected')
          .prev('option')
          .prop('selected', true)
          .trigger('change');
  });

  // Switch to next map on button click
  $('#btn-next-map').on('click', function () {
      $('#mapDropdown option:selected')
          .next('option')
          .prop('selected', true)
          .trigger('change');
  });

  // Trigger change event to load map on startup
  if (location.hash) {
      $('#mapDropdown').val(location.hash.substr(1) + '.js');
  }
  $('#mapDropdown').trigger('change');

</script> --}}

<script>
  // Data retrieved from https://gs.statcounter.com/browser-market-share#monthly-202201-202201-bar

// Create the chart
Highcharts.chart('container2', {
    chart: {
        type: 'column'
    },
    title: {
        align: 'left',
        text: ''
    },
    subtitle: {
        align: 'left',
        text: ''
    },
    accessibility: {
        announceNewData: {
            enabled: true
        }
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: ''
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: false,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [
        {
            name: 'Browsers',
            colorByPoint: true,
            data: [
                {
                    name: 'Kube',
                    y: 48,
                    drilldown: 'Kube'
                },
                {
                    name: 'BNPT',
                    y: 19.84,
                    drilldown: 'BNPT'
                },
                {
                    name: 'PKH',
                    y: 50,
                    drilldown: 'PKH'
                },
                {
                    name: 'KIS',
                    y: 85,
                    drilldown: 'KIS'
                },
                {
                    name: 'BSPS',
                    y: 50,
                    drilldown: 'BSPS'
                },
                {
                    name: 'PISEW',
                    y: 45,
                    drilldown: 'PISEW'
                },
                {
                    name: 'KIP',
                    y: 1.582,
                    drilldown: 'KIP'
                },
                {
                    name: 'KKS',
                    y: 1.582,
                    drilldown: 'KKS'
                }
            ]
        }
    ],
    drilldown: {
        breadcrumbs: {
            position: {
                align: 'right'
            }
        },
        series: [
            {
                name: 'Chrome',
                id: 'Chrome',
                data: [
                    [
                        'v65.0',
                        0.1
                    ],
                    [
                        'v64.0',
                        1.3
                    ],
                    [
                        'v63.0',
                        53.02
                    ],
                    [
                        'v62.0',
                        1.4
                    ],
                    [
                        'v61.0',
                        0.88
                    ],
                    [
                        'v60.0',
                        0.56
                    ],
                    [
                        'v59.0',
                        0.45
                    ],
                    [
                        'v58.0',
                        0.49
                    ],
                    [
                        'v57.0',
                        0.32
                    ],
                    [
                        'v56.0',
                        0.29
                    ],
                    [
                        'v55.0',
                        0.79
                    ],
                    [
                        'v54.0',
                        0.18
                    ],
                    [
                        'v51.0',
                        0.13
                    ],
                    [
                        'v49.0',
                        2.16
                    ],
                    [
                        'v48.0',
                        0.13
                    ],
                    [
                        'v47.0',
                        0.11
                    ],
                    [
                        'v43.0',
                        0.17
                    ],
                    [
                        'v29.0',
                        0.26
                    ]
                ]
            },
            {
                name: 'Firefox',
                id: 'Firefox',
                data: [
                    [
                        'v58.0',
                        1.02
                    ],
                    [
                        'v57.0',
                        7.36
                    ],
                    [
                        'v56.0',
                        0.35
                    ],
                    [
                        'v55.0',
                        0.11
                    ],
                    [
                        'v54.0',
                        0.1
                    ],
                    [
                        'v52.0',
                        0.95
                    ],
                    [
                        'v51.0',
                        0.15
                    ],
                    [
                        'v50.0',
                        0.1
                    ],
                    [
                        'v48.0',
                        0.31
                    ],
                    [
                        'v47.0',
                        0.12
                    ]
                ]
            },
            {
                name: 'Internet Explorer',
                id: 'Internet Explorer',
                data: [
                    [
                        'v11.0',
                        6.2
                    ],
                    [
                        'v10.0',
                        0.29
                    ],
                    [
                        'v9.0',
                        0.27
                    ],
                    [
                        'v8.0',
                        0.47
                    ]
                ]
            },
            {
                name: 'Safari',
                id: 'Safari',
                data: [
                    [
                        'v11.0',
                        3.39
                    ],
                    [
                        'v10.1',
                        0.96
                    ],
                    [
                        'v10.0',
                        0.36
                    ],
                    [
                        'v9.1',
                        0.54
                    ],
                    [
                        'v9.0',
                        0.13
                    ],
                    [
                        'v5.1',
                        0.2
                    ]
                ]
            },
            {
                name: 'Edge',
                id: 'Edge',
                data: [
                    [
                        'v16',
                        2.6
                    ],
                    [
                        'v15',
                        0.92
                    ],
                    [
                        'v14',
                        0.4
                    ],
                    [
                        'v13',
                        0.1
                    ]
                ]
            },
            {
                name: 'Opera',
                id: 'Opera',
                data: [
                    [
                        'v50.0',
                        0.96
                    ],
                    [
                        'v49.0',
                        0.82
                    ],
                    [
                        'v12.1',
                        0.14
                    ]
                ]
            }
        ]
    }
});
</script>

<script>
    // var options = {
    //       series: [{
    //       data: [900, 800, 700, 600, 540, 580, 390, 200, 100, 50]
    //     }],
    //       chart: {
    //       type: 'bar',
    //       height: 350
    //     },
    //     plotOptions: {
    //       bar: {
    //         borderRadius: 4,
    //         horizontal: true,
    //       }
    //     },
    //     dataLabels: {
    //       enabled: false
    //     },
    //     xaxis: {
    //       categories: ['Babakan Ciparay', 'Bojongloa Kaler', 'Bandung Kulon', 'Batununggal', 'Buah Batu', 'Ujung Berung', 'Arcamanik',
    //         'Coblong', 'Cibiru', 'Bandung Kidul'
    //       ],
    //     }
    //     };

    //     var chart = new ApexCharts(document.querySelector("#chartkemiskinan"), options);
    //     chart.render();
</script>

<script>
    let table = new DataTable('#rekapitulasi');
 
   </script>
   <script>
    new DataTable('#example', {
        scrollX: true
    });
  </script>
  
  {{-- <script>
  new Splide('#slidercuaca', {
      perPage: 6,
      autoplay: true,
  }).mount();
  </script> --}}