
<div class="content text-center mt-4">
    <h4 class="title text-dark mb-5"><b> {{$title}} </b></h4>
    <form method="post" action="{{$action}}" onsubmit="formAction(this)">
        @if(isset($address))
            @method('PUT')
        @endif
        @CSRF
        <div class="row">

            <div class="col-lg-6">
                <div class="mb-4">
                    <label class="inputLabel"> {{__('web.country_id')}}  </label>
                    <select name="country_id" onchange="fetchCities(this)" class="form-control form-select">
                        <option value="">{{__('web.select')}}</option>
                        @foreach($countries as $row)
                            <option {{isset($address) ?  ($address->country_id == $row->id ? 'selected': '') : ''}} value="{{$row->id}}">{{$row->title}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="mb-4">
                    <label class="inputLabel"> {{__('web.city_id')}}  </label>
                    <select name="city_id" id="city_id" class="form-control form-select">
                        <option value="">{{__('web.select')}}</option>
                        @foreach($cities as $row)
                            <option {{isset($address) ?  ($address->city_id == $row->id ? 'selected': '') : ''}} value="{{$row->id}}">{{$row->title}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="mb-4">
                    <label class="inputLabel">{{__('web.address_details')}}</label>
                    <input type="text" name="address" value="{{$address->address ?? ''}}" class="form-control" placeholder="">
                </div>
            </div>
            <div class="col-lg-12">
                    <input type="hidden" name="latitude" id="latitude" value="{{$address->latitude ?? ''}}">
                    <input type="hidden" name="longitude" id="longitude" value="{{$address->longitude ?? ''}}">
                    <div id="map" style="width: 100%;height: 20pc"></div>
            </div>
        </div>

        <div class="d-flex justify-content-center align-items-center justify-content-center mt-5 ">
            <button type="button" class="butn btn-secondary  mx-1" data-bs-dismiss="modal">{{__('web.close')}}</button>
            <button type="submit" class="butn primary_butn mx-1">{{__('web.send')}}</button>
        </div>
    </form>
</div>



<script type="text/javascript">

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

</script>
