@extends('front-end.layout_signup')

@section('content')
    <div ng-controller="SignInController" ng-init="user_types = {{$user_types}}; login_type = '{{$login_type}}'" 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" >
                    @if($login_type == 'email')
                        <form name="SignInForm" ng-submit="loginByEmail(SignUpForm.$valid)" novalidate="novalidate" autocomplete="off">
                    @else
                        <form name="SignInForm" ng-submit="verifyOTP(SignUpForm.$valid)" novalidate="novalidate" autocomplete="off">
                    @endif
                		<h1>Sign In</h1>

                        <div class="alert alert-danger" ng-if="error_message">
                            @{{ error_message }}
                        </div>
                		  
                        <!-- <div style="text-align: center;">
                            <a href="{{ url('/sign-in') }}" 
                               style="border-bottom: {{ $login_type == 'mobile' ? '3px solid blue' : '0px' }}; color: black; font-size: 20px; font-weight: bold; margin-right: 15px; text-decoration: none;">
                               Mobile
                            </a>

                            <a href="{{ url('/sign-in-email') }}" 
                               style="border-bottom: {{ $login_type == 'email' ? '3px solid blue' : '0px' }};  color: black; font-size: 20px; font-weight: bold; margin-left: 15px; text-decoration: none;">
                               Email
                            </a>
                        </div> -->

                        <div class="form-group">
                            <label>Login As</label>
                            <select ng-model="formData.login_as" class="form-control">
                                <option value="">Select</option>
                                <option ng-repeat="type in user_types" value="@{{type.id}}">@{{type.type}}</option>
                            </select>
                        </div>

                		<div class="form-group" ng-if="login_type == 'mobile'">
                			<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="form-group" ng-if="login_type == 'email'">
                            <label>Email</label>
                            <input type="text" class="form-control" ng-model="formData.email" required />
                        </div>

                        <div class="form-group" ng-if="login_type == 'email'">
                            <label>Password</label>
                            <input type="password" class="form-control" ng-model="formData.password" required />
                        </div>
                		
                        <div class="btn-cont" ng-if="!otp_sent && login_type == 'mobile'">
                			<button type="button" class="btn theme-btn full" ng-disabled="!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 class="btn-cont" ng-if="login_type == 'email'">
                            <button type="submit" class="btn theme-btn full">Submit <span ng-if="submitting" class="spinner-grow spinner-grow-sm" role="status"></span></button>
                        </div>

                        <div ng-if="otp_sent && login_type == 'mobile'">
                            <div class="form-group">
                                <label>OTP</label>
                                <input type="text" class="form-control" ng-model="formData.otp" />
                            </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 && login_type == 'mobile'" 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: 30px; text-align: center;">
                			<a href="{{url('/sign-up')}}">Not a user? Sign Up</a>
                		</div>

                		<p class="text-center" style="margin-top: 30px">
                			By signing in you agree to out <a href="#">terms & conditions</a> and <a href="#">privacy policy</a>
                		</p>
                    </form>
            	</div>
            </div>
        </div>
    </div>
@endsection

@section('footer_scripts')

@endsection