@extends('layouts.app')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

@section('content')
<div class="login_area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default register_section">
                    <h1 class="panel-heading mt-0">ShipJunction</h1>
                    <h2 class="sub-heading">Sign up to your account</h2>
                    <p class="login-text">Already have an account? <a href="{{ route('login') }}">Log in</a></p>

                    <div class="panel-body">
                        <form class="form-horizontal" method="POST" action="{{url('/googleregister_save')}}" autocomplete="off">
                            {{ csrf_field() }}
                            {!! Form::hidden('googleid',$user->google_id) !!}
                            @php
                            @endphp

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                                            {!! Form::text('name',$user->first_name, ['class' => 'form-control', 'placeholder'=>'First Name', 'id' => 'name', 'disabled'=>'disabled']) !!}
                                        @if ($errors->has('name'))
                                            <span class="help-block m-0">
                                                <strong><!-- {{ $errors->first('name') }} -->The first name field is required.</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6 last_name_input">
                                    <div class="form-group{{ $errors->has('lname') ? ' has-error' : '' }}">
                                            {!! Form::text('lname',$user->last_name, ['class' => 'form-control', 'placeholder'=>'Last Name','id' => 'lastname', 'disabled'=>'disabled']) !!}

                                        @if ($errors->has('lname'))
                                            <span class="help-block m-0">
                                                <strong><!-- {{ $errors->first('lname') }} -->The Last name field is required.</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('role') ? ' has-error' : '' }}">
                                <select class="form-control" name="role" id="role">
                                    <option value="">User Type..</option>
                                    @if ($roles->count())
                                    @foreach($roles as $Role)
                                        <option value="{{ $Role->id }}">{{ $Role->name }}</option>
                                    @endforeach
                                    @endif
                                    
                                   
                               
                                </select>
                                @if ($errors->has('role'))
                                 <span class="help-block m-0">
                                        <strong>{{ $errors->first('role') }}</strong>
                                    </span>
                                    @endif
                            </div>

                           <!--  <div class="form-group{{ $errors->has('plan') ? ' has-error' : '' }}">
                                    <select class="form-control" name="plan" id="role">
                                        <option value="">Select Plan</option>
                                        @php $plans =getplans(); @endphp
                                        @if ($plans->count())
                                        @foreach($plans as $plan)
                                            <option value="{{ $plan->id }}">{{ $plan->features }}</option>
                                        @endforeach
                                        @endif
                                        
                                    </select>
                                    @if ($errors->has('plan'))
                                    <span class="help-block m-0">
                                            <strong>{{ $errors->first('plan') }}</strong>
                                        </span>
                                    @endif
                                    
                                </div> -->

                            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                {!! Form::email('email',$user->email, ['class' => 'form-control', 'placeholder'=>'Email Address', 'autocomplete'=>'off', 'id' => 'email', 'disabled'=>'disabled']) !!}
                                @if ($errors->has('email'))
                                    <span class="help-block m-0">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('phone') ? ' has-error' : '' }}">
                                {!! Form::number('phone',null, ['class' => 'form-control', 'id' => 'phone', 'placeholder'=>'Mobile Number']) !!}

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

                                <!-- <input type="checkbox" name="terms" value="terms"><p class="terms_text"> I have read & agree to the <a href="#">Terms of Service</a> & <a href="#">Privacy Policy</a>.</p> -->
                                <input class="term_policy" id="term_policy_block" name="terms" type="checkbox" value="terms">
                                <label for="term_policy_block">I have read & agree to the <a  target="_blank" href="{{ url('term') }}">Terms of Service</a> & <a  target="_blank" href="{{ url('privacy') }}">Privacy Policy</a>.</label>
                                @if ($errors->has('terms'))
                                    <span class="help-block m-0">
                                        <strong>{{ $errors->first('terms') }}</strong>
                                    </span>
                                @endif
                            </div>

                            <div class="form-group m-auto">
                                {!! Form::submit('Sign up', ['class' => 'form-control btn btn-primary login-button', 'id' => 'submit']) !!}
                            </div>
                        </form>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script type="text/javascript">
$(document).ready(function () {
    $flag = 1;
    /***** Personal Data Validation ****/
    $("#name").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_name").text("* You have to enter your first name!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_name").text("");

        }
    });
    $("#lastname").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_lastname").text("* You have to enter your last name!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_lastname").text("");
        }
    });
    $("#role").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_dob").text("* You have to enter your Date of Birth!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_dob").text("");
        }
    });

    /***** Email Validation ****/

    function validateEmail(sEmail) {
        var filter = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/;
        if (filter.test(sEmail)) {
            return true;
        } else {
            return false;
        }
    }
    $("#email").focusout(function () {
        var sEmail = $('#email').val();
        if ($.trim(sEmail).length == 0) {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_email").text("Please enter valid email address");

            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_email").text("");;
        } else {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_email").text("Invalid email address");
            e.preventDefault();
        }
    });
    /***** Login Data Validation ****/


    $("#phone").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_username").text("* You have to enter your Username!");
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_username").text("");
        }
    });
    $("#term_policy_block").focusout(function () {
        if ($(this).val() == '') {
            $(this).css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            
        } else {
            $(this).css("border-color", "#2eb82e");
            $('#submit').attr('disabled', false);
            $("#error_password").text("");
        }
    });
   
    /***+* Submit Validation ****/
    $("#submit").click(function () {
        if ($("#name").val() == '') {
            $("#name").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_name").text("* You have to enter your first name!");
        }
        if ($("#lastname").val() == '') {
            $("#lastname").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_lastname").text("* You have to enter your Last name!");
        }
        if ($("#email").val() == '') {
            $("#email").css("border-color", "#FF0000");
            $('#submit').attr('disabled', true);
            $("#error_email").text("* You have to enter your Email  !");
        }
       
        if ($("#role").val() == '') {
            $("#role").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_role").text("* Please select user role");
        }
        if ($("#phone").val() == '') {
            $("#phone").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_phone").text("* Please enter your phone !");
        }
        if ($("#term_policy_block").val() == '') {
            $("#phone").css("border-color", "#cd2d00");
            $('#submit').attr('disabled', true);
            $("#error_phone").text("* Please enter your phone !");
        }

    });


});
</script>