@extends('layouts.app')

@section('content')
<style>
/* From Uiverse.io by Yaya12085 */
.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  width: 300px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  margin: 0 auto;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: black;
}

.message {
  color: #a3a3a3;
  font-size: 14px;
  margin-top: 4px;
  text-align: center;
}

.inputs {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.inputs input {
  width: 32px;
  height: 32px;
  text-align: center;
  border: none;
  border-bottom: 1.5px solid #d2d2d2;
  margin: 0 5px;
}

.inputs input:focus {
  border-bottom: 1.5px solid royalblue;
  outline: none;
}

.action {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: royalblue;
  color: white;
  cursor: pointer;
  align-self: flex-end;
  font-size: 16px;
}

.secondary-action {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  cursor: pointer;
  align-self: center;
}
</style>

<div class="container d-flex justify-content-center align-items-center flex-column" style="min-height: 60vh;">
    @if(session('status'))
        <div class="alert alert-success w-100 text-center">{{ session('status') }}</div>
    @endif

    {{-- Verify OTP Form --}}
    <form class="form" method="POST" action="{{ route('otp.verify') }}" id="otp-verify-form">
        @csrf
        <div class="title">Enter OTP</div>
        <div class="message">Enter the 6‑digit code we sent you</div>

        {{-- Hidden field that will hold the combined code --}}
        <input type="hidden" name="code" id="otp-hidden" value="{{ old('code') }}" />

        {{-- 6 individual digit inputs --}}
        <div class="inputs">
            @for ($i = 0; $i < 6; $i++)
                <input type="text" maxlength="1" pattern="\d*" inputmode="numeric"
                       class="otp-digit @error('code') is-invalid @enderror"
                       data-index="{{ $i }}" autofocus="{{ $i === 0 ? 'autofocus' : '' }}" />
            @endfor
        </div>

        @error('code')
            <div class="text-danger small mt-2">{{ $message }}</div>
        @enderror

        <button type="submit" class="action">Verify</button>
    </form>

    {{-- Resend OTP Form --}}
    <form method="POST" action="{{ route('otp.resend') }}" class="mt-2">
        @csrf
        <button class="secondary-action">Resend OTP</button>
    </form>
</div>

<script>
(function() {
    const form = document.getElementById('otp-verify-form');
    const hiddenInput = document.getElementById('otp-hidden');
    const digitInputs = document.querySelectorAll('.otp-digit');

    // Focus first input on page load
    digitInputs[0].focus();

    // Handle input: move to next field if a digit is entered
    digitInputs.forEach((input, index) => {
        input.addEventListener('input', function(e) {
            // Allow only digits
            this.value = this.value.replace(/[^0-9]/g, '');

            if (this.value.length === 1 && index < digitInputs.length - 1) {
                digitInputs[index + 1].focus();
            }
        });

        // Handle backspace: move to previous field if current is empty
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
                digitInputs[index - 1].focus();
            }
        });

        // Handle paste event (optional)
        input.addEventListener('paste', function(e) {
            e.preventDefault();
            const pasteData = e.clipboardData.getData('text').replace(/[^0-9]/g, '').slice(0, 6);
            for (let i = 0; i < pasteData.length; i++) {
                if (digitInputs[index + i]) {
                    digitInputs[index + i].value = pasteData[i];
                }
            }
            // Focus the next empty field or the last field
            const nextIndex = index + pasteData.length;
            if (nextIndex < digitInputs.length) {
                digitInputs[nextIndex].focus();
            } else {
                digitInputs[digitInputs.length - 1].focus();
            }
        });
    });

    // Before submit, combine all digits into hidden input
    form.addEventListener('submit', function(e) {
        let code = '';
        digitInputs.forEach(input => code += input.value);
        hiddenInput.value = code;
    });

    // If there was an old value (e.g., after validation error), prefill the inputs
    const oldCode = hiddenInput.value;
    if (oldCode) {
        for (let i = 0; i < Math.min(oldCode.length, 6); i++) {
            digitInputs[i].value = oldCode[i];
        }
    }
})();
</script>
@endsection
