@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">
                    @if(Auth::check() && Auth::user()->avatar)
                        <img src="{{ asset('storage/' . Auth::user()->avatar) }}" alt="{{ Auth::user()->name }}">
                    @else
                        <div class="avatar-placeholder-large">
                            <span>{{ Auth::check() ? strtoupper(substr(Auth::user()->name, 0, 1)) : 'G' }}</span>
                        </div>
                    @endif
                </div>
                <button class="avatar-edit-btn" title="Edit Avatar">
                    <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 action="{{ url('/dashboard/profile/change-password') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')

                    <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="submit" class="btn-save">
                            <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>

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

                    <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" name="two_factor_enabled" {{ (Auth::user()->two_factor_enabled ?? false) ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                                <span class="toggle-text">Aktifkan</span>
                            </label>
                        </div>
                    </div>

                    <div class="form-actions form-actions-right">
                        <button type="submit" class="btn-save">
                            <i class="fas fa-save"></i>
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>

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

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

                    <div class="connected-wallets" id="connectedWallets">
                        @php
                            $connectedWallet = Auth::user()->preferred_wallet ?? 'indodax';
                            $walletLogos = [
                                'indodax' => asset('assets/images/wallets/indodax.png'),
                                'metamask' => asset('assets/images/wallets/metamask.png'),
                                'trustwallet' => asset('assets/images/wallets/trustwallet.png'),
                                'coinbase' => asset('assets/images/wallets/coinbase.png'),
                                'phantom' => asset('assets/images/wallets/phantom.png'),
                            ];
                            $walletNames = [
                                'indodax' => 'Indodax',
                                'metamask' => 'Metamask',
                                'trustwallet' => 'Trust Wallet',
                                'coinbase' => 'Coinbase',
                                'phantom' => 'Phantom',
                            ];
                        @endphp

                        @if($connectedWallet)
                        <div class="wallet-item">
                            <div class="wallet-item-info">
                                <img src="{{ $walletLogos[$connectedWallet] ?? '' }}" alt="{{ $walletNames[$connectedWallet] ?? $connectedWallet }}" class="wallet-logo" onerror="this.style.display='none'">
                                <span class="wallet-name">{{ $walletNames[$connectedWallet] ?? ucfirst($connectedWallet) }}</span>
                            </div>
                            <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">
                                    <a href="#" class="wallet-dropdown-item" onclick="setMainWallet('{{ $connectedWallet }}')">Jadikan wallet utama</a>
                                    <a href="#" class="wallet-dropdown-item" onclick="disconnectWallet('{{ $connectedWallet }}')">Disconnect</a>
                                    <a href="#" class="wallet-dropdown-item text-danger" onclick="deleteWallet('{{ $connectedWallet }}')">Hapus wallet</a>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Other Wallets --}}
                <div class="wallet-section">
                    <label class="wallet-section-label">Wallet lainnya</label>

                    <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>

{{-- Add Wallet Modal --}}
<div class="modal-overlay" id="addWalletModal">
    <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">
            <form action="{{ url('/dashboard/profile/add-wallet') }}" method="POST" id="addWalletForm">
                @csrf

                <div class="form-group">
                    <label class="form-label">Tambah 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">
                            <div class="wallet-select-option" data-value="indodax" onclick="selectWallet(this)">
                                <img src="{{ asset('assets/images/wallets/indodax.png') }}" alt="Indodax" onerror="this.style.display='none'">
                                <span>Indodax</span>
                            </div>
                            <div class="wallet-select-option" data-value="metamask" onclick="selectWallet(this)">
                                <img src="{{ asset('assets/images/wallets/metamask.png') }}" alt="Metamask" onerror="this.style.display='none'">
                                <span>Metamask</span>
                            </div>
                            <div class="wallet-select-option" data-value="trustwallet" onclick="selectWallet(this)">
                                <img src="{{ asset('assets/images/wallets/trustwallet.png') }}" alt="Trust Wallet" onerror="this.style.display='none'">
                                <span>Trust Wallet</span>
                            </div>
                            <div class="wallet-select-option" data-value="coinbase" onclick="selectWallet(this)">
                                <img src="{{ asset('assets/images/wallets/coinbase.png') }}" alt="Coinbase" onerror="this.style.display='none'">
                                <span>Coinbase</span>
                            </div>
                            <div class="wallet-select-option" data-value="phantom" onclick="selectWallet(this)">
                                <img src="{{ asset('assets/images/wallets/phantom.png') }}" alt="Phantom" onerror="this.style.display='none'">
                                <span>Phantom</span>
                            </div>
                        </div>

                        <input type="hidden" name="wallet" id="selectedWallet">
                    </div>
                </div>

                <div class="form-actions form-actions-right">
                    <button type="submit" class="btn-save btn-save-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard/profile.css') }}?v={{ time() }}">
@endpush

@push('scripts')
<script>
// 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 disconnectWallet(wallet) {
    console.log('Disconnect wallet:', wallet);
    // Implement AJAX call
}

function deleteWallet(wallet) {
    if (confirm('Apakah Anda yakin ingin menghapus wallet ini?')) {
        console.log('Delete wallet:', wallet);
        // Implement AJAX call
    }
}

// Add Wallet Modal
function openAddWalletModal() {
    document.getElementById('addWalletModal').classList.add('show');
}

function closeAddWalletModal() {
    document.getElementById('addWalletModal').classList.remove('show');
    document.getElementById('walletSelectDropdown').classList.remove('show');
}

function toggleWalletSelect() {
    document.getElementById('walletSelectDropdown').classList.toggle('show');
}

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

    const trigger = document.querySelector('.wallet-select-trigger');
    trigger.innerHTML = `
        ${img.src ? `<img src="${img.src}" alt="${name}" onerror="this.style.display='none'">` : ''}
        <span>${name}</span>
        <i class="fas fa-chevron-right"></i>
    `;

    document.getElementById('selectedWallet').value = value;
    document.getElementById('walletSelectDropdown').classList.remove('show');
}

// Close modal on overlay click
document.getElementById('addWalletModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAddWalletModal();
    }
});
</script>
@endpush