@extends('frontend.main_master')
@section('page-context', 'two-factor')
@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/auth/login-page.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/auth/two-factor-page.css') }}">
@endpush
@section('content')
    <div class="container-fluid p-0 overflow-hidden login-auth-shell">
        <div class="row g-0 login-auth-row">
            <div
                class="col-lg-6 col-md-12 d-flex align-items-center justify-content-center login-form-section overflow-hidden">
                <div class="login-wrapper w-100 p-2 p-sm-3 p-md-5">
                    {{-- Logo --}}
                    <div class="d-flex justify-content-center mb-4 mb-sm-3">
                        <img src="{{ site_setting('site_logo_gif', 'assets/processed.webp') }}" alt="{{ t('site-title') }}"
                            class="img-fluid object-fit-contain login-logo-img">
                    </div>
                    <div class="col-12 d-none mb-2 mb-sm-3 mb-md-4 justify-content-center">
                        <div class="astrological-circle text-center">
                            <img src="{{ asset('assets/firstSlider.gif') }}" alt="Astrolojik Grafik"
                                class="img-fluid login-mobile-gif">
                        </div>
                    </div>

                    <h2 class="h4 fs-5 mb-2 mb-sm-3 mb-md-4 fw-bold text-start login-heading-color">
                        <i class="fas fa-shield-alt me-2"></i>
                        @if(!empty($isRegisterVerification))
                            Kayıt doğrulama
                        @else
                            {{ t('two-factor-authentication') }}
                        @endif
                    </h2>
                    <p class="mb-4 text-muted">
                        @if(!empty($isRegisterVerification))
                            Kaydınızı tamamlamak için <strong>{{ $maskedPhone ?? $user->phone }}</strong> numarasına gönderilen 6 haneli kodu girin.
                        @else
                            {{ t('two-factor-authentication-instruction') }} (<strong>{{ $maskedPhone ?? $user->phone }}</strong>)
                        @endif
                    </p>

                    @if (session('success'))
                        <div class="d-none" id="twoFactorSuccessMessage" data-message="{{ session('success') }}"></div>
                    @endif

                    {{-- SMS gönderilemedi uyarısı kaldırıldı; kullanıcı "Kodu tekrar gönder" ile devam edebilir --}}
                    @php
                        $remaining = session('remaining_attempts') ?? ($remainingAttempts ?? 5);
                    @endphp
                    @if ($remaining > 0 && $remaining < 5)
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            {{ t('remaining-attempts') }} <strong>{{ $remaining }}</strong>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @elseif($remaining === 0)
                        <div class="alert alert-danger fade show" role="alert">
                            <i class="fas fa-ban me-2"></i>
                            {{ t('too-many-attempts') }}
                        </div>
                    @endif

                    <form action="{{ route('two-factor.verify.post') }}" method="POST" class="login-form"
                        id="twoFactorForm">
                        @csrf
                        <div class="mb-4">
                            <label for="code" class="form-label"> {{ t('two-factor-code-label') }} </label>
                            <input type="text"
                                class="form-control login-input text-center two-factor-code-input @error('code') is-invalid @enderror"
                                id="code" name="code" maxlength="6" pattern="[0-9]{6}" required
                                autocomplete="one-time-code" autofocus placeholder="0 0 0 0 0 0"
                                >
                            @error('code')
                                <span class="text-danger small mt-2 d-block">{{ $message }}</span>
                            @enderror
                            <small class="form-text text-muted mt-2">
                                <i class="fas fa-info-circle me-1"></i>
                                {{ t('two-factor-code-instruction') }}
                            </small>
                        </div>

                        <button type="submit" class="btn btn-login w-100 mb-3" id="submitBtn">
                            <i class="fas fa-check me-2"></i> {{ t('verify') }}
                        </button>

                        <div class="text-center mb-3">
                            <button type="button" class="btn btn-link text-decoration-none two-factor-resend-btn" id="resendBtn">
                                <i class="fas fa-redo me-1"></i> {{ t('resend-code') }}
                            </button>
                        </div>

                        <div class="text-center">
                            <a href="{{ route('login') }}" class="forgot-password-link">
                                <i class="fa-solid fa-arrow-left me-1"></i> {{ t('back-to-login') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div
                class="col-lg-6 d-none d-lg-flex align-items-center justify-content-center login-graphic-section overflow-hidden">
                <div class="astrological-circle text-center">
                    <img src="{{ asset('assets/firstSlider.gif') }}" alt="Astrolojik Grafik" class="img-fluid w-75">
                </div>
                <div class="login-page-footer">
                    2016 - 2026 Made with ❤️ by <a href="{{ route('home') }}"
                        class="footer-link text-primary fw-medium">{{ t('site-title') }}</a> © Astrology Agent AI V4.18.02 Beta
                </div>
            </div>
        </div>
    </div>
    <footer class="content-footer footer bg-footer-theme d-block d-lg-none login-mobile-footer">
        <div class="container">
            <div class="footer-container d-flex align-items-center justify-content-center text-center">
                <div>
                    <span class="d-none d-md-inline">2016 - 2026 Made with ❤️ by <a
                            href="{{ route('home') }}" class="footer-link text-primary fw-medium">{{ t('site-title') }}</a> ©
                        Astrology Agent AI V4.18.02 Beta</span>
                    <span class="d-md-none">2016 - 2026 Made with ❤️ by <a href="{{ route('home') }}"
                            class="footer-link text-primary fw-medium">{{ t('site-title') }}</a></span>
                    <br class="d-md-none">
                    <span class="d-md-none">© Astrology Agent AI V4.18.02 Beta</span>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('frontend/js/i18n.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Sayfa yüklenirken gelen success mesajını sağ üst toast olarak göster
            const successEl = document.getElementById('twoFactorSuccessMessage');
            if (successEl && successEl.dataset.message) {
                Swal.fire({
                    icon: 'success',
                    text: successEl.dataset.message,
                    timer: 4000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }

            const codeInput = document.getElementById('code');
            const resendBtn = document.getElementById('resendBtn');
            const submitBtn = document.getElementById('submitBtn');
            const form = document.getElementById('twoFactorForm');
            let isSubmitting = false;

            // Sadece rakam girişi + otomatik submit (6 rakam girildiğinde)
            codeInput.addEventListener('input', function(e) {
                this.value = this.value.replace(/[^0-9]/g, '');

                if (this.value.length === 6 && !isSubmitting) {
                    setTimeout(() => {
                        if (!isSubmitting) {
                            submitBtn.click();
                        }
                    }, 300);
                }
            });

            // Form submit - tek seferlik gönderim garantisi
            form.addEventListener('submit', function(e) {
                if (isSubmitting) {
                    e.preventDefault();
                    return;
                }
                isSubmitting = true;
                submitBtn.disabled = true;
                submitBtn.style.backgroundColor = '#0F5A4F';
                submitBtn.style.opacity = '1';
                codeInput.readOnly = true;
                var verifyingText = (window.I18N && window.I18N.TWOFA_VERIFYING) || '';
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>' + verifyingText;
            });

            // Kod tekrar gönder
            resendBtn.addEventListener('click', function() {
                const originalText = this.innerHTML;
                this.disabled = true;
                var sendingText = (window.I18N && window.I18N.TWOFA_SENDING) || '';
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>' + sendingText;

                fetch("{{ route('two-factor.resend') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                ?.getAttribute('content') ||
                                document.querySelector('input[name="_token"]')?.value || ''
                        },
                        credentials: 'same-origin'
                    })
                    .then(async response => {
                        const data = await response.json();

                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: (window.I18N && window.I18N.TWOFA_SUCCESS_TITLE) || '',
                                text: data.message ||
                                    ((window.I18N && window.I18N.TWOFA_SUCCESS_FALLBACK) || ''),
                                timer: 3000,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-end'
                            });

                            codeInput.value = '';
                            codeInput.focus();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: (window.I18N && window.I18N.TWOFA_ERROR_TITLE) || '',
                                text: data.message
                                    || ((window.I18N && window.I18N.TWOFA_ERROR_RESEND_GENERIC) || ''),
                                timer: 3000,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-end'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: (window.I18N && window.I18N.TWOFA_ERROR_TITLE) || '',
                            text:  (window.I18N && window.I18N.TWOFA_ERROR_RESEND_GENERIC) || '',
                            timer: 3000,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });
                    })
                    .finally(() => {
                        this.disabled = false;
                        this.innerHTML = originalText;
                    });
            });
        });
    </script>
@endsection