@extends('layout.main')
@section('title') Register | @parent @endsection
@section('main')

    <div class="">
        <!--<div class="row">
            <div class=" col-md-4 col-sm-4 col-xs-12">
                <div class="info-box bg-white ">
                    <h4><i class="fa fa-edit"></i> </h4>
                    <p class="intro"> View, edit and delete your ads. </p>
                </div>
            </div>

            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="info-box bg-white ">
                    <h4><i class="fa fa-clock-o"></i> </h4>
                    <p class="intro"> Quick publish new ads with contact details. </p>
                </div>
            </div>

            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="info-box bg-white ">
                    <h4><i class="fa fa-bar-chart-o"></i> </h4>
                    <p class="intro"> Keep track of your favorite ads. </p>
                </div>
            </div>

        </div>-->

          <div class="kupeza-register">
                <div class="login-picture">
        
                </div>
                <div class="reg-form">
                    
                    <h3 class="authTitle text-center">Sign up or <a href="{{ route('login') }}">@lang('app.login')</a></h3>


                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif

                    {{ Form::open(['route'=>'signup', 'role'=> 'form' ]) }}
                    <hr />
                            <div class="form-group {{ $errors->has('first_name')? 'has-error':'' }} ">
                                <input type="text" name="first_name" id="first_name" class="form-control" value="{{ old('first_name') }}" placeholder="First Name" tabindex="1" >

                                {!! $errors->has('first_name')? '<p class="help-block">'.$errors->first('first_name').'</p>':'' !!}
                            </div>
                            <div class="form-group {{ $errors->has('last_name')? 'has-error':'' }} ">
                                <input type="text" name="last_name" id="last_name" class="form-control"  value="{{ old('last_name') }}" placeholder="Last Name" tabindex="2" >
                                {!! $errors->has('last_name')? '<p class="help-block">'.$errors->first('last_name').'</p>':'' !!}
                            </div>
                            <div class="form-group {{ $errors->has('phone')? 'has-error':'' }} ">
                                <input type="text" name="phone" id="phone" class="form-control"  value="{{ old('phone') }}" placeholder="Phone Number" tabindex="2">
                                {!! $errors->has('phone')? '<p class="help-block">'.$errors->first('phone').'</p>':'' !!}
                            </div>

                    <div class="form-group {{ $errors->has('email')? 'has-error':'' }} ">
                        <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}" placeholder="Email Address" tabindex="4" >
                        {!! $errors->has('email')? '<p class="help-block">'.$errors->first('email').'</p>':'' !!}

                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 wgu-order">
                            <div class="form-group {{ $errors->has('user_type')? 'has-error':'' }} reg-select">
                                <span class="user_type">
                                    <input type="radio" name="user_type" id="Personal" value="customer" checked> <label class="col-md-6"
                                        for="Personal">Personal</label>
                                    <input type="radio" name="user_type" id="Commercial" value="agent"> <label  class="col-md-6"
                                        for="Commercial">Agent</label>
                                </span>
                                    <!--<select id="user_type" name="user_type" class="form-control select2">
                                    <option value="customer">Personal</option>
                                    <option value="agent">Agent</option>
                                    
                                    <option value="">@lang('app.select_a_country')</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}" {{ old('country') == $country->id ? 'selected' :'' }}>{{ $country->country_name }}</option>
                                    @endforeach
                                    
                                </select>-->
                            </div>
                        </div>
                    </div>
                <!--<div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group {{ $errors->has('gender')? 'has-error':'' }}">
                                <select id="gender" name="gender" class="form-control select2">
                                    <option value="">Select Gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Fe-Male</option>
                                    <option value="third_gender">Third Gender</option>
                                </select>
                                {!! $errors->has('gender')? '<p class="help-block">'.$errors->first('gender').'</p>':'' !!}

                            </div>
                        </div>
                    </div> -->
                    

                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group {{ $errors->has('password')? 'has-error':'' }}">
                                <input type="password" name="password" id="password" class="form-control" placeholder="Password" tabindex="5">
                                {!! $errors->has('password')? '<p class="help-block">'.$errors->first('password').'</p>':'' !!}

                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group {{ $errors->has('password_confirmation')? 'has-error':'' }}">
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Confirm Password" tabindex="6">
                                {!! $errors->has('password_confirmation')? '<p class="help-block">'.$errors->first('password_confirmation').'</p>':'' !!}

                            </div>
                        </div>
                    </div>
                    <div class="row  {{ $errors->has('password')? 'has-error':'' }}">
                        <div class="col-12" style="padding:0 15px">
        					<span class="button-checkbox">
        						<label><input type="checkbox" name="agree" value="1" /> I Agree </label><br>
        					</span>
                            By clicking <strong class="label label-primary" style="background-color:#9c28b1">Register</strong>, you agree to the <a href="{{ route('single_page', 'terms-and-condition') }}" target="_blank">Terms and Conditions</a> set out by this site, including our Cookie Use.
                        </div>

                        <div class="col-sm-12">
                            {!! $errors->has('password')? '<p class="help-block">You must agree with terms and condition</p>':'' !!}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <input type="submit" value="Register" class="btn btn-learn btn-block btn-lg" tabindex="7" style="padding-bottom:10px 20px;margin-top:3px">
                        </div>
                    </div>
                    {{ Form::close() }}

            </div>

</div>

@endsection

@section('page-js')
    <script>
        $(document).ready(function() {
            $('#phone').keyup(function(){
                $(this).val($(this).val().replace(/[^0-9]/g,""));
            });
        });

    </script>

    <script>
        var AccTok = [];
        
        function autocomplete(inp, arr) { 
        var currentFocus;       
        inp.addEventListener("input", function(e) {
            var a, b, i, val = this.value;
            
            closeAllLists();
            if (!val) { return false;}
            currentFocus = -1;
            
            a = document.createElement("DIV");
            a.setAttribute("id", this.id + "autocomplete-list");
            a.setAttribute("class", "autocomplete-items");            
            this.parentNode.appendChild(a);
            
            for (i = 0; i < arr.length; i++) {
              
                if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
               
                b = document.createElement("DIV");
                b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
                b.innerHTML += arr[i].substr(val.length);

                b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                
                    b.addEventListener("click", function(e) {
                    inp.value = this.getElementsByTagName("input")[0].value;

                    closeAllLists();
                });
                a.appendChild(b);
                }
            }
        });

        inp.addEventListener("keydown", function(e) {
            var x = document.getElementById(this.id + "autocomplete-list");
            if (x) x = x.getElementsByTagName("div");
            if (e.keyCode == 40) {
                currentFocus++;
                addActive(x);
            } else if (e.keyCode == 38) { 
                currentFocus--;
                addActive(x);
            } else if (e.keyCode == 13) {
               
                e.preventDefault();
                if (currentFocus > -1) {              
                if (x) x[currentFocus].click();
                }
            }
        });
        function addActive(x) {
          
            if (!x) return false;

            removeActive(x);
            if (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (x.length - 1);
            x[currentFocus].classList.add("autocomplete-active");
        }
        function removeActive(x) {
            for (var i = 0; i < x.length; i++) {
            x[i].classList.remove("autocomplete-active");
            }
        }
        function closeAllLists(elmnt) {
            
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
            if (elmnt != x[i] && elmnt != inp) {
            x[i].parentNode.removeChild(x[i]);
            }
        }
        }
        
        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
        }
    </script>
    <script>
        autocomplete(document.getElementById("access_token"), AccTok);
    </script>
@endsection
