<?php

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

$this->title = 'My Yii Application';
?>
<link rel="stylesheet" href="../css/leaflet.css" />
<link rel="stylesheet" href="../css/leaflet-search.min.css" />
<style>
    #map {
			width: 100%;
			height: 500px;
		}
</style>
<div class="site-index">
<div class="col-md-9">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Peta Tematik Ketetapan Perbuku</h3>
        </div>
        <div class="panel-body">
          <div id='map'></div>
        </div>
      </div>
    </div>    
    <div class="col-md-3">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Legend Ketetapan Perbuku</h3>
        </div>
        <div class="panel-body">
          <ul class="list-group">
            <?php
              foreach ($legendKetetapanPerbuku as $key => $value) {
                echo "<li class='list-group-item' style='background-color: $value[color];'>".$value['nama']."</li>";
              }
            ?>
            
            
          </ul>
        </div>
      </div>
    </div>
</div>
<script src="../js/leaflet.js"></script>
<script src="../js/leaflet-search.min.js"></script>
<script src="../js/proj4-compressed.js"></script>
<script src="../js/proj4leaflet.js"></script>

<script>
    var map = L.map('map').setView([-1.673453, 123.550408], 10);

    var baselayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWxmYXJpb2VrYXB1dHJhIiwiYSI6ImNpaDRncW90ZzB5YnV2b20zOWF3OWNjMHkifQ.2LqtQD-TNuFJHvGKdZQ14w', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.light'
    }).addTo(map);

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

    
    function onEachFeatureKecamatan(feature, layer) {
        
		var popupContent = feature.propertiestable.d_nm_kel;

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

		layer.bindPopup(popupContent);
    }

    function onEachFeatureKelurahan(feature, layer) {
        
		var popupContent = feature.propertiestable.d_nop;

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

		layer.bindPopup(popupContent);
    }

    function onEachFeatureBlok(feature, layer) {
        
		var popupContent = feature.propertiestable.d_blok;

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

		layer.bindPopup(popupContent);
    }

    function onEachFeatureJnsBumi(feature, layer) {
      var popupcontent = [];
      for (var prop in feature.propertiestable) {
          popupcontent.push(prop + ": " + feature.propertiestable[prop]);
      }
      layer.bindPopup(popupcontent.join("<br />"));

    }
    function onEachFeatureKetetapanPerbuku(feature, layer) {
      var popupcontent = [];
      for (var prop in feature.propertiestable) {
          popupcontent.push(prop + ": " + feature.propertiestable[prop]);
      }
      //layer.bindPopup(popupcontent.join("<br />"));

    }


function setJnsBumiColor(d) {
  //console.log(d);
  return d == 1 ? '#FF0000' :
    d == 2 ? '#1AFF00' :
    d == 3 ? '#0D00FF' :
    d == 4 ? '#FF00EA' :
    '#FFFFFF';
}
    
  function JenisBumiStyle(feature) {
    var jns_bumi = [];
    for (var prop in feature.propertiestable) {
        jns_bumi.push(feature.propertiestable[prop]);
    }
    //console.log(jns_bumi[1]);
    return {
      fillColor: jns_bumi[1],
      weight: 2,
      opacity: 0.65,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }
  function KetetapanPerbukuStyle(feature) {
    var ketetapan_perbuku = [];
    for (var prop in feature.propertiestable) {
      ketetapan_perbuku.push(feature.propertiestable[prop]);
    }
    //console.log(jns_bumi[1]);
    return {
      fillColor: ketetapan_perbuku[1],
      weight: 2,
      opacity: 0.65,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }
  function JenisBumiStyle(feature) {
    var jns_bumi = [];
    for (var prop in feature.propertiestable) {
        jns_bumi.push(feature.propertiestable[prop]);
    }
    //console.log(jns_bumi[1]);
    return {
      fillColor: jns_bumi[1],
      weight: 2,
      opacity: 0.65,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
  }
    
    var kecamatanStyle = {
        "color": "#ff7800",
        "weight": 2,
        "opacity": 0.65
    };
    var kelurahanStyle = {
        "color": "#ffff00",
        "weight": 2,
        "opacity": 0.65
    };
    var blokStyle = {
        "color": "#b35400",
        "weight": 2,
        "opacity": 0.65
    };
    var bangunanStyle = {
        "color": "#005fb3",
        "weight": 2,
        "opacity": 0.65
    };
    
    var kecamatan1 = L.Proj.geoJson(<?php echo $dataKecamatan ?>, {
        
		style: kecamatanStyle,
		onEachFeature: onEachFeatureKecamatan,
		
    }).addTo(map);

    var kecamatan2 = L.geoJson(<?php echo $dataKecamatan ?>, {
        
		style: kecamatanStyle,
		onEachFeature: onEachFeatureKecamatan,

    }).addTo(map);

    var kecamatan = L.layerGroup([kecamatan1, kecamatan2])
            .addLayer(kecamatan1)
            .addTo(map);

    var kelurahan = L.Proj.geoJson(<?php echo $dataKelurahan ?>, {
        
		style: kelurahanStyle,
		onEachFeature: onEachFeatureKelurahan,

    }).addTo(map);
    
    var blok = L.Proj.geoJson(<?php echo $dataBlok ?>, {
        
		style: blokStyle,
		onEachFeature: onEachFeatureBlok,

    }).addTo(map);
    
    /*var bangunan = L.geoJson(<?php echo $dataBangunan ?>, {
        
		style: bangunanStyle,
		onEachFeature: onEachFeatureBlok,

    }).addTo(map);*/

    
    var ketetapan_perbuku = L.Proj.geoJson(<?php echo $dataKetetapanPerbuku ?>, {
      
  style: KetetapanPerbukuStyle,
  onEachFeature: onEachFeatureKetetapanPerbuku,

  }).addTo(map);

  ketetapan_perbuku.on('click', function(e) { 
    try{
      let kd_propinsi = e.layer.feature.propertiestable.kd_propinsi;
      let kd_dati2 = e.layer.feature.propertiestable.kd_dati2;
      let kd_kecamatan = e.layer.feature.propertiestable.kd_kecamatan;
      let kd_kelurahan = e.layer.feature.propertiestable.kd_kelurahan;
      let kd_blok = e.layer.feature.propertiestable.kd_blok;
      let no_urut = e.layer.feature.propertiestable.no_urut;
      let kd_jns_op = e.layer.feature.propertiestable.kd_jns_op;
      let nop = kd_propinsi+kd_dati2+kd_kecamatan+kd_kelurahan+kd_blok+no_urut+kd_jns_op;

      fetch('/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
        console.log(data);
        if(data){
          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('<table class="table table-hover">'+
                                                    '<tbody>'+
                                                      '<tr>'+
                                                        '<td>Nama WP</td>'+
                                                        '<td>'+data.nm_wp+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>NOP</td>'+
                                                        '<td>'+data.nop+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Tahun Dibangun</td>'+
                                                        '<td>'+data.thn_dibangun_bng+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Tahun Renovasi</td>'+
                                                        '<td>'+data.thn_renovasi_bng+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Kondisi Bangunan</td>'+
                                                        '<td>'+data.kondisi_bng+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Jenis Konstruksi</td>'+
                                                        '<td>'+data.jns_konstruksi_bng+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Jenis Atap</td>'+
                                                        '<td>'+data.jns_atap_bng+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Dinding</td>'+
                                                        '<td>'+data.kd_dinding+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Lantai</td>'+
                                                        '<td>'+data.kd_lantai+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Langit langit</td>'+
                                                        '<td>'+data.kd_langit_langit+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Jenis</td>'+
                                                        '<td>'+data.nm_jpb+'</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Luas Bangunan</td>'+
                                                        '<td>'+data.luas_bng+'m2</td>'+
                                                        
                                                      '</tr>'+
                                                      '<tr>'+
                                                        '<td>Jumlah Lantai</td>'+
                                                        '<td>'+data.jml_lantai_bng+'</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");
    }  
    });
    
    var searchControl = new L.Control.Search({
		layer: kelurahan,
		propertyName: 'd_nop',
		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) {
		
		//console.log('search:locationfound', );

		//map.removeLayer(this._markerSearch)

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

    // specify the basemap and overlays to put in the layers control
    var baseMaps = {
        "OpenStreet": baselayer,
    };

    var overlayMaps = {
        "Kecamatan": kecamatan,
        "Kelurahan": kelurahan,
        "Blok": blok,
        //"Bangunan": bangunan
        "Ketetapan Perbuku": ketetapan_perbuku
    };

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

</script>