<?php

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

$this->title = 'Jenis Bumi';

?>
<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 Jenis Bumi</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 Jenis Bumi</h3>
        </div>
        <div class="panel-body">
          <ul class="list-group">
            <?php
              foreach ($legendJenisBumi as $key => $value) {
                echo "<li class='list-group-item' style='background-color: $value[color];'>".$value['nama']."</li>";
              }
            ?>
            
            
          </ul>
        </div>
      </div>
    </div>

</div>

<div id="myModal" class="modal hide fade">
    <!-- dialog contents -->
    <div class="modal-body">Hello world!</div>
    <!-- dialog buttons -->
    <div class="modal-footer"><a href="#" class="btn primary">OK</a></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', {
            zoomControl:true, maxZoom:28, minZoom:1
        }).fitBounds([[-4.54885869432,136.884471322],[-4.54135359395,136.900778528]]);

    var baselayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
		id: 'mapbox.light'
    }).addTo(map);

    // GeoJSON layer (UTM15)
    proj4.defs('USER:100000', '+proj=utm +zone=53 +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(feature.propertiestable[prop]);
      }
      

    }
    

  
  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);
    map.fitBounds(kelurahan.getBounds());

    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 jenis_bumi = L.Proj.geoJson(<?php echo $dataJnsBumi ?>, {
        
		style: JenisBumiStyle,
		onEachFeature: onEachFeatureJnsBumi,

    }).addTo(map);

    jenis_bumi.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
        "Jenis Bumi": jenis_bumi
    };

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

</script>