@extends('front.layout')
  @section('after_styles_select2')
    <!-- include select2 css-->
    <link href="{{ asset('vendor/backpack/select2/select2.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/backpack/select2/select2-bootstrap-dick.css') }}" rel="stylesheet" type="text/css" />
	@endsection
@section('content')
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="box box-default">
                <div class="box-header with-border">
                    <div class="box-title">{{ trans('backpack::base.register') }}</div>
                </div>
                <div class="box-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('register') }}">
                        {!! csrf_field() !!}
					@if ($errors->any())
						 <div class="alert alert-danger">
							<h4>Please fix the following errors:</h4>	
							<ul>
								@foreach($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif
                        <div class="form-group">
                            <label class="col-md-4 control-label">{{ trans('backpack::base.name') }}</label>
                            <div class="col-md-6">
                                <input type="text" class="form-control" name="name" value="{{ old('name') }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">{{ trans('backpack::base.email_address') }}</label>
                            <div class="col-md-6">
                                <input type="email" class="form-control" name="email" value="{{ old('email') }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">{{ trans('backpack::base.password') }}</label>

                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password">

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">{{ trans('backpack::base.confirm_password') }}</label>

                            <div class="col-md-6">
                                <input type="password" class="form-control" name="password_confirmation">
                            </div>
                        </div>
						
						<div class="form-group">
                            <label class="col-md-4 control-label">{{ trans('backpack::base.user_address') }}</label>

                            <div class="col-md-6">
                               <input type="text" name="address" value="{{ old('address') }}" id="user_address_input" class="form-control" placeholder="Enter a location" autocomplete="off">
								<input type="hidden" name="latitude" id="latitude_input" value="{{ old('latitude') }}" >
								<input type="hidden" name="longitude" id="longitude_input" value="{{ old('longitude') }}">
								<input type="hidden" name="place_id" id="place_id_input" value="{{ old('place_id') }}" >
                            </div>
                        </div>
						
						 <div class="form-group">
                            <label class="col-md-4 control-label">{{ trans('backpack::base.user_city') }}</label>

                            <div class="col-md-6">
								<input type="hidden"
								name="city" value="{{ old('city')?old('city') : '' }}"
								@include('crud::inc.field_attributes', ['default_class' =>  'form-control select2Ajax'])
								>
                            </div>
                        </div>
                        

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-btn fa-user"></i> {{ trans('backpack::base.register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('after_scripts_gmaps')
<script type="text/javascript">
    var placeSearch, autocomplete;
    function initAutocomplete() {
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('user_address_input')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }
    
    function fillInAddress(){
        var place = autocomplete.getPlace();
        $('#latitude_input').val(place.geometry.location.lat());
        $('#longitude_input').val(place.geometry.location.lng());
        $('#place_id_input').val(place.place_id);
//        for (var i = 0; i < place.address_components.length; i++) {
//          var addressType = place.address_components[i].types[0];          
//          if(addressType == 'postal_code'){
//              $('#postal_code_input').val(place.address_components[i].long_name);
//          }          
//        }
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCCNBPwO8Ypeaf-yEssM-CLVz4GHbZGhVY&libraries=places&callback=initAutocomplete"
        async defer></script>
<script src="{{ asset('vendor/backpack/select2/select2.js') }}"></script>
 <script>
        jQuery(document).ready(function($) {
            // trigger select2 for each untriggered select2 box
            $('.select2Ajax').each(function (i, obj) {
                if (!$(obj).data("select2"))
                {
                    $(obj).select2({
                        placeholder: "Select a city",
                        minimumInputLength: 2,
                        ajax: {
                            url: "admin/cities/getall",
                            dataType: 'json',
                            quietMillis: 250,
                            data: function (term, page) {
                                return {
                                    q: term, // search term
                                    page: page
                                };
                            },
                            results: function (data, params) {
                                params.page = params.page || 1;
                                return {
                                    results: $.map(data.data, function (item) {
                                        return {
                                            text: item["title"],
                                            id: item["id"]
                                        }
                                    }),
                                    more: data.current_page < data.last_page
                                };
                            },
                            cache: true
                        },
                        initSelection: function(element, callback) {
                            // the input tag has a value attribute preloaded that points to a preselected repository's id
                            // this function resolves that id attribute to an object that select2 can render
                            // using its formatResult renderer - that way the repository name is shown preselected