@extends('public.layouts.default')
@section('content')

<div class="login-wrap create_acc-form">
    <div class="login-form ">
        <div class="form-header">
            <h1 class="main-heading">Guest User</h1>
            <div class="clearfix"></div>
        </div>
        <div class="block-content">
            <h2 class="site-title">Rydeus</h2>
        <div class="form-block">
            {{ Form::model($user, ['action' => 'UserController@storeGuestUser', 'method' => 'post']) }}
                <div class="row">
                    <div class="col-sm-6 form-group">
                        {{ Form::Label('first_name', 'First Name') }}
                        {{ Form::text('first_name', null, array('id'=>'first_name', 'class'=>'text-input border-style')) }}
                        @include('public.includes.error-message',['key' => 'first_name'])
                    </div>
                    <div class="col-sm-6 form-group">
                        {{ Form::Label('last_name', 'Last Name') }}
                        {{ Form::text('last_name', null, array('id'=>'last_name', 'class'=>'text-input border-style')) }}
                        @include('public.includes.error-message',['key' => 'last_name'])
                    </div>
                    </div>
                    <div class="row">
                    <div class="col-sm-6 form-group">
                        {{ Form::Label('email', 'Email') }}
                        {{ Form::text('email', null, array('id'=>'email', 'class'=>'text-input border-style')) }}
                        @include('public.includes.error-message',['key' => 'email'])
                    </div>
                    <div class="col-sm-6 form-group">
                        {{ Form::Label('phone', 'Phone') }}
                        {{ Form::text('phone', null, array('id'=>'phone', 'class'=>'text-input border-style')) }}
                        @include('public.includes.error-message',['key' => 'phone'])
                    </div>
                    </div>
                    <div class="row">
                    <div class="col-sm-12 form-group">

                            {{ Form::Label('company', 'Company') }}
                            {{ Form::text('company',null, array('id'=>'company', 'class'=>'text-input border-style')) }}
                            @include('public.includes.error-message',['key' => 'company'])

                    </div>
                    </div>
                    <div class="row">
                    <div class="col-sm-12 form-group">

                            {{ Form::Label('address', 'Address 1') }}
                            {{ Form::text('address',null, array('id'=>'address', 'class'=>'text-input border-style', 'placeholder'=>'Enter a Location')) }}
                            {{ Form::hidden('latitude', null, ['class' => 'form-control','id'=>'latitude']) }}
                            {{ Form::hidden('longitude',  null, ['class' => 'form-control','id'=>'longitude']) }}

                            @include('public.includes.error-message',['key' => 'address'])
                            @include('public.includes.error-message',['key' => 'latitude'])
                            @include('public.includes.error-message',['key' => 'longitude'])

                    </div>
                    </div>
                    <div class="row">
                    <div class="col-sm-12 form-group">

                            {{ Form::Label('address2', 'Address 2') }}
                            {{ Form::text('address2',null, array('id'=>'address2', 'class'=>'text-input border-style')) }}
                            @include('public.includes.error-message',['key' => 'address2'])

                    </div>
                    </div>
                    <div class="row">
                    <div class="col-sm-6 form-group">

                            {{ Form::Label('city', 'City') }}
                            {{ Form::text('city',null, array('id'=>'city', 'class'=>'text-input border-style')) }}
                            @include('public.includes.error-message',['key' => 'city'])

                    </div>
                    <div class="col-sm-6 form-group">

                            {{ Form::Label('state', 'Province') }}
                            {{ Form::text('state',null, array('id'=>'state', 'class'=>'text-input border-style')) }}
                            @include('public.includes.error-message',['key' => 'state'])

                    </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="row">
                    <div class="col-sm-6 form-group">

                            {{ Form::Label('country', 'Country') }}
                            {{ Form::text('country',null, array('id'=>'country', 'class'=>'text-input border-style')) }}
                            @include('public.includes.error-message',['key' => 'country'])

                    </div>
                    <div class="col-sm-6 form-group">

                            {{ Form::Label('pincode', 'Postal Code') }}
                            {{ Form::text('pincode',null, array('id'=>'pincode', 'class'=>'text-input border-style')) }}
                            @include('public.includes.error-message',['key' => 'pincode'])

                    </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            {{ Form::submit('Save and Pay' , ['class' => 'sign_in-btn',   'name'=>'create_guest_user']) }}
            {{ Form::close() }}

            <p class="small-text"> Already have a account? <a href="{{ url('/') }}/login/">Sign in now</a></p>
        </div>
    </div>
    </div>
  @endsection



  @section('scripts')
    @parent

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
    <script>

        $(document).ready(function(){
            $('input[name="phone"]').mask('000-000-0000');
        });

        var autocomplete;
        var componentForm = {
            locality: 'city',
            administrative_area_level_1: 'state',
            country: 'country',
            postal_code: 'pincode'
        };

        var AddresssForm = {
            locality: 'long_name',
            administrative_area_level_1: 'long_name',
            country: 'long_name',
            postal_code: 'short_name'
        };

        function initAutocomplete() {
            autocomplete = new google.maps.places.Autocomplete(
                (document.getElementById('address')),
                {types: ['geocode']});
            autocomplete.addListener('place_changed', fillAddress);
            autocomplete.setComponentRestrictions(
                {'country': ['ca']});
            google.maps.event.addDomListener(document.getElementById('address'), 'keydown', function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                }
            });

        }

        function fillAddress() {
            var place = autocomplete.getPlace();

            for (var component in componentForm) {
                document.getElementById(componentForm[component]).value = '';
                document.getElementById(componentForm[component]).disabled = false;
            }
            document.getElementById('latitude').value = place.geometry.location.lat();
            document.getElementById('longitude').value = place.geometry.location.lng();

            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (AddresssForm[addressType]) {
                    var val = place.address_components[i][AddresssForm[addressType]];
                    document.getElementById(componentForm[addressType]).value = val;
                }
            }
        }

        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    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=AIzaSyCNap6LiSGEEqQ9_OJmTebRDXJ99s_qyR0&libraries=places&callback=initAutocomplete"
    async defer></script>
@endsection