@extends('front-end.layout_signup')

@section('content')
    <div ng-controller="SignUpController" class="h-100 container">
        <div class="row h-100">
            <div class="col-md-6">
            	<div class="right-cont h-100">
                    <div class="logo">
                        <a href="{{ url('/') }}" />
                            <img src="{{ url('assets/images/logo_red.png') }}" alt="">
                        </a>
                    </div>
                    <p>
                        Empowering Athletes and Coaches with Verified Sports Credentials

                    </p>   
                </div>
            </div>
            <div class="col-md-6 ng-cloak col-align-middle">
            	<div class="register-cont" >
                    <form name="SignUpForm" ng-submit="verifyOTP(SignUpForm.$valid)" novalidate="novalidate" autocomplete="off">
                		<h1>Sign Up</h1>

                        <div class="alert alert-danger" ng-if="error_message">
                            @{{ error_message }}
                        </div>
                		
                        <div class="radio-cont form-group">
                             <label>Register As</label><br>
                			 <input type="radio" ng-model="formData.reg_type" ng-value="1"> Parent/Guardian &nbsp;&nbsp; <input type="radio" ng-model="formData.reg_type" ng-value="2"> Player 
                		</div>

                		<div class="form-group">
                			<label>Your Name</label>
                			<input type="text" class="form-control" ng-model="formData.name" required />
                		</div>

                		<div class="form-group">
                			<label>Mobile Number</label>
                			<input type="text" class="form-control" ng-model="formData.mobile_number" ng-pattern="/^[0-9]{10}$/" ng-pattern-err-type="PatternMobile" required />
                		</div>
                		
                        <div class="btn-cont" ng-if="!otp_sent">
                			<button type="button" class="btn theme-btn full" ng-disabled="!(formData.name && formData.mobile_number)" ng-click="sendSMS(1)">Get OTP <span ng-if="otp_sending" class="spinner-grow spinner-grow-sm" role="status"></span></button>
                		</div>
                        
                        <div ng-if="otp_sent">
                            <div class="form-group">
                                <label>OTP</label>
                                <input type="text" class="form-control" ng-model="formData.otp" required />
                            </div> 
                            <button type="submit" class="btn theme-btn full">Verify OTP <span ng-if="verifying" class="spinner-grow spinner-grow-sm" role="status"></span> </button>
                        </div>

                        <div ng-if="timer_start" style="text-align: center; padding: 20px; color: #888;">
                            <div ng-if="otp_timer > 0">Resend in @{{ otp_timer }} seconds</div>
                            <a ng-if="show_resend" href="" ng-click="sendSMS(2)">Resend OTP</a>
                        </div>

                        <div class="bottom-cont" style="margin-top: 10px; text-align: center;">
                            Already have an account? <a href="{{url('/login')}}"> Login</a>
                        </div>

                		<p class="text-center" style="margin-top: 30px">
                			By signing up you agree to our <a href="#">Terms & Conditions</a> and <a href="#">Privacy Policy</a>
                		</p>
                    </form>
            	</div>
            </div>
        </div>
    </div>
@endsection

@section('footer_scripts')

@endsection