@extends('member-fetch-admin.layouts.app')

@section('title', 'OTP Verification - Member Fetch Admin')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card shadow-lg border-0 rounded-3">
                <div class="card-header card-header-theme text-center py-3">
                    <h4 class="m-0 fw-bold"><i class="fa-solid fa-shield-halved me-2"></i>OTP Verification</h4>
                    <small class="opacity-90">Step 2 of Authentication</small>
                </div>
                <div class="card-body p-4">

                    @if ($errors->any())
                        <div class="alert alert-danger" role="alert">
                            <ul class="m-0 ps-3">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="text-center mb-4">
                        <div class="mb-2">
                            <i class="fa-solid fa-envelope-circle-check text-theme-primary display-4"></i>
                        </div>
                        <p class="text-secondary mb-1">We have sent a verification code to your registered email address.</p>
                        @if(!empty($maskedEmail))
                            <span class="badge bg-light text-dark border px-3 py-2 font-monospace fs-6">
                                <i class="fa-solid fa-at text-muted me-1"></i> {{ $maskedEmail }}
                            </span>
                        @endif
                    </div>

                    <!-- OTP Verification Form -->
                    <form action="{{ route('member-fetch-admin.verify-otp.post') }}" method="POST" id="otpForm">
                        @csrf

                        <div class="mb-4">
                            <label for="otp" class="form-label fw-semibold text-center w-100">Enter 6-Digit Verification Code</label>
                            <input type="text" name="otp" id="otp" 
                                class="form-control form-control-lg text-center font-monospace fw-bold letter-spacing-2 @error('otp') is-invalid @enderror" 
                                maxlength="6" pattern="[0-9]{6}" inputmode="numeric" autocomplete="one-time-code" required autofocus placeholder="• • • • • •" style="font-size: 1.8rem; letter-spacing: 8px;">
                            @error('otp')
                                <div class="text-danger small mt-1 text-center">{{ $message }}</div>
                            @enderror
                            <div class="form-text text-center mt-2">The verification code is valid for 5 minutes.</div>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-theme-primary py-2 fw-bold fs-6">
                                <i class="fa-solid fa-check-double me-2"></i> Verify OTP
                            </button>
                        </div>
                    </form>

                    <!-- Resend OTP Form -->
                    <div class="text-center pt-2 border-top">
                        <form action="{{ route('member-fetch-admin.resend-otp') }}" method="POST" class="d-inline" id="resendForm">
                            @csrf
                            <button type="submit" class="btn btn-link text-decoration-none p-0 text-theme-primary fw-semibold" id="resendBtn" @if(($cooldownRemaining ?? 0) > 0) disabled @endif>
                                <i class="fa-solid fa-rotate-right me-1"></i> Resend OTP
                            </button>
                        </form>
                        <div id="cooldownTimer" class="small text-muted mt-1" @if(($cooldownRemaining ?? 0) <= 0) style="display:none;" @endif>
                            Resend available in <span id="timerSec" class="fw-bold text-dark">{{ $cooldownRemaining ?? 0 }}</span> seconds
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let cooldown = {{ $cooldownRemaining ?? 0 }};
    if (cooldown > 0) {
        const timerSec = document.getElementById('timerSec');
        const cooldownTimer = document.getElementById('cooldownTimer');
        const resendBtn = document.getElementById('resendBtn');

        const interval = setInterval(() => {
            cooldown--;
            if (timerSec) timerSec.textContent = cooldown;
            if (cooldown <= 0) {
                clearInterval(interval);
                if (cooldownTimer) cooldownTimer.style.display = 'none';
                if (resendBtn) resendBtn.removeAttribute('disabled');
            }
        }, 1000);
    }
</script>
@endsection