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

@section('title', 'Profile')

@section('content')
<div class="profile-container">
    {{-- Left Sidebar - User Info & Menu --}}
    <div class="profile-sidebar">
        <div class="profile-sidebar-card">
            {{-- User Avatar --}}
            <div class="profile-avatar-wrapper">
                <div class="profile-avatar-large" id="avatarDisplay">
                    @if(Auth::check() && Auth::user()->avatar)
                        <img src="{{ asset('storage/' . Auth::user()->avatar) }}" alt="{{ Auth::user()->name }}" id="currentAvatar">
                    @else
                        <div class="avatar-placeholder-large" id="avatarPlaceholder">
                            <span>{{ Auth::check() ? strtoupper(substr(Auth::user()->name, 0, 1)) : 'G' }}</span>
                        </div>
                    @endif
                </div>
                <button class="avatar-edit-btn" title="Edit Avatar" onclick="openAvatarModal()">
                    <i class="fas fa-pen"></i>
                </button>
            </div>

            {{-- User Info --}}
            <div class="profile-user-info">
                <h4 class="profile-user-name">{{ Auth::check() ? Auth::user()->name : 'Guest' }}</h4>
                <p class="profile-user-email">{{ Auth::check() ? Auth::user()->email : 'guest@example.com' }}</p>
            </div>

            {{-- Profile Menu --}}
            <nav class="profile-menu">
                <a href="#setting-profil" class="profile-menu-item active" data-tab="setting-profil">
                    <i class="fas fa-user"></i>
                    <span>Setting Profil</span>
                </a>
                <a href="#kata-sandi" class="profile-menu-item" data-tab="kata-sandi">
                    <i class="fas fa-lock"></i>
                    <span>Kata Sandi dan Keamanan</span>
                </a>
                <a href="#setting-wallet" class="profile-menu-item" data-tab="setting-wallet">
                    <i class="fas fa-wallet"></i>
                    <span>Setting Wallet</span>
                </a>
            </nav>
        </div>
    </div>

    {{-- Right Content Area --}}
    <div class="profile-content">
        {{-- Tab 1: Setting Profil --}}
        <div class="profile-tab active" id="setting-profil">
            <div class="profile-content-card">
                <h3 class="profile-content-title">INFORMASI PROFIL</h3>

                <form action="{{ url('/dashboard/profile/update') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')

                    {{-- Nama --}}
                    <div class="form-group">
                        <label class="form-label">Nama</label>
                        <input type="text" name="name" class="form-input" value="{{ Auth::user()->name ?? '' }}" placeholder="Masukkan nama">
                    </div>

                    {{-- Email & Phone --}}
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-input" value="{{ Auth::user()->email ?? '' }}" placeholder="Masukkan email">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Nomor Telepon</label>
                            <input type="text" name="phone" class="form-input" value="{{ Auth::user()->phone ?? '' }}" placeholder="Masukkan nomor telepon">
                        </div>
                    </div>

                    {{-- Country & City --}}
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Negara</label>
                            <input type="text" name="country" class="form-input" value="{{ Auth::user()->country ?? '' }}" placeholder="Masukkan negara">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Kabupaten/Kota</label>
                            <input type="text" name="city" class="form-input" value="{{ Auth::user()->city ?? '' }}" placeholder="Masukkan kabupaten/kota">
                        </div>
                    </div>

                    {{-- Postal Code & Address --}}
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Kode Pos</label>
                            <input type="text" name="postal_code" class="form-input" value="{{ Auth::user()->postal_code ?? '' }}" placeholder="Kode pos">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Alamat Lengkap</label>
                            <input type="text" name="address" class="form-input" value="{{ Auth::user()->address ?? '' }}" placeholder="Masukkan alamat lengkap">
                        </div>
                    </div>

                    {{-- Buttons --}}
                    <div class="form-actions">
                        <button type="button" class="btn-cancel">Batal</button>
                        <button type="submit" class="btn-save">
                            <i class="fas fa-save"></i>
                            Simpan data
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Tab 2: Kata Sandi dan Keamanan --}}
        <div class="profile-tab" id="kata-sandi">
            {{-- Main Security Menu --}}
            <div class="profile-content-card security-main" id="security-main">
                <h3 class="profile-content-title">KATA SANDI DAN KEAMANAN</h3>

                <div class="security-menu">
                    <a href="#" class="security-menu-item" data-security="change-password">
                        <span>Ganti kata sandi</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <a href="#" class="security-menu-item" data-security="2fa">
                        <span>Keamanan 2FA</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>

            {{-- Change Password Form --}}
            <div class="profile-content-card security-sub" id="change-password" style="display: none;">
                <h3 class="profile-content-title">GANTI KATA SANDI</h3>

                <form id="changePasswordForm" class="profile-form">
                    <div class="form-group">
                        <label class="form-label">Kata Sandi Lama</label>
                        <div class="input-password-wrapper">
                            <input type="password" name="current_password" class="form-input" placeholder="********">
                            <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kata Sandi Baru</label>
                        <div class="input-password-wrapper">
                            <input type="password" name="new_password" class="form-input" placeholder="********">
                            <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Konfirmasi Kata Sandi Baru</label>
                        <div class="input-password-wrapper">
                            <input type="password" name="new_password_confirmation" class="form-input" placeholder="********">
                            <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn-cancel" onclick="showSecurityMain()">Batal</button>
                        <button type="button" class="btn-save" onclick="showPasswordEmailModal()">
                            <i class="fas fa-save"></i>
                            Simpan data
                        </button>
                    </div>
                </form>
            </div>

            {{-- 2FA Settings --}}
            <div class="profile-content-card security-sub" id="2fa" style="display: none;">
                <h3 class="profile-content-title">KEAMANAN 2FA</h3>

                <div class="twofa-card">
                    <h4 class="twofa-title">Otentikasi Dua Faktor</h4>

                    <div class="twofa-toggle-wrapper">
                        <span class="twofa-label">Aktifkan Otentikasi Dua Faktor</span>
                        <label class="toggle-switch">
                            <input type="checkbox" id="twofa-toggle" {{ (Auth::user()->two_factor_enabled ?? false) ? 'checked' : '' }} onchange="show2FAEmailModal(this)">
                            <span class="toggle-slider"></span>
                            <span class="toggle-text">Aktifkan</span>
                        </label>
                    </div>
                </div>

                <div class="form-actions" style="margin-top: 20px;">
                    <button type="button" class="btn-cancel" onclick="showSecurityMain()">Kembali</button>
                </div>
            </div>
        </div>

        {{-- Tab 3: Setting Wallet --}}
        <div class="profile-tab" id="setting-wallet">
            <div class="profile-content-card">
                <h3 class="profile-content-title cyan">SETTING WALLET</h3>

                {{-- Wallet yang Terkoneksi --}}
                <div class="wallet-section">
                    <label class="wallet-section-label">Wallet yang Terkoneksi</label>

                    <div class="connected-wallets" id="mainWalletContainer">
                        @forelse($userWallets ?? [] as $userWallet)
                            <div class="wallet-item" data-wallet-id="{{ $userWallet->id }}">
                                <div class="wallet-item-info">
                                    <img src="{{ $userWallet->wallet->logo_url ?? asset('assets/images/icons/' . $userWallet->wallet->slug . '-icon.png') }}" alt="{{ $userWallet->wallet->name }}" class="wallet-logo" onerror="this.outerHTML='<span class=\'wallet-logo-fallback\'>{{ strtoupper(substr($userWallet->wallet->name, 0, 2)) }}</span>'">
                                </div>
                                <div class="wallet-details">
                                    <span class="wallet-name">{{ $userWallet->wallet->name }}</span>
                                    <span class="wallet-address" title="{{ $userWallet->wallet_address }}">{{ Str::limit($userWallet->wallet_address, 20, '...') }}</span>
                                </div>
                                @if($userWallet->is_primary)
                                    <span class="wallet-badge primary"><i class="fas fa-star"></i> Utama</span>
                                @endif
                                <div class="wallet-item-actions">
                                    <button type="button" class="wallet-menu-btn" onclick="toggleWalletMenu(this)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                    <div class="wallet-dropdown-menu">
                                        @if(!$userWallet->is_primary)
                                            <a href="#" class="wallet-dropdown-item" onclick="setPrimaryWallet({{ $userWallet->id }})">
                                                <i class="fas fa-star me-2"></i> Jadikan Utama
                                            </a>
                                        @else
                                            <a href="#" class="wallet-dropdown-item disabled">
                                                <i class="fas fa-star text-warning me-2"></i> Wallet Utama
                                            </a>
                                        @endif
                                        <a href="#" class="wallet-dropdown-item text-danger" onclick="removeWallet({{ $userWallet->id }}, '{{ $userWallet->wallet->name }}')">
                                            <i class="fas fa-trash me-2"></i> Hapus Wallet
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="wallet-empty-state">
                                <i class="fas fa-wallet"></i>
                                <p>Belum ada wallet yang terkoneksi</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                {{-- Tambah Wallet --}}
                <div class="wallet-section">
                    <div class="wallet-add-wrapper">
                        <button type="button" class="btn-add-wallet" onclick="openAddWalletModal()">
                            <i class="fas fa-plus"></i>
                            Tambah wallet
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal for Password Email Verification --}}
<div id="passwordEmailModal" class="modal-overlay" style="display: none;">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Verifikasi Email</h3>
            <button type="button" class="modal-close" onclick="closePasswordEmailModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <p class="modal-description">Masukkan email Anda untuk verifikasi perubahan kata sandi</p>
            <form id="passwordEmailForm">
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-input" placeholder="Masukkan email Anda" required>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-cancel" onclick="closePasswordEmailModal()">Batal</button>
                    <button type="submit" class="btn-save">
                        <i class="fas fa-paper-plane"></i>
                        Kirim Verifikasi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal for 2FA Email Verification --}}
<div id="twofaEmailModal" class="modal-overlay" style="display: none;">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Verifikasi Email</h3>
            <button type="button" class="modal-close" onclick="close2FAEmailModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <p class="modal-description">Masukkan email Anda untuk verifikasi perubahan 2FA</p>
            <form id="twofaEmailForm">
                <input type="hidden" name="action" id="twofaAction" value="">
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-input" placeholder="Masukkan email Anda" required>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-cancel" onclick="close2FAEmailModal()">Batal</button>
                    <button type="submit" class="btn-save">
                        <i class="fas fa-paper-plane"></i>
                        Kirim Verifikasi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Avatar Upload Modal --}}
<div class="modal-overlay" id="avatarModal" style="display: none;">
    <div class="modal-content avatar-modal">
        <div class="modal-header">
            <h3 class="modal-title">EDIT FOTO PROFIL</h3>
            <button type="button" class="modal-close" onclick="closeAvatarModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="avatar-preview-wrapper">
                <div class="avatar-preview" id="avatarPreview">
                    @if(Auth::check() && Auth::user()->avatar)
                        <img src="{{ asset('storage/' . Auth::user()->avatar) }}" alt="Preview" id="previewImage">
                    @else
                        <div class="avatar-preview-placeholder" id="previewPlaceholder">
                            <i class="fas fa-camera"></i>
                            <span>Pilih Foto</span>
                        </div>
                    @endif
                </div>
            </div>

            <div class="avatar-upload-actions">
                <input type="file" id="avatarInput" accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" style="display: none;" onchange="previewAvatar(this)">

                <button type="button" class="btn-upload-avatar" onclick="document.getElementById('avatarInput').click()">
                    <i class="fas fa-upload"></i>
                    Pilih Foto
                </button>

                @if(Auth::check() && Auth::user()->avatar)
                <button type="button" class="btn-remove-avatar" onclick="removeAvatar()">
                    <i class="fas fa-trash"></i>
                    Hapus Foto
                </button>
                @endif
            </div>

            <p class="avatar-hint">Format: JPG, PNG, GIF, WebP (Maks. 2MB)</p>

            <div class="form-actions form-actions-center">
                <button type="button" class="btn-cancel" onclick="closeAvatarModal()">Batal</button>
                <button type="button" class="btn-save btn-cyan" id="btnSaveAvatar" onclick="uploadAvatar()" disabled>
                    <i class="fas fa-save"></i>
                    Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Add Wallet Modal --}}
<div class="modal-overlay" id="addWalletModal" style="display: none;">
    <div class="modal-content wallet-modal">
        <div class="modal-header">
            <h3 class="modal-title">TAMBAH WALLET</h3>
            <button type="button" class="modal-close" onclick="closeAddWalletModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">Pilih Wallet</label>

                <div class="wallet-select-wrapper">
                    <div class="wallet-select-trigger" onclick="toggleWalletSelect()">
                        <span class="wallet-select-placeholder">Pilih wallet</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>

                    <div class="wallet-select-dropdown" id="walletSelectDropdown">
                        @foreach($availableWallets ?? [] as $wallet)
                        <div class="wallet-select-option" data-value="{{ $wallet->id }}" data-name="{{ $wallet->name }}" onclick="selectWallet(this)">
                            <div class="wallet-option-logo">
                                <img src="{{ $wallet->logo_url ?? asset('assets/images/icons/' . $wallet->slug . '-icon.png') }}" alt="{{ $wallet->name }}" onerror="this.outerHTML='<span class=\'wallet-logo-text\'>{{ strtoupper(substr($wallet->name, 0, 2)) }}</span>'">
                            </div>
                            <span class="wallet-option-name">{{ $wallet->name }}</span>
                        </div>
                        @endforeach
                    </div>

                    <input type="hidden" name="wallet_id" id="selectedWalletId">
                    <input type="hidden" name="wallet_name" id="selectedWalletName">
                </div>
            </div>

            {{-- Wallet Address Input (appears after selecting wallet) --}}
            <div class="form-group" id="walletAddressGroup" style="display: none;">
                <label class="form-label">Alamat Wallet</label>
                <input type="text" class="form-input" id="walletAddressInput" name="wallet_address" placeholder="Masukkan alamat wallet Anda">
                <small class="form-hint">Contoh: 0x1234...abcd atau alamat sesuai wallet yang dipilih</small>
            </div>

            <div class="form-actions form-actions-right">
                <button type="button" class="btn-cancel" onclick="closeAddWalletModal()">Batal</button>
                <button type="button" class="btn-save btn-success" id="btnSaveWallet" onclick="saveNewWallet()">Simpan</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard/profile.css') }}?v={{ time() }}">
<style>
    /* Ensure SweetAlert appears above modals */
    .swal2-container {
        z-index: 99999 !important;
    }
</style>
@endpush

@push('scripts')
<script>
// ========================================
// Avatar Upload Functions
// ========================================
let selectedAvatarFile = null;

function openAvatarModal() {
    document.getElementById('avatarModal').style.display = 'flex';
    selectedAvatarFile = null;
    document.getElementById('btnSaveAvatar').disabled = true;
}

function closeAvatarModal() {
    document.getElementById('avatarModal').style.display = 'none';
    selectedAvatarFile = null;

    // Reset preview to current avatar
    const previewContainer = document.getElementById('avatarPreview');
    @if(Auth::check() && Auth::user()->avatar)
        previewContainer.innerHTML = `<img src="{{ asset('storage/' . Auth::user()->avatar) }}" alt="Preview" id="previewImage">`;
    @else
        previewContainer.innerHTML = `
            <div class="avatar-preview-placeholder" id="previewPlaceholder">
                <i class="fas fa-camera"></i>
                <span>Pilih Foto</span>
            </div>
        `;
    @endif

    document.getElementById('avatarInput').value = '';
    document.getElementById('btnSaveAvatar').disabled = true;
}

function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];

        // Validate file size (max 2MB)
        if (file.size > 2 * 1024 * 1024) {
            Swal.fire({
                icon: 'error',
                title: 'File Terlalu Besar',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
            color: '#ffffff',
                text: 'Ukuran file maksimal 2MB',
                confirmButtonColor: '#0cc7cc'
            });
            input.value = '';
            return;
        }

        // Validate file type
        const validTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp'];
        if (!validTypes.includes(file.type)) {
            Swal.fire({
                icon: 'error',
                title: 'Format Tidak Valid',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                text: 'Format file harus JPG, PNG, GIF, atau WebP',
                confirmButtonColor: '#0cc7cc'
            });
            input.value = '';
            return;
        }

        selectedAvatarFile = file;

        const reader = new FileReader();
        reader.onload = function(e) {
            const previewContainer = document.getElementById('avatarPreview');
            previewContainer.innerHTML = `<img src="${e.target.result}" alt="Preview" id="previewImage">`;
            document.getElementById('btnSaveAvatar').disabled = false;
        };
        reader.readAsDataURL(file);
    }
}

function uploadAvatar() {
    if (!selectedAvatarFile) {
        Swal.fire({
            icon: 'warning',
            title: 'Pilih Foto',
            background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
            color: '#ffffff',
            text: 'Silakan pilih foto terlebih dahulu',
            confirmButtonColor: '#0cc7cc'
        });
        return;
    }

    const formData = new FormData();
    formData.append('avatar', selectedAvatarFile);

    // Show loading
    Swal.fire({
        title: 'Mengupload...',
        text: 'Mohon tunggu sebentar',
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    fetch('{{ route("dashboard.profile.avatar") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update avatar display
            const avatarDisplay = document.getElementById('avatarDisplay');
            avatarDisplay.innerHTML = `<img src="${data.avatar_url}" alt="Avatar" id="currentAvatar">`;

            closeAvatarModal();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                text: data.message || 'Avatar berhasil diperbarui',
                confirmButtonColor: '#0cc7cc',
                timer: 2000,
                showConfirmButton: false
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                text: data.message || 'Gagal mengupload avatar',
                confirmButtonColor: '#0cc7cc'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Terjadi kesalahan saat mengupload avatar',
            confirmButtonColor: '#0cc7cc'
        });
    });
}

function removeAvatar() {
    Swal.fire({
        title: 'Hapus Foto Profil',
        text: 'Apakah Anda yakin ingin menghapus foto profil?',
        icon: 'warning',
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        showCancelButton: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('{{ route("dashboard.profile.avatar.remove") }}', {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update avatar display with placeholder
                    const avatarDisplay = document.getElementById('avatarDisplay');
                    avatarDisplay.innerHTML = `
                        <div class="avatar-placeholder-large" id="avatarPlaceholder">
                            <span>{{ Auth::check() ? strtoupper(substr(Auth::user()->name, 0, 1)) : 'G' }}</span>
                        </div>
                    `;

                    closeAvatarModal();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                        color: '#ffffff',
                        text: 'Foto profil berhasil dihapus',
                        confirmButtonColor: '#0cc7cc',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: data.message || 'Gagal menghapus avatar',
                        confirmButtonColor: '#0cc7cc'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat menghapus avatar',
                    confirmButtonColor: '#0cc7cc'
                });
            });
        }
    });
}

// Close avatar modal on overlay click
document.getElementById('avatarModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAvatarModal();
    }
});

// ========================================
// Tab Navigation
// ========================================
// Tab Navigation
document.querySelectorAll('.profile-menu-item').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();

        // Remove active from all menu items and tabs
        document.querySelectorAll('.profile-menu-item').forEach(m => m.classList.remove('active'));
        document.querySelectorAll('.profile-tab').forEach(t => t.classList.remove('active'));

        // Add active to clicked item and corresponding tab
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');

        // Reset security submenu if switching to password tab
        if (tabId === 'kata-sandi') {
            showSecurityMain();
        }
    });
});

// Security Submenu Navigation
document.querySelectorAll('.security-menu-item').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        const securityId = this.getAttribute('data-security');

        document.getElementById('security-main').style.display = 'none';
        document.getElementById(securityId).style.display = 'block';
    });
});

function showSecurityMain() {
    document.querySelectorAll('.security-sub').forEach(s => s.style.display = 'none');
    document.getElementById('security-main').style.display = 'block';
}

// Password Toggle
function togglePassword(btn) {
    const input = btn.parentElement.querySelector('input');
    const icon = btn.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');
    }
}

// Wallet Menu Toggle
function toggleWalletMenu(btn) {
    const dropdown = btn.nextElementSibling;
    dropdown.classList.toggle('show');

    // Close on click outside
    document.addEventListener('click', function closeMenu(e) {
        if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
            dropdown.classList.remove('show');
            document.removeEventListener('click', closeMenu);
        }
    });
}

function setMainWallet(wallet) {
    console.log('Set main wallet:', wallet);
    // Implement AJAX call
}

function connectWallet(wallet) {
    Swal.fire({
        title: 'Koneksikan Wallet',
        text: `Apakah Anda ingin mengkoneksikan ${wallet}?`,
        icon: 'question',
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        showCancelButton: true,
        confirmButtonColor: '#0cc7cc',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Koneksikan',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            // Implement AJAX call to connect wallet
            fetch('{{ url("/dashboard/profile/connect-wallet") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ wallet: wallet })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Berhasil!', data.message || 'Wallet berhasil dikoneksikan', 'success')
                    .then(() => location.reload());
                } else {
                    Swal.fire('Gagal', data.message || 'Gagal mengkoneksikan wallet', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('Error', 'Terjadi kesalahan', 'error');
            });
        }
    });
}

function disconnectWallet(wallet) {
    Swal.fire({
        title: 'Disconnect Wallet',
        text: `Apakah Anda yakin ingin disconnect ${wallet}?`,
        icon: 'warning',
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        showCancelButton: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Disconnect',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            // Implement AJAX call
            console.log('Disconnect wallet:', wallet);
        }
    });
}

function deleteWallet(wallet) {
    Swal.fire({
        title: 'Hapus Wallet',
        text: `Apakah Anda yakin ingin menghapus ${wallet}?`,
        icon: 'warning',
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        showCancelButton: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            // Implement AJAX call
            console.log('Delete wallet:', wallet);
        }
    });
}

// Add Wallet Modal
function openAddWalletModal() {
    document.getElementById('addWalletModal').style.display = 'flex';
}

function closeAddWalletModal() {
    document.getElementById('addWalletModal').style.display = 'none';
    document.getElementById('walletSelectDropdown').classList.remove('show');

    // Reset form
    document.getElementById('selectedWalletId').value = '';
    document.getElementById('selectedWalletName').value = '';
    document.getElementById('walletAddressInput').value = '';
    document.getElementById('walletAddressGroup').style.display = 'none';

    // Reset trigger
    const trigger = document.querySelector('.wallet-select-trigger');
    trigger.innerHTML = `
        <span class="wallet-select-placeholder">Pilih wallet</span>
        <i class="fas fa-chevron-right"></i>
    `;
    trigger.classList.remove('selected');

    // Reset button
    document.getElementById('btnSaveWallet').classList.remove('btn-cyan');
    document.getElementById('btnSaveWallet').classList.add('btn-success');
}

function toggleWalletSelect() {
    const dropdown = document.getElementById('walletSelectDropdown');
    const trigger = document.querySelector('.wallet-select-trigger');
    const icon = trigger.querySelector('i');

    dropdown.classList.toggle('show');

    if (dropdown.classList.contains('show')) {
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-down');
    } else {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-right');
    }
}

function selectWallet(option) {
    const value = option.getAttribute('data-value');
    const name = option.getAttribute('data-name');

    const trigger = document.querySelector('.wallet-select-trigger');
    trigger.innerHTML = `
        <span>${name}</span>
        <i class="fas fa-chevron-right"></i>
    `;
    trigger.classList.add('selected');

    document.getElementById('selectedWalletId').value = value;
    document.getElementById('selectedWalletName').value = name;
    document.getElementById('walletSelectDropdown').classList.remove('show');

    // Show wallet address input
    document.getElementById('walletAddressGroup').style.display = 'block';
    document.getElementById('walletAddressInput').placeholder = 'Masukkan alamat wallet ' + name + ' Anda';
    document.getElementById('walletAddressInput').focus();
}

// Save new wallet
function saveNewWallet() {
    const walletId = document.getElementById('selectedWalletId').value;
    const walletName = document.getElementById('selectedWalletName').value;
    const walletAddress = document.getElementById('walletAddressInput').value;

    if (!walletId) {
        Swal.fire({
            icon: 'warning',
            title: 'Pilih Wallet',
            background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
            color: '#ffffff',
            text: 'Silakan pilih wallet terlebih dahulu',
            confirmButtonColor: '#0cc7cc'
        });
        return;
    }

    if (!walletAddress || walletAddress.length < 10) {
        Swal.fire({
            icon: 'warning',
            title: 'Alamat Wallet Diperlukan',
            background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
            color: '#ffffff',
            text: 'Silakan masukkan alamat wallet yang valid (minimal 10 karakter)',
            confirmButtonColor: '#0cc7cc'
        });
        document.getElementById('walletAddressInput').focus();
        return;
    }

    // Show loading
    Swal.fire({
        title: 'Menyimpan...',
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        text: 'Mohon tunggu sebentar',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // Send AJAX request
    fetch('{{ route("dashboard.profile.wallet.add") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            wallet_id: walletId,
            wallet_address: walletAddress
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeAddWalletModal();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: data.message || `${walletName} berhasil ditambahkan`,
                confirmButtonColor: '#0cc7cc',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                timer: 2000,
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                text: data.message || 'Gagal menambahkan wallet',
                confirmButtonColor: '#0cc7cc'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
            color: '#ffffff',
            text: 'Terjadi kesalahan saat menyimpan wallet',
            confirmButtonColor: '#0cc7cc'
        });
    });
}

// Remove wallet
function removeWallet(walletId, walletName) {
    Swal.fire({
        title: 'Hapus Wallet',
        text: `Apakah Anda yakin ingin menghapus wallet ${walletName}?`,
        icon: 'warning',
        showCancelButton: true,
        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
        color: '#ffffff',
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`{{ url('/dashboard/profile/wallet') }}/${walletId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Dihapus',
                        text: data.message || 'Wallet berhasil dihapus',
                        timer: 1500,
                        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                        color: '#ffffff',
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                        color: '#ffffff',
                        text: data.message || 'Gagal menghapus wallet',
                        confirmButtonColor: '#0cc7cc'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                    color: '#ffffff',
                    text: 'Terjadi kesalahan saat menghapus wallet',
                    confirmButtonColor: '#0cc7cc'
                });
            });
        }
    });
}

// Set primary wallet
function setPrimaryWallet(walletId) {
    fetch(`{{ url('/dashboard/profile/wallet') }}/${walletId}/set-primary`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                text: data.message || 'Wallet utama berhasil diubah',
                timer: 1500,
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
                color: '#ffffff',
                text: data.message || 'Gagal mengubah wallet utama',
                confirmButtonColor: '#0cc7cc'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Terjadi kesalahan',
            background: 'linear-gradient(135deg, #1e1438 0%, #2d1b4e 50%, #1e1438 100%)',
            color: '#ffffff',
            confirmButtonColor: '#0cc7cc'
        });
    });
}

// Close modal on overlay click
document.getElementById('addWalletModal').addEventListener('click', function(e) {
    if (e.target === this || e.target.classList.contains('modal-overlay')) {
        closeAddWalletModal();
    }
});

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    const dropdown = document.getElementById('walletSelectDropdown');
    const trigger = document.querySelector('.wallet-select-trigger');

    if (dropdown && trigger && !dropdown.contains(e.target) && !trigger.contains(e.target)) {
        dropdown.classList.remove('show');
        const icon = trigger.querySelector('i');
        if (icon) {
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-right');
        }
    }
});

// Show security main menu
function showSecurityMain() {
    document.getElementById('security-main').style.display = 'block';
    document.querySelectorAll('.security-sub').forEach(el => el.style.display = 'none');
}

// Show password email modal
function showPasswordEmailModal() {
    const form = document.getElementById('changePasswordForm');
    if (form.checkValidity()) {
        document.getElementById('passwordEmailModal').style.display = 'flex';
    } else {
        form.reportValidity();
    }
}

// Close password email modal
function closePasswordEmailModal() {
    document.getElementById('passwordEmailModal').style.display = 'none';
}

// Handle password email form submission
document.getElementById('passwordEmailForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const passwordForm = document.getElementById('changePasswordForm');
    const emailInput = this.querySelector('input[name="email"]').value;

    const formData = new FormData(passwordForm);
    formData.append('email', emailInput);

    fetch('{{ url("/dashboard/profile/password") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closePasswordEmailModal();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: data.message || 'Link verifikasi telah dikirim ke email Anda',
                confirmButtonColor: '#667eea'
            }).then(() => {
                passwordForm.reset();
                showSecurityMain();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: data.message || 'Terjadi kesalahan',
                confirmButtonColor: '#667eea'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Terjadi kesalahan saat memproses permintaan',
            confirmButtonColor: '#667eea'
        });
    });
});

// Show 2FA email modal
function show2FAEmailModal(checkbox) {
    const action = checkbox.checked ? 'enable' : 'disable';
    document.getElementById('twofaAction').value = action;
    document.getElementById('twofaEmailModal').style.display = 'flex';
}

// Close 2FA email modal
function close2FAEmailModal() {
    document.getElementById('twofaEmailModal').style.display = 'none';
    // Reset checkbox to original state
    const checkbox = document.getElementById('twofa-toggle');
    checkbox.checked = {{ (Auth::user()->two_factor_enabled ?? false) ? 'true' : 'false' }};
}

// Handle 2FA email form submission
document.getElementById('twofaEmailForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const emailInput = this.querySelector('input[name="email"]').value;
    const action = document.getElementById('twofaAction').value;

    const formData = new FormData();
    formData.append('email', emailInput);
    formData.append('action', action);

    fetch('{{ url("/dashboard/profile/2fa") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            close2FAEmailModal();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: data.message || 'Link verifikasi telah dikirim ke email Anda',
                confirmButtonColor: '#667eea'
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: data.message || 'Terjadi kesalahan',
                confirmButtonColor: '#667eea'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Terjadi kesalahan saat memproses permintaan',
            confirmButtonColor: '#667eea'
        });
    });
});
</script>
@endpush