add phone and adress libs

content/pages/checkout.blade.php

@@ -1,4 +1,8 @@
 @layout('content.master')
+@section('head')
+<link rel="stylesheet" href="{{storage('assets/libs/intl-tel-input/css/intlTelInput.min.css')}}">
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQj1N9Mj-OzOiUjt5QUDRkcDonXz4O85A&v=3.exp&sensor=false&libraries=places"></script>
+@stop
 @section('content')
 <div class="container">
     @if(session()->has('success'))
@@ -59,11 +63,48 @@
                                     </div>
                                     <div class="mb-3">
                                         <label for="exampleInputEmail1" class="form-label">Telefon</label>
-                                        <input type="text" class="form-control" name="telefon" aria-describedby="emailHelp" placeholder="0941467233">
+                                        <input type="text" class="form-control" name="telefon" id="ctelefon" aria-describedby="emailHelp" placeholder="0941467233">
                                     </div>
                                     <div class="mb-3">
                                         <label for="exampleInputPassword1" class="form-label">Adresse</label>
-                                        <input type="text" class="form-control" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
+                                        <input type="text" class="form-control fieldLocation" id="field_location" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
+                                        
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Street Number</span>
+                                            <input type="text" class="form-control" id="street-number" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Route</span>
+                                            <input type="text" class="form-control" id="route" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Sublocality Level 1</span>
+                                            <input type="text" class="form-control" id="sublocality-level-1" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Locality</span>
+                                            <input type="text" class="form-control" id="locality" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Administrative Area Level 3</span>
+                                            <input type="text" class="form-control" id="administrative-area-level-3" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Administrative Area Level 2</span>
+                                            <input type="text" class="form-control" id="administrative-area-level-2" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Administrative Area Level 1</span>
+                                            <input type="text" class="form-control" id="administrative-area-level-1" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Country</span>
+                                            <input type="text" class="form-control" id="country" readonly>
+                                        </div>
+                                        <div class="input-group">
+                                            <span class="input-group-text" id="basic-addon3">Postal Code</span>
+                                            <input type="text" class="form-control" id="postal-code" readonly>
+                                        </div>
                                     </div>
                                     <div class="mb-3 form-check mb-4">
                                         <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
@@ -125,24 +166,82 @@
 </div>
 @stop
 @section('scripts')
+<script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
 <script>
-  $(window).on('load', function(){
+    function clearAddressFields() {
-    if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
+        $('#street-number').val('');
-    let ids = objProducts.map(obj => obj.id);
+        $('#route').val('');
-    $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
+        $('#sublocality-level-1').val('');
-        response.contents.forEach(function(item){
+        $('#street-number').val('');
-            $('#list-products').append(`<tr>
+        $('#street-number').val('');
-                <td>
+        $('#street-number').val('');
-                    <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title}
+        $('#street-number').val('');
-                </td>
+        $('#street-number').val('');
-                <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
+        $('#street-number').val('');
-            </tr>`);
+    }
+    function getAddressFiedlValue(addressComponents, $field){
+        let field = addressComponents.find(obj => obj.types.indexOf($field) > -1);
+        return field != undefined?field.long_name:'';
+    }
+    function initialize() {
+        clearAddressFields();
+        var input = document.getElementById('field_location');
+        var autocomplete = new google.maps.places.Autocomplete(input);
+        autocomplete.addListener("place_changed", () => {
+            const place = autocomplete.getPlace();
+            if (!place.geometry) return;
+            var componentMap = {
+                country: 'country',
+                locality: 'locality',
+                administrative_area_level_1 : 'administrative_area_level_1',
+                administrative_area_level_2 : 'administrative_area_level_2',
+                postal_code: 'postal_code',
+                route: 'route',
+                street_number : 'street_number',
+            };
+            let addressComponents = autocomplete.getPlace().address_components;
+            console.log(addressComponents);
+            $('#street-number').val(getAddressFiedlValue(addressComponents, 'street_number'));
+            $('#route').val(getAddressFiedlValue(addressComponents, 'route'));
+            $('#sublocality-level-1').val(getAddressFiedlValue(addressComponents, 'locality'));
+            $('#locality').val(getAddressFiedlValue(addressComponents, 'street_number'));
+            $('#administrative-area-level-3').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_3'));
+            $('#administrative-area-level-2').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_2'));
+            $('#administrative-area-level-1').val(getAddressFiedlValue(addressComponents, 'administrative_area_level_1'));
+            $('#country').val(getAddressFiedlValue(addressComponents, 'country'));
+            $('#postal-code').val(getAddressFiedlValue(addressComponents, 'postal_code'));
+        });
+    }
+
+    $(window).on('load', google.maps.event, initialize);
+
+    let input = document.querySelector("#ctelefon");
+    let iti = window.intlTelInput(input, {
+        initialCountry: "de", geoIpLookup: function(callback) {
+            $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
+                let countryCode = (resp && resp.country)?resp.country:"us";
+                callback(countryCode);
+            });
+        },
+        utilsScript: "{{storage('assets/libs/intl-tel-input/js/utils.min.js')}}",
+    });
+    $(window).on('load', function(){
+        if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
+        let ids = objProducts.map(obj => obj.id);
+        $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
+            response.contents.forEach(function(item){
+                $('#list-products').append(`<tr>
+                    <td>
+                        <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title}
+                    </td>
+                    <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
+                </tr>`);
+            });
+        });
+        $('#anfrage').submit(function(){
+            objProducts = [];
+            updateProductsInLocalStorage();
         });
     });
-    $('#anfrage').submit(function(){
-        objProducts = [];
-        updateProductsInLocalStorage();
-    });
-  });
 </script>
 @stop