@extends('layouts.portal')

@section('title', 'OTP Verification')
@section('page_title', 'OTP Verification')
@section('page_subtitle', 'Verify your identity to edit profile')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'dashboard'])
@endsection

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-md mx-auto px-6">
        <!-- Header -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
            <div class="text-center">
                <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-shield-alt text-indigo-600 text-2xl"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-800 mb-2">OTP Verification</h1>
                <p class="text-gray-600">Enter the 6-digit code sent to your email</p>
            </div>
        </div>

        <!-- OTP Form -->
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <form id="otpForm" class="space-y-6">
                @csrf
                <input type="hidden" name="section_type" value="{{ $sectionType }}">
                <input type="hidden" name="return_url" value="{{ $returnUrl }}">

                <!-- OTP Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Enter OTP Code</label>
                    <div class="flex justify-center space-x-2">
                        <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-lg font-semibold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all" data-index="0">
                        <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-lg font-semibold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all" data-index="1">
                        <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-lg font-semibold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all" data-index="2">
                        <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-lg font-semibold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all" data-index="3">
                        <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-lg font-semibold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all" data-index="4">
                        <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-lg font-semibold border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all" data-index="5">
                    </div>
                    <input type="hidden" name="otp_code" id="otpCode" required>
                </div>

                <!-- Section Info -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                        <div class="text-sm">
                            <p class="font-medium text-blue-900">Section: {{ ucfirst($sectionType) }} Details</p>
                            <p class="text-blue-700">This OTP will allow you to edit your {{ $sectionType }} information for 24 hours.</p>
                        </div>
                    </div>
                </div>

                <!-- Timer -->
                <div class="text-center">
                    <div id="timer" class="text-sm text-gray-600">
                        <i class="fas fa-clock mr-1"></i>
                        OTP expires in <span id="countdown" class="font-semibold">15:00</span>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-3">
                    <button type="submit" id="verifyBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                        <i class="fas fa-check-circle mr-2"></i>
                        Verify OTP
                    </button>

                    <button type="button" id="resendBtn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                        <i class="fas fa-redo mr-2"></i>
                        Resend OTP
                    </button>
                </div>

                <!-- Messages -->
                <div id="messageContainer" class="hidden">
                    <div id="messageContent" class="p-4 rounded-lg flex items-center">
                        <i id="messageIcon" class="mr-2"></i>
                        <span id="messageText"></span>
                    </div>
                </div>
            </form>
        </div>

        <!-- Help Section -->
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600">
                <i class="fas fa-question-circle mr-1"></i>
                Didn't receive the OTP? Check your spam folder or 
                <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">contact support</a>
            </p>
        </div>
    </div>
</div>

<script>
let timerInterval;
let timeRemaining = 900; // 15 minutes in seconds

// OTP Input Management
document.addEventListener('DOMContentLoaded', function() {
    const otpInputs = document.querySelectorAll('.otp-input');
    
    otpInputs.forEach((input, index) => {
        input.addEventListener('input', function(e) {
            const value = e.target.value;
            
            if (value.length === 1 && index < otpInputs.length - 1) {
                otpInputs[index + 1].focus();
            }
            
            updateOtpCode();
        });
        
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && e.target.value === '' && index > 0) {
                otpInputs[index - 1].focus();
            }
        });
        
        input.addEventListener('paste', function(e) {
            e.preventDefault();
            const pastedData = e.clipboardData.getData('text').slice(0, 6);
            
            for (let i = 0; i < pastedData.length && i < otpInputs.length; i++) {
                otpInputs[i].value = pastedData[i];
            }
            
            updateOtpCode();
            
            if (pastedData.length === 6) {
                otpInputs[5].focus();
            }
        });
    });
    
    // Start timer
    startTimer();
});

function updateOtpCode() {
    const otpInputs = document.querySelectorAll('.otp-input');
    let otpCode = '';
    
    otpInputs.forEach(input => {
        otpCode += input.value;
    });
    
    document.getElementById('otpCode').value = otpCode;
}

function startTimer() {
    timerInterval = setInterval(function() {
        if (timeRemaining <= 0) {
            clearInterval(timerInterval);
            document.getElementById('countdown').textContent = '00:00';
            document.getElementById('timer').innerHTML = '<span class="text-red-600"><i class="fas fa-exclamation-triangle mr-1"></i> OTP has expired</span>';
            return;
        }
        
        const minutes = Math.floor(timeRemaining / 60);
        const seconds = timeRemaining % 60;
        document.getElementById('countdown').textContent = 
            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        
        timeRemaining--;
    }, 1000);
}

// Form Submission
document.getElementById('otpForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const otpCode = document.getElementById('otpCode').value;
    
    if (otpCode.length !== 6) {
        showMessage('Please enter all 6 digits of the OTP code.', 'error');
        return;
    }
    
    const formData = new FormData(this);
    const verifyBtn = document.getElementById('verifyBtn');
    
    // Show loading state
    verifyBtn.disabled = true;
    verifyBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Verifying...';
    
    fetch('{{ route("client.otp.verify") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            otp_code: otpCode,
            section_type: formData.get('section_type'),
        }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage('OTP verified successfully! Redirecting...', 'success');
            setTimeout(() => {
                window.location.href = formData.get('return_url');
            }, 2000);
        } else {
            showMessage(data.message || 'OTP verification failed', 'error');
            // Clear OTP inputs
            document.querySelectorAll('.otp-input').forEach(input => input.value = '');
            document.getElementById('otpCode').value = '';
            document.querySelector('.otp-input').focus();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('An error occurred. Please try again.', 'error');
    })
    .finally(() => {
        verifyBtn.disabled = false;
        verifyBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Verify OTP';
    });
});

// Resend OTP
document.getElementById('resendBtn').addEventListener('click', function() {
    const resendBtn = this;
    const sectionType = document.querySelector('input[name="section_type"]').value;
    
    resendBtn.disabled = true;
    resendBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Sending...';
    
    fetch('{{ route("client.otp.resend") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            section_type: sectionType,
        }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage('New OTP sent to your email', 'success');
            // Reset timer
            timeRemaining = 900;
            clearInterval(timerInterval);
            startTimer();
            // Clear OTP inputs
            document.querySelectorAll('.otp-input').forEach(input => input.value = '');
            document.getElementById('otpCode').value = '';
            document.querySelector('.otp-input').focus();
        } else {
            showMessage(data.message || 'Failed to resend OTP', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('An error occurred. Please try again.', 'error');
    })
    .finally(() => {
        resendBtn.disabled = false;
        resendBtn.innerHTML = '<i class="fas fa-redo mr-2"></i>Resend OTP';
    });
});

function showMessage(message, type) {
    const container = document.getElementById('messageContainer');
    const content = document.getElementById('messageContent');
    const icon = document.getElementById('messageIcon');
    const text = document.getElementById('messageText');
    
    container.classList.remove('hidden');
    text.textContent = message;
    
    if (type === 'success') {
        content.className = 'p-4 rounded-lg flex items-center bg-green-50 border border-green-200 text-green-800';
        icon.className = 'fas fa-check-circle mr-2 text-green-600';
    } else {
        content.className = 'p-4 rounded-lg flex items-center bg-red-50 border border-red-200 text-red-800';
        icon.className = 'fas fa-exclamation-circle mr-2 text-red-600';
    }
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
        container.classList.add('hidden');
    }, 5000);
}
</script>
@endsection