@extends('layouts.master')

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

@section('links')
<style>          
          #map { 
            height: 300px;    
            width: 500px;            
          }     
          #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }     
        </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.edit') !!}</strong> {!! trans('messages.stations') !!}
				
					</h2>
    </div>
		@if(Entrust::can('manage_stations'))
    <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-8">
						
						  
			        <div class="card-body">



					   
				 
						
						<div class="row">
						
						<div class="col-sm-8">
            {!! Form::model($station,['method' => 'PATCH','route' => ['stations.update',$station] ,'class' => 'email-stations-form','id' => 'email-stations-form-edit','data-form-table' => 'stations_table','autocomplete'=>"off"]) !!}	
                <div class="form-layout form-layout-4">

                <div class="row">
                  <label class="col-sm-4 form-control-label">latitude: <span class="tx-danger">*</span></label>
                  <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                  {!! Form::input('latitude','latitude',isset($station->latitude) ? $station->latitude : '',['class'=>'form-control','id'=>'latclicked','placeholder'=>trans('Latitude')])!!}
                  </div>
                </div><!-- row -->
                <div class="row mg-t-20">

						
						<div id="latmoved"  style="display:none;"></div>
						<div id="longmoved" style="display:none;"></div>
                </div>
                
                <div class="row mg-t-20">
                  <label class="col-sm-4 form-control-label">longitude: <span class="tx-danger">*</span></label>
                  <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                  {!! Form::input('longitude','longitude',isset($station->longitude) ? $station->longitude : '',['class'=>'form-control','id'=>'longclicked','placeholder'=>trans('longitude')])!!}
                 
                  </div>
                </div>

                <div class="row mg-t-20">
								    {!! Form::label('station_name','Station ',['class' => 'col-sm-4 form-control-label'])!!}
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    {!! Form::input('station_name','station_name',isset($station->station_name) ? $station->station_name : '',['class'=>'form-control','placeholder'=>'Station '.trans('messages.name')])!!}
								</div>
                </div>
                <div class="row mg-t-20">
								    {!! Form::label('location_name','Location ',['class' => 'col-sm-4 form-control-label'])!!}
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    {!! Form::input('location_name','location_name',isset($station->location_name) ? $station->location_name : '',['class'=>'form-control','placeholder'=>'Location '.trans('messages.name')])!!}
								</div>
                </div>

                <div class="row mg-t-20">
                    <label class="col-sm-4 form-control-label">Address</label>
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                        {!! Form::textarea('address',isset($station->address) ? $station->address : '',['class'=>'form-control', 'rows' => 2, 'cols' => 40]) !!}
                   
                    </div>
                  </div>
                <div class="row mg-t-20">
                {!! Form::label('state_id',trans('State'),['class' => 'col-sm-4 form-control-label'])!!}
                <div class="col-sm-8 mg-t-10 mg-sm-t-0">
										{!! Form::select('state_id',  [null => 'Select State'] +$state,$station->state_id,['class'=>'form-control select2-show-search input-xlarge select2me','data-placeholder'=>'Choose One'])!!}
									  </div>
                    </div>
									  
										<div class="row mg-t-20">
                    {!! Form::label('city_id',trans('City'),['class' => 'col-sm-4 form-control-label'])!!}
                    <div class="col-sm-8 mg-t-10 mg-sm-t-0">
										{!! Form::select('city_id',  [null => 'Select City']+$cities , $station->city_id,['class'=>'form-control select2-show-search input-xlarge select2me','data-placeholder'=>'Choose One'])!!}
                    </div>
                   
									
                </div>
                <div class="row mg-t-20">
                  {!! Form::label('application',trans('organization'),['class' => 'col-sm-4 form-control-label'])!!}
                  <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    {!! Form::select('application',  [null => 'Select packages']+$packages, $station->application,['id'=>'application','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                  </div>
                </div>
                <div class="row mg-t-20">
                  {!! Form::label('franchise_id',trans('Franchise'),['class' => 'col-sm-4 form-control-label'])!!}
                  <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    {!! Form::select('franchise_id',  [null => 'Select Franchise']+$franchise_list, $station->created_by_id,['id'=>'franchise','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                  </div>
                </div>

                <div class="row mg-t-20">
                   @php  $taxes=json_decode($station->service_tax) @endphp

                  
             
            @foreach($servicetax as $key=> $tax)

				
				    {!! Form::label('tax',$tax->name,['class' => 'col-sm-2 form-control-label'])!!}
				
                  <div class="col-sm-4 mg-t-10 mg-sm-t-0">
            <input type='text' name="tax[{{$tax->id}}]"  value="@if(isset($taxes[$key]->value))@if($taxes[$key]->value){{ $taxes[$key]->value }} @endif  @endif " onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
                     event.charCode == 46 || event.charCode == 0 "  min="0" max="100" class='form-control' placeholder="{{$tax->name}}">
                  </div>
				  @endforeach
 
                
              </div>
             
                <div class="form-layout-footer mg-t-30">
                {!! Form::submit(isset($buttonText) ? $buttonText : trans('messages.update'),['class' => 'btn btn-info']) !!}
                 
                </div><!-- form-layout-footer -->
              </div><!-- form-layout -->
                        
                    
					
						</div>
						<div class="col-sm-4">
              <input type="text" id="pac-input" class="controls form-control" placeholder="Search  Location" style="border-radius:25px;height: 35px; width: 290px;" >  
							<div id="map"></div>
              <span class="tx-danger">Double Click On The map To get latitude And longitude</span>
			  
			
		 <div class="row mg-t-20">
				{!! Form::label('opening_time','Opening Time ',['class' => 'col-sm-4 form-control-label'])!!}
            <div class="col-sm-8 mg-t-10 mg-sm-t-0">	
				<div class="wd-150 mg-b-30">
					<div class="input-group">
					  <span class="input-group-addon"><i class="fa fa-clock-o tx-16 lh-0 op-6"></i></span>
					   {!! Form::input('opening_time','opening_time',isset($station->opening_time) ? $station->opening_time : '',['id'=>'opening_time','style'=>'width: 104%;','class'=>'form-control','placeholder'=>'Opening Time '])!!}
					</div>
				</div>
			</div>
          </div>
		 <div class="row mg-t-20">
				 {!! Form::label('closing_time','Closing Time ',['class' => 'col-sm-4 form-control-label'])!!}
            <div class="col-sm-8 mg-t-10 mg-sm-t-0">	
				<div class="wd-150 mg-b-30">
					<div class="input-group">
					  <span class="input-group-addon"><i class="fa fa-clock-o tx-16 lh-0 op-6"></i></span>
					  {!! Form::input('closing_time','closing_time',isset($station->closing_time) ? $station->closing_time : '',['id'=>'closing_time','style'=>'width: 104%;','class'=>'form-control','placeholder'=>'Closing Time '])!!}
					</div>
				</div>
			</div>
          </div>
				
				<!-- wd-150 -->
						</div>
						
						
				
				
				{!! Form::close() !!}
						</div >
					

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

        

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

@section('scripts')

 
<script type="text/javascript">
    //     var map;
	initMap();
        
        function initMap() {                            
            var latitude =  {{ $station->latitude }}; // YOUR LATITUDE VALUE
            var longitude = {{ $station->longitude }}; // YOUR LONGITUDE VALUE
            
            var myLatLng = {lat: latitude, lng: longitude};
            
            map = new google.maps.Map(document.getElementById('map'), {
              center: myLatLng,
              zoom: 14,
              title: '{{$station->station_name}}',
              disableDoubleClickZoom: true, // disable the default map zoom on double click
            });


        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });
        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });

            
            // Update lat/long value of div when anywhere in the map is clicked    
            google.maps.event.addListener(map,'click',function(event) {    
                var lat     = event.latLng.lat();
                var long    = event.latLng.lng();          
                document.getElementById('latclicked').value = lat.toFixed(6);
                document.getElementById('longclicked').value =  long.toFixed(6);
            });
            
            // Update lat/long value of div when you move the mouse over the map
            google.maps.event.addListener(map,'mousemove',function(event) {
                document.getElementById('latmoved').innerHTML = event.latLng.lat();
                document.getElementById('longmoved').innerHTML = event.latLng.lng();
            });
                    
            var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon:"{{ $mapicon }}",
              // title: '{{$station->status}}    {{$station->station_name}}',
            
              draggable: true,
              animation: google.maps.Animation.DROP,
           
            }); 

 
            var contentString = '<div id="content">'+
           '<div class="d-flex align-items-center justify-content-start">'+
           '<span class="label label-{{ $status }}"> {{ App\Classes\Helper::toWord($station->status) }}</span>'+
           '</div>'+
           '<br><h5>{{$station->station_name}}</h5>'
           '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          maxWidth: 200
        });

            // Update lat/long value of div when the marker is clicked
            marker.addListener('click', function(event) {              
              document.getElementById('latclicked').innerHTML = event.latLng.lat();
              document.getElementById('longclicked').innerHTML =  event.latLng.lng();
              infowindow.open(map, marker);
            });

              // Create new marker on single click event on the map
          //  google.maps.event.addListener(map,'click',function(event) {
           

          //       var markers = new google.maps.Marker({
          //         position: event.latLng, 
          //         map: map,
          //         icon:"{{ $mapicon }}",
          //         title: event.latLng.lat()+', '+event.latLng.lng()
          //       });                
          //   });
          

        
        infoWindow = new google.maps.InfoWindow;

      }
        
        </script>




@endsection