@extends('Layouts.frontLayout',['classBody'=>"page-template-default page  logged-in setinco page-wrapper-account page-wrapper-page  container-max-width show-bottom-nav"])
@section('title')
{{__('Insert Address')}}
@endsection
@section('css')
    <link rel = "stylesheet" href = "{{ asset('Front/assets/css/map/leaflet.css') }}"/>
    <link rel = "stylesheet" href = "{{ asset('Front/assets/css/map/leaflet-search.css') }}"/>
    <link rel = 'stylesheet' href = "{{ asset('Front/assets/css/map/leaflet.fullscreen.css') }}"  />
    <link rel = "stylesheet" href = "{{ asset('Front/assets/css/map/leaflet-routing-machine.css') }}" />
@endsection
@section('content')
    <main id="main">
      <div class="container container-single-post">
        <nav class="breadcrumb">
          <nav class="page-wrapper-breadcrumb breadcrumb">
          <a href="/">{{__('Home')}}</a>&nbsp;&#47;&nbsp; <a href="#">{{__('Dashboard')}}</a>{{__('Address')}} 
          </nav>
        </nav>
        <div class="row">
          <div class="col-12  post-main-content">
            <article class="post-single post-12 page type-page status-publish hentry">
              <header class="post-header">
                <h1 class="post-title">{{__('Insert Address')}} </h1>
                </h1>
              </header>
              <div class="post-content">
                <div class="page-wrapper">
                  <div class="my-account-content">
				  @include('Front.Account.menu')
                    <div class="page-wrapper-panel-content">
                      <div class="page-wrapper-notices-wrapper"></div>
                      <form action="{{route('Front.address.store')}}"    method="post" >
					   @csrf
                        <h3>
                          <div class="content-title">
                            <span>{{__('Insert Address')}}</span>
                          </div>
                        </h3>
                        <div class="page-wrapper-address-fields">
                          <div class="page-wrapper-address-fields__field-wrapper">
 
					      <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('title_address') ? ' is-invalid' : '' }} ">
                            <label for="title_address">{{__('Title')}}<span class="required">*</span>
                            </label>
                           <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="title_address" id="title_address" autocomplete="title_address"  value="{{ old('title_address')}}"   />
							  @if ($errors->has('title_address'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('title_address') }}</strong>
                                 </span>
                               @endif
                          </p>
						  
                            <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('receiver') ? ' is-invalid' : '' }} ">
                            <label for="receiver">{{__('Receiver')}}<span class="required">*</span>
                            </label>
                           <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="receiver" id="receiver" autocomplete="receiver" value="{{ old('receiver') }}"  />
							  @if ($errors->has('receiver'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('receiver') }}</strong>
                                 </span>
                               @endif
                          </p>
	 
 						      <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('phone') ? ' is-invalid' : '' }} ">
                            <label for="phone">{{__('Phone')}}<span class="required">*</span>
                            </label>
                           <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="phone" id="phone" autocomplete="phone" value="{{ old('phone') }}"  />
							  @if ($errors->has('phone'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('phone') }}</strong>
                                 </span>
                               @endif
                          </p>
						    <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('mobile') ? ' is-invalid' : '' }} ">
                            <label for="mobile">{{__('Mobile')}}<span class="required">*</span>
                            </label>
                           <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="mobile" id="mobile" autocomplete="mobile" value="{{ old('mobile') }}"  />
							  @if ($errors->has('mobile'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('mobile') }}</strong>
                                 </span>
                               @endif
                          </p>
						   @if(isset($settings['cofarsi']) and $settings['cofarsi']==0)
						      <p class="form-row form-row-wide address-field validate-required validate-state {{ $errors->has('lang') ? ' is-invalid' : '' }}"  id="billing_state_field" data-priority="50">
                              <label for="lang" class="">{{__('Language')}}&nbsp; <abbr class="required" title="{{__('Required')}}">*</abbr>
                              </label>
                              <span class="page-wrapper-input-wrapper">
                                <select name="lang" id="lang" class="lang select_2" autocomplete="lang" data-placeholder="{{__('Select')}}" data-input-classes="" data-label="{{__('Language')}}"  onchange="changeLanguage(this.value)">
								 <option value="">{{__('Select')}}</option>
                                    @foreach($data['Languages'] as $value)
                                     <option value="{{$value->slug}}" @if(old('lang') == $value->slug) selected @endif >{{$value->title}}</option>
                                     @endforeach
                                </select>
								  @if ($errors->has('lang'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('lang') }}</strong>
                                 </span>
                               @endif
                              </span>
                            </p>
							@endif
							
 						      <p class="form-row form-row-wide address-field validate-required validate-state {{ $errors->has('city_id') ? ' is-invalid' : '' }}"  id="billing_state_field" data-priority="50">
                              <label for="city_id" class="">{{__('City')}}&nbsp; <abbr class="required" title="{{__('Required')}}">*</abbr>
                              </label>
                              <span class="page-wrapper-input-wrapper">
                                <select name="city_id" id="city_id" class="city_id select_2 " autocomplete="city_id" data-placeholder="{{__('Select')}}" data-input-classes="" data-label="{{__('City')}}">
								 <option value="">{{__('Select')}}</option>
                                      @foreach($data['city'] as $item)
                                       <option value="{{$item->id}}">{{$item->province}} - {{$item->name}}</option>
                                       @endforeach
                                </select>
								  @if ($errors->has('city_id'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('city_id') }}</strong>
                                 </span>
                               @endif
                              </span>
                            </p>
							
   
 
 						    <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('postal_code') ? ' is-invalid' : '' }} ">
                            <label for="postal_code">{{__('Zip Code')}}<span class="required">*</span>
                            </label>
                           <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="postal_code" id="postal_code" autocomplete="postal_code" value="{{ old('postal_code') }}"  />
							  @if ($errors->has('postal_code'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('postal_code') }}</strong>
                                 </span>
                               @endif
                          </p>
						   <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide {{ $errors->has('address') ? ' is-invalid' : '' }} ">
                            <label for="address">{{__('Address')}}<span class="required">*</span>
                            </label>
                           <input type="text" class="page-wrapper-Input page-wrapper-Input--text input-text" name="address" id="address" autocomplete="address" value="{{ old('address') }}"  />
							  @if ($errors->has('address'))
                                    <span class="invalid-feedback" role="alert">
                                       <strong>{{ $errors->first('address') }}</strong>
                                 </span>
                               @endif
                          </p>
						  
 						   <p class="page-wrapper-form-row page-wrapper-form-row--wide form-row form-row-wide">
                             <div id="search_map"></div>
                              <div id="map" style="width: 100%;height: 330px;border-bottom-right-radius:5px;border-bottom-left-radius:5px " ></div>
                              <input type="text" name="lat" id="lat" readonly style="font-size: 11px;border:none;display:none" >
                              <input type="text" name="lng" id="lng" readonly style="font-size: 11px;border:none;display:none" >
                          </p>
 
                          </div>
                          <p>
                            <button type="submit" class="button lara-element-button" name="save_address" value="{{__('Save')}}">{{__('Save')}}</button>
 
                          </p>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </main>
	@endsection
	@section('script')
	 	<script src="{{ asset('Front/assets/js/map/leaflet.js ')}}"></script>
    <script src="{{ asset('Front/assets/js/map/leaflet-search.js ')}}"></script>
    <script src="{{ asset('Front/assets/js/map/Leaflet.fullscreen.min.js ')}}"></script>
	 <script>
	 
	 let marker_add=0;
        var old_lat='';
        var old_lng='';
	 		var latitud = {!!(isset($settings['lat_'.$lang]))?$settings['lat_'.$lang]:32.33529947261555 !!};
        var langtitud = {!!(isset($settings['lang_'.$lang]))?$settings['lang_'.$lang]:50.86120605468749 !!};
        // Creating map options
        var mapOptions = {
            center: [latitud, langtitud],
            zoom: 13,
            fullscreenControl: true,
        };
      
        var map = new L.map('map', mapOptions); // Creating a map object
        var layer = new L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
            maxZoom: 20,
            subdomains:['mt0','mt1','mt2','mt3']
        }); // Creating a Layer object
        map.addLayer(layer); // Adding layer to the map
		 map.addControl( new L.Control.Search({
            url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
            jsonpParam: 'json_callback',
            propertyName: 'display_name',
            propertyLoc: ['lat','lon'],
			 center: [43.00, -79.00],
            marker: L.circleMarker([0,0],{radius:30}),
            autoCollapse: false,
            autoType: false,
            minLength: 2,
            textPlaceholder:"{!!__('Search')!!}...",
            container:"search_map",
            collapsed:false,
            textErr:"{!!__('The Desired Location Was Not Found')!!}",
            autoResize:false,
            firstTipSubmit:true,
            zoom:15,
        }) );
        map.on('click', function(e) {
            let $lat = e.latlng.lat;
            let $lng = e.latlng.lng;
            mapAction($lat,$lng);
        });
        function mapAction($lat,$lng){
            if(marker_add == 0){
                marker1=new L.Marker([$lat, $lng], {
                    draggable: true,
                    icon: new L.DivIcon({
                        iconAnchor: [-7, 55],
                        elevation: 0,
						 center: [43.00, -79.00],
                        title: "مکان",
                        className: 'my-div-icon',
                        html: '<div><img class="my-div-image" src="/File/default/marker-icon.png" style="width:50px"/>'+
                            '<span class="my-div-span busy"></span></div>',
                    })
                });
                marker1.addTo(map);
                marker1.on('dragend', function() {
                    var coord = marker1.getLatLng();
                    var lat = coord.lat;
                    var lng = coord.lng;
                    $("#lat").val(lat);
                    $("#lng").val( lng);
                });
                marker_add=1;
            }
            $("#lat").val($lat);
            $("#lng").val($lng);
            var newLatLng = new L.LatLng($lat,$lng);
            marker1.setLatLng(newLatLng);
            map.setView(new L.LatLng($lat,$lng)); /*انتقال مختصات به مرکز نقشه*/
        }
        mapAction(latitud,langtitud);
		
		    $('form').on('keyup keypress', function (e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) {
            e.preventDefault();
            return false;
        }
    });
	                function changeLanguage (selectedLang) {
					 
                    $.ajax({
                    url: "{{route('Front.address.language')}}",
                    type: "POST",
                    data: {
                        _token : "{{csrf_token()}}",
                        lang : selectedLang
                    },
                    success:function (data) {
                        $('#city_id').html('');
                        $.each(data,function(index,value){
                            $('#city_id').append('<option value="'+value.id+'">'+value.province+'-'+value.name+'</option>')
                        });
                          $('#city_id').trigger('change');
                    }
                });
    }
    </script>
@endsection