@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'))
    <br>
    <div class="alert alert-success">{{session()->get('success')}}</div>
    <br>
    @else
    <section>
        <div class="row">
            <div class="col-12">
                <h1 class="mb-5">Angebot anfragen</h1>
                <p class="fs-5">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores
                    consectetur dicta eaque et eveniet ex illo ipsa iste maiores maxime, modi optio perferendis,
                    quaerat quisquam, sapiente vitae voluptas!
                </p>
                <br>
                <br>
            </div>
            <div class="col-12 col-md-7">
                <div class="card mb-5 shadow-lg" style="background-color: #f7fcf7;">
                    <div class="card-header" style="background-color: #546c8a; color: white;">
                        <h5>
                            <svg style="fill:currentColor; width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                                <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/>
                            </svg>
                            Persönliche Daten
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-10 offset-md-1">
                                @if(session()->has('error'))
                                <br>
                                <div class="alert alert-danger">{{session()->get('error')}}</div>
                                <br>
                                @endif
                                <x-form id="anfrage" id-name="anfrage" channels="bestaetigung,airtable">
                                    <div class="mb-3">
                                        <label for="" class="form-label">Anrede</label>
                                        <select class="form-select" name="anrede" aria-label="Default select example">
                                            <option selected>Herr</option>
                                            <option>Frau</option>
                                            <option>Firma</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="" class="form-label">Vorname</label>
                                        <input type="text" class="form-control" name="vorname" aria-describedby="" placeholder="Maximilian">
                                    </div>
                                    <div class="mb-3">
                                        <label for="" class="form-label">Nachname</label>
                                        <input type="text" class="form-control" name="nachname" aria-describedby="" placeholder="Meyer">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">E-Mail</label>
                                        <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="max.mustermann@areya.de">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Telefon</label>
                                        <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 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>
                                        <label class="form-check-label" for="exampleCheck1">Ich habe die Datenschutzbestimmungen gelesen und akzeptiert.</label>
                                    </div>
                                    <div class="text-end">
                                        <button type="submit" class="btn-success btn mt-3">
                                            Anfrage abschicken
                                        </button>

                                    </div>
                                </x-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 offset-md-1">
                <div class="card shadow-sm" style="background-color: #f7fcf7;">
                    <div class="card-header" style="background-color: #546c8a; color: white;">
                        <h5><svg style="fill:currentColor; width: 25px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564 192h-76.875L347.893 37.297c-5.91-6.568-16.027-7.101-22.596-1.189s-7.101 16.028-1.189 22.596L444.075 192h-312.15L251.893 58.703c5.912-6.567 5.379-16.685-1.189-22.596-6.569-5.912-16.686-5.38-22.596 1.189L88.875 192H12c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h16.444L58.25 438.603C61.546 462.334 81.836 480 105.794 480h364.412c23.958 0 44.248-17.666 47.544-41.397L547.556 224H564c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12zm-77.946 242.201c-1.093 7.867-7.906 13.799-15.848 13.799H105.794c-7.942 0-14.755-5.932-15.848-13.799L60.752 224h454.497l-29.195 210.201zM304 280v112c0 8.837-7.163 16-16 16-8.836 0-16-7.163-16-16V280c0-8.837 7.164-16 16-16 8.837 0 16 7.163 16 16zm112 0v112c0 8.837-7.163 16-16 16s-16-7.163-16-16V280c0-8.837 7.163-16 16-16s16 7.163 16 16zm-224 0v112c0 8.837-7.164 16-16 16s-16-7.163-16-16V280c0-8.837 7.164-16 16-16s16 7.163 16 16z"/></svg> Warenkorb</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <tbody id="list-products">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th scope="col">Gesammt:</th>
                                    <th colspan="2" class="text-end">2838,00 €
                                        <br>
                                        <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                        <a href="" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a>
                    </div>
                </div>
                <div class="card mt-5 shadow-sm" style="background-color: #f7fcf7;">
                    <div class="card-header" style="background-color: #546c8a; color: white;">
                        <h5><svg style="fill:currentColor; width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"/></svg>
                            Wie geht es weiter?</h5>
                    </div>
                    <div class="card-body">
                        <ol>
                            <li class="mb-3">Beratungsgespräch</li>
                            <li class="mb-3">Persönliches Angebot</li>
                            <li class="mb-3">Packen & Abholtermin</li>
                            <li class="mb-3">Rechnung / Barzahlung</li>
                            <li class="mb-3">Abholung in 92648 Vohenstrauß</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
</div>
@stop
@section('scripts')
<script src="{{storage('assets/libs/intl-tel-input/js/intlTelInput.min.js')}}"></script>
<script>
    function clearAddressFields() {
        $('#street-number').val('');
        $('#route').val('');
        $('#sublocality-level-1').val('');
        $('#street-number').val('');
        $('#street-number').val('');
        $('#street-number').val('');
        $('#street-number').val('');
        $('#street-number').val('');
        $('#street-number').val('');
    }
    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, 'sublocality_level_1'));
            $('#locality').val(getAddressFiedlValue(addressComponents, 'locality'));
            $('#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();
        });
    });
</script>
@stop