@extends('layouts.app')
@push('css_lib')
  <!-- iCheck -->
  <link rel="stylesheet" href="{{asset('plugins/iCheck/flat/blue.css')}}">
  <!-- select2 -->
  <link rel="stylesheet" href="{{asset('plugins/select2/select2.min.css')}}">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="{{asset('plugins/summernote/summernote-bs4.css')}}">
  {{--dropzone--}}
  <link rel="stylesheet" href="{{asset('plugins/dropzone/bootstrap.min.css')}}">
  <style>
     #lsearchcity{
        left:unset !important;
    }
        .gmnoprint .gm-style-mtc{
        top:35px !important;
    }
    button.gm-control-active.gm-fullscreen-control{
        top:35px !important;
    }
</style>
@endpush
@section('title',trans('lang.locationdetails_table'))
@section('content')
  @include('flash::message')
  @include('adminlte-templates::common.errors')
  <div class="clearfix"></div>
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
        <li class="nav-item">
          <a class="nav-link" href="{!! route('location_details.index') !!}"><i class="fa fa-list mr-2"></i>{{trans('lang.locationdetails_table')}}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="{!! url()->current() !!}"><i class="fa fa-plus mr-2"></i>{{trans('lang.locationdetails_table')}}</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      {!! Form::open(['route' => 'location_details.store']) !!}
      <div class="row">
<div style="flex: 100%;max-width: 100%;padding: 0 4px;" class="row">
    <!-- Name Field -->
    <div class="form-group row col-6">
        {!! Form::label('country', 'Country Name', ['class' => 'col-5 control-label text-right']) !!}
            <div class="col-7">
            <select class="form-control" required="true" onchange="storeList(this.value , '');" name="country_code" id="country">
            @if(count($country)>0)
            @foreach ($country as $key=>$conty)
            <option value="{{$conty['country_code']}}">{{$conty['country_name']}}</option>  
            @endforeach
            @endif
            </select>   
            </div>
    </div>
    <div class="form-group row col-6">
    {!! Form::label('store_id', trans("lang.store_name"), ['class' => 'col-5 control-label text-right']) !!}
          <div class="col-7">
         <select class="form-control" required="true"  name="store_id" id="store_id">
            <option value="">Please Select Store</option>
            </select>  
         </div>
    </div>
    <div class="form-group row col-6">
        {!! Form::label('locations_name', trans("lang.locations_name"), ['class' => 'col-5 control-label text-right']) !!}
            <div class="col-7">
                                      <select required="true" class="form-control" name="location_id" id="location_id">
                                          @if(count($locations)>0)
                    @foreach ($locations as $key=>$loc)
                                        <option value="{{$loc->id}}">{{$loc->name}}</option>  
                                        @endforeach
                                        @endif
                                        </select>   
                   
                                          </div>
    </div>
     <div class="form-group row col-6">
        {!! Form::label('delivery_charge','Delivery Charge', ['class' => 'col-5 control-label text-right']) !!}
        <div class="col-7">
            {!! Form::number('delivery_charge','',  ['id'=>'delivery_charge','class' => 'form-control','placeholder'=>'Delivery Charge','required'=>'true']) !!}
 </div>
 </div>
    <div class="form-group row col-6">
        {!! Form::label('name', trans("lang.areaname"), ['class' => 'col-5 control-label text-right']) !!}
        <div class="col-7">
            {!! Form::text('area_name', null,  ['id'=>'lsearchcity','class' => 'form-control','placeholder'=>  trans("lang.areaname_placeholder"),'required'=>'true']) !!}
            <div class="mappadding">
             <div class="map" id="mapl" style="width: 100%; height: 300px;"></div>
 <div class="form_area">
     <!--<input type="hidden" name="lat" id="elat" value="25.4002503">-->
     <!--<input type="hidden" name="lng" id="elng" value="55.4335149">-->
 </div>
 </div>
            <div class="form-text text-muted">
                {{ trans("lang.areaname_help") }}
            </div>
        </div>
    </div>
    <div class="form-group row col-6">
        {!! Form::label('name', trans("lang.latitude"), ['class' => 'col-5 control-label text-right']) !!}
        <div class="col-7">
            {!! Form::text('latitude', null,  ['id'=>'llat','class' => 'form-control','placeholder'=>  trans("lang.latitude_placeholder")]) !!}
            <div class="form-text text-muted">
                {{ trans("lang.latitude_help") }}
            </div>
        </div>
    </div>
        <div class="form-group row col-6">
        {!! Form::label('name', trans("lang.longitude"), ['class' => 'col-5 control-label text-right']) !!}
        <div class="col-7">
            {!! Form::text('longitude', null,  ['id'=>'llng','class' => 'form-control','placeholder'=>  trans("lang.longitude_placeholder")]) !!}
            <div class="form-text text-muted">
                {{ trans("lang.longitude_help") }}
            </div>
        </div>
    </div>
  <div class="form-group row col-6">
        {!! Form::label('status', trans("lang.status"), ['class' => 'col-5 control-label text-right']) !!}
        <div class="col-7">
            <select class="form-control" required="true" name="status" id="status">
            <option value="1">Active</option>  
            <option value="0">InActive</option> 
            </select>
            <div class="form-text text-muted">
                {{ trans("lang.status") }}
            </div>
        </div>
    </div>
</div>
<!-- Submit Field -->
<div class="form-group col-12 text-right">
    <button type="submit" class="btn btn-{{setting('theme_color')}}"><i class="fa fa-save"></i> {{trans('lang.save')}} {{trans('lang.locations')}}</button>
    <a href="{!! route('location_details.index') !!}" class="btn btn-default"><i class="fa fa-undo"></i> {{trans('lang.cancel')}}</a>
</div>

      </div>
      {!! Form::close() !!}
      <div class="clearfix"></div>
    </div>
  </div>
</div>
@include('layouts.media_modal',['collection'=>null])
@endsection
@push('scripts_lib')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD3aB7FcaMNt6sx_-P6DqK32vYgO6QA4n4&sensor=false&libraries=places"></script>
<script>
function initialize() {
   var latlng = new google.maps.LatLng(31.9904225,35.8642605);
    var map = new google.maps.Map(document.getElementById('mapl'), {
      center: latlng,
      zoom: 15
    });
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
   });
    var input = document.getElementById('lsearchcity');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var geocoder = new google.maps.Geocoder();
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();   
    autocomplete.addListener('place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
  
        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }
        
        var address = place.address_components;
        console.log(address);
        var city, state, area;
address.forEach(function(component) {
  var types = component.types;
  if (types.indexOf('locality') > -1) {
    city = component.long_name;
  }

//   if (types.indexOf('administrative_area_level_1') > -1) {
//     state = component.short_name;
//   }

  if (types.indexOf('sublocality_level_1') > -1) {
    area = component.long_name;
  }
  if (types.indexOf('neighborhood') > -1) {
    area = component.long_name;
  }
});

        marker.setPosition(place.geometry.location);
        marker.setVisible(true);          
    
        bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng(),city,area);
        infowindow.setContent(place.formatted_address);
        infowindow.open(map, marker);
       
    });
    // this function will work on marker move event into map 
    google.maps.event.addListener(marker, 'dragend', function() {
        geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[0]) {        
               var address = results[0].address_components;
        var city, state, area;
address.forEach(function(component) {
  var types = component.types;
  if (types.indexOf('locality') > -1) {
    city = component.long_name;
  }

//   if (types.indexOf('administrative_area_level_1') > -1) {
//     state = component.short_name;
//   }

  if (types.indexOf('sublocality_level_1') > -1) {
    area = component.long_name;
  }
  if (types.indexOf('neighborhood') > -1) {
    area = component.long_name;
  }
});

              bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng(),city,area);
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
          }
        }
        });
    });
}
function bindDataToForm(address,lat,lng,city,area){
   document.getElementById('lsearchcity').value = address;
   document.getElementById('llat').value = lat;
   document.getElementById('llng').value = lng;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- iCheck -->
<script src="{{asset('plugins/iCheck/icheck.min.js')}}"></script>
<!-- select2 -->
<script src="{{asset('plugins/select2/select2.min.js')}}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{asset('plugins/summernote/summernote-bs4.min.js')}}"></script>
{{--dropzone--}}
<script src="{{asset('plugins/dropzone/dropzone.js')}}"></script>
<script type="text/javascript">
    Dropzone.autoDiscover = false;
    var dropzoneFields = [];
// Store value get    
$(document).ready(function(){
    var country = $('#country').val();
    storeList(country, '', '');
});
</script>
@endpush