@include('layout.head')
<div id="page-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="outer-container">
          <h2>Forgot Password</h2>
          <div class="form-container">
            <h4 class="form-title">Can't log in?</h4>
            <!--===== form 01 =====-->
            <div id="form01">
              <form>
                <p class="desc">We'll send a recovery link to</p>
                <input class="form-control" id="emailAddress" name="email" type="email" placeholder="Enter email address" />
                <span class="error red-text">Email address does not exist in system. Please enter correct email address and try again</span>
                <span class="error green-text inprocess">Request is in process. Please Wait!</span>
                <div class="formsubmit-div">
                  <button class="btn btn-formSubmit recovery-btn" type="button">Send recovery link</button>
                </div>
                <div class="return-link">
                  <a href="login">Return to log in</a>
                </div>
              </form>
            </div>
            <!--===== ends form 01 =====-->
            <!--===== form 02 =====-->
            <div id="form02">
              <p class="link-desc">We sent a recovery link to you at</p>
              <p class="link-title" id="link-title"></p>
              <div class="return-link">
                <a href="login">Return to log in</a><span class="seperator">.</span><a href="javascript:;" class="recovery-btn">Resend recovery link</a>
              </div>
            </div>
            <!--===== ends form 02 =====-->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container-fluid -->
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $(".red-text").hide();
    $(".inprocess").hide();
  });
    $('.recovery-btn').click(function(e) {
      
      $(".red-text").hide();
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
        });
        e.preventDefault();
        var emailAddress = document.getElementById('emailAddress').value;
        if(emailAddress != ""){
            $(".recovery-btn").attr("disabled", true);
            $.ajax({
                type: "POST",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: "{{ url('check-email-exists')}}", // This is what I have updated
                data: { 'emailAddress': emailAddress },
                datatype: 'json',
                beforeSend: function(){
                // Show image container
                    console.log("before send");
                    $(".inprocess").show();
                },
                success: function (data) {
                  $(".inprocess").hide();
                    console.log("Return success");
                    // location.reload();
                    $("#form01").hide();
                    // $(".link-title").val(emailAddress);
                    document.getElementById('link-title').innerHTML = emailAddress;
                    $("#form02").show();
                },
                error: function (data) {
                  $(".inprocess").hide();
                  console.log("Return fail");
                  console.log(data);
                  $(".red-text").show();
                  $(".recovery-btn").attr("disabled", false);
                  $("#build-btn").attr("disabled", false);
                  $("#loader").hide();
                },
                complete:function(data){
                    // Hide image container
                }

            });
        }else{
            alert('Email Address required');
        }
    });
</script>
@include('layout.footer')