@extends('layout.master')

@section('content')

  <div class="container res mask pb-5" style="padding-top:5%;">

    <div class="row d-flex justify-content-center">
      <div class="col-md-4">

      <div class="card  card-form">
        <div class="card-body" >

            <h4 class="text-center mt-2" style="color:#5DADE2"><b>Verify OTP</b></h4>

            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
              @if(Session::has('alert-' . $msg))
                <div class="alert alert-{{ $msg }}" role="alert">
                 {{ Session::get('alert-' . $msg) }} 
                </div>
                {{ session()->forget('alert-' . $msg) }}
              @endif
            @endforeach    

            <form action="{{ url('institute/verify_otp') }}" method="post" class="mt-4">
              @csrf

            @if(Session::has('contact_no'))  

              <div class="md-form form-sm">
                  <input type="text" id="contact_no" name="contact_no" class="form-control form-control-sm" required  value="{{ Session::get('contact_no') }}" readonly="">
                  <label for="contact_no" class="text-primary"><b>Contact Number </b></label>
              </div>

              <div class="md-form ">
                  <input type="text" id="otp" name="otp" class="form-control form-control-sm contact_no" minlength="6" maxlength="6" required >
                  <label for="otp" class="text-primary d-flex justify-content-between" style="width: 100%">
                    <div><b>SMS OTP </b></div>
                    <div><a href="#" class="text-danger" onclick="resendOtp('REGISTER','SMS',$('#contact_no').val())"><b>Resend</b></a></div>
                  </label>
              </div>
              
            @endif    

            @if(Session::has('email_id'))  
              <div class="md-form form-sm">
                  <input type="text" id="email_id" name="email_id" class="form-control form-control-sm" required  value="{{ Session::get('email_id') }}" readonly="">
                  <label for="email_id" class="text-primary"><b>Email Address </b></label>
              </div>
              <div class="md-form form-sm">
                  <input type="text" id="emailOtp" name="emailOtp" class="form-control form-control-sm contact_no" minlength="6" maxlength="6" required >
                  <label for="emailOtp" class="text-primary d-flex justify-content-between" style="width: 100%">
                    <div><b>Email OTP </b></div>
                    <div><a href="#" class="text-danger" onclick="resendOtp('REGISTER','EMAIL',$('#email_id').val())"><b>Resend</b></a></div>
                  </label>
              </div>
            @endif  

              <div class="row mt-2 d-flex justify-content-center">
                <div class="col-md-6">
                   <button type="submit" class="btn btn-info btn-md btn-rounded btn-block waves-effect z-depth-0">Verify</button>
                </div>
               </div> 
            </form>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('footer')
  <script type="text/javascript">
      function resendOtp(where,type,address){
        $.ajaxSetup({
          headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({ 
              type:"POST",
              url: "{{ url('institute/resendOtp') }}",
              data: {'where':where,'type':type,'address':address},
              success: function(resp){
                if(resp.status==1)
                {
                  alert(resp.message);
                }
              },
              error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert("Error "+err.exception);
              }
          });  
      }
  </script>
@endsection