@extends('layouts.app')
@section('title', 'Account Setup')
@section('content')
<section class="content">
  <div class="section-area">
      <div class="title">
          <span>Account Verification</span>
      </div>
      <div class="info">
          <span>To raise your account limits please verify your identity and address information.</span>
      </div>
      <div class="card-info-section">
          <div class="row">
              <div class="col-md-6">
                  <div class="setting-area">
                      <div class="setting-single">
                          <div class="setting-title">
                              <div class="row align-items-center">
                                  <div class="col-md-8"><span>Email Address</span></div>
                                  <div class="col-md-4 text-right">
                                                                          <a id="unverify1" class="declined">Unverified</a>									                                    
                                  </div>
                              </div>
                          </div>
                          <div class="setting-info">
                            @if(!Auth::user()->email_verified_at)
                              <span id="verify1-hide">
                                To raise your account limits please verify your identity and address information.
                              </span>
                              <div class="success-message" id="verify1-open-last" style="display: none">
                                  <i class="las la-check-double"></i>
                                  <span>Your email address has been successfully verified.</span>
                              </div>
                              <div id="verify1-open" style="display: none">
                                  <div class="edit-click-section">
                                      <div class="edit-click-single">
                                          <label>Email Address</label>
                                          <input class="form-control" type="text">
                                      </div>
                                      <div id="verify1-open1" style="display: none;">
                                          <div class="edit-click-single">
                                              <label>OTP sent to Email</label>
                                              <span class="for-resend-otp">Resend?</span>
                                          </div>
                                          <div class="edit-click-single">
                                              <label>Enter OTP:</label>
                                              <input class="form-control" type="text">
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="card-action-area" id="hide1-all">
                                  <div class="row">
                                      <div class="col-md-6">
                                      </div>
                                      <div class="col-md-6">
                                          <div class="main-btn">
                                              <a id="verify1-btn"><button>Verify Now</button></a>
                                              <a id="verify1-btn1" style="display: none;"><button>Continue</button></a>
                                              <a id="verify1-btn2" style="display: none;"><button>Submit</button></a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              @else
                                <input class="form-control" type="text" value="{{Auth::user()->email}}" readonly>
                              @endif
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="setting-area">
                      <div class="setting-single">
                          <div class="setting-title">
                              <div class="row align-items-center">
                                  <div class="col-md-8"><span>Phone Number</span></div>
                                  <div class="col-md-4 text-right">                                                                            <a id="unverify1" class="declined">Unverified</a>									                                  </div>
                              </div>
                          </div>
                          <div class="setting-info">                                                          <span id="verify-hide">                               Your phone number verification is pending                              </span>							                                							      <input class="form-control" type="text" value="" readonly>							                            </div>
                      </div>
                  </div>
              </div>
              <div class="col-md-12">
                  <div class="setting-area">
                      <div class="setting-single">
                          <div class="setting-title">
                              <div class="row align-items-center">
                                  <div class="col-md-8"><span>Address</span></div>
                                  <div class="col-md-4 text-right">                                      									        <a id="unverify2" class="declined">Unverified</a>									                                        <!--<a id="verify2" class="declined" style="display: none">Pending</a>-->
                                  </div>
                              </div>
                          </div>
                          <div class="setting-info">                                                           							  							  							  							  							   							                            </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>
@endsection
@section('extra_scripts')
  <script>
    $("#verify-btn").click(function(){
      $("#verify-btn1").show();
      $("#verify-btn2").hide();
      $(this).hide();
      $("#verify-open").show();
      $("#verify-hide").hide();
    });
    $("#verify-btn1").click(function(){
      $("#verify-open1").show();
      $("#verify-btn2").show();
      $(this).hide();
    });
    $("#verify-btn2").click(function(){
      $("#hide-all").hide();
      $("#verify-open").hide();
      $("#verify-open-last").show();
      $("#verify").show();
      $("#unverify").hide();
    });

    $("#verify1-btn").click(function(){
      $("#verify1-btn1").show();
      $("#verify1-btn2").hide();
      $(this).hide();
      $("#verify1-open").show();
      $("#verify1-hide").hide();
    });
    $("#verify1-btn1").click(function(){
      $("#verify1-open1").show();
      $("#verify1-btn2").show();
      $(this).hide();
    });
    $("#verify1-btn2").click(function(){
      $("#hide1-all").hide();
      $("#verify1-open").hide();
      $("#verify1-open-last").show();
      $("#verify1").show();
      $("#unverify1").hide();
    });

    $("#verify2-btn").click(function(){
      $("#verify2-btn2").show();
      $(this).hide();
      $("#verify2-open").show();
      $("#verify2-hide").hide();
    });
    // $("#verify2-btn2").click(function(){
    //   $("#hide2-all").hide();
    //   $("#verify2-open").hide();
    //   $("#verify2-open-last").show();
    //   $("#verify2").show();
    //   $("#unverify2").hide();
    // });
  </script>
@endsection