@extends('layouts.'.$namespaceName.'.master')
@section('title')

@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')
        <div class="row">
            <div class="col-xl-12 mx-auto">
                <h6 class="mb-3 text-uppercase main_title_page">{{$title}}</h6>
                <div class="card main_card">
                     <div class="border p-3 rounded">
                    <div class="card-body">
                        <form action="{{route('updateEventLocation',$data->id)}}" method="post" autocomplete="off"
                                  enctype="multipart/form-data">
                                @csrf
                        <div class="form-group">
                            <label for="address_address">{{trans($namespaceName.'/'.$modelName.'.'.'location')}}</label>
                            <input type="text" id="address-input" name="location" class="form-control map-input" value="{{ $data->location }}">
                            <input type="hidden" name="lat" id="address-latitude" value="{{ $data->map_location['lat'] }}" />
                            <input type="hidden" name="lng" id="address-longitude" value="{{ $data->map_location['lng'] }}" />
                        </div>
                        <div class="row">
                        <div class="col-4 mb-3">
                            <label for="country">{{trans($namespaceName.'/'.$modelName.'.'.'country')}}</label>
                            {{-- <input class="form-control" name="country" id="country" value="Egypt" /> --}}
                            <select required data-placeholder="Select Country" name="country" id="country" class="form-control">
                                <option  value="{{ $country->key }}"  selected>{{ $country->display_value }}</option>
                                @foreach(getLookupData('country') as $country)
                                    <option value="{{ $country->key }}">
                                        {{ $country->display_value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class=" col-4 mb-3 {{ $errors->has('city') ? 'has-error' : '' }}">
                            <label for="city">{{trans($namespaceName.'/'.$modelName.'.'.'city')}}</label>
                            <select required data-placeholder="Select Country" name="city" id="city" class="form-control">
                                <option value="{{ $city->key }}"  selected>{{ $city->display_value }}</option>
                            </select>
                            @if($errors->has('city'))
                                <p class="help-block">
                                    {{ $errors->first('city') }}
                                </p>
                            @endif
                        </div>
                        <div class="col-4 mb-3">
                            <label for="timezone">{{trans($namespaceName.'/'.$modelName.'.'.'timezone')}}</label>
                            {{-- <input class="form-control" name="timezone" id="timezone" value="Cairo" /> --}}
                            <select class="form-control" name="timezone" id="timezone">
                                <option value="{{ $timezone->value }}" selected >{{ $timezone->label }}</option>
                                @foreach (getLookupData('timezone') as $timezone )
                                    <option value="{{ $timezone->value }}">{{ $timezone->label }}</option>
                                @endforeach
                             </select>
                        </div>
                        </div>
                        <div id="address-map-container"class="my-3 card" style="width:100%;height:400px; ">
                            @if(configuration_hlp('map','activate_map'))
                                <div style="width: 100%; height: 100%" id="address-map"></div>
                            @else
                                <img src="{{asset('default/disabled_map3.jpg')}}" class="img-responsive" style="height: 100%;width: 100%">
                            @endif
                        </div>
                        <div class="row">
                            <div class="col">
                                <button class="btn primary" type="submit">{{trans($namespaceName.'/app.update')}}</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
{{-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAel-uW7LScqsmwp7OOw3Pu0UyDILRcNz4&region=EG&callback=initMap"></script> --}}

<script>
    {{--let map_key='{{config("customapp.map_key")}}';--}}
    let map_key='{{configuration_hlp('map','geo_map_key')}}';
    function load_js()
        {

           // console.log(lang);
            var lang="{{ App()->getLocale() }}";
            var head= document.getElementsByTagName('head')[0];
            var script= document.createElement('script');
            script.defer=true;
            script.src= "https://maps.googleapis.com/maps/api/js?key="+map_key+"&language="+lang+"&callback=initMap&libraries=places&v=weekly";
            head.appendChild(script);
        }
        load_js();
        let map;

            function initMap() {

                $('form').on('keyup keypress', function(e) {
                    var keyCode = e.keyCode || e.which;
                    if (keyCode === 13) {
                        e.preventDefault();
                        return false;
                    }
                });
                const locationInputs = document.getElementsByClassName("map-input");

                const autocompletes = [];
                const geocoder = new google.maps.Geocoder;
                for (let i = 0; i < locationInputs.length; i++) {

                    const input = locationInputs[i];
                    const fieldKey = input.id.replace("-input", "");
                    const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';

                    const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || 30.064742;
                    const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 31.249509;

                    const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
                        center: {lat: latitude, lng: longitude},
                        zoom: 13
                    });
                    const marker = new google.maps.Marker({
                        map: map,
                        position: {lat: latitude, lng: longitude},
                        draggable:true
                    });

                    marker.setVisible(isEdit);

                    const autocomplete = new google.maps.places.Autocomplete(input);
                    autocomplete.key = fieldKey;
                    autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});
                }

                for (let i = 0; i < autocompletes.length; i++) {
                    const input = autocompletes[i].input;
                    const autocomplete = autocompletes[i].autocomplete;
                    const map = autocompletes[i].map;
                    const marker = autocompletes[i].marker;

                    google.maps.event.addListener(autocomplete, 'place_changed', function () {
                        marker.setVisible(false);
                        const place = autocomplete.getPlace();

                        geocoder.geocode({'placeId': place.place_id}, function (results, status) {
                            if (status === google.maps.GeocoderStatus.OK) {
                                const lat = results[0].geometry.location.lat();
                                const lng = results[0].geometry.location.lng();
                                setLocationCoordinates(autocomplete.key, lat, lng);
                            }
                        });

                        if (!place.geometry) {
                            window.alert("No details available for input: '" + place.name + "'");
                            input.value = "";
                            return;
                        }

                        if (place.geometry.viewport) {
                            map.fitBounds(place.geometry.viewport);
                        } else {
                            map.setCenter(place.geometry.location);
                            map.setZoom(17);
                        }
                        marker.setPosition(place.geometry.location);
                        marker.setVisible(true);

                    });

                    google.maps.event.addListener(marker,"position_changed",
                    function(){
                    let lat=marker.position.lat();
                    let lng=marker.position.lng();
                    // let address=marker.position.reigon();
                    $('#address-latitude').val(lat);
                    $('#address-longitude').val(lng);

                    var latlng = new google.maps.LatLng(lat, lng);
                    // This is making the Geocode request
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ 'latLng': latlng },  (results, status) =>{
                        // This is checking to see if the Geoeode Status is OK before proceeding
                        if (status == google.maps.GeocoderStatus.OK) {
                            console.log(results[0]);
                            var city=results[0].address_components[3]['long_name'];
                            var country=results[0].address_components[4]['long_name'];
                            var address = (results[0].formatted_address);
                            console.log("addreess" + address);
                            console.log("Cityy" + city);
                            console.log("Countryy" + country);
                            $('#address-input').val(address);
                        }
                    });

                    });
                }

            }

            </script>
<script type="text/javascript">
            $("#country").change(function(){
                console.log($(this).val())
                $.ajax({
                    url: "{{ route('get_city_by_country') }}?country_key="+ $(this).val(),
                    method: 'GET',
                    success: function(data) {
                        $('#city').html(data.html);
                    }
                });
            });
</script>
@endpush