@extends('franchise.layouts.master')

@section('title', 'Dashboard')

@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="">PlugNgo</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-8">
						
						  
			        <div class="card-body">



					   
				 
						
						<div class="row">
						
						<div class="col-sm-8">
            {!! Form::open(['route' => 'franchisestations.store','role' => 'form', 'class'=>'employee-form','id' => 'employee-form','data-form-table' => 'employee_table']) !!}
				
              
            <div class="form-layout form-layout-4">

            <div class="row">
                  <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                  {!! Form::input('latitude','latitude','',['class'=>'form-control','id'=>'latclicked','placeholder'=>trans('Latitude')])!!}
                  </div>
                  <label class="col-sm-6 form-control-label">  {!! Form::input('longitude','longitude','',['class'=>'form-control','id'=>'longclicked','placeholder'=>trans('longitude')])!!}</label>
                 
                </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">
								    {!! Form::label('station_name','Station '.trans('messages.name'),['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','',['class'=>'form-control','placeholder'=>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','',['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',null,['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,'',['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'] , '',['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('Organisation'),['class' => 'col-sm-4 form-control-label'])!!}
                  <div class="col-sm-8 mg-t-10 mg-sm-t-0">
                    {!! Form::select('application',  [null => 'Select Organisation']+$packages, '',['id'=>'application','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                  </div>
 
                
              </div> -->
			  <div class="row mg-t-20">
                  @foreach($servicetax as $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="{{ old('tax[$tax->id]') }}"   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.save'),['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>
              
              <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>
						</div>
						</div >
					

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

      {!! Form::close() !!}

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

    
  
@endsection
 

@section('scripts')

<script>
		function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
        var geocoder;
        var map;
        var marker;

        function initialize() {
          var latitude = 17.426480; // YOUR LATITUDE VALUE
            var longitude = 78.450370; // YOUR LONGITUDE VALUE
                var map = new google.maps.Map(
                document.getElementById("map"), {
                    center: new google.maps.LatLng(latitude, longitude),
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

          if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
        map.setCenter(pos);
			  var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
				var marker = new google.maps.Marker({
								position: myLatlng,
								animation: google.maps.Animation.DROP,
                icon: im
					});
					marker.setMap(map);
		
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
               
 


                 // Create the search box and link it to the UI element.
        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());
        });
            google.maps.event.addListener(map, "click", function(e) {

                latLng = e.latLng;
                longval = e.latLng.lat();
                latval = e.latLng.lng();
            
                if (marker && marker.setMap) {
                    marker.setMap(null);

                }
                marker = new google.maps.Marker({
                    position: latLng,
                    map: map
                });
                
              document.getElementById('latclicked').value = longval.toFixed(6);
              document.getElementById('longclicked').value =  latval.toFixed(6);
               


            });
        }
        google.maps.event.addDomListener(window, "load", initialize);
    </script>


@endsection