Edit File: create.blade.php
@extends('admin.layout.master') {{-- extra css files --}} @section('css') <link rel="stylesheet" type="text/css" href="{{ asset('admin/app-assets/css-rtl/plugins/forms/validation/form-validation.css') }}"> <link rel="stylesheet" type="text/css" href="{{ asset('admin/app-assets/vendors/css/extensions/sweetalert2.min.css') }}"> <link rel="stylesheet" type="text/css" href="{{ asset('admin/app-assets/vendors/css/pickers/pickadate/pickadate.css') }}"> @endsection {{-- extra css files --}} @section('content') <!-- // Basic multiple Column Form section start --> <section id="multiple-column-form"> <div class="row match-height"> <div class="col-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">{{ awtTrans('اضافه عنوان ') }}</h4> </div> <div class="card-content"> <div class="card-body"> <form method="POST" action="{{ route('admin.addresses.store') }}" class="store form-horizontal" novalidate> @csrf <div class="form-body"> <div class="row"> <div class="col-md-6 col-12"> <div class="form-group"> <label for="first-name-column">{{ awtTrans('اسم العنوان') }}</label> <div class="controls"> <input type="hidden" name="user_id" id="user_id" value="{{ $id }}"> <input type="text" name="title" class="form-control discount" placeholder="{{ awtTrans('بيت - عمل') }}" required data-validation-required-message="{{ awtTrans('هذا الحقل مطلوب') }}"> </div> </div> </div> <div class="col-md-6 col-12"> <div class="form-group"> <label for="address-column">{{ awtTrans('العنوان') }}</label> <div class="controls"> <input type="text" name="address" id="searchTextField" class="form-control discount" placeholder="{{ awtTrans('اكتب العنوان تفصيليا') }}" required data-validation-required-message="{{ awtTrans('هذا الحقل مطلوب') }}"> <input type="hidden" id="lat" name="lat" value=""> <input type="hidden" id="long" name="long" value=""> </div> </div> </div> <div class="col-12"> <div id="map" style="height: 400px; width: 100%;"></div> </div> <div class="col-12 d-flex justify-content-center mt-3"> <button type="submit" class="btn btn-primary mr-1 mb-1 submit_button">{{ awtTrans('اضافة') }}</button> <a href="{{ url()->previous() }}" type="reset" class="btn btn-outline-warning mr-1 mb-1">{{ awtTrans('رجوع') }}</a> </div> </div> </div> </form> </div> </div> </div> </div> </div> </section> @endsection @section('js') <script src="{{ asset('admin/app-assets/vendors/js/forms/validation/jqBootstrapValidation.js') }}"></script> <script src="{{ asset('admin/app-assets/js/scripts/forms/validation/form-validation.js') }}"></script> <script src="{{ asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script> <script src="{{ asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js') }}"></script> <script src="{{ asset('admin/app-assets/vendors/js/pickers/pickadate/picker.js') }}"></script> <script src="{{ asset('admin/app-assets/vendors/js/pickers/pickadate/picker.date.js') }}"></script> <script src="{{ asset('admin/app-assets/js/scripts/pickers/dateTime/pick-a-datetime.js') }}"></script> {{-- show selected image script --}} @include('admin.shared.addImage') {{-- show selected image script --}} {{-- submit add form script --}} @include('admin.shared.submitAddForm') {{-- submit add form script --}} <script> function initMap() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (p) { const myLatlng = { lat: p.coords.latitude, lng: p.coords.longitude }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 18, center: myLatlng, mapTypeControl: false, streetViewControl: false, }); $('#lat').val(p.coords.latitude); $('#long').val(p.coords.longitude); GetAddress(new google.maps.LatLng(p.coords.latitude, p.coords.longitude)); let marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Set lat/lon values for this property', draggable: true, }); google.maps.event.addListener(marker, 'dragend', function (event) { $('#lat').val(this.getPosition().lat()); $('#long').val(this.getPosition().lng()); GetAddress(new google.maps.LatLng(marker.getPosition().lat(), marker.getPosition().lng())); }); google.maps.event.addListener(map, 'click', function (event) { $('#lat').val(event.latLng.lat()); $('#long').val(event.latLng.lng()); marker.setPosition(event.latLng); map.setCenter(event.latLng); GetAddress(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())); }); }); } } function GetAddress(latlng) { let geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'latLng': latlng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { $('#searchTextField').val(results[1].formatted_address); $('#address').val(results[1].formatted_address); } } }); } function geocodeAddress(geocoder, resultsMap) { const address = document.getElementById("searchTextField").value; geocoder.geocode({ address: address }, (results, status) => { if (status === "OK") { $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); resultsMap.setCenter(results[0].geometry.location); const myLatlng = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 18, center: myLatlng, mapTypeControl: false, streetViewControl: false, }); let marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Set lat/lon values for this property', draggable: true, }); google.maps.event.addListener(marker, 'dragend', function (event) { $('#lat').val(this.getPosition().lat()); $('#lng').val(this.getPosition().lng()); }); google.maps.event.addListener(map, 'click', function (event) { $('#lat').val(event.latLng.lat()); $('#lng').val(event.latLng.lng()); marker.setPosition(event.latLng); map.setCenter(event.latLng); }); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $setting['google_places'] }}&callback=initMap" type="text/javascript"></script> @endsection
Back to File Manager