{{-- Login Modal --}}
<div class="modal fade auth-modal" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <button type="button" class="btn-close-modal" data-bs-dismiss="modal" aria-label="Close">
                <i class="fas fa-times"></i>
            </button>

            <div class="modal-body p-0">
                <div class="row g-0">
                    {{-- Left Side - Login Form --}}
                    <div class="col-lg-6">
                        <div class="auth-form-section">
                            <div class="auth-header text-center">
                                <h2 class="auth-title">Selamat Datang di</h2>
                                <h2 class="auth-title brand">AsetQu V.2</h2>
                            </div>

                            {{-- Error Alert --}}
                            <div class="alert alert-danger d-none" id="loginError" role="alert">
                                <span id="loginErrorMessage"></span>
                            </div>

                            <form id="loginForm" class="auth-form">
                                @csrf
                                <input type="hidden" name="intended" value="{{ request()->fullUrl() }}">

                                <div class="form-group">
                                    <label for="loginEmail" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="loginEmail" name="email" placeholder="Masukkan email" required>
                                </div>

                                <div class="form-group">
                                    <label for="loginPassword" class="form-label">Kata Sandi</label>
                                    <div class="password-input-wrapper">
                                        <input type="password" class="form-control" id="loginPassword" name="password" placeholder="Masukkan kata sandi" required>
                                        <button type="button" class="btn-toggle-password" onclick="toggleLoginPassword()">
                                            <i class="fas fa-eye-slash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember">
                                        <label class="form-check-label" for="rememberMe">Ingat saya</label>
                                    </div>
                                </div>

                                {{-- Cloudflare Turnstile (Temporarily Disabled) --}}
                                <div class="form-group">
                                    <div class="cf-turnstile" data-sitekey="{{ config('services.turnstile.site_key') }}" data-theme="dark" data-callback="onLoginTurnstileSuccess" id="loginTurnstile"></div>
                                </div>

                                <button type="submit" class="btn btn-auth-submit w-100" id="loginBtn">
                                    <span class="btn-text">Masuk</span>
                                    <span class="btn-loading d-none">
                                        <i class="fas fa-spinner fa-spin"></i> Memproses...
                                    </span>
                                </button>
                            </form>

                            <div class="auth-footer text-center">
                                <p>Belum memiliki akun? <a href="{{ url('/register') }}" class="auth-link">Daftar</a></p>
                            </div>
                        </div>
                    </div>

                    {{-- Right Side - Wallet Connect --}}
                    <div class="col-lg-6">
                        <div class="wallet-connect-section">
                            <div class="wallet-header text-center">
                                <h3 class="wallet-title">Koneksi Wallet Anda</h3>
                                <p class="wallet-subtitle">Hubungkan wallet Anda untuk menukarkan koin AsetQu V.2 dengan cepat dan aman</p>
                            </div>

                            <div class="wallet-list">
                                <button type="button" class="wallet-item" data-wallet="indodax">
                                    <div class="wallet-logo">
                                        <img src="{{ asset('assets/images/icons/indodax-icon.png') }}" alt="Indodax" onerror="handleImageError(this)">
                                    </div>
                                    {{-- <span class="wallet-name">Indodax</span> --}}
                                </button>
                                <button type="button" class="wallet-item" data-wallet="metamask">
                                    <div class="wallet-logo">
                                        <img src="{{ asset('assets/images/icons/metamask-icon.png') }}" alt="Metamask" onerror="handleImageError(this)">
                                    </div>
                                    {{-- <span class="wallet-name">Metamask</span> --}}
                                </button>
                                <button type="button" class="wallet-item" data-wallet="trustwallet">
                                    <div class="wallet-logo">
                                        <img src="{{ asset('assets/images/icons/trustwallet-icon.png') }}" alt="Trust Wallet" onerror="handleImageError(this)">
                                    </div>
                                    {{-- <span class="wallet-name">Trust Wallet</span> --}}
                                </button>
                                <button type="button" class="wallet-item" data-wallet="coinbase">
                                    <div class="wallet-logo">
                                        <img src="{{ asset('assets/images/icons/coinbase-icon.png') }}" alt="Coinbase" onerror="handleImageError(this)">
                                    </div>
                                    {{-- <span class="wallet-name">Coinbase</span> --}}
                                </button>
                                <button type="button" class="wallet-item" data-wallet="phantom">
                                    <div class="wallet-logo">
                                        <img src="{{ asset('assets/images/icons/phantom-icon.png') }}" alt="Phantom" onerror="handleImageError(this)">
                                    </div>
                                    {{-- <span class="wallet-name">Phantom</span> --}}
                                </button>
                            </div>

                            <div class="wallet-footer text-center">
                                <p>Nikmati proses redeem yang mudah, transparan, dan langsung ke akun digital Anda</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Cloudflare Turnstile Script (Temporarily Disabled) --}}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

{{-- Login Modal Scripts --}}
<script>
// Turnstile callback
let loginTurnstileToken = '';
function onLoginTurnstileSuccess(token) {
    loginTurnstileToken = token;
}

document.addEventListener('DOMContentLoaded', function() {
    // Check if login is required (redirected from protected route)
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('login') === 'required') {
        // Show login modal
        const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
        loginModal.show();

        // Clean URL
        window.history.replaceState({}, document.title, window.location.pathname);
    }

    // Reset turnstile when modal is shown
    const loginModalEl = document.getElementById('loginModal');
    if (loginModalEl) {
        loginModalEl.addEventListener('shown.bs.modal', function() {
            if (typeof turnstile !== 'undefined') {
                turnstile.reset('#loginTurnstile');
                loginTurnstileToken = '';
            }
        });
    }

    // Handle login form submission via AJAX
    const loginForm = document.getElementById('loginForm');
    if (loginForm) {
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const loginBtn = document.getElementById('loginBtn');
            const btnText = loginBtn.querySelector('.btn-text');
            const btnLoading = loginBtn.querySelector('.btn-loading');
            const errorAlert = document.getElementById('loginError');
            const errorMessage = document.getElementById('loginErrorMessage');

            // Check turnstile (Temporarily Disabled)
                if (!loginTurnstileToken) {
                    errorMessage.textContent = 'Silakan selesaikan verifikasi keamanan';
                    errorAlert.classList.remove('d-none');
                    return;
                }

            // Show loading state
            btnText.classList.add('d-none');
            btnLoading.classList.remove('d-none');
            loginBtn.disabled = true;
            errorAlert.classList.add('d-none');

            // Get form data
            const formData = new FormData(loginForm);
            formData.append('cf-turnstile-response', loginTurnstileToken);

            // Send AJAX request
            fetch('{{ url("/login") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Success - redirect to dashboard
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: data.message || 'Login berhasil!',
                            timer: 1500,
                            showConfirmButton: false,
                            background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                            color: '#ffffff',
                            imageUrl: '{{ asset('assets/images/asetqu-logo-alt.png') }}',
                            imageWidth: 80,
                            imageHeight: 80,
                            imageAlt: 'AsetQu Logo',
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        }).then(() => {
                            window.location.href = data.redirect || '/dashboard';
                        });
                    } else {
                        window.location.href = data.redirect || '/dashboard';
                    }
                } else {
                    // Error
                    errorMessage.textContent = data.message || 'Terjadi kesalahan';
                    errorAlert.classList.remove('d-none');

                    // Reset turnstile
                    if (typeof turnstile !== 'undefined') {
                        turnstile.reset('#loginTurnstile');
                        loginTurnstileToken = '';
                    }

                    // Reset button
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    loginBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Login error:', error);
                errorMessage.textContent = 'Terjadi kesalahan. Silakan coba lagi.';
                errorAlert.classList.remove('d-none');

                // Reset turnstile
                if (typeof turnstile !== 'undefined') {
                    turnstile.reset('#loginTurnstile');
                    loginTurnstileToken = '';
                }

                // Reset button
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
                loginBtn.disabled = false;
            });
        });
    }

    // Wallet connect buttons
    document.querySelectorAll('.wallet-item').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const wallet = this.dataset.wallet;
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'info',
                    title: 'Segera Hadir',
                    text: 'Fitur koneksi wallet ' + wallet + ' akan segera tersedia',
                    background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                    color: '#ffffff',
                    confirmButtonColor: '#8b5cf6',
                    imageUrl: '{{ asset('assets/images/asetqu-logo-alt.png') }}',
                    imageWidth: 60,
                    imageHeight: 60,
                    imageAlt: 'AsetQu Logo'
                });
            } else {
                alert('Fitur koneksi wallet ' + wallet + ' akan segera tersedia');
            }
        });
    });
});

// Toggle password visibility
function toggleLoginPassword() {
    const input = document.getElementById('loginPassword');
    const button = input.nextElementSibling;
    const icon = button.querySelector('i');

    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    }
}
</script>