@extends('jobseeker.wizard.layout')

@section('wizard-step')
<div class="step-header" style="margin-bottom: 2rem;">
  <span class="section-badge" style="margin-bottom: 0.5rem;"><i class="fas fa-shield-alt"></i> UIDAI Compliance • Verhoeff Algorithm</span>
  <h2 style="font-size: 1.5rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.5rem;">
    Step 1: Aadhaar & Identity Verification
  </h2>
  <p style="color: var(--text-light); font-size: 0.92rem; margin: 0;">
    Under the Maharashtra Employment Service framework, candidate identity is validated using the mathematical Verhoeff checksum. In compliance with UIDAI security mandates, your full Aadhaar number is never stored in plain text.
  </p>
</div>

@if($profile->aadhaar_verified_at && $profile->aadhaar_last4)
  <!-- Already Verified State Banner -->
  <div style="background: rgba(16, 185, 129, 0.08); border: 1px solid var(--success); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
    <div style="display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
        <i class="fas fa-check"></i>
      </div>
      <div>
        <h4 style="margin: 0; font-size: 1.05rem; color: var(--text-heading);">Aadhaar Identity Verified</h4>
        <p style="margin: 0.25rem 0 0; color: var(--text-light); font-size: 0.88rem;">
          Masked Aadhaar: <strong style="color: var(--text-heading);">XXXX-XXXX-{{ $profile->aadhaar_last4 }}</strong> 
          • Verified on {{ $profile->aadhaar_verified_at->format('d M Y, h:i A') }}
        </p>
      </div>
    </div>
    <a href="{{ route('jobseeker.wizard.step', 2) }}" class="btn btn-primary btn-sm">
      Proceed to Step 2 <i class="fas fa-arrow-right"></i>
    </a>
  </div>
@endif

<form action="{{ route('jobseeker.wizard.save-step1') }}" method="POST" class="wizard-step-form" id="step1Form">
  @csrf

  <!-- Statutory UIDAI Consent Box -->
  <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.75rem;">
    <div style="display: flex; align-items: flex-start; gap: 0.85rem;">
      <input type="checkbox" name="aadhaar_consent" id="aadhaar_consent" value="1" {{ old('aadhaar_consent') ? 'checked' : '' }} required style="margin-top: 0.25rem; width: 18px; height: 18px; accent-color: var(--accent);">
      <label for="aadhaar_consent" style="font-size: 0.85rem; color: var(--text-body); line-height: 1.5; margin: 0; cursor: pointer;">
        <strong>Voluntary Consent under Aadhaar Act, 2016:</strong> I hereby give my voluntary consent to Zhelhire Consultancy Pvt Ltd and the Maharashtra Employment Exchange to use my 12-digit Aadhaar number for demographic authentication. I understand that only a one-way cryptographic SHA-256 hash and the last 4 digits will be retained for duplicate prevention and registration card issuance.
      </label>
    </div>
    @error('aadhaar_consent')
      <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.5rem; font-weight: 500;">
        <i class="fas fa-exclamation-circle"></i> {{ $message }}
      </span>
    @enderror
  </div>

  <!-- Aadhaar Number Input -->
  <div class="form-group" style="margin-bottom: 1.75rem;">
    <label for="aadhaar_number" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
      12-Digit Aadhaar Number <span style="color: #ef4444;">*</span>
    </label>
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
      <div style="position: relative; flex: 1; min-width: 250px;">
        <input type="text" 
               name="aadhaar_number" 
               id="aadhaar_number" 
               class="form-control" 
               placeholder="2345 6789 0128" 
               maxlength="14" 
               value="{{ old('aadhaar_number') }}" 
               required
               style="font-family: monospace; font-size: 1.1rem; letter-spacing: 2px;">
        <span id="aadhaarValidationStatus" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; display: none;"></span>
      </div>
      <button type="button" id="sendOtpBtn" class="btn btn-outline" style="white-space: nowrap;">
        <i class="fas fa-paper-plane"></i> <span id="sendOtpBtnText">Send Mobile OTP</span>
      </button>
    </div>
    <span style="font-size: 0.8rem; color: var(--text-light); margin-top: 0.35rem; display: block;">
      Must not begin with 0 or 1. Validated via Verhoeff dihedral group algorithm in real-time.
    </span>
    @error('aadhaar_number')
      <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.4rem; font-weight: 500;">
        <i class="fas fa-exclamation-circle"></i> {{ $message }}
      </span>
    @enderror
  </div>

  <!-- OTP Verification Input Box (Revealed when OTP is requested) -->
  <div id="otpSection" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
      <label for="otp_code" style="font-weight: 600; color: var(--text-heading); margin: 0; font-size: 0.95rem;">
        Enter 6-Digit Mobile Verification OTP <span style="color: #ef4444;">*</span>
      </label>
      <span id="otpTimerNotice" style="font-size: 0.82rem; color: var(--text-light);">
        <i class="fas fa-clock"></i> Expires in 5 minutes
      </span>
    </div>

    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
      <input type="text" 
             name="otp_code" 
             id="otp_code" 
             class="form-control" 
             placeholder="••••••" 
             maxlength="6" 
             value="{{ old('otp_code') }}" 
             style="max-width: 200px; text-align: center; letter-spacing: 6px; font-size: 1.25rem; font-weight: 700;">
      <div id="otpFeedback" style="font-size: 0.85rem; color: var(--text-light);">
        (Demo mode: Test OTP is <strong>123456</strong>)
      </div>
    </div>
    @error('otp_code')
      <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.4rem; font-weight: 500;">
        <i class="fas fa-exclamation-circle"></i> {{ $message }}
      </span>
    @enderror
  </div>

  <!-- Form Actions -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; border-top: 1px solid var(--border-light); padding-top: 1.5rem; flex-wrap: wrap; gap: 1rem;">
    <a href="{{ route('jobseeker.dashboard') }}" class="btn btn-outline">
      <i class="fas fa-arrow-left"></i> Cancel
    </a>
    <button type="submit" class="btn btn-primary" id="submitStep1Btn">
      Verify Aadhaar & Continue <i class="fas fa-arrow-right"></i>
    </button>
  </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const aadhaarInput = document.getElementById('aadhaar_number');
  const sendOtpBtn = document.getElementById('sendOtpBtn');
  const sendOtpBtnText = document.getElementById('sendOtpBtnText');
  const otpFeedback = document.getElementById('otpFeedback');
  const validationStatus = document.getElementById('aadhaarValidationStatus');

  // Format Aadhaar with spaces: 1234 5678 9012
  if (aadhaarInput) {
    aadhaarInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\D/g, '');
      if (value.length > 12) value = value.slice(0, 12);
      
      let formatted = '';
      for (let i = 0; i < value.length; i++) {
        if (i > 0 && i % 4 === 0) formatted += ' ';
        formatted += value[i];
      }
      e.target.value = formatted;
    });
  }

  // Send OTP AJAX
  if (sendOtpBtn) {
    let countdownTimer = null;

    sendOtpBtn.addEventListener('click', function() {
      const consentChecked = document.getElementById('aadhaar_consent').checked;
      if (!consentChecked) {
        alert('Please check the voluntary UIDAI consent box before requesting OTP.');
        document.getElementById('aadhaar_consent').focus();
        return;
      }

      const aadhaarRaw = aadhaarInput.value.replace(/\s+/g, '');
      if (aadhaarRaw.length !== 12) {
        alert('Please enter a full 12-digit Aadhaar number.');
        aadhaarInput.focus();
        return;
      }

      sendOtpBtn.disabled = true;
      sendOtpBtnText.textContent = 'Sending OTP...';

      fetch('{{ route("jobseeker.wizard.send-otp") }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
          'Accept': 'application/json'
        },
        body: JSON.stringify({ aadhaar_number: aadhaarRaw })
      })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          if (typeof window.showToast === 'function') {
            window.showToast(data.message, 'success');
          }
          otpFeedback.innerHTML = `<span style="color: var(--success); font-weight: 600;"><i class="fas fa-check-circle"></i> ${data.message}</span>` + 
            (data.debug_code ? ` <span class="badge" style="background: rgba(0,212,255,0.15); color: #0088cc; margin-left: 0.5rem;">Test OTP: <strong>${data.debug_code}</strong></span>` : '');

          // Start 60-second cooldown
          let seconds = 60;
          sendOtpBtn.disabled = true;
          sendOtpBtnText.textContent = `Resend in ${seconds}s`;

          countdownTimer = setInterval(() => {
            seconds--;
            if (seconds <= 0) {
              clearInterval(countdownTimer);
              sendOtpBtn.disabled = false;
              sendOtpBtnText.textContent = 'Resend OTP';
            } else {
              sendOtpBtnText.textContent = `Resend in ${seconds}s`;
            }
          }, 1000);
        } else {
          sendOtpBtn.disabled = false;
          sendOtpBtnText.textContent = 'Send Mobile OTP';
          if (typeof window.showToast === 'function') {
            window.showToast(data.message, 'error');
          } else {
            alert(data.message);
          }
        }
      })
      .catch(err => {
        sendOtpBtn.disabled = false;
        sendOtpBtnText.textContent = 'Send Mobile OTP';
        alert('Failed to send verification OTP. Please try again.');
      });
    });
  }
});
</script>
@endsection