@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{ $head }}</h3>
   
</div>


<div class="border-item">  
  
    <form class="form-row" enctype="multipart/form-data" onsubmit="saveForm(this)" method="post" action="{{ $action }}">
        @if($address ?? ''  && $address->id)
            @method('PUT')
        @endif
        @csrf
        @if(isset($id))
       <input type='hidden' name="user_id" value="{{$id}}">
       @endif
      
        <div class="form-group col-lg-6">
             <label>{{ meta('address', getCurrentLocale()) ?? __('web.address')}}</label>
            <input type="text"  class="form-control  {{ $errors->has('address') ? 'is-invalid' : '' }}" id="address"  name="address" placeholder="{{ meta('address', getCurrentLocale()) ?? __('web.address') }} " value='{{ old("address", $address->address ?? "") }}'/>
        </div>
              

        <div class="form-group col-lg-6">
            <label>{{ meta('city_id', getCurrentLocale()) ?? __('web.city_id')}}</label>
            <select onchange="citySelect(this)" id="city_id" class="form-control {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id" >
                <option  value="">{{__('dashboard.all')}}</option>
                @foreach($cities as $row)
                    <option {{old("city_id", $address->city_id ?? "") == $row->id ? 'selected': ''}} value="{{$row->id}}">{{ $row->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-lg-6 maincategory">
            <label>{{ meta('area_id', getCurrentLocale()) ?? __('web.area_id')}}</label>
            <select id="area_id" class="form-control {{ $errors->has('area_id') ? 'is-invalid' : '' }}" name="area_id" >
                <option  value="">{{__('dashboard.all')}}</option>
                @if($address ?? ''  && $address->id)
                    @foreach($areas as $row)
                        <option {{old("area_id", $address->area_id ?? "") == $row->id ? 'selected': ''}} value="{{$row->id}}">{{ $row->name }}</option>
                    @endforeach
                @endif
            </select>
        </div>   


        <div class="col-md-12">
            <input type="hidden" name="latlng" id="latlng" value="{{ $address ?? ''  && $address->id ? $address->latlng : '' }}">
			<div id="address-canvas">
				<div id="map" style=" height: 400px;border: 1px solid #000;"></div>
		     </div>
		</div>
        
     <div class="text-center mt-5 col-12">
            <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

@endsection
@section('inner_js')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>

<script type="text/javascript">
    var latlng = new google.maps.LatLng({!! $address ?? ''  && $address->id ? $address->latlng : '21.4989, 39.2509' !!});
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this property',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(a) {
            console.log(a);
            var div = document.createElement('div');
            div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latlng").val(function() {
                return  div.innerHTML;
            });
    });
</script>
    <!-- Editor JS files -->
{{--    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>--}}
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
        
    <script src="{{ asset('/assets/admin/js/custom/admin/address.js') }}"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            url_city = "{{route('admin.fetch.city')}}",
            currentLanguage = "{{getCurrentLocale()}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/articles.js') }}"></script>
@endsection