@extends('website.layouts.layout')
@section('content')
    <section class="pxp-hero vh-100" style="background-color: #fff0d9;">
        <div class="pxp-hero-caption">
            <div class="pxp-container">
                <div class="row pxp-pl-80 align-items-center justify-content-between">
                    <div class="col-12 col-xl-6 col-xxl-5">
                        <h1 style="font-size: 50px; line-height: 69px; letter-spacing: 0px;">
                            Create an account</span>
                        </h1>
                    </div>
                    <div class="pxp-hero-subtitle mt-3 mt-lg-4">
                       
                    </div>
                </div>
            </div>
        </div>
        <div class="pxp-hero-right-bg-card pxp-has-animation" style="background-color: #ff913f !important;"></div>
    </section>

    <section class="pxp-hero vh-100" >
        <div class="row align-items-center pxp-sign-hero-container">
            <div class="col-xl-5 pxp-column">
                <div class="pxp-sign-hero-fig text-center pb-100 pt-100">
                    <img src="images/signup-big-fig.png" alt="Sign up">
                    <h1 class="mt-4 mt-lg-5">Create an account</h1>
                </div>
            </div>
            <div class="col-xl-7 pxp-column pxp-is-light">
                <div class="pxp-sign-hero-form pb-100 pt-100">
                    <div class="row justify-content-center">
                        <div class="col-lg-6 col-xl-7 col-xxl-5">
                            <div class="pxp-sign-hero-form-content">
                                <h5 class="text-center">Sign Up</h5>
                                <form class="mt-4" action="{{ route('registration.save') }}" method="post" enctype="">
                                    @csrf
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" value="{{ old('firstname') }}">
                                        <label for="pxp-signup-page-email">First Name</label>
                                        <span class="fa fa-user-o"></span>
                                        <p style="color:red">
                                            @if ($errors->has('firstname'))
                                                {{ $errors->first('firstname') }}
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name" value="{{ old('lastname') }}">
                                        <label for="pxp-signup-page-email">Last Name</label>
                                        <span class="fa fa-user-o"></span>
                                        <p style="color:red">
                                            @if ($errors->has('lastname'))
                                                {{ $errors->first('lastname') }}
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control" name="email"
                                        id="email" placeholder="Email address" value="{{ old('email') }}">
                                        <label for="pxp-signup-page-email">Email address</label>
                                        <span class="fa fa-envelope-o"></span>
                                        <p style="color:red">
                                            @if ($errors->has('email'))
                                                {{ $errors->first('email') }}
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-floating mb-3">
                                        <select class="form-control" name="role" id="role">
                                            <!-- <option value="1">admin</option> -->
                                            <option value="2" selected>Student</option>
                                            <option value="3">Agent</option>
                                            <option value="4">University</option>
                                        </select> 
                                    </div>

                                    <div class="form-floating mb-3">
                                        <input type="password" class="form-control" id="password" 
                                        placeholder="Password" name="password" value="{{ old('password') }}">
                                        <label for="pxp-signup-page-password">Password</label>
                                        <span class="fa fa-lock" onclick="password()"></span>
                                        <p style="color:red">
                                            @if ($errors->has('password'))
                                                {{ $errors->first('password') }}
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-floating mb-3">
                                        <input type="password" class="form-control" id="confirmpassword" placeholder="Confirm Password" name="confirmpassword" 
                                        value="{{ old('confirmpassword') }}">
                                        <label for="pxp-signup-page-password">Confirm password</label>
                                        <span class="fa fa-lock" onclick="confirmpassword()"></span>
                                        <p style="color:red">
                                            @if ($errors->has('confirmpassword'))
                                                {{ $errors->first('confirmpassword') }}
                                            @endif
                                        </p>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="form-check mt-4">
                                            <input type="checkbox" class="form-check-input" name="policycheck" id="policycheck">
                                            <label class="form-check-label" for="policycheck">I have read and agree to the <a href="{{ route('termconditions')}}" target="_blank" style="display: inline; margin:0px">Terms and Conditions</a> and <a href="{{ route('privacypolicy')}}" target="_blank" style="display: inline; margin:0px">the Privacy and Cookies Policy*.</a>
                                            </label>
                                        </div>
                                    </div>

                                    <center>
                                        <button type="submit" class="btn rounded-pill pxp-sign-hero-form-cta">Create Account</button> 
                                    </center>

                                    <div class="mt-4 text-center pxp-sign-hero-form-small">
                                        Already have an account? <a href="{{ url('login') }}">Sign In</a>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('pagescriptcode')

<script type="text/javascript">
    function password() 
    {
        if('password' == $('#password').attr('type'))
        {
            $('#password').prop('type', 'text');
        }
        else
        {
            $('#password').prop('type', 'password');
        }
    }  

    function confirmpassword() 
    {
        if('password' == $('#confirmpassword').attr('type'))
        {
            $('#confirmpassword').prop('type', 'text');
        }
        else
        {
            $('#confirmpassword').prop('type', 'password');
        }
    }   
</script>

@endsection