{{-- <iframe src="https://datatrained.org/app/download-certificate" frameborder="0" style="width:100%;height:100vh;"></iframe> --}}

<section class="Connect-with-Career">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-5 col-md-6 col-flex order-2">
        <div class="Connect-heading">
          <h1>Download Your Certificate</h1>

        </div>
        <div class="contact-form" id="cert-con">
          <div class="query-form">

            <form>
              <p><i>Please provide your register email address *</i></p>
              <small id="error-msg1" style="color: red;"></small>
              <div class="form-group col-md-12">
                <label for="cid">Your Email Address</label>
                <input type="email" class="form-control" name="cid" id="cid" required autofocus placeholder="Your Email Address">
              </div>
              <div class="form-group col-md-12 d-none" id="n11">
                <label for="eid">Please provide OTP sent to your email</label>
                <input type="text" class="form-control" name="eid" id="eid" required autofocus placeholder="Your OTP">
              </div>

              <button type="button" id="next1">Submit</button>
              <button type="button" class="d-none" id="next2">Submit</button>
            </form>
          </div>
        </div>
      </div>
      <div class="offset-lg-1 col-lg-6 col-md-6 order-1">
        <div class="coach-img">
          <img data-lazysrc="{{asset('images/verify-certificate.png')}}" alt="certificate ">
        </div>
      </div>
    </div>
  </div>
</section>

@section('scripts')
<script>
  // Step One Next
  $("#next1").click(function() {
    var id = document.getElementById('cid').value;

    if (id) {
      $.get("{{ url('api/send-certificate-otp') }}", {
          id: id
        },
        function(data, status) {
          // console.log(data)
          if (data.status == 200) {
            // console.log(100)
            $('#n11').removeClass('d-none');
            $('#next1').addClass('d-none');
            $('#next2').removeClass('d-none');
          } else if (data.status == 404) {
            document.getElementById('error-msg1').innerText = "Enter your registered email address"
          } else {

          }
        }
      );
    } else {
      document.getElementById('error-msg1').innerText = "Enter a valid email address"
    }
  });


  // Step Two Next
  $("#next2").click(function() {
    var cid = document.getElementById('cid').value;
    var eid = document.getElementById('eid').value;

    if (cid && eid) {
      // $.get("{{ url('api/check-certificate-download-otp') }}", {
      //     cid: cid,
      //     eid: eid
      //   },
      //   function(data, status) {
      //     // console.log(data)
      //     if (data.status == 200) {
      //       document.getElementById("cert-con").innerHTML = data.msg;
      //     } else if (data.status == 500) {
      //       document.getElementById('error-msg1').innerText = "OTP did not match"
      //     } else {}
      //   }
      // );


      axios.get("{{ url('api/check-certificate-download-otp') }}", {
          params: {
            cid: cid,
          eid: eid
          }
        })
        .then(function(response) {
          console.log(response);
          if (response.data.status == 200) {
            document.getElementById("cert-con").innerHTML = response.data.msg;
          } else if (response.data.status == 500) {
            document.getElementById('error-msg1').innerText = "OTP did not match"
          } else {}
        })
        .catch(function(error) {
          console.log(error);
        })
    } else {
      document.getElementById('error-msg1').innerText = "All fields mandatory"
    }
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
@endsection