@extends('layouts.master')

@section('title', 'Charging Station Locations')

@section('links')
<style>          
          #map { 
            height: 500px;    
            width: 100%;            
          }      
      .panel-title > a:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;
}
.panel-title > a.collapsed:before {
    float: right !important;
    content:"\f067";
}
.panel-title > a:hover, 
.panel-title > a:active, 
.panel-title > a:focus  {
    text-decoration:none;
}
        </style> 
@endsection



@section('content')

<div class="br-mainpanel">
<div class="br-pageheader pd-y-15 pd-l-20">
      <nav class="breadcrumb pd-0 mg-0 tx-12">
        <a class="breadcrumb-item" href="{{ URL::to('/') }}">{{ config('config.site_name')}}</a>
        <!--          <a class="breadcrumb-item" href="#">Admins</a>-->
        <span class="breadcrumb-item active">Stations's</span>
      </nav>
      <!-- <button class="btn btn-success success">Toast</button> -->
    </div><!-- br-pageheader -->
    <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
	<h2><strong>{!! trans('messages.list_all') !!}</strong> {!! trans('messages.stations') !!}
				
					</h2>
    </div>
    <div class="br-pagebody">
      <div class="br-section-wrapper">
        

			<div class="col-sm-12" >
							
					<div class="table-wrapper">

					<div class="container">
          <div class="row">
          <div class="col-md-3 with-border accordion" style="border: 1px solid #e9ecef;" role="tablist" aria-multiselectable="true">
          <div id="accordion" class="panel-group" role="tablist" aria-multiselectable="true">
            {!! Form::open(['url' => 'stationlocations','role' => 'form', 'class'=>'employee-form','id' => 'filter-form','data-form-table' => 'employee_table']) !!}
          <div class="box box-solid ">
            <div class="card-header" role="tab" id="headingOne">
                <h6 class="mg-b-0 panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapsepkg" aria-expanded="false" aria-controls="collapseOne" class="tx-gray-800 transition">
                        Packages
                      </a>
                    </h6>
              </div><!-- card-header -->
                <div class="box-body no-padding collapse show" id="collapsepkg"  role="tabpanel" aria-labelledby="headingOne">
                <ul class="nav nav-pills nav-stacked">
                  @foreach ($packages as $item)
                  <li class="list-group-item" style="width: 100%; padding:9px 19px 2px 20px">
                  <label class="ckbox">
                  <input type="checkbox" id="application[]" name="application[]" value="{{ $item }}">  <span> {{ $item }} </span>
                  </label>
                  </li>
                  @endforeach
                </ul>
              </div>
            </div>
            <div class="box box-solid ">
                <div class="card-header" role="tab" id="headingOne">
                    <h6 class="mg-b-0 panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="tx-gray-800 transition">
                            City
                          </a>
                        </h6>
                  </div><!-- card-header -->
                    <div class="box-body no-padding collapse" id="collapseOne"  role="tabpanel" aria-labelledby="headingOne">
                    <ul class="nav nav-pills nav-stacked">
                      @foreach ($cities as $item)
                      <li class="list-group-item" style="width: 100%; padding:9px 19px 2px 20px">
                      <label class="ckbox">
                      <input type="checkbox" id="state[]" name="state[]" value="{{ $item->city_id }}">  <span> {{ $item->city_name }} </span>
                      </label>
                      </li>
                      @endforeach
                    </ul>
                  </div>
                </div>
            <div class="box box-solid ">
            <div class="card-header" role="tab" id="headingOne">
                    <h6 class="mg-b-0 panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" class="tx-gray-800 transition">
                            Connector Type</a></h6>
                  </div><!-- card-header -->
                    <div class="box-body no-padding collapse" id="collapseTwo"  role="tabpanel" aria-labelledby="headingOne">
                    <ul class="nav nav-pills nav-stacked">
                        @foreach ($connections as $item)
                        <li class="list-group-item" style="width: 100%; padding:9px 19px 2px 20px">
                        <label class="ckbox">
                        <input type="checkbox" id="connector_type[]" name="connector_type[]" value="{{ $item->id }}"><span><img src="{{ url('/').'/'.config('constants.upload_path.connectorImg').$item->image }}" class="img-responsive zoom-img" style="height:20px;width:30px;float:right;" alt=""/> {{ $item->name }}</span>
                        </label>
                        </li>
                        @endforeach
                    </ul>
                  </div>
                </div>
                <div class="box box-solid ">
              <div class="card-header" role="tab" id="headingOne">
                  <h6 class="mg-b-0 panel-title">
                   <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseOne" class="tx-gray-800 transition">
                                    Usage</a></h6>
                  </div><!-- card-header -->
              <div class="box-body no-padding collapse" id="collapseThree"  role="tabpanel" aria-labelledby="headingOne">
                 <ul class="nav nav-pills nav-stacked">
                    @foreach ($usage as $keys=> $item)
                    @if($keys!='banned')
                    <li class="list-group-item" style="width: 100%; padding:9px 19px 2px 20px">
                        <label class="ckbox">
                          <input type="checkbox" id="usage_type[]" name="usage_type[]" value="{{ $keys }}">  <span><img src="{{ url('/').'/'.config('constants.upload_path.icons').$keys.".png" }}" class="img-responsive zoom-img" style="height:20px;width:30px;float:right;" alt=""/> {{ $item }}</span>
                        </label>
                      </li>
                      @endif
                    @endforeach
  
                          </ul>
                      </div>
               </div>
    
        <button class="btn btn-primary btn-block">Apply Filter</button>
        {!! Form::close() !!}
          </div>
          </div>
					<div class="col-md-9">
					
                       
      <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> 
      <span class="metadata-marker" style="display: none;" data-region_tag="html-body"></span>    
      <div id="map"></div>
         
      
						</div>
						</div >
					

				 
							
						</div>
					</div>
				</div>


        

      </div><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->
    
  
@endsection
 

@section('scripts')


<script>
  $("#filter-form").submit(function(event){
            event.preventDefault();
            clear=true;

          var formdata=$(this).serialize();
          
          createMarkers(formdata,clear);
          //createMarkers($(this).serializeArray());
          
      
        });
 
	// Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      var markers = [];

      var lat_longs_map = new Array();
      initMap();
      
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 28.5750163, lng:  77.130414},
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        infoWindow = new google.maps.InfoWindow;

        var GEOCODING = 'lat=28.5750163&lng=77.130414&range=3000';

        clear=false;

        createMarkers(GEOCODING,clear);
      }

      function createMarkers(GEOCODING,clear){
      

      $.ajax({url:'{{url('points') }}', data:GEOCODING,type:'POST',success(location) {

        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        if(location.length>0){
        if(clear==true){
         
          setMapOnAll(null)
        }}else{
          alert("No data Found");
        }

          for (i = 0; i < location.length; i++) { 

      var marker_icon = {	url: "{{ url('/').'/'.config('constants.upload_path.icons') }}"+location[i]['status']+'.png'};
          
              marker = new google.maps.Marker({
              position: new google.maps.LatLng(location[i]['latitude'], location[i]['longitude']),
              map: map,
              title:prettify(location[i]['status']),
              icon: marker_icon
            });
            markers.push(marker);
            lat_longs_map.push(marker.getPosition());

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                infowindow.setContent('<div id="content"><b><h7>'+location[i]['station_name']+'</b></h7>'+
      '<br>'+location[i]['address']+'<br></br><h7>Location : <b>'+location[i]['location_name']+'<b></h7>'+
      '</div>');
                infowindow.open(map, marker);
              }
            })(marker, i));
          } 
          fitMapToBounds_map();   
      }  
      });
    }
    function fitMapToBounds_map() {
				var bounds = new google.maps.LatLngBounds();
				if (lat_longs_map.length>0) {
					for (var i=0; i<lat_longs_map.length; i++) {
						bounds.extend(lat_longs_map[i]);
					}
					map.fitBounds(bounds);
				}
			}

       function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }
      var prettify = function(str){
         var temp = str.split('_'), i, pretty;

        for(i = 0; i < temp.length; i++){
          temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1);
        }

          pretty = temp.join(' ');

          return pretty;
        };
    </script>


@endsection