<?php

use yii\helpers\Url;

/* @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 ($dataKecamatan == null) {
            echo "<script>alert('Peta tidak ditemukan'); window.history.back();</script>";
          }
          ?>
          <div id='map'></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 Kecamatan
                  <?= $namaKecamatan ?>
                </h5>
              </div>
            </div>
            <div class="sidebar-content">
              <table class="table-info">
                <tr>
                  <td>Jumlah Kelurahan/Desa</td>
                  <td>
                    <?= $jumlahKelurahan ?>
                  </td>
                </tr>
                <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>Target PBB</td>
                  <td>xxx</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
  })

  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'
  });

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


  function onEachFeatureGeneral(feature, layer) {

    var popupContent = feature.propertiestable.ogc_fid;

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

  function onEachFeatureKecamatan(feature, layer) {
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: goToKelurahan
    });
    var popupContent = feature.propertiestable.d_nm_kel;

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

    // layer.bindPopup(popupContent);
  }

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

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

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
      layer.bringToFront();
    }
  }

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

  function goToKelurahan(e) {
    window.location.href = '<?= Url::to(['/index.php/site/kelurahan?nop=']) ?>' + e.target.feature.propertiestable.d_kd_kel;
  }
  // var kecamatanStyle = {
  //         "color": "#ff7800",
  //         "weight": 2,
  //         "opacity": 0.65
  // };

  function KecamatanStyle(feature) {
    var kecamatan = [];
    for (var prop in feature.propertiestable) {
      kecamatan.push(feature.propertiestable[prop]);
    }
    // console.log(kecamatan);
    return {
      fillColor: "#ff7800", //kecamatan[3],
      weight: 1,
      opacity: 0.65,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }

  function namaStyle(feature) { //Regions
    return {
      interactive: false,
      weight: 1,
      opacity: 0.65,
      fillColor: '#ff7800',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }

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

    style: namaStyle,
    onEachFeature: onEachFeatureNama,

  });

  function onEachFeatureNama(feature, layer) {

    var popupContent = feature.propertiestable.d_nm_kel;

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

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

  }

  var kecamatan = L.Proj.geoJson(<?php echo $dataKecamatan ?>, {

    style: KecamatanStyle,
    onEachFeature: onEachFeatureKecamatan,

  }).addTo(map);
  map.fitBounds(kecamatan.getBounds());
  kecamatan.on('click', function(e) {
    console.log(e);
  });

  // kecamatan.on('mouseover', function(e) { 
  //   console.log(e);
  // });


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

  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) {

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

  //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,
    "nama": nama

  };

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