@extends('layouts.store_dashboard_un_authed_layout')

@section('title')
{{Session::has('lang')&&Session::get('lang')=='en'?'Complete store info  ':' استكمال بيانات المتجر '}}

@endsection

@section('content')
    <!-- start page content -->

    <div class="page-content">


        <div class="mt-4  mb-3 text-center">

            <h5 class="bold">{{trans('stores_dashboard.sign_up')}}</h5>
            <p class="m-3"> {{trans('stores_dashboard.store_rule')}} </p>
        </div>


        <div class="w-md-50  m-auto round10 p-3 pl-4 pr-4 form-cont" >
            <div class="container register-header  m-auto">
                <div class="active">
                    <span class="select-register-step">1</span>
                    <span class="font16 bold">
                    {{trans('stores_dashboard.main_info')}}
                    </span>
                </div>
                <div class="line-between"></div>
                <div class="current" >
                    <span class="select-register-step">2</span>
                    <span class="font16 bold">
                    {{trans('stores_dashboard.store_info')}}
                    </span>
                </div>
            </div>
        </div>
        <form id="postForm" class="container ">
            @csrf
            <div class="w-md-50  m-auto round10 p-3 form-cont" >
                    <h6 class="bold border-bottom pt-3 pb-3 mb-4">{{trans('stores_dashboard.store_info')}}</h6>

                    <input type="hidden" name="user_id" value="{{$user->id}}">
                    <div class="form-group">
                        <div class="row align-items-center justify-content-start ">
                            <div class=" ">
                                <label for="file1">
                                    <div class="input-img-cont ">
                                        <img src="{{URL::to('site/imgs/icons/upload-img.png')}}" id="view1" style="width:100%;height:100%;object-fit:contain" class="input-img" alt="">
                                        <img src="{{URL::to('site/imgs/icons/camera.png')}}" class="input-img-camera" alt="">
                                    </div>
                                    <input onchange="viewImg(event ,'#view1')" class="d-none" type="file" name="icon" id="file1">
                                </label>
                            </div>
                            <div class="col">
                                <h6 class="bold font14">{{trans('stores_dashboard.logo')}} </h6>
                            </div>
                        </div>
                    </div>



                    <div class="form-group">
                        <label class="bold font14 d-block" for="coverImgcont">
                            <div class="mb-2">
                            {{trans('stores_dashboard.cover')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span>
                            </div>

                            <input name="cover" type="file" onchange="viewImg(event ,'#coverImg')" class="d-none w-100" id="coverImgcont" >
                            <div class="row transition img-input align-items-center border w-100 p-2 round5">
                                <div class="col img-input-title">{{trans('stores_dashboard.cover_req')}} </div>
                                <div class="col  text-align2">
                                    <img id="coverImg" style="width:100%;height:100%;object-fit:contain" src="{{URL::to('site/imgs/icons/camera.svg')}}" alt="">
                                </div>
                            </div>
                        </label>
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">{{trans('stores_dashboard.name_ar')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="name_ar" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.name_ar')}}">
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">{{trans('stores_dashboard.name_en')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="name_en" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.name_en')}} ">
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.category')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <select name="category" class="form-control categories">
                            <option selected disabled>{{trans('stores_dashboard.category_req')}}</option>
                            @foreach($categories as $category)
                              <option value="{{$category->slug}}">{{$category->name}}</option>
                            @endforeach
                        </select>
                    </div>

                                <div class="w-md-50  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                                    <div class="title_">
                                        <div class="checks">
                                            <div class="row subcategories">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.commercial_no')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="commercial_id" type="text" inputmode="numeric" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.commercial_no')}} ">
                    </div>


                    <div class="form-group">
                        <label class="bold font14 d-block" for="coverImgcont2">
                            <div class="mb-2">
                            {{trans('stores_dashboard.commercial_image')}} <span style="color: #ff3333;margin: auto 20px;"> * </span>
                            </div>

                            <input name="commercial_image" type="file" onchange="viewImg(event ,'#coverImg2')" class="d-none w-100" id="coverImgcont2" >
                            <div class="row transition img-input align-items-center border w-100 p-2 round5">
                                <div class="col img-input-title">{{trans('stores_dashboard.commercial_image')}}</div>
                                <div class="col  text-align2">
                                    <img id="coverImg2" style="width:100%;height:100%;object-fit:contain" src="{{URL::to('site/imgs/icons/camera.svg')}}" alt="">
                                </div>
                            </div>
                        </label>
                    </div>


                    <div class="form-group">
                        <h3>{{trans('stores_dashboard.address')}} </h3>
                        <input type="text" name="address" id="address" class="form-control" >
                        <br>
                        <div id="map" style="width: 100%;height:250px;"></div>
                        <input type="hidden" name="lat" id="lat" value="30">
                        <input type="hidden" name="long" id="long" value="30">
                    </div>
            </div>

            <div class="w-md-50  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                <div class="">
                    <h6 class="bold border-bottom pt-3 pb-3 mb-3">{{trans('stores_dashboard.timings')}}</h6>

                    <div class="time-slider-cont ">
                        <div class=" w-100 time-button text-center" >
                            <a onclick="addNewTimes()" class="btn mt-1" ><img src="{{URL::to('site/imgs/icons/time.png')}}" alt=""></a>
                            <h6 class="bold  pt-2 pb-2 ">{{trans('stores_dashboard.no_timings')}} </h6>
                            <p>{{trans('stores_dashboard.time_rule')}} </p>
                        </div>
                        <div class=" w-100 time-cont pt-3" >
                        <a class="button1 material-button m-3" onclick="addTime()" ><i class="fa fa-plus"></i></a>
                                <div class="times-cont">
                                    <div class="container time m-auto">
                                        <div class="row  ">
                                            <div class="col-md  p-1">
                                                <label class="bold">{{trans('stores_dashboard.day')}} </label>
                                                <select name="days[]" class="form-control border no-arrow">
                                                    <option value="saturday" >{{trans('stores_dashboard.saturday')}}</option>
                                                    <option value="sunday" >{{trans('stores_dashboard.sunday')}}</option>
                                                    <option value="monday">{{trans('stores_dashboard.monday')}}</option>
                                                    <option value="tuesday">{{trans('stores_dashboard.tuesday')}}</option>
                                                    <option value="wednesday">{{trans('stores_dashboard.wednesday')}}</option>
                                                    <option value="thursday">{{trans('stores_dashboard.thursday')}} </option>
                                                    <option value="friday">{{trans('stores_dashboard.friday')}}</option>
                                                </select>
                                            </div>

                                            <div class="col-md  p-1">
                                                <label class="bold">{{trans('stores_dashboard.from')}} </label>
                                                <input type="time"  class="p-3 border round5 w-100" name="from[]" id="">
                                            </div>

                                            <div class="col-md  p-1">
                                                <label class="bold">{{trans('stores_dashboard.to')}}</label>
                                                <input type="time" class="p-3 border round5 w-100" name="to[]" id="">
                                            </div>

                                            <div class="col-md-1  p-1">
                                            <div class="d-flex align-items-center flex-column">
                                                <label class="bold sn" style="color: #fff;">.</label>
                                                <a type="button" class="button-error material-button" onclick="removeTime(this)" ><i class="fa fa-times"></i></a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>

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


            <div class="w-md-50  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                <div class="">
                    <h6 class="bold border-bottom pt-3 pb-3 mb-3">{{trans('stores_dashboard.bank_data')}}</h6>
                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">{{trans('stores_dashboard.acc_name')}}   <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="bank_acc_name" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.acc_name')}}">
                    </div>
                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.iban')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <div class="position-relative">
                            <input name="iban_number" type="text" class="form-control" id="exampleInputEmail1"  placeholder="{{trans('stores_dashboard.iban')}}">
                            <span class="float_span">SA</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.bank_name')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="bank_name" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.bank_name')}} ">
                    </div>
                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.bank_number')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="bank_number" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.bank_number')}} ">
                    </div>
                    <div class="form-group">
                        <label class="bold font14 d-block" for="coverImgcont3">
                            <div class="mb-2">
                                {{trans('stores_dashboard.iban_image')}} <span style="color: #ff3333;margin: auto 20px;"> * </span>
                            </div>

                            <input name="iban_image" type="file" onchange="viewImg(event ,'#coverImg3')" class="d-none w-100" id="coverImgcont3" >
                            <div class="row transition img-input align-items-center border w-100 p-2 round5">
                                <div class="col img-input-title">{{trans('stores_dashboard.iban_image')}}</div>
                                <div class="col  text-align2">
                                    <img id="coverImg3" style="width:100%;height:100%;object-fit:contain" src="{{URL::to('site/imgs/icons/camera.svg')}}" alt="">
                                </div>
                            </div>
                        </label>
                    </div>


                </div>
                <button id="postbtn" class="button1 w-100 mt-3 material-button" >{{trans('stores_dashboard.confirm')}}</button>
            </div>
        </form>





    </div>

    <!-- end page content -->

@endsection

@section('scripts')
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9_ve_oT3ynCaAF8Ji4oBuDjOhWEHE92U&libraries=places&language=ar"></script>

{{--    <script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyA9_ve_oT3ynCaAF8Ji4oBuDjOhWEHE92U'></script>--}}
        <script>
            $('.categories').on('change',function(){
                var category_id= $(this).val();
                if (category_id) {
                    url = "{{route('stores_dashboard.get_subcategories',':category_id')}}",
                        new_url = url.replace(':category_id', category_id);
                    console.log(new_url);
                    $.ajax({
                        url : new_url,
                        type: "GET",
                        dataType: "json",
                        success: function(data){
                            var menus= data.data;
                            if($('.subcategories').empty()){
                                $(".subcategories").append('<h6 class="bold border-bottom col-12 pt-3 pb-3 mb-3">{{trans('stores_dashboard.subcategories')}}</h6><br>')
                                for(i=0;i<menus.length;i++) {
                                    $('.subcategories').append('<div class="col-md-6 col-12 mt-2 mb-2">' +
                                        '<input class="" name="category_id[]" type="checkbox" value="'+menus[i].id+'" id="flexCheckCheckedn'+menus[i].id+'"  style="margin-left: 10px">' +
                                        '<label class="form-check-label" for="flexCheckCheckedn'+menus[i].id+'">'+menus[i].name['{!! config("app.locale")!!}']+'</label>' +
                                        '<div>');
                                };
                            }else{
                                $('.subcategories').empty()
                                $(".subcategories").append('<h6 class="bold border-bottom pt-3 pb-3 mb-3">{{trans('stores_dashboard.subcategories')}}</h6><br>')
                                for(i=0;i<menus.length;i++) {
                                    $('.subcategories').append('<div class="col-md-6 col-12">' +
                                        '<input class="" name="category_id[]" type="checkbox" value="'+menus[i].id+'" id="flexCheckCheckedn'+menus[i].id+'"  style="margin-left: 10px">' +
                                        '<label class="form-check-label" for="flexCheckCheckedn'+menus[i].id+'">'+menus[i].name['{!! config("app.locale")!!}']+'</label>' +
                                        '</div>');
                                };
                            }
                        }
                    });
                }else {
                    $('.menus').empty();
                    $('.title_').empty();
                }

            });
        </script>
    <script>
        (function ( $ ) {

            /**
             * Holds google map object and related utility entities.
             * @constructor
             */
            function GMapContext(domElement, options) {
                var _map = new google.maps.Map(domElement, options);
                var _marker = new google.maps.Marker({
                    position: new google.maps.LatLng(54.19335, -3.92695),
                    map: _map,
                    title: "Drag Me",
                    visible: options.markerVisible,
                    draggable: options.markerDraggable,
                    icon: (options.markerIcon !== undefined) ? options.markerIcon : undefined
                });
                return {
                    map: _map,
                    marker: _marker,
                    circle: null,
                    location: _marker.position,
                    radius: options.radius,
                    locationName: options.locationName,
                    addressComponents: {
                        formatted_address: null,
                        addressLine1: null,
                        addressLine2: null,
                        streetName: null,
                        streetNumber: null,
                        city: null,
                        district: null,
                        state: null,
                        stateOrProvince: null
                    },
                    settings: options.settings,
                    domContainer: domElement,
                    geodecoder: new google.maps.Geocoder()
                }
            }

            // Utility functions for Google Map Manipulations
            var GmUtility = {
                /**
                 * Draw a circle over the the map. Returns circle object.
                 * Also writes new circle object in gmapContext.
                 *
                 * @param center - LatLng of the center of the circle
                 * @param radius - radius in meters
                 * @param gmapContext - context
                 * @param options
                 */
                drawCircle: function(gmapContext, center, radius, options) {
                    if (gmapContext.circle != null) {
                        gmapContext.circle.setMap(null);
                    }
                    if (radius > 0) {
                        radius *= 1;
                        options = $.extend({
                            strokeColor: "#0000FF",
                            strokeOpacity: 0.35,
                            strokeWeight: 2,
                            fillColor: "#0000FF",
                            fillOpacity: 0.20
                        }, options);
                        options.map = gmapContext.map;
                        options.radius = radius;
                        options.center = center;
                        gmapContext.circle = new google.maps.Circle(options);
                        return gmapContext.circle;
                    }
                    return null;
                },
                /**
                 *
                 * @param gMapContext
                 * @param location
                 * @param callback
                 */
                setPosition: function(gMapContext, location, callback) {
                    gMapContext.location = location;
                    gMapContext.marker.setPosition(location);
                    gMapContext.map.panTo(location);
                    this.drawCircle(gMapContext, location, gMapContext.radius, {});
                    if (gMapContext.settings.enableReverseGeocode) {
                        this.updateLocationName(gMapContext, callback);
                    } else {
                        if (callback) {
                            callback.call(this, gMapContext);
                        }
                    }

                },
                locationFromLatLng: function(lnlg) {
                    return {latitude: lnlg.lat(), longitude: lnlg.lng()}
                },
                addressByFormat: function (addresses, format) {
                    var result = null;
                    for(var i = addresses.length - 1; i >= 0; i--){
                        if(addresses[i].types.indexOf(format) >= 0){
                            result = addresses[i];
                        }
                    }
                    return result || addresses[0];
                },
                updateLocationName: function(gmapContext, callback) {
                    gmapContext.geodecoder.geocode({
                        latLng: gmapContext.marker.position
                    }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                            var address = GmUtility.addressByFormat(results, gmapContext.settings.addressFormat);
                            gmapContext.locationName = address.formatted_address;
                            gmapContext.addressComponents = GmUtility.address_component_from_google_geocode(address.address_components);
                        }else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                            return setTimeout(function () {
                                GmUtility.updateLocationName(gmapContext, callback);
                            }, 1000);
                        }
                        if (callback) {
                            callback.call(this, gmapContext);
                        }
                    });
                },
                address_component_from_google_geocode: function(address_components) {
                    var result = {};
                    for (var i = address_components.length-1; i>=0; i--) {
                        var component = address_components[i];
                        // Postal code
                        if (component.types.indexOf('postal_code') >= 0) {
                            result.postalCode = component.short_name;
                        }
                        // Street number
                        else if (component.types.indexOf('street_number') >= 0) {
                            result.streetNumber = component.short_name;
                        }
                        // Street name
                        else if (component.types.indexOf('route') >= 0) {
                            result.streetName = component.short_name;
                        }
                        // City
                        else if (component.types.indexOf('locality') >= 0) {
                            result.city = component.short_name;
                        }
                        // District
                        else if (component.types.indexOf('sublocality') >= 0) {
                            result.district = component.short_name;
                        }
                        // State \ Province
                        else if (component.types.indexOf('administrative_area_level_1') >= 0) {
                            result.stateOrProvince = component.short_name;
                        }
                        // State \ Province
                        else if (component.types.indexOf('country') >= 0) {
                            result.country = component.short_name;
                        }
                    }
                    result.addressLine1 = [result.streetNumber, result.streetName].join(' ').trim();
                    result.addressLine2 = '';
                    return result;
                }
            };

            function isPluginApplied(domObj) {
                return getContextForElement(domObj) != undefined;
            }

            function getContextForElement(domObj) {
                return $(domObj).data("locationpicker");
            }

            function updateInputValues(inputBinding, gmapContext){
                if (!inputBinding) return;
                var currentLocation = GmUtility.locationFromLatLng(gmapContext.marker.position);
                if (inputBinding.latitudeInput) {
                    inputBinding.latitudeInput.val(currentLocation.latitude).change();
                }
                if (inputBinding.longitudeInput) {
                    inputBinding.longitudeInput.val(currentLocation.longitude).change();
                }
                if (inputBinding.radiusInput) {
                    inputBinding.radiusInput.val(gmapContext.radius).change();
                }
                if (inputBinding.locationNameInput) {
                    inputBinding.locationNameInput.val(gmapContext.locationName).change();
                }
            }

            function setupInputListenersInput(inputBinding, gmapContext) {
                if (inputBinding) {
                    if (inputBinding.radiusInput){
                        inputBinding.radiusInput.on("change", function(e) {
                            var radiusInputValue = $(this).val();
                            if (!e.originalEvent || isNaN(radiusInputValue)) { return }
                            gmapContext.radius = radiusInputValue;
                            GmUtility.setPosition(gmapContext, gmapContext.location, function(context){
                                context.settings.onchanged.apply(gmapContext.domContainer,
                                    [GmUtility.locationFromLatLng(context.location), context.radius, false]);
                            });
                        });
                    }
                    if (inputBinding.locationNameInput && gmapContext.settings.enableAutocomplete) {
                        var blur = false;
                        gmapContext.autocomplete = new google.maps.places.Autocomplete(inputBinding.locationNameInput.get(0), gmapContext.settings.autocompleteOptions);
                        google.maps.event.addListener(gmapContext.autocomplete, 'place_changed', function() {
                            blur = false;
                            var place = gmapContext.autocomplete.getPlace();
                            if (!place.geometry) {
                                gmapContext.settings.onlocationnotfound(place.name);
                                return;
                            }
                            GmUtility.setPosition(gmapContext, place.geometry.location, function(context) {
                                updateInputValues(inputBinding, context);
                                context.settings.onchanged.apply(gmapContext.domContainer,
                                    [GmUtility.locationFromLatLng(context.location), context.radius, false]);
                            });
                        });
                        if(gmapContext.settings.enableAutocompleteBlur) {
                            inputBinding.locationNameInput.on("change", function(e) {
                                if (!e.originalEvent) { return }
                                blur = true;
                            });
                            inputBinding.locationNameInput.on("blur", function(e) {
                                if (!e.originalEvent) { return }
                                setTimeout(function() {
                                    var address = $(inputBinding.locationNameInput).val();
                                    if (address.length > 5 && blur) {
                                        blur = false;
                                        gmapContext.geodecoder.geocode({'address': address}, function(results, status) {
                                            if(status == google.maps.GeocoderStatus.OK  && results && results.length) {
                                                GmUtility.setPosition(gmapContext, results[0].geometry.location, function(context) {
                                                    updateInputValues(inputBinding, context);
                                                    context.settings.onchanged.apply(gmapContext.domContainer,
                                                        [GmUtility.locationFromLatLng(context.location), context.radius, false]);
                                                });
                                            }
                                        });
                                    }
                                }, 1000);
                            });
                        }
                    }
                    if (inputBinding.latitudeInput) {
                        inputBinding.latitudeInput.on("change", function(e) {
                            var latitudeInputValue = $(this).val();
                            if (!e.originalEvent || isNaN(latitudeInputValue) ) { return }
                            GmUtility.setPosition(gmapContext, new google.maps.LatLng(latitudeInputValue, gmapContext.location.lng()), function(context){    context.settings.onchanged.apply(gmapContext.domContainer,
                                [GmUtility.locationFromLatLng(context.location), context.radius, false]);
                                updateInputValues(gmapContext.settings.inputBinding, gmapContext);
                            });
                        });
                    }
                    if (inputBinding.longitudeInput) {
                        inputBinding.longitudeInput.on("change", function(e) {
                            var longitudeInputValue = $(this).val();
                            if (!e.originalEvent || isNaN(longitudeInputValue) ) { return }
                            GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), longitudeInputValue), function(context){
                                context.settings.onchanged.apply(gmapContext.domContainer,
                                    [GmUtility.locationFromLatLng(context.location), context.radius, false]);
                                updateInputValues(gmapContext.settings.inputBinding, gmapContext);
                            });
                        });
                    }
                }
            }

            function autosize(gmapContext) {
                google.maps.event.trigger(gmapContext.map, 'resize');
                setTimeout(function() {
                    gmapContext.map.setCenter(gmapContext.marker.position);
                }, 300);
            }

            function updateMap(gmapContext, $target, options) {
                var settings = $.extend({}, $.fn.locationpicker.defaults, options ),
                    latNew = settings.location.latitude,
                    lngNew = settings.location.longitude,
                    radiusNew = settings.radius,
                    latOld = gmapContext.settings.location.latitude,
                    lngOld = gmapContext.settings.location.longitude,
                    radiusOld = gmapContext.settings.radius;

                if (latNew == latOld && lngNew == lngOld && radiusNew == radiusOld)
                    return;

                gmapContext.settings.location.latitude = latNew;
                gmapContext.settings.location.longitude = lngNew;
                gmapContext.radius = radiusNew;

                GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.settings.location.latitude, gmapContext.settings.location.longitude), function(context){
                    setupInputListenersInput(gmapContext.settings.inputBinding, gmapContext);
                    context.settings.oninitialized($target);
                });
            }
            /**
             * Initializeialization:
             *  $("#myMap").locationpicker(options);
             * @param options
             * @param params
             * @returns {*}
             */
            $.fn.locationpicker = function( options, params ) {
                if (typeof options == 'string') { // Command provided
                    var _targetDomElement = this.get(0);
                    // Plug-in is not applied - nothing to do.
                    if (!isPluginApplied(_targetDomElement)) return;
                    var gmapContext = getContextForElement(_targetDomElement);
                    switch (options) {
                        case "location":
                            if (params == undefined) { // Getter
                                var location = GmUtility.locationFromLatLng(gmapContext.location);
                                location.radius = gmapContext.radius;
                                location.name = gmapContext.locationName;
                                return location;
                            } else { // Setter
                                if (params.radius) {
                                    gmapContext.radius = params.radius;
                                }
                                GmUtility.setPosition(gmapContext, new google.maps.LatLng(params.latitude, params.longitude), function(gmapContext) {
                                    updateInputValues(gmapContext.settings.inputBinding, gmapContext);
                                });
                            }
                            break;
                        case "subscribe":
                            /**
                             * Provides interface for subscribing for GoogleMap events.
                             * See Google API documentation for details.
                             * Parameters:
                             * - event: string, name of the event
                             * - callback: function, callback function to be invoked
                             */
                            if (params == undefined) { // Getter is not available
                                return null;
                            } else {
                                var event = params.event;
                                var callback = params.callback;
                                if (!event || ! callback) {
                                    console.error("LocationPicker: Invalid arguments for method \"subscribe\"")
                                    return null;
                                }
                                google.maps.event.addListener(gmapContext.map, event, callback);
                            }
                            break;
                        case "map":
                            /**
                             * Returns object which allows access actual google widget and marker paced on it.
                             * Structure: {
                             *  map: Instance of the google map widget
                             *  marker: marker placed on map
                             * }
                             */
                            if (params == undefined) { // Getter
                                var locationObj = GmUtility.locationFromLatLng(gmapContext.location);
                                locationObj.formattedAddress = gmapContext.locationName;
                                locationObj.addressComponents = gmapContext.addressComponents;
                                return {
                                    map: gmapContext.map,
                                    marker: gmapContext.marker,
                                    location: locationObj
                                }
                            } else { // Setter is not available
                                return null;
                            }
                        case "autosize":
                            autosize(gmapContext);
                            return this;
                    }
                    return null;
                }
                return this.each(function() {
                    var $target = $(this);
                    // If plug-in hasn't been applied before - initialize, otherwise - skip
                    if (isPluginApplied(this)){
                        updateMap(getContextForElement(this), $(this), options);
                        return;
                    }
                    // Plug-in initialization is required
                    // Defaults
                    var settings = $.extend({}, $.fn.locationpicker.defaults, options );
                    // Initialize
                    var gmapContext = new GMapContext(this, $.extend({}, {
                        zoom: settings.zoom,
                        center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude),
                        mapTypeId: settings.mapTypeId,
                        mapTypeControl: false,
                        styles: settings.styles,
                        disableDoubleClickZoom: false,
                        scrollwheel: settings.scrollwheel,
                        streetViewControl: false,
                        radius: settings.radius,
                        locationName: settings.locationName,
                        settings: settings,
                        autocompleteOptions : settings.autocompleteOptions,
                        addressFormat: settings.addressFormat,
                        draggable: settings.draggable,
                        markerIcon: settings.markerIcon,
                        markerDraggable: settings.markerDraggable,
                        markerVisible: settings.markerVisible
                    },  settings.mapOptions));
                    $target.data("locationpicker", gmapContext);
                    // Subscribe GMap events
                    function displayMarkerWithSelectedArea() {
                        GmUtility.setPosition(gmapContext, gmapContext.marker.position, function (context) {
                            var currentLocation = GmUtility.locationFromLatLng(gmapContext.location);
                            updateInputValues(gmapContext.settings.inputBinding, gmapContext);
                            context.settings.onchanged.apply(gmapContext.domContainer, [currentLocation, context.radius, true]);
                        });
                    }
                    if (settings.markerInCenter) {
                        gmapContext.map.addListener("bounds_changed", function () {
                            if (!gmapContext.marker.dragging) {
                                gmapContext.marker.setPosition(gmapContext.map.center);
                                updateInputValues(gmapContext.settings.inputBinding, gmapContext);
                            }
                        });
                        gmapContext.map.addListener("idle", function () {
                            if (!gmapContext.marker.dragging) {
                                displayMarkerWithSelectedArea();
                            }
                        });
                    }
                    google.maps.event.addListener(gmapContext.marker, "drag", function(event) {
                        updateInputValues(gmapContext.settings.inputBinding, gmapContext);
                    });
                    google.maps.event.addListener(gmapContext.marker, "dragend", function(event) {
                        displayMarkerWithSelectedArea();
                    });
                    GmUtility.setPosition(gmapContext, new google.maps.LatLng(settings.location.latitude, settings.location.longitude), function(context){
                        updateInputValues(settings.inputBinding, gmapContext);
                        // Set  input bindings if needed
                        setupInputListenersInput(settings.inputBinding, gmapContext);
                        context.settings.oninitialized($target);
                    });
                });
            };
            $.fn.locationpicker.defaults = {
                location: {latitude: 40.7324319, longitude: -73.82480777777776},
                locationName: "",
                radius: 500,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: [],
                mapOptions: {},
                scrollwheel: true,
                inputBinding: {
                    latitudeInput: null,
                    longitudeInput: null,
                    radiusInput: null,
                    locationNameInput: null
                },
                enableAutocomplete: false,
                enableAutocompleteBlur: false,
                autocompleteOptions: null,
                addressFormat: 'postal_code',
                enableReverseGeocode: true,
                draggable: true,
                onchanged: function(currentLocation, radius, isMarkerDropped) {},
                onlocationnotfound: function(locationName) {},
                oninitialized: function (component) {},
                // must be undefined to use the default gMaps marker
                markerIcon: undefined,
                markerDraggable: true,
                markerVisible : true
            }
        }( jQuery ));

    </script>
    <script>
        var latlng =new google.maps.LatLng(35.137879, -82.836914);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: new google.maps.LatLng(35.137879, -82.836914),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var myMarker = new google.maps.Marker({
            position: new google.maps.LatLng(47.651968, 9.478485),
            draggable: true
        });

        var geocoder = new google.maps.Geocoder();
        google.maps.event.addListener(myMarker, 'dragend', function (event) {
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status === 'OK') {
                    console.log(results)
                    document.getElementById('address').value = results[1].formatted_address;
                }
            });
        });

        google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
        });

        map.setCenter(myMarker.position);
        myMarker.setMap(map);
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#map').locationpicker({
                inputBinding: {
                    latitudeInput: $("#lat"),
                    longitudeInput: $("#long"),
                    locationNameInput: $("#address")
                },
            });
            navigator.geolocation.getCurrentPosition(function(position) {
                $('#map').locationpicker('location', {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    inputBinding: {
                        latitudeInput: $("#lat"),
                        longitudeInput: $("#long"),
                        locationNameInput: $("#address")
                    },
                });
            });
        })

    </script>

    <script>
        // var map;
        // var marker;
        // var lat = document.getElementById('lat');
        // var long = document.getElementById('long');
        // var address = document.getElementById('address')
        // var geocoder = new google.maps.Geocoder();
        // var infowindow = new google.maps.InfoWindow();
        //
        // function initMap(){
        //     var myLatlng = new google.maps.LatLng(lat.value, long.value);
        //     var mapOptions = {
        //         zoom: 10,
        //         center: myLatlng,
        //         mapTypeId: google.maps.MapTypeId.ROADMAP
        //     };
        //
        //     map = new google.maps.Map(document.getElementById("map"), mapOptions);
        //     marker = new google.maps.Marker({
        //         map: map,
        //         position: myLatlng,
        //         draggable: true
        //     });
        //
        //
        //     geocoder.geocode({'latLng': myLatlng }, function(results, status) {
        //
        //         if (status == google.maps.GeocoderStatus.OK) {
        //             if (results[0]) {
        //                 address.value = results[0].formatted_address;
        //                 lat.value = marker.getPosition().lat();
        //                 long.value = marker.getPosition().lng();
        //                 infowindow.setContent(results[0].formatted_address);
        //                 infowindow.open(map, marker);
        //             }
        //         }
        //     });
        //
        //     google.maps.event.addListener(marker, 'dragend', function() {
        //
        //         geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
        //             if (status == google.maps.GeocoderStatus.OK) {
        //                 if (results[0]) {
        //                     address.value = results[0].formatted_address;
        //                     lat.value = marker.getPosition().lat();
        //                     long.value = marker.getPosition().lng();
        //                     infowindow.setContent(results[0].formatted_address);
        //                     infowindow.open(map, marker);
        //                 }
        //             }
        //         });
        //     });
        //
        // }
        //
        //
        // function initialize()
        // {
        //     var input = document.getElementById('address');
        //     var autocomplete = new google.maps.places.Autocomplete(
        //         /** @type {HTMLInputElement} */(input),
        //         {
        //             types: ['(cities)'],
        //         });
        //     google.maps.event.addListener(autocomplete, 'place_changed', function() {
        //         var place = autocomplete.getPlace();
        //         if (!place.geometry) {
        //             return;
        //         }
        //         lat.value = place.geometry.location.lat();
        //         long.value = place.geometry.location.lng();
        //         // initMap();
        //         var address = '';
        //         if (place.address_components)
        //         {
        //             address = [
        //                 (place.address_components[0] && place.address_components[0].short_name || ''),
        //                 (place.address_components[1] && place.address_components[1].short_name || ''),
        //                 (place.address_components[2] && place.address_components[2].short_name || '')
        //             ].join(' ');
        //         }
        //         initMap();
        //     });
        // }
        //
        //
        // google.maps.event.addDomListener(window, 'load', initialize);
        //
        // google.maps.event.addDomListener(window, 'load', initMap);


        // time
        function addNewTimes(){
            $('.time-button').animate({
                'left' : '-200%'
            });
            $('.time-cont').slideDown();
        }

        function addTime(){
            let time =    '<div class="times-cont">'+
              '<div class="container time m-auto">'+
                                    '<div class="row  ">'+
                                        '<div class="col-md  p-1">'+
                                            '<label class="bold">{{trans("stores_dashboard.day")}}</label>'+
                                            '<select name="days[]" class="form-control border no-arrow">'+
                                                '<option value="saturday">{{trans("stores_dashboard.saturday")}}</option>'+
                                                '<option value="sunday">{{trans("stores_dashboard.sunday")}}</option>'+
                                                '<option value="monday">{{trans("stores_dashboard.monday")}}</option>'+
                                                '<option value="tuesday">{{trans("stores_dashboard.tuesday")}}</option>'+
                                                '<option value="wednesday">{{trans("stores_dashboard.wednesday")}}</option>'+
                                                '<option value="thursday">{{trans("stores_dashboard.thursday")}} </option>'+
                                                '<option value="friday">{{trans("stores_dashboard.friday")}}</option>'+
                                            '</select>'+
                                        '</div>'+

                                        '<div class="col-md  p-1">'+
                                            '<label class="bold">{{trans("stores_dashboard.from")}} </label>'+
                                            '<input type="time"  class="p-3 border round5 w-100" name="from[]" id="">'+
                                        '</div>'+

                                        '<div class="col-md  p-1">'+
                                            '<label class="bold">{{trans("stores_dashboard.to")}}</label>'+
                                            '<input type="time" class="p-3 border round5 w-100" name="to[]" id="">'+
                                        '</div>'+

                                        '<div class="col-md-1  p-1">'+
                                        '<div class="d-flex align-items-center flex-column">'+
                                            '<label class="bold sn" style="color: #fff;">.</label>'+
                                            '<a class="button-error material-button" onclick="removeTime(this)" ><i class="fa fa-times"></i></a>'+
                                        '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                                '</div>';

                                // cont.innerHTML += theHtml;
                                $('.time-cont').append(time);

            // let times = document.getElementsByClassName('time');
            // for(let i = 0 ;i < times.length ;i++){
            //     times[i].querySelector('.time-add-button').classList.add('d-none');
            //     times[i].querySelector('.time-remove-button').classList.remove('d-none');
            // }
            // times[0].querySelector('.time-add-button').classList.remove('d-none');
            // times[0].querySelector('.time-remove-button').classList.add('d-none');
        }

        function removeTime(rmButton){
            $(rmButton).parents(".times-cont").remove();
        }


    </script>
    <script>
        $("#postbtn").on('click',function(e){
            e.preventDefault();
            var form = $('#postForm').get(0);
            var formData = new FormData(form);
            var oldText = $(this).text();
            $(this).prop('disabled', true).css({
                opacity:'0.5'
            }).text("{{trans('stores_dashboard.loading')}}");

            $.ajax({
                url:"{{route('stores_dashboard.post_store_register')}}",
                type:"POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    $('#postbtn').removeAttr("disabled").css({
                        opacity:'1'
                    }).text(oldText);
                    if(data.key =='success'){
                        location.assign(data.url);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
@endsection