@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')


    <!-- Start section -->
        <section class="login_pg section">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-10 m-auto">
                        <div class="form_box">
                            <h2 class="sec_title bb fw-bold mb-4">  {{__('web.register')}} ({{__('web.companies')}})    </h2>
                            <h6 class="small mb-5">{{__('web.regist_desc')}}</h6>
                            <form method="post" action="{{$action}}" onsubmit="formAction(this)">
                                @CSRF
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <label class="inputLabel"> {{__('web.address_details')}} <span style="color:red">{{__('web.max_100')}}</span>  </label>
                                            <input type="text" name="address" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="inputLabel">  {{__('web.city_id')}}      <span class="text-danger">*</span>  </label>
                                            <select name="city_id" onchange="fetchCities(this)" target-id="area_id" class="form-control form-select">
                                                <option value="">{{__('web.select')}}</option>
                                                @foreach($cities as $row)
                                                    <option value="{{$row->id}}">{{$row->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="inputLabel"> {{__('web.area_id')}}      <span class="text-danger">*</span>  </label>
                                            <select name="area_id" id="area_id" class="form-control form-select">
                                                <option value="">{{__('web.select')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="map_box mb-2">
                                            <label class="inputLabel"> {{__('web.address_on_map')}}    <span class="text-danger">*</span>  </label>
                                            <input type="hidden" name="latlng" id="latlng" value="">
                                            <div id="map" style="width:100%;display: block;position: relative;overflow: hidden;height: 15pc;">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-center mt-5">
                                        <button type="submit" class="butn primary_butn px-5 py-3 ">{{__('web.sure')}}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </section>

    </main>


@section('inject_js')

    <script type="text/javascript">

        var latlng = new google.maps.LatLng({!! $user ?? ''  && $user->id ? $user->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;
            });
        });


function addYourLocationButton (map, marker) 
{
    var controlDiv = document.createElement('div');

    var firstChild = document.createElement('button');
    firstChild.setAttribute('type', 'button');
    firstChild.style.backgroundColor = '#fff';
    firstChild.style.border = 'none';
    firstChild.style.outline = 'none';
    firstChild.style.width = '28px';
    firstChild.style.height = '28px';
    firstChild.style.borderRadius = '2px';
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor = 'pointer';
    firstChild.style.marginRight = '10px';
    firstChild.style.padding = '0';
    firstChild.title = 'Your Location';
    controlDiv.appendChild(firstChild);

    var secondChild = document.createElement('div');
    secondChild.setAttribute('type', 'button');
    secondChild.style.margin = '5px';
    secondChild.style.width = '18px';
    secondChild.style.height = '18px';
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0 0';
    secondChild.style.backgroundRepeat = 'no-repeat';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'center_changed', function () {
        secondChild.style['background-position'] = '0 0';
    });

    firstChild.addEventListener('click', function () {
        var imgX = '0',
            animationInterval = setInterval(function () {
                imgX = imgX === '-18' ? '0' : '-18';
                secondChild.style['background-position'] = imgX+'px 0';
            }, 500);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(latlng);
                map.setCenter(latlng);
                let newlatlng = String(latlng);
                $('#latlng').val(newlatlng.slice(1, -1))
                clearInterval(animationInterval);
                secondChild.style['background-position'] = '-144px 0';
            });
        } else {
            clearInterval(animationInterval);
            secondChild.style['background-position'] = '0 0';
        }
    });

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);
}


addYourLocationButton(map, marker);


    </script>
@endsection

@endsection