@extends('layouts.app')
@section('title')
    <title>Baboon - Adresë e Re</title>
@endsection
@section('custom-css')
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="container">
        <div class="row">
            {{--<div class="account-devider">--}}
            {{--</div>--}}
            <div class="restaurant-nav-list account-nav-list">
                <a href="{{route('home')}}" >
                    Baboon
                </a>
                <img src="{{asset('images/arrow-point.png')}}">
                <a href="#">
                    Llogaria ime
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <nav>
                    <ul class="account-list list-unstyled">
                        <li> <a href="{{route('user.account.show',1)}}">Llogaria ime </a></li>
                        <li> <a href="{{route('order.index')}}">Historiku i porosive </a></li>
                        <li> <a href="{{route('address_book.index')}}">Adresa e dergimit </a></li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-8 col-md-offset-1">
                <h1 class="account-title">Shto adrese te re</h1>
                <form class="form-horizontal" method="POST" action="{{ route('address_book.save') }}" id="update-address-book">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <div class="col-md-7">
                            <input  id="autocomplete"  onFocus="geolocate()" type="text" class="form-control"  placeholder="Kerko adresen tende ketu:">
                            <div id="address-book-map">
                            </div>
                        </div>
                    </div>
                    <div class="form-group{{ $errors->has('addressStreet') ? ' has-error' : '' }}">
                        <div class="col-md-5">
                            <label for="addressStreet" class="control-label">Adresa</label>
                            <input  id="route"  type="text" class="form-control" name="addressStreet" value="" placeholder="Adresa" required>

                            @if ($errors->has('address'))
                                <span class="help-block">
                                <strong>{{ $errors->first('address') }}</strong>
                            </span>
                            @endif
                        </div>
                        <div class="col-md-2">
                            <label for="name" class="control-label"> Numri i rruges</label>
                            <input  id="street_number" type="text" class="form-control" name="street_number" value="{{ old('address') }}" placeholder="Nr. rruges" >
                        </div>
                    </div>
                    <div class="form-group{{ $errors->has('addressDetails') ? ' has-error' : '' }}">
                        <div class="col-md-7">
                            <input type="text" class="form-control" name="addressDetails" value="" placeholder="Detajet e adreses" >

                            @if ($errors->has('addressDetails'))
                                <span class="help-block">
                                        <strong>{{ $errors->first('addressDetails') }}</strong>
                                    </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group{{ $errors->has('address') ? ' has-error' : '' }}">
                        <div class="col-md-7">
                            <input type="text" class="form-control"  value="{{ old('address') }}" placeholder="Nr. pallatit" >

                            @if ($errors->has('address'))
                                <span class="help-block">
                                        <strong>{{ $errors->first('address') }}</strong>
                                    </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group{{ $errors->has('address') ? ' has-error' : '' }}">

                        <div class="col-md-7">
                            <input type="text" class="form-control"  value="{{ old('address') }}" placeholder="Nr. shkalles" >

                            @if ($errors->has('address'))
                                <span class="help-block">
                                        <strong>{{ $errors->first('address') }}</strong>
                                    </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('city') ? ' has-error' : '' }}">
                        <div class="col-md-7">
                            <label for="name" class="control-label">Qyteti</label>
                            <input id="locality" type="text" class="form-control" name="city" value="Tirane" placeholder="Qyteti" >

                            @if ($errors->has('city'))
                                <span class="help-block">
                                <strong>{{ $errors->first('city') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group{{ $errors->has('postal_code') ? ' has-error' : '' }}">
                        <div class="col-md-7">
                            <label for="name" class="control-label">Kodi postar</label>
                            <input id="postal_code" type="text" class="form-control" name="postal_code" value="{{ old('postal_code') }}" placeholder="Kodi postar" >

                            @if ($errors->has('postal_code'))
                                <span class="help-block">
                                <strong>{{ $errors->first('postal_code') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-7">
                            <label>Vendose këtë adresë primare</label>&nbsp; &nbsp;
                            <input type="checkbox" name="set-primary-add" id ="set-primary-add" data-toggle="toggle" data-on="PO" data-off="JO">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-7">
                            <label>Jepni kësaj adrese një emër</label>
                            <div class="radio">
                                <label ><input type="radio" name="optradio">Shtepia </label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="optradio">Zyra </label>
                            </div>
                            <div class="radio ">
                                <label><input type="radio" name="optradio" >Zgjidh Opsionin tend</label>
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-7">
                            <input  type="text" class="form-control" name="custom-add-name" value="{{ old('postal_code') }}" placeholder="Standart" >
                        </div>
                    </div>
                    <input type="hidden" name="latitude" id="add-lat" value="">
                    <input type="hidden" name="longitude" id="add-lng" value="">

                    <div class="form-group">
                        <div class="col-md-7">
                            <button type="submit" class="btn btn-primary login-button">
                                Ruaj ndryshimet
                            </button>

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-7">
                            <a class="btn btn-default" href="{{route('address_book.index')}}" id="cancel-update-address">
                                Anullo
                            </a>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
@endsection
@section('custom-js')
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script>
        //alert($('#set-primary-add').val());
        if($('#set-primary-add').val() == 'on'){
            $('#set-primary-add').val(1);
        }
        else $('#set-primary-add').val(0);

        var placeSearch, autocomplete, marker, infowindow, map;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            //administrative_area_level_1: 'short_name',
           // country: 'long_name',
            postal_code: 'short_name'
        };

        function initAutocomplete() {
            map = new google.maps.Map(document.getElementById('address-book-map'), {
                center: {lat:41.3275, lng:19.8187 },
                zoom: 14
            });
            marker = new google.maps.Marker({
                map: map,
                position: map.center,
                anchorPoint: new google.maps.Point(0, -29),
                draggable: true
            });
            infowindow = new google.maps.InfoWindow({
                content: name
            });
            geocoder = new google.maps.Geocoder();

            google.maps.event.addListener(marker, 'dragend', function() {
                geocodePosition(marker.getPosition());
               // console.log(marker.getPosition().lat());

                $('#add-lat').val(marker.getPosition().lat());
                $('#add-lng').val(marker.getPosition().lng());
                if (marker.formatted_address) {
                    infowindow.setContent(marker.formatted_address );
                } else {
                    infowindow.setContent("Tirana" );
                }
                infowindow.open(map, marker);
            });

            google.maps.event.trigger(marker, 'dragend');

            autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
                {types: ['geocode']});

            autocomplete.addListener('place_changed', function() {
                fillInAddress();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                geocodePosition(place.geometry.location);
                if (!place.geometry) {
                    window.alert("No details available for input: '" + place.name + "'");
                    return;
                }
                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(14);
                }
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);
            });
        }
        function geocodePosition(pos) {
            geocoder.geocode({
                latLng: pos
            }, function(responses) {
                if (responses && responses.length > 0) {
                    marker.formatted_address = responses[0].formatted_address;
                    console.log(marker.formatted_address);
                    $('#autocomplete').val(marker.formatted_address);
                    $('#route').val(marker.formatted_address);
                } else {
                    marker.formatted_address = 'Cannot determine address at this location.';
                }
                infowindow.setContent(marker.formatted_address);
                infowindow.open(map, marker);
            });

        }

        function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();
            $('#add-lat').val(place.geometry.location.lat());
            $('#add-lng').val(place.geometry.location.lng());
            for (var component in componentForm) {
                document.getElementById(component).value = '';
                document.getElementById(component).disabled = false;
            }

            // Get each component of the address from the place details
            // and fill the corresponding field on the form.
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }
        }

        // Bias the autocomplete object to the user's geographical location,as supplied by the browser's 'navigator.geolocation' object.
        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                   // console.log(geolocation.lat);
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAEIy2YqySuqOgFZXll0182KrQ6CkMMY0o&libraries=places&callback=initAutocomplete" async defer></script>
@endsection