<?php

/* @var $this yii\web\View */

$this->title = 'SIG Kolaka';
?>
<div id="content-sig">
  <div class="row">
    <div id="info-grafis">

      <div id="map-content" class="col-md-9">
        <div class="row">
          <?php
          if ($dataKelurahan == null) {
            echo "<script>alert('Peta tidak ditemukan'); window.history.back();</script>";
          }
          ?>
          <div id='map'></div>
          <!-- Modal -->
          <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="infoModalLabel">Informasi Rinci Objek Pajak</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body modal-body-tanah">

                </div>
              </div>
            </div>
          </div>
          <!-- Modal -->
          <div class="modal fade" id="infoModalBangunan" tabindex="-1" role="dialog" aria-labelledby="infoModalBangunanLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="infoModalBangunanLabel">Informasi Rinci Objek Pajak</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body modal-body-bangunan">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- col-md-9 -->
      <div id="sidebar" class="col-md-3">
        <div class="row">
          <div class="_sidebar">

            <div class="sidebar-info">
              <div class="sidebar-heading">
                <h5 class="title">
                  Profil Kelurahan
                  <?= $namaKelurahan ?>
                </h5>
              </div>
            </div>
            <div class="sidebar-content">
              <table class="table-info">
                <tr>
                  <td>Jumlah Objek Pajak</td>
                  <td>
                    <?= number_format($jumlahObjekPajak, 0, ",", ".") ?>
                  </td>
                </tr>
                <tr>
                  <td>Jumlah SPPT</td>
                  <td>
                    <?= number_format($jumlahSppt, 0, ",", ".") ?>
                  </td>
                </tr>
                <tr>
                  <td>Pokok PBB</td>
                  <td>Rp
                    <?= number_format($jumlahPokokPbb, 2, ",", ".") ?>
                  </td>
                </tr>
                <tr>
                  <td>Realisasi PBB</td>
                  <td>Rp
                    <?= number_format($realisasiPbb, 2, ",", ".") ?>
                  </td>
                </tr>
                <!-- <tr>
                  <td>ZNT Tertinggi</td>
                  <td>Rp
                    <? //= number_format($zntTertinggi, 2, ",", ".") 
                    ?>
                  </td>
                </tr>
                <tr>
                  <td>ZNT Terendah</td>
                  <td>Rp
                    <? //= number_format($zntTerendah, 2, ",", ".") 
                    ?>
                  </td>
                </tr> -->
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- col-md-3 -->
    </div>
    <!-- info grafis -->
  </div>
  <!-- row -->
</div>
<script>
  var map = L.map('map', {
    zoomControl: true,
    maxZoom: 18,
    minZoom: 1
  }).fitBounds([
    [-4.01237288, 121.53246119],
    [-4.14689605, 121.69722966]
  ]);

  var openstreetmap = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  var googlemaps = L.tileLayer('https://www.google.com/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}', {
    maxZoom: 19,
    attribution: 'Map data &copy; <a href="http://google.com">Google Maps</a>',
    id: 'mapbox.light'
  });
  var googlestelite = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    maxZoom: 19,
    attribution: 'Map data &copy; <a href="http://google.com">Google Maps</a>',
    id: 'mapbox.light'
  });

  L.easyButton('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke - linecap = "round" stroke - linejoin = "round" d = "M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" / ></svg>', function() {
    window.location.reload();
  }).addTo(map);


  // GeoJSON layer (UTM15)
  proj4.defs("EPSG:32751", "+proj=utm +zone=51 +south +datum=WGS84 +units=m +no_defs +type=crs");

  function onEachFeatureKelurahan(feature, layer) {
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: showInformation,

    });
  }

  function showBuildingInformation(e) {
    try {
      let nop = e.target.feature.properties.nop;
      // $('#infoModal').modal('hide');
      fetch('/index.php/info/get-info-bangunan2?nop=' + nop)
        .then((resp) => resp.json()) // Transform the data into json
        .then(function(dataBangunan) {
          // Create and append the li's to the ul
          if (dataBangunan.error) {
            bootbox.alert("Data tidak ditemukan");
            return;
          }
          if (dataBangunan) {
            $('.modal-body-bangunan').html('<table class="table table-hover">' +
              '<tbody>' +
              '<tr>' +
              '<td></td>' +
              '<td><h1>Informasi Bangunan</h1></td>' +

              '</tr>' +
              '<tr>' +
              '<td>Nama WP</td>' +
              '<td>' + dataBangunan.nm_wp + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>NOP</td>' +
              '<td>' + dataBangunan.nop + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Tahun Dibangun</td>' +
              '<td>' + dataBangunan.thn_dibangun_bng + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Tahun Renovasi</td>' +
              '<td>' + dataBangunan.thn_renovasi_bng + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Kondisi Bangunan</td>' +
              '<td>' + dataBangunan.kondisi_bng + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Jenis Konstruksi</td>' +
              '<td>' + dataBangunan.jns_konstruksi_bng + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Jenis Atap</td>' +
              '<td>' + dataBangunan.jns_atap_bng + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Dinding</td>' +
              '<td>' + dataBangunan.kd_dinding + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Lantai</td>' +
              '<td>' + dataBangunan.kd_lantai + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Langit langit</td>' +
              '<td>' + dataBangunan.kd_langit_langit + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Jenis</td>' +
              '<td>' + dataBangunan.nm_jpb + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Luas Bangunan</td>' +
              '<td>' + dataBangunan.luas_bng + 'm2</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Jumlah Lantai</td>' +
              '<td>' + dataBangunan.jml_lantai_bng + '</td>' +

              '</tbody>' +
              '</table>');

            $('#infoModalBangunan').modal('show');
          } else {
            bootbox.alert("Data tidak ditemukan");
          }
        });



    } catch (e) {
      bootbox.alert("Data tidak ditemukan");
    }
  }

  function showInformation(e) {
    try {
      let nop = e.target.feature.properties.nop;
      $('#infoModalBangunan').modal('hide');
      fetch('/index.php/info/get-info-bangunan?nop=' + nop)
        .then((resp) => resp.json()) // Transform the data into json
        .then(function(data) {
          // Create and append the li's to the ul
          if (data.error) {
            bootbox.alert("Data tidak ditemukan");
            return;
          }
          if (data) {
            $('.modal-body-tanah').html('<table class="table table-hover">' +
              '<tbody>' +
              '<tr>' +
              '<td></td>' +
              '<td><h1>Informasi Tanah</h1></td>' +
              '<tr>' +
              '<tr>' +
              '<td></td>' +
              '<td><a class="btn btn-primary" href="https://maps.google.com/maps?q=&layer=c&cbll=' + e.latlng.lat + ',' + e.latlng.lng + '" target="_blank">Google Street Maps</a></td>' +
              '<tr>' +
              '<td>Tahun</td>' +
              '<td>' + data.data[0].thn_pajak_sppt + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Nama WP</td>' +
              '<td>' + data.sppt[0].nm_wp_sppt + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>NOP</td>' +
              '<td>' + data.objek_pajak.nop + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Alamat WP</td>' +
              '<td>' + data.objek_pajak.alamat_wp + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Letak OP</td>' +
              '<td>' + data.objek_pajak.alamat_op + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Jenis Bumi</td>' +
              '<td>' + data.objek_pajak.jns_bumi + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Kode ZNT</td>' +
              '<td>' + data.dat_nir[0].kd_znt_nir + '(Rp' + data.dat_nir[0].nir + ')</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Luas Tanah</td>' +
              '<td>' + data.objek_pajak.luas_bumi + 'm²</td>' +

              '</tr>' +
              '<tr>' +
              '<td>NJOP Bumi</td>' +
              '<td>Rp' + data.sppt[0].njop_bumi + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>NJOP Bangunan</td>' +
              '<td>Rp' + data.sppt[0].njop_bng + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>PBB</td>' +
              '<td>Rp' + data.sppt[0].pbb + '</td>' +

              '</tr>' +
              '<tr>' +
              '<td>Informasi Bangunan</td>' +
              '<td><a id="infoBangunan" data-nop="' + nop + '" class="btn btn-primary" href="#">Informasi Bangunan</a></td>' +

              '</tr>' +

              '</tbody>' +
              '</table>');

            document.getElementById("infoBangunan").addEventListener('click', () => {
              showBuildingInformation(e);
            });

          } else {
            var dialog = bootbox.dialog({
              title: 'Info',
              message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
            });
            dialog.init(function() {
              setTimeout(function() {
                dialog.find('.bootbox-body').html('Tidak ada data');
              }, 3000);
            });
          }
        }).finally(() => {
          $('#infoModal').modal('show');
        });
    } catch (e) {
      bootbox.alert("Data tidak ditemukan");
    }
  }

  function showInformationTematik(e) {

    try {

      var kd_propinsi = e.target.feature.propertiestable.kd_propinsi;
      var kd_dati2 = e.target.feature.propertiestable.kd_dati2;
      var kd_kecamatan = e.target.feature.propertiestable.kd_kecamatan;
      var kd_kelurahan = e.target.feature.propertiestable.kd_kelurahan;
      var kd_blok = e.target.feature.propertiestable.kd_blok;
      var no_urut = e.target.feature.propertiestable.no_urut;
      var kd_jns_op = e.target.feature.propertiestable.kd_jns_op;
      let nop = kd_propinsi + kd_dati2 + kd_kecamatan + kd_kelurahan + kd_blok + no_urut + kd_jns_op;

      fetch('/index.php/info/get-info-bangunan?nop=' + nop)
        .then((resp) => resp.json()) // Transform the data into json
        .then(function(data) {
          if (data.error) {
            bootbox.alert("Data tidak ditemukan");
            return;
          }
          // Create and append the li's to the ul
          if (data.data.length > 0) {
            var dialog = bootbox.dialog({
              title: 'INFORMASI RINCI OBJEK PAJAK',
              message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
              buttons: {
                noclose: {
                  label: "Informasi Bangunan",
                  className: 'btn-info',
                  callback: function() {
                    var infoBangunan = bootbox.dialog({
                      title: 'INFORMASI BANGUNAN',
                      message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
                    });
                    try {
                      fetch('/index.php/info/get-info-bangunan2?nop=' + nop)
                        .then((resp) => resp.json()) // Transform the data into json
                        .then(function(dataBangunan) {
                          infoBangunan.init(function() {
                            setTimeout(function() {
                              infoBangunan.find('.bootbox-body').html('<table class="table table-hover">' +
                                '<tbody>' +
                                '<tr>' +
                                '<td>Nama WP</td>' +
                                '<td>' + dataBangunan.nm_wp + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>NOP</td>' +
                                '<td>' + dataBangunan.nop + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Tahun Dibangun</td>' +
                                '<td>' + dataBangunan.thn_dibangun_bng + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Tahun Renovasi</td>' +
                                '<td>' + dataBangunan.thn_renovasi_bng + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Kondisi Bangunan</td>' +
                                '<td>' + dataBangunan.kondisi_bng + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Jenis Konstruksi</td>' +
                                '<td>' + dataBangunan.jns_konstruksi_bng + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Jenis Atap</td>' +
                                '<td>' + dataBangunan.jns_atap_bng + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Dinding</td>' +
                                '<td>' + dataBangunan.kd_dinding + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Lantai</td>' +
                                '<td>' + dataBangunan.kd_lantai + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Langit langit</td>' +
                                '<td>' + dataBangunan.kd_langit_langit + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Jenis</td>' +
                                '<td>' + dataBangunan.nm_jpb + '</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Luas Bangunan</td>' +
                                '<td>' + dataBangunan.luas_bng + 'm2</td>' +

                                '</tr>' +
                                '<tr>' +
                                '<td>Jumlah Lantai</td>' +
                                '<td>' + dataBangunan.jml_lantai_bng + '</td>' +

                                '</tr>' +
                                '</tbody>' +
                                '</table>');
                            }, 3000);
                          });
                        });
                    } catch (e) {
                      bootbox.alert("Data tidak ditemukan");
                    }
                  }
                }
              }
            });
            dialog.init(function() {
              setTimeout(function() {
                dialog.find('.bootbox-body').html('<table class="table table-hover">' +
                  '<tbody>' +
                  '<tr>' +
                  '<td>Tahun</td>' +
                  '<td>' + data.data[0].thn_pajak_sppt + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>Nama WP</td>' +
                  '<td>' + data.sppt[0].nm_wp_sppt + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>NOP</td>' +
                  '<td>' + data.objek_pajak.nop + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>Alamat WP</td>' +
                  '<td>' + data.objek_pajak.alamat_wp + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>Letak OP</td>' +
                  '<td>' + data.objek_pajak.alamat_op + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>Jenis Bumi</td>' +
                  '<td>' + data.objek_pajak.jns_bumi + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>Kode ZNT</td>' +
                  '<td>' + data.dat_nir[0].kd_znt_nir + '(Rp' + data.dat_nir[0].nir + ')</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>Luas Tanah</td>' +
                  '<td>' + data.objek_pajak.luas_bumi + 'm²</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>NJOP Bumi</td>' +
                  '<td>Rp' + data.sppt[0].njop_bumi + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>NJOP Bangunan</td>' +
                  '<td>Rp' + data.sppt[0].njop_bng + '</td>' +

                  '</tr>' +
                  '<tr>' +
                  '<td>PBB</td>' +
                  '<td>Rp' + data.sppt[0].pbb + '</td>' +

                  '</tr>' +

                  '</tbody>' +
                  '</table>');
              }, 3000);
            });
          } else {
            var dialog = bootbox.dialog({
              title: 'Info',
              message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
            });
            dialog.init(function() {
              setTimeout(function() {
                dialog.find('.bootbox-body').html('Tidak ada data');
              }, 3000);
            });
          }
        });
    } catch (e) {
      bootbox.alert("Data tidak ditemukan");
    }
  }

  function onEachFeatureBlok(feature, layer) {

    var popupContent = feature.propertiestable.kd_blok;

    if (feature.properties && feature.propertiestable.popupContent) {
      popupContent += feature.propertiestable.popupContent;
    }

    layer.bindPopup(popupContent);
  }

  function onEachFeatureNop(feature, layer) {

    var popupContent = feature.properties.nop;

    if (feature.properties && feature.properties.popupContent) {
      popupContent += feature.properties.popupContent;
    }

    // layer.bindTooltip(popupContent.substring(10), {permanent: true, opacity: 0.7, direction: "center", className: "my-labels"});

  }

  function onEachFeatureBangunan(feature, layer) {

    var popupContent = feature.properties.ogc_fid;

    if (feature.properties && feature.properties.popupContent) {
      popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
  }

  function onEachFeatureTematik(feature, layer) {
    layer.on({
      // mouseover: highlightFeature,
      // mouseout: resetHighlight,
      click: showInformationTematik,

    });

  }

  function TematikStyle(feature) {
    var tematik_color = [];
    for (var prop in feature.propertiestable) {
      tematik_color.push(feature.propertiestable[prop]);
    }

    return {
      fillColor: tematik_color[1],
      weight: 2,
      opacity: 0.3,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.3
    };
  }

  function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
      weight: 5,
      color: '#666',
      dashArray: '',
      fillOpacity: 0.7
    });


  }

  function resetHighlight(e) {
    kelurahan.resetStyle(e.target);
  }

  var kecamatanStyle = {
    "color": "#ff7800",
    "weight": 1,
    "opacity": 0.65
  };
  var kelurahanStyle = {
    "color": "#e3c863",
    "weight": 1,
    "opacity": 1
  };

  function nopStyle(feature) { //Regions
    return {
      interactive: false,
      weight: 1,
      opacity: 0.65,
      color: '#ffff00'
    };
  }

  function blokStyle(feature) { //Regions
    return {
      interactive: false,
      weight: 1,
      opacity: 0.65,
      color: '#b35400'
    };
  }

  var bangunanStyle = {
    "color": "#005fb3",
    "weight": 2,
    "opacity": 0.65
  };
  var jalanStyle = {
    "color": "#121858",
    "weight": 2,
    "opacity": 0.65
  }

  var sungaiStyle = {
    "color": "#1769aa",
    "weight": 2,
    "opacity": 0.65
  }


  var kelurahan = L.Proj.geoJson(<?php echo $dataKelurahan ?>, {

    style: kelurahanStyle,
    onEachFeature: onEachFeatureKelurahan,

  }).addTo(map);
  map.fitBounds(kelurahan.getBounds());

  var blok = L.Proj.geoJson(<?php echo $dataBlok ? $dataBlok : '{"type": "Feature","geometry": {"type": "Point","coordinates": [0,0]},"propertiestable": {"kd_blok": "0"}}' ?>, {

    style: blokStyle,
    onEachFeature: onEachFeatureBlok,

  }).addTo(map);

  var nop = L.Proj.geoJson(<?php echo $dataKelurahan ? $dataKelurahan : '{"type": "Feature","geometry": {"type": "Point","coordinates": [0,0]},"propertiestable": {"kd_blok": "0"}}' ?>, {

    style: nopStyle,
    onEachFeature: onEachFeatureNop,

  })


  // layer.bindTooltip("my tooltip text").openTooltip();

  /* var bangunan = L.Proj.geoJson(<?php //echo $dataBangunan 
                                    ?>
  , {

  	style: bangunanStyle,
  	onEachFeature: onEachFeatureBangunan,

  }).addTo(map);

  //layer jalan
  var jalan = L.Proj.geoJson( <?php //echo $dataJalan 
                              ?> , {

  	style: jalanStyle,
  	onEachFeature: onEachFeatureGeneral,

  }).addTo(map);

  //layer sungai
  var sungai = L.Proj.geoJson( <?php //echo $dataSungai 
                                ?> , {
  	style: sungaiStyle,
  	onEachFeature: onEachFeatureGeneral,
  }).addTo(map);*/


  var searchControl = new L.Control.Search({
    layer: kelurahan,
    propertyName: 'nop',
    marker: false,
    moveToLocation: function(latlng, title, map) {
      var zoom = map.getBoundsZoom(latlng.layer.getBounds());
      map.setView(latlng, zoom); // access the zoom
    }
  });

  map.addControl(searchControl);

  searchControl.on('search:locationfound', function(e) {


    e.layer.setStyle({
      fillColor: '#3f0',
      color: '#0f0'
    });
    if (e.layer._popup)
      e.layer.openPopup();

  }).on('search:collapsed', function(e) {

    kelurahan.eachLayer(function(layer) { //restore feature color
      kelurahan.resetStyle(layer);
    });
  });


  $(".form-search").on('keyup', function(e) {
    if (e.keyCode == 13) {
      searchControl.searchText(e.target.value);

    }
  });


  $('.showLegend').hide();
  // $('.tematik').on('click', function(){
  // 	alert('aaa');
  // 	console.log($('.tematik').data("value"));
  // });

  // $('#tematik').on('change', function() {
  $('.tematik').on('click', function(event) {
    $('.leaflet-bottom.leaflet-left').empty();
    map.spin(true);

    if (event.delegateTarget.dataset.value == 'status_pembayaran' || event.delegateTarget.dataset.value == 'kelas_bangunan') {
      $('.leaflet-bottom.leaflet-left').empty();
      bootbox.prompt({
        title: "Pilih Tahun",
        inputType: 'select',
        inputOptions: [{
            text: '2014',
            value: '2014',
          },
          {
            text: '2015',
            value: '2015',
          },
          {
            text: '2016',
            value: '2016',
          },
          {
            text: '2017',
            value: '2017',
          },
          {
            text: '2018',
            value: '2018',
          },
          {
            text: '2019',
            value: '2019',
          },
          {
            text: '2020',
            value: '2020',
          },
          {
            text: '2021',
            value: '2021',
          },
          {
            text: '2022',
            value: '2022',
          },
          {
            text: '2023',
            value: '2023',
          },
          {
            text: '2024',
            value: '2024',
          },
          {
            text: '2025',
            value: '2025',
          }
        ],
        callback: function(result) {
          $('.leaflet-bottom.leaflet-left').empty();
          // map.spin(true);
          $.ajax({
            type: "GET",
            url: "/index.php/tematik/get-peta",
            data: {
              nop: "<?php echo $_GET['nop'] ?>",
              tahun: result,
              tipe: event.delegateTarget.dataset.value
            },
            dataType: 'json',
            success: function(response) {
              var peta = JSON.parse(response.peta);
              var legend = response.legend;
              console.log(response);
              var tematik = L.Proj.geoJson(peta, {
                style: TematikStyle,
                onEachFeature: onEachFeatureTematik,
              }).addTo(map);

              var legendColor = [];
              legend.map((value, index) => {
                /* $('#legend').append(
                	'<li class="list-group-item" style="background-color: ' + value.color + '">' + value.nama + '</li>'
                ) */
                legendColor.push({
                  label: value.nama + ' (' + value.total + ')',
                  html: '',
                  style: {
                    'background-color': value.color,
                    'width': '30px',
                    'height': '30px'
                  }
                })
              });
              console.log(legendColor);
              L.control.htmllegend({
                position: 'bottomleft',
                disableVisibilityControl: true,
                legends: [{
                  name: 'Tematik',
                  layer: tematik,
                  elements: legendColor
                }],
                collapseSimple: true,
                detectStretched: true,
                collapsedOnInit: false,
                defaultOpacity: 0.7,
              }).addTo(map);
              // htmlLegend.removeFrom(map);

              //map.addControl(htmlLegend);

              map.spin(false);
              $('.opacity-slider').hide();
              $('.leaflet-html-legend-icon-eye').hide();
              $('.leaflet-html-legend').css('background-color', '#E7E5DF');
            }
          });
        }
      });
    } else {

      $.ajax({
        type: "GET",
        url: "/index.php/tematik/get-peta",
        data: {
          nop: "<?php echo $_GET['nop'] ?>",
          tipe: event.delegateTarget.dataset.value
        },
        dataType: 'json',
        success: function(response) {
          var peta = JSON.parse(response.peta);
          var legend = response.legend;

          var tematik = L.Proj.geoJson(peta, {
            style: TematikStyle,
            onEachFeature: onEachFeatureTematik,
          }).addTo(map);

          var legendColor = [];
          legend.map((value, index) => {
            /* $('#legend').append(
              '<li class="list-group-item" style="background-color: ' + value.color + '">' + value.nama + '</li>'
            ) */
            legendColor.push({
              label: value.nama + ' (' + value.total + ')',
              html: '',
              style: {
                'background-color': value.color,
                'width': '30px',
                'height': '30px'
              }
            })
          });
          // console.log(legendColor);
          L.control.htmllegend({
            position: 'bottomleft',
            disableVisibilityControl: true,
            legends: [{
              name: 'Tematik',
              layer: tematik,
              elements: legendColor
            }],
            collapseSimple: true,
            detectStretched: true,
            collapsedOnInit: false,
            defaultOpacity: 0.7,
          }).addTo(map);
          // htmlLegend.removeFrom(map);

          //map.addControl(htmlLegend);

          map.spin(false);
          $('.opacity-slider').hide();
          $('.leaflet-html-legend-icon-eye').hide();
          $('.leaflet-html-legend').css('background-color', '#E7E5DF');
        }
      });
    }
  });

  // specify the basemap and overlays to put in the layers control
  var baseMaps = {
    "Open Street Map": openstreetmap,
    "Google Map": googlemaps,
    "Google Satelite": googlestelite,
  };

  var overlayMaps = {
    // "Kecamatan": kecamatan,
    "Blok": blok,
    "Kelurahan": kelurahan,
    "Nop": nop
    //"Bangunan": bangunan,
    //"Jalan": jalan,
    //"Sungai": sungai
    //"Jenis Bumi": jenis_bumi
  };


  // initialize up the L.control.layers
  L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>