@extends('admin.layouts.container')

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

    <div class="border-item">
        <form class="form-row" method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
            @if($address ?? ''  && $address->id)
                @method('PUT')
            @endif
            @csrf
            <input type='hidden' name='user_id' value="{{$request->user_id}}">
            <div class="form-group col-lg-6">
                <label>{{ __('addresses.city_id') }} </label>
                <select id="city_id" class="form-control {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id">
                    <option value="">{{__('dashboard.select')}}</option>
                    @foreach($cities as $row)
                        <option {{ (isset($address) ? $address->city_id : null) == $row->id ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-lg-12">
                <label>{{ __('addresses.description') }} </label>
                <textarea type="text" class="form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" name="description" placeholder="{{ __('addresses.description') }}" >{{ old("description", $address->description ?? "") }}</textarea>
            </div>
            
            <div class="col-md-12">
                <input type="hidden" name="latitude" id="latitude" value="{{$address->latitude ?? ''}}">
                <input type="hidden" name="longitude" id="longitude" value="{{$address->longitude ?? ''}}">
    			<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')
    <!-- Editor JS orders -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    
<script type="text/javascript">

    window.onload = function() {
        var latlng = new google.maps.LatLng({!! $address ?? ''  && $address->id ? $address->latitude .', '.$address->longitude : '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');
            let lat = a.latLng.lat().toFixed(4) 
            let lan = a.latLng.lng().toFixed(4);
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latitude").val(function() {
                return  lat;
            });
            $("#longitude").val(function() {
                return  lan;
            });
        });
        
    };

</script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            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



