@extends('layout')
  
@section('content')

@if(session('otp_success'))
    <div class="custom-modal" id="successAlert">
        <div class="modal-content">
            <span class="close-btn" onclick="closeCustomAlert('successAlert')">&times;</span>
            <p class="success-message">{{ session('otp_success') }}</p>
        </div>
    </div>
@endif

@if(session('otp_error'))
    <div class="custom-modal" id="errorAlert">
        <div class="modal-content">
            <span class="close-btn" onclick="closeCustomAlert('errorAlert')">&times;</span>
            <p class="error-message">{{ session('otp_error') }}</p>
        </div>
    </div>
@endif


<main class="login-form">
  <div class="cotainer">
      <div class="row justify-content-center">
          <div class="col-md-8">
              <div class="card">
                  <div class="card-header">Enter The Otp sent to your Email</div>
                  <div class="card-body">
  
                      <form action="{{ route('register2.verifyotp') }}" method="POST">
                          @csrf
                          <div class="form-group row">
                              <label for="otp" class="col-md-4 col-form-label text-md-right">Enter The Otp Sent: </label>
                              <div class="col-md-6">
                                  <input type="text" id="otp" class="form-control" name="otp" required>
                                  @if ($errors->has('otp'))
                                      <span class="text-danger">{{ $errors->first('otp') }}</span>
                                  @endif
                              </div>
                          </div>
                          <div class="col-md-6 offset-md-4">
                              <button type="submit" class="btn btn-primary">
                                  Verify OTP
                              </button>
                          </div>
                      </form>
                        
                  </div>
              </div>
          </div>
      </div>
  </div>
</main>
<script>
    function showCustomAlert(id) {
        document.getElementById(id).style.display = 'flex';
    }

    // Function to close the custom alert modal
    function closeCustomAlert(id) {
        document.getElementById(id).style.display = 'none';
    }

    // Automatically close the alert after 5 seconds (adjust as needed)
    setTimeout(function() {
        closeCustomAlert('successAlert');
        closeCustomAlert('errorAlert');
    }, 5000);

    // Trigger the modal based on session data
@if(session('otp_success'))
    showCustomAlert('successAlert');
@endif

@if(session('otp_error'))
    showCustomAlert('errorAlert');
@endif
</script>

@endsection