@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-5">
      <div class="card card-form">
        <div class="card-body">

          <center>
            <h3 class="h1-responsive" style="font-weight:500;font-size:30px;color:#5DADE2">
              Reset Password
            </h3>
          </center>

            @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    
            <div class="alert p-1" role="alert" id="alert" style="display: none">                
            </div>

              <div class="row mt-3">
                  <div class="col-md-4">
                    <label>Reset Using :</label>
                  </div>
                  <div class="col-md-8">
                      <input type="radio" class="reset_option" id="reset_option_email" name="reset_option" value="EMAIL" 
                       onchange="reset_view(this.value)" checked>
                       <label class="" for="is_experienced_yes">Email</label>

                       <input type="radio" class="ml-3 reset_option" id="reset_option_contact_no" name="reset_option" value="CONTACT_NO"
                       onchange="reset_view(this.value)"
                       >
                       <label class="" for="is_experienced_no">Contact Number</label>
                 </div>
              </div>

                <div class="input-group mb-3 email_group">
                  <input type="text" class="form-control" name="reset_email" id="reset_email" placeholder="Enter Registered Email Address">
                  <div class="input-group-append">
                    <button class="btn btn-md btn-primary m-0 px-3 py-2 z-depth-0 waves-effect" type="button" name="reset_email_button" 
                      id="reset_email_button" onclick="sendForgetOtp('EMAIL')">GO</button>
                  </div>
                </div>

                <div class="input-group mb-3 contact_no_group" style="display: none">
                  <input type="text" class="form-control contact_no" name="reset_contact_no" id="reset_contact_no" placeholder="Enter Register Contact Number" >
                  <div class="input-group-append">
                    <button class="btn btn-md btn-primary m-0 px-3 py-2 z-depth-0 waves-effect" type="button" name="reset_email_button" 
                      id="reset_email_button" onclick="sendForgetOtp('CONTACT_NO')">GO</button>
                  </div>
                </div>

               <div class="otp_div">     
                  <input type="text" class="form-control contact_no" id="otp" name="otp" minlength="6" maxlength="6" required="" placeholder="Enter OTP" readonly=""> 
                <center>
                  <button class="btn btn-primary btn-md" type="button" id="otp_button" disabled="" 
                  onclick="checkOtp()">Submit</button>
                </center>
              </div>

        </div>
      </div>
    </div>  <!-- Col -->
  </div>

</div>

@endsection


@section('footer')
  <script type="text/javascript">
    function sendForgetOtp(type){

     $("#alert").removeClass("alert-success");
        $("#alert").removeClass("alert-danger");
        $.ajaxSetup({ headers: { 
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                }   
              });
        $.ajax({
              method: "POST",
              url:"{{ url('institute/sendForgetPasswordOtp') }}",
              data:formData={'type':type,'email_id':$('#reset_email').val(),'contact_no':$('#reset_contact_no').val()},
              success: function(data) 
              {   
                if(data.status==1)
                {    

                  if(type=="EMAIL"){
                    $('#reset_email').prop("readonly",true);
                    $('#reset_email_button').prop("disabled",true);
                  }else{
                    $('#reset_contact_no').prop("readonly",true);
                    $('#reset_contact_no_button').prop("disabled",true);
                  }

                  $('#otp').prop("readonly",false);
                  $('#otp_button').prop("disabled",false);

                  $("#alert").show();
                  $("#alert").addClass("alert-success");
                  $("#alert").html(data.message);
                  $("#alert").fadeOut(10000);

                }else{
                    $("#alert").show();
                    $("#alert").addClass("alert-danger");
                    $("#alert").html(data.message);
                    $("#alert").fadeOut(10000);
                }
              }
          });
    }

    function checkOtp(){
      $("#alert").removeClass("alert-success");
      $("#alert").removeClass("alert-danger");
      $.ajaxSetup({ headers: { 
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                }   
              });
      $.ajax({
            method: "POST",
            url:"{{ url('institute/checkForgetPasswordOTP') }}",
            data:formData={'email_id':$('#reset_email').val(),
                            'contact_no':$('#reset_contact_no').val(),
                            'otp':$('#otp').val()
                          },
            success: function(data) {       
              if(data.status==1){
                
                window.location.replace("{{ url('institute/set_new_password') }}")

              }else{
                 $("#alert").show();
                $("#alert").addClass("alert-danger");
                $("#alert").html(data.message);
                $("#alert").fadeOut(10000);
              }
            }
        });
    }


    function reset_view(value){
      if(value=="EMAIL"){
        $('.email_group').show();
        $('.contact_no_group').hide();
      }else{
        $('.email_group').hide();
        $('.contact_no_group').show();
      }
    }
  </script>
@endsection