Edit File - File Manager

Edit File: add_branch.blade.php

@extends('layouts.stores_dashboard_layout')

@section('title')
    {{trans('stores_dashboard.new_branch')}}
@endsection
@section('content')

<div  class="table-cont p-2 ">
                <div class="row align-items-center">
                    <div class="dash-title col-md p-0 mt-0">
                        <h6 class="bold">{{trans('stores_dashboard.new_branch')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.new_branch_desc')}}</p>
                    </div>
            </div>

<form id="postForm">
                  @csrf

<div class=" white-bg round7 mb-3 mt-2 p-3">
                        <h6 class="bold border-bottom pt-3 pb-3 mb-4">{{trans('stores_dashboard.branch_info')}}</h6>

<div class="w-md-75 ">
                            <input type="hidden" name="store_id" value="{{$store->id}}">
                            
                            <div class="form-group">
                                <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.address')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                <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 class="form-group">
                                <label class="bold font14" for="exampleInputEmail1">  {{trans('stores_dashboard.name')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                <input name="name" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('stores_dashboard.name')}} ">
                            </div>

<div class="form-group">
                                <label class="bold font14" for="exampleInputEmail1"> {{trans('stores_dashboard.phone')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                <div class="row">
                                    <div class="col-4 col-md-2 p-1 pr-0">
                                    <select  name="country_key" class="form-control">
                                        @foreach($countries as $country)
                                            <option value="{{$country->calling_code}}" selected >{{$country->calling_code}}</option>
                                        @endforeach
                                    </select>
                                    </div>
                                    <div class="col pt-1 pb-1 pl-0 pr-1">
                                        <input name="phone" type="number" class="form-control"  aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.phone')}}">
                                    </div>

</div>
                            </div>

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

<div class="form-group">
                                <label class="bold font14" for="Password1">{{trans('stores_dashboard.password')}} </label>
                                <div class="password-cont">
                                    <input name="password" type="password" class="form-control" id="Password1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.password')}}">
                                    <i class="fa fa-eye color-gray" id="signInShowPassword1"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="bold font14" for="Password1">{{trans('stores_dashboard.password_confirm')}}  </label>
                                <div class="password-cont">
                                    <input name="password_confirmation" type="password" class="form-control" id="Password2" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.password_confirm')}}">
                                    <i class="fa fa-eye color-gray" id="signInShowPassword2"></i>
                                </div>
                            </div>

</div>
                    </div>

<div class="  m-auto round7  p-3 pl-4 pr-4 form-cont" >

<div class="w-md-75">
                            <div class="time-slider-cont ">
                                <div class=" w-100 time-button text-center" >
                                    <a onclick="addNewTimes()" class="btn m-3" ><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 mt-3" onclick="addTime()" ><i class="fa fa-plus"></i></a>
                                    <input type="checkbox" class=" m-3 mt-3" name="store_days">
                                    <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 time-remove-button" onclick="removeTime(this)" ><i class="fa fa-times"></i></a>
                                                        </div>
                                                     </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                             </div>
                            </div>
                    </div>
                        <button id="postbtn" class="button1 w-100 mt-3 material-button" >{{trans('stores_dashboard.confirm')}}</button>
                </div>
            </form>

</div>

@endsection

@section('scripts')

{{--    <script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyA9_ve_oT3ynCaAF8Ji4oBuDjOhWEHE92U'></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 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
        });

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>

// 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();
        }

// button alert
        function openAlertComment(ele){
            $(ele).siblings('.alert-comment').slideDown();
            $('.over-lay').slideDown();
        }

$('.close-btn').on('click' ,function(){
            $(this).parent().parent().slideUp();
            $('.over-lay').slideUp();
        });
        $('.over-lay').on('click' ,function(){
            $('.over-lay').slideUp();
            $('.alert-comment').slideUp();
        });

</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_add_branch')}}",
                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'){
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 15000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.url);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>

@endsection

Back to File Manager