@extends('layout.map')

@section('addCSS')
<link rel="stylesheet" href="{{ asset('openlayer/ol.css') }}" type="text/css">
<style>
.map-container {
  position: inherit !important;
  min-width: 100%;
  max-width: 100%;
  display: block;
  padding:0px !important;
  overflow: hidden;
  border-radius: 0px;
}
.map-container .google-map {
  display: block;
  overflow: hidden;
  position:absolute !important;
  width: 100%;
  min-height:100% !important;
}
.gm-style a img{
  display: none
}
.gmnoprint, .gm-style-cc{
  display: none
}
.ruas-jalan{
  margin:20px;
  list-style: none;
}
.settings-panel .nav-tabs {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 0;
  background: #bfbfbf !important;
}
</style>
@stop
@section('content')
@php($page="peta")
@php($subpage="peta")
<div class="map-container" id="map" style="width: 100%;height:100vh;">
</div>
<div class="theme-setting-wrapper">
  <div id="settings-trigger"><i class="mdi mdi-settings"></i></div>
  <div id="theme-settings" class="settings-panel">
    <i class="settings-close mdi mdi-close"></i>
    <p class="settings-heading">FILTER DATA</p>
    <ul class="nav nav-tabs tab-solid tab-solid-danger" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#wilayah" role="tab" aria-selected="true">Wilayah Administrasi</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#jalan" role="tab" aria-selected="false">Ruas Jalan</a>
      </li>
    </ul>
    <div class="tab-content tab-content-solid">
      <div class="tab-pane fade show active" id="wilayah">
        <ul class="ruas-jalan">
          @foreach ($data['wilayah'] as $key => $value)
          <li>
            <div class="form-group">
              <input type="checkbox" style="margin-right:10px">
              <lable>{{$value->nama_wilayah}}</label>
            </div>
          </li>
          @endforeach
        </ul>
      </div>
      <div class="tab-pane fade" id="jalan">
        <ul class="ruas-jalan">
          @foreach ($data['ruas-jalan'] as $key => $value)
          <li>
            <div class="form-group">
              <input type="checkbox" style="margin-right:10px" id="jalan{{$value->id}}" onclick="tampilkan('{{$value->id}}')">
              <lable>{{$value->nama_pangkal_ruas}} - {{$value->nama_ujung_ruas}}</label>
            </div>
          </li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
@stop
@section('addJS')
<script src="{{asset('assets/node_modules/geoxml3-master/polys/geoxml3.js')}} "></script>
<script src="{{asset('openlayer/ol.js')}} "></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnT63XUjqjPgXZ0lFTU_pdpfUX7swzTTM&callback=initMap"></script>
<script>
var kml_jalan = [];
function initMap(){
  let map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([112.4186314, -7.4714885]),
            zoom: 12
        })
    });
}

function tampilkan(id){
  if($('#jalan'+id).is(':checked')) {
    kml_jalan[id].showDocument();
  }else{
    kml_jalan[id].hideDocument();
  }
}



</script>
@stop