@extends('layouts.app')

@section('content')
<style type="text/css">

.error{
  color: red;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mp-pin-screen .col-md-4 .card {
    width: 100%;
    border: none;
}
.mp-pin-screen .col-md-4 {
    background: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
 .mp-pin-resend-link {
    color: #92278F;
    font-weight:bold;
    
}

</style>


<div class="main-outer">
    <div class="row justify-content-center mp-pin-screen">
         <div class="col-md-8 p-0">
      <div class="brand-img-outer">

         
           <img src="{{ env('ASSET_URL', '') }}/assets/img/brand-img.png">

      
      </div>
    </div>
        <div class="col-md-4 p-0">
            <div class="card  p-4">
                <h1 class="text-center main-heading mb-0" id="headingpoll">Enter PIN</h1>
            

                <div class="card-body">
                     
                @if ($message = Session::get('error'))
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>    
                    <strong>{{ $message }}</strong>
                </div>
                @endif
                
                  @if(session()->has('fsuccess'))
                    <div class="alert alert-success" role="alert">
                      <strong></strong> {{ session()->get('fsuccess') }}
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    @endif
               

                    <p class="mb-0 text-center">We have send you a PIN on your email address.</p>
                    <p class="mb-5 text-center">Please enter the PIN to verify.</p>


                         <div class="future-img" >
                                   
                            </div>
                    <form method="POST"  id = "register_formss" name = "register_formss" action="{{ route('pin.verify') }}">
                        @csrf

                        <div class="form-group">
<!--                                 <label class="form-control-placeholder">Pin</label>
 -->                                
                                <input placeholder = "Enter PIN" id="pin"  name="pin" type="number" class="form-control" name="pin" value="{{ old('pin') }}"  >
                              
                                <input id="email" type="hidden" class="form-control" name="email" value="{{ $user->email }}" required autocomplete="email" autofocus>
                                <input id="user_id" type="hidden" class="form-control" name="user_id" value="{{ $user->id }}" required autocomplete="user_id" autofocus>
                                 <input id="forget" type="hidden" class="form-control" name="forget" value="forget" autofocus>

                            <!--     @error('pin')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror -->
                           
                        </div>
                          <span class="error"></span>

                        <div class="form-group ">
                                <button id="tan" type="submit" class="purple-btn w-100">
                                    {{ __('Verify') }}
                                </button>

                              
                        </div>
                          <div class="text-center"><a class="mp-pin-resend-link" style="text-decoration:none;" href="{{ URL('resendPin/'.$user->id )}}">Resend Pin</a></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>


<script type="text/javascript">




  
</script>