@extends('core::layouts.app')

@section('title', 'Verifikasi 2FA')

@section('content')
<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <h2 class="auth-title">Verifikasi Kode 2FA</h2>
            <p class="auth-subtitle">Kami telah mengirimkan kode verifikasi 6 digit ke email Anda</p>
        </div>

        <form id="verify2FAForm" method="POST" action="{{ route('auth.2fa.verify') }}" class="auth-form">
            @csrf

            {{-- 2FA Code Input --}}
            <div class="form-group">
                <label for="code" class="form-label">Kode Verifikasi</label>
                <input type="text"
                       class="form-input @error('code') is-invalid @enderror"
                       id="code"
                       name="code"
                       maxlength="6"
                       placeholder="Masukkan kode 6 digit"
                       pattern="[0-9]{6}"
                       inputmode="numeric"
                       required
                       autofocus>
                @error('code')
                    <span class="invalid-feedback">{{ $message }}</span>
                @enderror
                <small class="form-hint">Kode akan kedaluwarsa dalam 10 menit</small>
            </div>

            {{-- Submit Button --}}
            <button type="submit" class="btn-primary btn-block">
                <i class="fas fa-check-circle"></i>
                Verifikasi
            </button>
        </form>

        {{-- Resend Code --}}
        <div class="auth-footer">
            <p class="text-center">
                Tidak menerima kode?
                <a href="#" id="resendCodeBtn" class="text-link">Kirim ulang</a>
            </p>
            <p class="text-center mt-2">
                <a href="/" class="text-link">
                    <i class="fas fa-arrow-left"></i>
                    Kembali ke beranda
                </a>
            </p>
        </div>
    </div>
</div>

<style>
/* Auth Container */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--background-main);
    position: relative;
    overflow: hidden;
}

.auth-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
}

.auth-container::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

/* Auth Card */
.auth-card {
    background: rgba(26, 23, 48, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.2);
    position: relative;
    z-index: 1;
}

/* Auth Header */
.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-title {
    font-family: 'Plus Jakarta Sans', sans-serif;itron', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin-bottom: 8px;
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Form Styles */
.auth-form {
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1.25rem;
    text-align: center;
    letter-spacing: 0.5em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--cyan-primary);
    background: rgba(6, 182, 212, 0.05);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-input.is-invalid {
    border-color: #ef4444;
}

.invalid-feedback {
    display: block;
    font-size: 0.85rem;
    color: #f87171;
    margin-top: 6px;
    text-align: center;
}

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 6px;
    text-align: center;
}

/* Button */
.btn-primary {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-block {
    width: 100%;
}

/* Auth Footer */
.auth-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.text-link {
    color: var(--cyan-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.text-link:hover {
    color: var(--purple-secondary);
    text-decoration: underline;
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 576px) {
    .auth-card {
        padding: 30px 20px;
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .form-input {
        font-size: 1.1rem;
        letter-spacing: 0.3em;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('verify2FAForm');
    const codeInput = document.getElementById('code');
    const resendBtn = document.getElementById('resendCodeBtn');

    // Auto-submit when 6 digits entered
    codeInput.addEventListener('input', function(e) {
        // Only allow numbers
        this.value = this.value.replace(/[^0-9]/g, '');

        // Auto submit when 6 digits
        if (this.value.length === 6) {
            form.requestSubmit();
        }
    });

    // Handle form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        // Disable button and show loading
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memverifikasi...';

        // Submit form via AJAX
        fetch(this.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                code: codeInput.value
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: data.message,
                    confirmButtonColor: '#8b5cf6',
                    background: 'rgba(26, 23, 48, 0.95)',
                    color: '#e2e8f0',
                    timer: 2000,
                    timerProgressBar: true,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = data.redirect;
                });
            } else {
                throw new Error(data.message || 'Verifikasi gagal');
            }
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Verifikasi Gagal',
                text: error.message || 'Kode verifikasi tidak valid',
                confirmButtonColor: '#8b5cf6',
                background: 'rgba(26, 23, 48, 0.95)',
                color: '#e2e8f0'
            });

            // Reset button
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;

            // Clear input and focus
            codeInput.value = '';
            codeInput.focus();
        });
    });

    // Resend code
    resendBtn.addEventListener('click', function(e) {
        e.preventDefault();

        const originalText = this.textContent;
        this.textContent = 'Mengirim...';
        this.style.pointerEvents = 'none';

        fetch('{{ route('auth.2fa.resend') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: data.message,
                    confirmButtonColor: '#8b5cf6',
                    background: 'rgba(26, 23, 48, 0.95)',
                    color: '#e2e8f0',
                    timer: 3000,
                    timerProgressBar: true
                });

                // Reset and focus input
                codeInput.value = '';
                codeInput.focus();
            } else {
                throw new Error(data.message || 'Gagal mengirim kode');
            }
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: error.message || 'Gagal mengirim kode. Silakan coba lagi.',
                confirmButtonColor: '#8b5cf6',
                background: 'rgba(26, 23, 48, 0.95)',
                color: '#e2e8f0'
            });
        })
        .finally(() => {
            setTimeout(() => {
                this.textContent = originalText;
                this.style.pointerEvents = 'auto';
            }, 3000);
        });
    });

    // Show success/error message if exists
    @if(session('success'))
    Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: '{{ session('success') }}',
        confirmButtonColor: '#8b5cf6',
        background: 'rgba(26, 23, 48, 0.95)',
        color: '#e2e8f0',
        timer: 3000,
        timerProgressBar: true
    });
    @endif

    @if(session('error') || $errors->any())
    Swal.fire({
        icon: 'error',
        title: 'Gagal!',
        text: '{{ session('error') ?? $errors->first() }}',
        confirmButtonColor: '#8b5cf6',
        background: 'rgba(26, 23, 48, 0.95)',
        color: '#e2e8f0'
    });
    @endif
});
</script>

@endsection