@extends('layouts.custom-master')

@php$bodyClass = 'bg-white p-0 overflow-x-hidden';
$isPending2fa = $pending2fa ?? false;

@endphp

@section('styles')
<style>

  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .method-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    user-select: none;
  }
  .method-card:hover {
    border-color: rgba(43, 82, 64, 0.45);
    background: #f8fafc;
    transform: translateY(-1px);
  }
  .method-card.active {
    border-color: var(--primary-color, #2b5240);
    background: rgba(43, 82, 64, 0.04);
    box-shadow: 0 4px 12px rgba(43, 82, 64, 0.08);
  }
  .method-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.2s ease;
  }
  .method-card.active .method-card-icon {
    background: var(--primary-color, #2b5240);
    color: #ffffff;
  }
  .method-card-radio {
    margin-left: auto;
    font-size: 1.2rem;
    color: #cbd5e1;
    transition: color 0.2s ease;
  }
  .method-card.active .method-card-radio {
    color: var(--primary-color, #2b5240);
  }
  .otp-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    height: 3.25rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.75rem;
    background-color: #f8fafc;
    transition: all 0.2s ease;
  }
  .otp-code-input:focus {
    border-color: var(--primary-color, #2b5240);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(43, 82, 64, 0.12);
  }

  .auth-btn-submit {
    height: 48px;
    width: 100%;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--primary-color, #0f3625) 0%, #2b5240 100%);
    border: none;
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(15, 54, 37, 0.28);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-decoration: none;
  }
  .auth-btn-submit:hover {
    background: linear-gradient(135deg, #184c36 0%, #366650 100%);
    box-shadow: 0 6px 20px rgba(15, 54, 37, 0.38);
    transform: translateY(-1px);
    color: #ffffff !important;
  }
  .auth-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(15, 54, 37, 0.2);
  }
  .auth-btn-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .auth-btn-submit i {
    font-size: 1.15rem;
    transition: transform 0.2s ease;
  }
  .auth-btn-submit:hover i {
    transform: translateX(3px);
  }

  .auth-btn-otp-send {
    height: 44px;
    width: 100%;
    border-radius: 0.75rem;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    color: #166534;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .auth-btn-otp-send:hover {
    background: #dcfce7;
    border-color: #4ade80;
    color: #14532d;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(22, 101, 52, 0.12);
  }
  .auth-btn-otp-send:disabled {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .auth-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .auth-btn-back:hover {
    color: #0f3625;
    background: #f1f5f9;
  }
</style>
@endsection

@section('content')

<div class="container-fluid p-0">
    <div class="row g-0 authentication-cover-main">

        <div class="col-xxl-7 col-xl-7 col-lg-6 d-none d-lg-flex auth-showcase-side order-2 order-lg-1">
            <div class="showcase-bg-pattern"></div>

            <div class="auth-showcase-content">

                <div class="showcase-badge">
                    <i class="ri-shield-star-fill"></i>
                    <span>Portal Administrasi Resmi DBIC</span>
                </div>

                <h2 class="showcase-title">Pusat Kontrol & Manajemen Ekosistem DBIC</h2>
                <p class="showcase-desc">
                    Kelola data, verifikasi nasabah (KYC), pantau profil risiko, dan optimalkan layanan operasional melalui panel kontrol terpadu dengan standar keamanan enterprise.
                </p>

                <div class="showcase-features">
                    <div class="showcase-card">
                        <div class="showcase-card-icon">
                            <i class="ri-user-follow-line"></i>
                        </div>
                        <div>
                            <div class="showcase-card-title">Verifikasi Nasabah & KYC Terpadu</div>
                            <div class="showcase-card-text">Pemeriksaan dokumen identitas nasabah secara cepat, terstruktur, dan akurat.</div>
                        </div>
                    </div>

                    <div class="showcase-card">
                        <div class="showcase-card-icon">
                            <i class="ri-pie-chart-2-line"></i>
                        </div>
                        <div>
                            <div class="showcase-card-title">Manajemen Profil Risiko Terintegrasi</div>
                            <div class="showcase-card-text">Pemetaan kuesioner dinamis serta klasifikasi profil toleransi risiko investor.</div>
                        </div>
                    </div>

                    <div class="showcase-card">
                        <div class="showcase-card-icon">
                            <i class="ri-shield-check-line"></i>
                        </div>
                        <div>
                            <div class="showcase-card-title">Keamanan & Audit Sistem Berlapis (2FA)</div>
                            <div class="showcase-card-text">Perlindungan data sensitif dengan Autentikasi Dua Faktor (Email, WhatsApp, & Authenticator App).</div>
                        </div>
                    </div>
                </div>

                <div class="showcase-stats">
                    <div class="stat-item">
                        <div class="stat-value">100%</div>
                        <div class="stat-label">Terenkripsi SSL</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">Real-Time</div>
                        <div class="stat-label">Audit & Monitoring</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">2FA</div>
                        <div class="stat-label">Proteksi Berlapis</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-5 col-xl-5 col-lg-6 col-12 auth-form-side order-1 order-lg-2">
            <div class="auth-form-container">
                <div class="auth-card">

                    <div class="auth-brand-header">
                        <a href="{{ url('/') }}" class="d-inline-block">
                            <img src="{{ asset('build/assets/images/brand-logos/desktop-logo.png') }}?v=2" alt="DBIC Logo" class="auth-logo">
                        </a>
                        <span class="auth-portal-badge" id="portalBadge">
                            <i class="ri-shield-keyhole-line"></i>
                            Admin Portal
                        </span>
                    </div>

                    <div id="generalAlertContainer">
                        @if(session('error'))
                            <div class="alert alert-danger d-flex align-items-center gap-2 mb-3 py-2 px-3 border-0 shadow-sm rounded-3" role="alert">
                                <i class="ri-error-warning-fill fs-18 text-danger flex-shrink-0"></i>
                                <div class="fw-semibold fs-13 text-danger">{{ session('error') }}</div>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success d-flex align-items-center gap-2 mb-3 py-2 px-3 border-0 shadow-sm rounded-3" role="alert">
                                <i class="ri-checkbox-circle-fill fs-18 text-success flex-shrink-0"></i>
                                <div class="fw-semibold fs-13 text-success">{{ session('success') }}</div>
                            </div>
                        @endif
                    </div>

                    <div id="ajaxErrorAlert" class="alert alert-danger d-none d-flex align-items-center gap-2 mb-3 py-2 px-3 border-0 shadow-sm rounded-3" role="alert">
                        <i class="ri-error-warning-fill fs-18 text-danger flex-shrink-0"></i>
                        <div class="fw-semibold fs-13 text-danger" id="ajaxErrorMessage"></div>
                    </div>

                    <div id="stepCredentials" class="{{ $isPending2fa ? 'd-none' : '' }}">
                        <div class="auth-header-text">
                            <h1 class="auth-title">Masuk ke Akun Anda</h1>
                            <p class="auth-subtitle">Masukkan nama pengguna dan kata sandi Anda untuk mengakses dashboard administrasi DBIC.</p>
                        </div>

                        <form action="{{ route('login.post') }}" method="POST" class="auth-form" id="loginForm">
                            @csrf

                            <div class="form-group mb-3">
                                <label for="username" class="auth-form-label">
                                    <span>Nama Pengguna</span>
                                </label>
                                <div class="auth-input-wrapper">
                                    <i class="ri-user-3-line auth-input-icon"></i>
                                    <input type="text"
                                           class="form-control"
                                           id="username"
                                           name="username"
                                           value="{{ old('username') }}"
                                           placeholder="Masukkan nama pengguna"
                                           required
                                           autofocus
                                           autocomplete="username">
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <label for="password" class="auth-form-label">
                                    <span>Kata Sandi</span>
                                </label>
                                <div class="auth-input-wrapper">
                                    <i class="ri-lock-2-line auth-input-icon"></i>
                                    <input type="password"
                                           class="form-control"
                                           id="password"
                                           name="password"
                                           placeholder="Masukkan kata sandi"
                                           required
                                           autocomplete="current-password">
                                    <button type="button"
                                            class="auth-password-toggle"
                                            id="togglePassword"
                                            aria-label="Tampilkan atau sembunyikan kata sandi">
                                        <i class="ri-eye-off-line" id="togglePasswordIcon"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="auth-form-options mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="rememberMe" checked>
                                    <label class="form-check-label" for="rememberMe">
                                        Ingat saya di perangkat ini
                                    </label>
                                </div>
                            </div>

                            <button type="submit" class="auth-btn-submit" id="submitLoginBtn">
                                <span class="spinner-border spinner-border-sm me-1 d-none" id="loginSpinner"></span>
                                <span id="loginBtnText">Lanjutkan Verifikasi</span>
                                <i class="ri-arrow-right-line" id="loginBtnIcon"></i>
                            </button>
                        </form>
                    </div>

                    <div id="stepVerification" class="{{ $isPending2fa ? '' : 'd-none' }}">
                        <div class="auth-header-text">
                            <h1 class="auth-title">Verifikasi 2 Langkah</h1>
                            <p class="auth-subtitle">Pilih metode verifikasi untuk menyelesaikan proses masuk ke portal administrasi.</p>
                        </div>

                        @if($isDevOrStg)
                        <div class="alert alert-info d-flex align-items-start gap-2 mb-3 py-2 px-3 border-0 rounded-3 fs-12">
                            <i class="ri-terminal-box-line fs-16 text-info flex-shrink-0 mt-1"></i>
                            <div>
                                <strong>Mode Dev / Staging Aktif:</strong><br>
                                Gunakan kode OTP <code>1111</code> (atau sistem otomatis mengambil 4 digit pertama jika memasukkan <code>111111</code>).
                            </div>
                        </div>
                        @endif

                        <div class="mb-3">
                            <label class="auth-form-label mb-2">Pilih Metode Verifikasi:</label>

                            <div class="method-card mb-2 active" data-method="phone" id="cardMethodPhone">
                                <div class="method-card-icon">
                                    <i class="ri-whatsapp-line"></i>
                                </div>
                                <div class="flex-grow-1 overflow-hidden">
                                    <div class="fw-bold fs-13 text-default">Nomor HP / WhatsApp</div>
                                    <div class="text-muted fs-12 text-truncate" id="phoneTargetText">
                                        {{ $methods['phone']['masked'] ?? '0812****7890' }}
                                    </div>
                                </div>
                                <div class="method-card-radio">
                                    <i class="ri-checkbox-circle-fill"></i>
                                </div>
                            </div>

                            <div class="method-card mb-2" data-method="email" id="cardMethodEmail">
                                <div class="method-card-icon">
                                    <i class="ri-mail-line"></i>
                                </div>
                                <div class="flex-grow-1 overflow-hidden">
                                    <div class="fw-bold fs-13 text-default">Email OTP</div>
                                    <div class="text-muted fs-12 text-truncate" id="emailTargetText">
                                        {{ $methods['email']['masked'] ?? 'admin@dbic.com' }}
                                    </div>
                                </div>
                                <div class="method-card-radio">
                                    <i class="ri-checkbox-blank-circle-line"></i>
                                </div>
                            </div>

                            <div class="method-card {{ (!empty($methods['authenticator']['available'])) ? '' : 'd-none' }}" data-method="authenticator" id="cardMethodAuthenticator">
                                <div class="method-card-icon">
                                    <i class="ri-shield-check-line"></i>
                                </div>
                                <div class="flex-grow-1 overflow-hidden">
                                    <div class="fw-bold fs-13 text-default">Aplikasi Authenticator</div>
                                    <div class="text-muted fs-12 text-truncate">
                                        Google Authenticator / Authy (2FA)
                                    </div>
                                </div>
                                <div class="method-card-radio">
                                    <i class="ri-checkbox-blank-circle-line"></i>
                                </div>
                            </div>
                        </div>

                        <div id="otpRequestSection" class="mb-3">
                            <div class="mb-2">
                                <button type="button" class="auth-btn-otp-send" id="btnRequestOtp">
                                    <span class="spinner-border spinner-border-sm me-1 d-none" id="sendOtpSpinner"></span>
                                    <i class="ri-send-plane-fill" id="sendOtpIcon"></i>
                                    <span id="btnRequestOtpText">Kirim Kode OTP</span>
                                </button>
                            </div>
                            <div id="otpSentNotice" class="alert alert-success py-2 px-3 fs-12 mb-0 d-none d-flex align-items-center gap-2 rounded-3">
                                <i class="ri-checkbox-circle-fill text-success fs-16 flex-shrink-0"></i>
                                <span id="otpSentMessage">Kode OTP berhasil dikirim.</span>
                            </div>
                        </div>

                        <div id="authenticatorNoticeSection" class="alert alert-light border py-2 px-3 fs-12 mb-3 d-none">
                            <i class="ri-information-line me-1 text-primary"></i>
                            Buka aplikasi <strong>Google Authenticator</strong> atau <strong>Microsoft Authenticator</strong> di HP Anda, lalu masukkan 6 digit kode yang tampil saat ini.
                        </div>

                        <form action="{{ route('login.2fa.verify') }}" method="POST" class="auth-form" id="verifyCodeForm" onsubmit="return false;">
                            @csrf
                            <input type="hidden" id="selectedMethod" value="phone">

                            <div class="form-group mb-3">
                                <label for="verificationCode" class="auth-form-label d-flex justify-content-between align-items-center">
                                    <span>Masukkan Kode Verifikasi</span>
                                    <span class="fs-12 text-muted d-none" id="resendTimerContainer">
                                        Kirim ulang (<span id="resendCountdown">120</span>s)
                                    </span>
                                </label>
                                <input type="text"
                                       class="form-control otp-code-input"
                                       id="verificationCode"
                                       name="code"
                                       placeholder="{{ $isDevOrStg ? '1111' : '000000' }}"
                                       maxlength="6"
                                       autocomplete="one-time-code"
                                       required>
                                <div class="fs-11 text-muted mt-1 text-center" id="codeFormatHint">
                                    @if($isDevOrStg)
                                        Format: 4 angka (dev/stg). Masukkan <strong>1111</strong> atau <strong>111111</strong>.
                                    @else
                                        Masukkan kode OTP angka yang diterima.
                                    @endif
                                </div>
                            </div>

                            <button type="submit" class="auth-btn-submit mb-3" id="btnSubmitVerify">
                                <span class="spinner-border spinner-border-sm me-1 d-none" id="verifySpinner"></span>
                                <span id="verifyBtnText">Verifikasi & Masuk ke Dashboard</span>
                                <i class="ri-shield-check-line" id="verifyBtnIcon"></i>
                            </button>

                            <div class="text-center">
                                <button type="button" class="auth-btn-back" id="btnCancel2fa">
                                    <i class="ri-arrow-left-line"></i>
                                    <span>Kembali ke Halaman Login Kredensial</span>
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="auth-card-footer mt-4">
                        <div class="auth-security-notice">
                            <i class="ri-shield-check-fill"></i>
                            <span>Sistem Terenkripsi & Terlindungi &bull; DBIC &copy; {{ date('Y') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const passwordInput = document.getElementById('password');
        const toggleBtn = document.getElementById('togglePassword');
        const toggleIcon = document.getElementById('togglePasswordIcon');

        if (toggleBtn && passwordInput && toggleIcon) {
            toggleBtn.addEventListener('click', function () {
                const isPassword = passwordInput.getAttribute('type') === 'password';
                passwordInput.setAttribute('type', isPassword ? 'text' : 'password');

                if (isPassword) {
                    toggleIcon.classList.remove('ri-eye-off-line');
                    toggleIcon.classList.add('ri-eye-line');
                } else {
                    toggleIcon.classList.remove('ri-eye-line');
                    toggleIcon.classList.add('ri-eye-off-line');
                }
            });
        }

        const stepCredentials = document.getElementById('stepCredentials');
        const stepVerification = document.getElementById('stepVerification');
        const loginForm = document.getElementById('loginForm');
        const submitLoginBtn = document.getElementById('submitLoginBtn');
        const loginSpinner = document.getElementById('loginSpinner');
        const loginBtnText = document.getElementById('loginBtnText');
        const loginBtnIcon = document.getElementById('loginBtnIcon');

        const ajaxErrorAlert = document.getElementById('ajaxErrorAlert');
        const ajaxErrorMessage = document.getElementById('ajaxErrorMessage');

        const methodCards = document.querySelectorAll('.method-card');
        const selectedMethodInput = document.getElementById('selectedMethod');
        const cardMethodAuthenticator = document.getElementById('cardMethodAuthenticator');
        const phoneTargetText = document.getElementById('phoneTargetText');
        const emailTargetText = document.getElementById('emailTargetText');

        const otpRequestSection = document.getElementById('otpRequestSection');
        const btnRequestOtp = document.getElementById('btnRequestOtp');
        const btnRequestOtpText = document.getElementById('btnRequestOtpText');
        const sendOtpSpinner = document.getElementById('sendOtpSpinner');
        const sendOtpIcon = document.getElementById('sendOtpIcon');
        const otpSentNotice = document.getElementById('otpSentNotice');
        const otpSentMessage = document.getElementById('otpSentMessage');
        const authenticatorNoticeSection = document.getElementById('authenticatorNoticeSection');

        const resendTimerContainer = document.getElementById('resendTimerContainer');
        const resendCountdown = document.getElementById('resendCountdown');

        const verifyCodeForm = document.getElementById('verifyCodeForm');
        const verificationCode = document.getElementById('verificationCode');
        const btnSubmitVerify = document.getElementById('btnSubmitVerify');
        const verifySpinner = document.getElementById('verifySpinner');
        const verifyBtnText = document.getElementById('verifyBtnText');
        const verifyBtnIcon = document.getElementById('verifyBtnIcon');
        const btnCancel2fa = document.getElementById('btnCancel2fa');

        let resendTimer = null;

        function showError(msg) {
            ajaxErrorMessage.textContent = msg;
            ajaxErrorAlert.classList.remove('d-none');
        }

        function hideError() {
            ajaxErrorAlert.classList.add('d-none');
        }

        if (loginForm) {
            loginForm.addEventListener('submit', function (e) {
                e.preventDefault();
                hideError();

                const username = document.getElementById('username').value.trim();
                const password = passwordInput.value;
                const remember = document.getElementById('rememberMe').checked;

                if (!username || !password) {
                    showError('Nama Pengguna dan kata sandi wajib diisi.');
                    return;
                }

                submitLoginBtn.disabled = true;
                loginSpinner.classList.remove('d-none');
                loginBtnIcon.classList.add('d-none');
                loginBtnText.textContent = 'Memverifikasi...';

                fetch("{{ route('login.post') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password,
                        remember: remember
                    })
                })
                .then(res => res.json().then(data => ({ status: res.status, body: data })))
                .then(({ status, body }) => {
                    submitLoginBtn.disabled = false;
                    loginSpinner.classList.add('d-none');
                    loginBtnIcon.classList.remove('d-none');
                    loginBtnText.textContent = 'Lanjutkan Verifikasi';

                    if (status === 200 && body.success) {

                        if (body.methods) {
                            if (body.methods.phone && body.methods.phone.masked) {
                                phoneTargetText.textContent = body.methods.phone.masked;
                            }
                            if (body.methods.email && body.methods.email.masked) {
                                emailTargetText.textContent = body.methods.email.masked;
                            }
                        }

                        if (body.has_authenticator) {
                            cardMethodAuthenticator.classList.remove('d-none');
                        } else {
                            cardMethodAuthenticator.classList.add('d-none');
                        }

                        stepCredentials.classList.add('d-none');
                        stepVerification.classList.remove('d-none');
                        verificationCode.focus();
                    } else {
                        showError(body.message || 'Nama Pengguna atau kata sandi salah.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    submitLoginBtn.disabled = false;
                    loginSpinner.classList.add('d-none');
                    loginBtnIcon.classList.remove('d-none');
                    loginBtnText.textContent = 'Lanjutkan Verifikasi';
                    showError('Gagal menghubungi server. Silakan coba beberapa saat lagi.');
                });
            });
        }

        methodCards.forEach(card => {
            card.addEventListener('click', function () {
                methodCards.forEach(c => {
                    c.classList.remove('active');
                    const radio = c.querySelector('.method-card-radio i');
                    if (radio) radio.className = 'ri-checkbox-blank-circle-line';
                });

                this.classList.add('active');
                const radio = this.querySelector('.method-card-radio i');
                if (radio) radio.className = 'ri-checkbox-circle-fill';

                const method = this.getAttribute('data-method');
                selectedMethodInput.value = method;
                hideError();
                verificationCode.value = '';

                if (method === 'authenticator') {
                    otpRequestSection.classList.add('d-none');
                    authenticatorNoticeSection.classList.remove('d-none');
                    resendTimerContainer.classList.add('d-none');
                    verificationCode.placeholder = "{{ $isDevOrStg ? '1111' : '000000' }}";
                } else {
                    otpRequestSection.classList.remove('d-none');
                    authenticatorNoticeSection.classList.add('d-none');
                    verificationCode.placeholder = "{{ $isDevOrStg ? '1111' : '000000' }}";
                }
            });
        });

        function startCountdown(seconds) {
            if (resendTimer) clearInterval(resendTimer);
            let remaining = seconds;
            resendCountdown.textContent = remaining;
            resendTimerContainer.classList.remove('d-none');
            btnRequestOtp.disabled = true;

            resendTimer = setInterval(() => {
                remaining--;
                resendCountdown.textContent = remaining;
                if (remaining <= 0) {
                    clearInterval(resendTimer);
                    resendTimerContainer.classList.add('d-none');
                    btnRequestOtp.disabled = false;
                    btnRequestOtpText.textContent = 'Kirim Ulang Kode OTP';
                }
            }, 1000);
        }

        if (btnRequestOtp) {
            btnRequestOtp.addEventListener('click', function () {
                const method = selectedMethodInput.value;
                if (method !== 'phone' && method !== 'email') return;

                hideError();
                btnRequestOtp.disabled = true;
                sendOtpSpinner.classList.remove('d-none');
                sendOtpIcon.classList.add('d-none');

                fetch("{{ route('login.otp.send') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ method: method })
                })
                .then(res => res.json().then(data => ({ status: res.status, body: data })))
                .then(({ status, body }) => {
                    sendOtpSpinner.classList.add('d-none');
                    sendOtpIcon.classList.remove('d-none');

                    if (status === 200 && body.success) {
                        otpSentMessage.textContent = body.message;
                        otpSentNotice.classList.remove('d-none');
                        startCountdown(body.expired_in || 120);
                        verificationCode.focus();
                    } else {
                        btnRequestOtp.disabled = false;
                        showError(body.message || 'Gagal mengirim kode OTP.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    sendOtpSpinner.classList.add('d-none');
                    sendOtpIcon.classList.remove('d-none');
                    btnRequestOtp.disabled = false;
                    showError('Gagal mengirim permintaan OTP. Silakan periksa koneksi Anda.');
                });
            });
        }

        if (verifyCodeForm) {
            verifyCodeForm.addEventListener('submit', function (e) {
                e.preventDefault();
                hideError();

                const code = verificationCode.value.trim();
                const method = selectedMethodInput.value;

                if (!code) {
                    showError('Masukkan kode verifikasi terlebih dahulu.');
                    return;
                }

                btnSubmitVerify.disabled = true;
                verifySpinner.classList.remove('d-none');
                verifyBtnIcon.classList.add('d-none');
                verifyBtnText.textContent = 'Memverifikasi...';

                fetch("{{ route('login.2fa.verify') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        method: method,
                        code: code
                    })
                })
                .then(res => res.json().then(data => ({ status: res.status, body: data })))
                .then(({ status, body }) => {
                    btnSubmitVerify.disabled = false;
                    verifySpinner.classList.add('d-none');
                    verifyBtnIcon.classList.remove('d-none');
                    verifyBtnText.textContent = 'Verifikasi & Masuk ke Dashboard';

                    if (status === 200 && body.success) {
                        window.location.href = body.redirect_url || "{{ route('dashboard.view') }}";
                    } else {
                        showError(body.message || 'Kode verifikasi tidak valid.');
                        verificationCode.select();
                    }
                })
                .catch(err => {
                    console.error(err);
                    btnSubmitVerify.disabled = false;
                    verifySpinner.classList.add('d-none');
                    verifyBtnIcon.classList.remove('d-none');
                    verifyBtnText.textContent = 'Verifikasi & Masuk ke Dashboard';
                    showError('Terjadi kesalahan sistem saat memverifikasi kode.');
                });
            });
        }

        if (btnCancel2fa) {
            btnCancel2fa.addEventListener('click', function () {
                fetch("{{ route('login.2fa.cancel') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(() => {
                    if (resendTimer) clearInterval(resendTimer);
                    stepVerification.classList.add('d-none');
                    stepCredentials.classList.remove('d-none');
                    hideError();
                    verificationCode.value = '';
                })
                .catch(() => {
                    window.location.reload();
                });
            });
        }
    });
</script>
@endsection