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


    <main>

        <section class="login-pg">
            <div class="container">
                <div class="form-box col-lg-10 mx-auto">
                @include('web.pages.auth.merchant.header')

                    <!-- Step 2 Form -->
                    <form method="post" action="{{$action}}" onsubmit="formAction(this)" class="merchant-form">
                        @CSRF
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group mb-4">
                                    <label class="form-label">{{__('web.country_id')}}</label>
                                    <select class="form-control form-select" onchange="selectCountry(this)" name="country_id" id="">
                                        <option value="">{{__('web.select')}} </option>
                                        @foreach($countries as $row)
                                            <option {{ ($check['country_id'] ?? null) == $row->id  ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <label class="form-label">{{__('web.region_id')}}</label>
                                    <select class="form-control form-select" onchange="selectRegion(this)" name="region_id" id="regions">
                                        <option value="">{{__('web.select')}} </option>
                                        @foreach($regions as $row)
                                            <option {{ ($check['region_id'] ?? null) == $row->id  ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <label class="form-label">{{__('web.city_id')}}</label>
                                    <select class="form-control form-select" name="city_id" id="cities">
                                        <option value="">{{__('web.select')}} </option>
                                        @foreach($cities as $row)
                                            <option {{ ($check['city_id'] ?? null) == $row->id  ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-4">
                                    <label class="form-label">{{__('web.address')}}</label>
                                    <input type="text" class="form-control" name="address" placeholder="{{ __('web.address_placeholder') }}" value="{{ $check['address'] ?? '' }}">
                                </div>
                            </div>
                            <input type="hidden" name="latitude" id="latitude" value="{{ $check['latitude'] ?? '' }}">
                            <input type="hidden" name="longitude" id="longitude" value="{{ $check['longitude'] ?? '' }}">
                            <div class="col-lg-6" id="map">
                            </div>
                            <div class="col-12">
                                <div class="btns mt-5">
                                    <div class="row justify-content-between">
                                        <div class="col-lg-4">
                                            <a href="{{route('web.merchant.regist1')}}" class="butn butn-blue-light border w-100 mt-2">
                                                <span><i class="fal fa-long-arrow-left me-2"></i>{{__('web.back')}}</span>
                                            </a>
                                        </div>
                                        <div class="col-lg-4">
                                            <button type="submit" class="butn border w-100 mt-2">
                                                <span>{{__('web.next')}} <i class="fal fa-long-arrow-right ms-2"></i></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

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


    </main>

@endsection
@section('inject_js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>
    <script>
        let url_fetch_areas = "{{route('web.fetch.areas')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/relation.js"></script>
    <script type="text/javascript">

        var latlng = new google.maps.LatLng({!! isset($check) ? ($check['latitude'] ?? '21.4989').', '.($check['longitude'] ?? '39.2509') : '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>
@endsection