{% extends "esign/base_login.html" %}
{% block content %}

<div class="d-flex justify-content-center align-items-center mt-5">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-6 offset-md-4 col-lg-4 offset-lg-4">
        <div class="login-wrapper">
          

          <!-- ✅ Success & general error messages -->
          {% if messages %}
            {% for message in messages %}
              {% if message.tags == 'success' %}
                <small  id="msgg" class="text-success fw-semibold d-block text-center mb-2">{{ message }}</small>
              {% elif message.tags == 'error'  %}
                <small  id="msgg" class="text-danger fw-semibold d-block text-center mb-2">{{ message }}</small>
              {% endif %}
            {% endfor %}
          {% endif %}
        <p id="otpStatus" class="text-center mt-2 fw-semibold small"></p>

         <form method="post" id="loginForm">
                      <input type="hidden" name="step" id="stepInput" value="{{ stepInput|default:1 }}">

  {% csrf_token %}
  <!-- Step 0 -->
  <div class="login-step {% if stepInput != 0 %}d-none{% endif %}">
    <div class="card p-4 shadow">
      <div class="row">
        <div class="col-sm-12 mb-3">
          <div class="d-flex justify-content-between">
            <div class="login-content-box">
              <h3 class="">Log in to EazeeSign</h3>
              <p class="text-muted">Enter your email to Log in.</p>
            </div>
            <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
              <i class="iconoir-log-in fs-26 px-1"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- Email Field -->
      <div class="mb-3" id="emailField">
        <label class="form-label">Email <span class="text-danger">*</span></label>
        <input
          type="email"
          id="email"
          name="email"
          class="form-control"
          value="{{ request.POST.email|default_if_none:'' }}"
          placeholder="Enter your email"
          required
            pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"

        >
      </div>
 <script>
document.addEventListener("DOMContentLoaded", function() {
    const loginForm = document.getElementById('loginForm');
    const stepInput = document.getElementById('stepInput');

    // Submit the form with the current step
    window.goToLoginStep = function(stepIndex) {
      console.log("stepIndex",stepIndex);
      stepIndex = stepIndex- 1;
        const steps = document.querySelectorAll('.login-step');
        if (!steps[stepIndex]) return;
      console.log(stepIndex,"stepIndex");
        // Validate inputs in the current step
        const inputs = steps[stepIndex].querySelectorAll("input");
        for (let input of inputs) {
            if (!input.checkValidity()) {
                input.reportValidity();
                return;
            }
                const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

              if (input.type === 'email') {
                    if (!emailPattern.test(input.value.trim())) {
                        valid = false;
                        alert("Please enter a valid email");
                        input.focus();
                        return;
                    }
                }
        }

        // Set step and submit form
        stepInput.value = stepIndex;
        loginForm.submit();
    };
    console.log("fds");
    // Toggle password visibility
    const togglePassword = document.getElementById("togglePassword");
    if(togglePassword){
        togglePassword.addEventListener("click", function(){
            const password = document.getElementById("password");
            password.type = password.type === "password" ? "text" : "password";
             this.classList.toggle("fa-eye");
            this.classList.toggle("fa-eye-slash");
        });
    }
     
});
</script>
<style>
#togglePassword {
    position: absolute;
    right: 15px;
    top: 38px;
    cursor: pointer;
    color: #6c757d; /* gray color */
    font-size: 1.1rem;
    user-select: none;
}
#togglePassword:hover {
    color: #495057; /* darker on hover */
}
</style>



      <!-- Login Button -->
      <div class="text-center mt-3">
        <button type="button" name="login" value="1" class="btn btn-primary w-100 mb-2" onclick="goToLoginStep(1)">
          Next
        </button>
        <p>
          <a href="{% url 'signup_basic' %}" class="btn btn-outline-secondary w-100">Sign up for free</a>
        </p>
      </div>

      <!-- Error box (for JS validation) -->
      <div id="formError" class="text-danger text-center fw-semibold py-1 d-none"></div>

    </div>
  </div>

<!-- Step 1 -->
<div class="login-step {% if stepInput != 2 %}d-none{% endif %}">
  <div class="card p-4 shadow">
    <div class="row">
      <div class="col-sm-12 mb-3">
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Log in</h3>
            <p class="text-muted"><button type="button" class="btn btn-ghost p-1 ps-0" onclick="goToLoginStep(0)"><i class="fas fa-arrow-left"></i></button>  {{email_prefill}}</p>
          </div>
          <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
            <i class="iconoir-lock fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- Password Field -->
    <div class="mb-3 position-relative" id="passwordField">
      <label class="form-label">Password <span class="text-danger">*</span></label>
      <input
        type="password"
        id="password"
        name="password"
        class="form-control"
        placeholder="Enter password" required 
         pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,}$"
      >
      <i
        class="fa fa-eye position-absolute"
        id="togglePassword" 
        style="right:15px; top:38px; cursor:pointer;"
      ></i>
        <small id="passwordError" class="text-danger d-block mt-1 fw-semibold"></small>

    </div>

    <!-- Login Button -->
    <div class="mt-3">
      <button type="button" name="login" value="1" class="btn btn-primary w-100 mb-3" onclick="goToLoginStep(2)">
        Login
      </button>
      <p>
      <a href="{% url 'forgot_password' %}?email={{email_prefill}}" class="fw-semibold">
          Reset Password
      </a>
      </p>

    </div>

    <!-- Error box (for JS validation) -->
    <div id="formError" class="text-danger text-center fw-semibold py-1 d-none"></div>

  </div>
  </div>

  <!-- Step 2 -->
  <div class="login-step {% if stepInput != 3 %}d-none{% endif %}">
  <div class="card p-4 shadow">
    <div class="row">
      <div class="col-sm-12 mb-3">
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Choose a delivery method</h3>
            <p class="text-muted">Select how you want to receive the code with your phone number ending in <strong>{{phone_prefill}}</strong></p>
          </div>
          <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
            <i class="iconoir-smartphone-device fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    
    <p>Delivery Method <span class="text-danger">*</span></p>
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="otpMethod" id="otpSms" value="sms" required>
        <label class="form-check-label" for="otpSms">Text Message</label>
    </div>

    <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="otpMethod" id="otpCall" value="call">
        <label class="form-check-label" for="otpCall">Phone Call</label>
    </div>

    <!-- Login Button -->
    <div class="mt-3">
      <button type="button" name="login" value="1" class="btn btn-primary w-100 mb-2" onclick="goToLoginStep(3)">
        Send Code
      </button>
      <p>
        <button type="button" class="btn btn-outline-secondary w-100" onclick="goToLoginStep(4)">Choose Another Method</button>
      </p>
    </div>

    <!-- Error box (for JS validation) -->
    <div id="formError" class="text-danger text-center fw-semibold py-1 d-none"></div>

  </div>
  </div>

  <!-- Step 3 -->
  <div class="login-step {% if stepInput != 4 %}d-none{% endif %}">
  <div class="card p-4 shadow">
    <div class="row">
      <div class="col-sm-12 mb-3">
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Verify with SMS</h3>
            <p class="text-muted">To verify your identity, enter the verification code sent to the phone number ending in <strong>{{phone_prefill}}</strong></p>
          </div>
          <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
            <i class="iconoir-message-text fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    
    <div class="mb-3">
        <label class="form-label">Verification Code <span class="text-danger">*</span></label>
        <input type="text" name="loginOtp" id="loginOtp"  pattern="\d{6}" class="form-control" maxlength="6" placeholder="123456" required>
      </div>

      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="userConsentCheckBox" required="">
        <label class="form-check-label mb-3" for="userConsentCheckBox">Remember this device</label>
      </div>

<p id="otpMessage" class="mt-2"></p>

  <button type="button" id="resendMobileOtpBtn" class="btn btn-sm btn-outline-secondary me-2">
    Resend code again
  </button>
  <!-- <button class="btn btn-sm btn-outline-secondary">Use a different phone number</button> -->
</p>

<div id="mobileOtpMessage"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#resendMobileOtpBtn').click(function() {
        // var phone = "{{ request.session.signup_phone|default:'' }}";  // session se phone
        var phone = "+918708114568";  // session se phone

        if (!phone) {
            $('#mobileOtpMessage').html('<div class="text-danger">Phone number not found in session.</div>');
            return;
        }

        $.ajax({
            url: "{% url 'send_mobile_otp' %}",
            method: "POST",
            data: {
                phone: phone,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            beforeSend: function() {
                $('#resendMobileOtpBtn').prop('disabled', true).text('Sending...');
            },
            success: function(response) {
                $('#resendMobileOtpBtn').prop('disabled', false).text('Resend code again');
                if (response.success) {
                    $('#mobileOtpMessage').html('<div class="text-success">'+response.message+'</div>');
                } else {
                    $('#mobileOtpMessage').html('<div class="text-danger">'+response.message+'</div>');
                }
            },
            error: function(xhr, status, error) {
                $('#resendMobileOtpBtn').prop('disabled', false).text('Resend code again');
                $('#mobileOtpMessage').html('<div class="text-danger">Something went wrong. Please try again.</div>');
            }
        });
    });
});
</script>
    <!-- Login Button -->
    <div class="mt-3">
      <button type="button" name="login" value="1" onclick="goToLoginStep(4)" class="btn btn-primary w-100 mb-2">
        Verify
      </button>
      
        <!-- <button type="button" class="btn btn-outline-secondary w-100" onclick="goToLoginStep(4)">Choose Another Method</button> -->
      
    </div>

    <!-- Error box (for JS validation) -->
    <div id="formError" class="text-danger text-center fw-semibold py-1 d-none"></div>

  </div>
  </div>

  <!-- Step 4 -->
  <div class="login-step d-none">
  <div class="card p-4 shadow">
    <div class="row">
      <div class="col-sm-12 mb-3">
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Choose Verification Method</h3>
            <p class="text-muted">Select how you want to verify.</p>
          </div>
          <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
            <i class="iconoir-message-text fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card p-3" role="button" onclick="goToLoginStep(2)">
      <div class="d-flex">
        <div class="phone-icon-box me-3">
          <i class="iconoir-phone fs-26 mt-1"></i>
        </div>
        <div class="phone-content-box">
          <h3 class="mb-0">Phone</h3>
          <p class="mb-0">Use your phone number ending in <strong>{{phone_prefill}}</strong></p>
        </div>
      </div>
    </div>
    <div class="card p-3 mb-0" role="button" onclick="goToLoginStep(5)">
      <div class="d-flex">
        <div class="email-icon-box me-3">
          <i class="iconoir-mail fs-26"></i>
        </div>
        <div class="email-content-box">
          <h3 class="mb-0">Email</h3>
          <p class="mb-0">Use your <strong>di************as@rmail.team</strong> email</p>
        </div>
      </div>
    </div>

  </div>
  </div>

  <!-- Step 5 -->
  <div class="login-step d-none">
  <div class="card p-4 shadow">
    <div class="row">
      <div class="col-sm-12 mb-3">
        <div class="d-flex justify-content-between">
          <div class="login-content-box">
            <h3 class="">Get code from your email</h3>
            <p class="text-muted">Enter the code from your email <strong>dinesh.siwas@rmail.team</strong></p>
          </div>
          <div class="login-icon-box border rounded-circle ms-3 p-2 d-flex justify-content-center align-items-center">
            <i class="iconoir-mail fs-26 px-1"></i>
          </div>
        </div>
      </div>
    </div>
    
    <div class="mb-3">
        <label class="form-label">Verification Code <span class="text-danger">*</span></label>
        <input type="text" id="loginOtpEmail" class="form-control" maxlength="6" placeholder="123456">
      </div>

      <button type="button" class="btn btn-ghost">Resend Code</button>

    <!-- Login Button -->
    <div class="mt-3">
      <button type="button" name="login" value="1" class="btn btn-primary w-100 mb-2">
        Verify
      </button>

        <button type="button" class="btn btn-outline-secondary w-100" onclick="goToLoginStep(4)">Choose Another Method</button>
      
    </div>

    <!-- Error box (for JS validation) -->
    <div id="formError" class="text-danger text-center fw-semibold py-1 d-none"></div>

  </div>
  </div>

</form>

        
        </div>
      </div>
    </div>
  </div>
</div>


{% endblock %}