@extends('admin::layouts.admin')

@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)) : 'A' }}</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 : 'Admin' }}</h4>
                <p class="profile-user-email">{{ Auth::check() ? Auth::user()->email : 'admin@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>

                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <form action="{{ route('admin.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">SETTING WALLET</h3>

                <form action="{{ route('admin.profile.update') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')

                    <div class="form-group">
                        <label class="form-label">Wallet Platform</label>
                        <select name="preferred_wallet" class="form-input">
                            <option value="">Pilih wallet</option>
                            <option value="indodax" {{ (Auth::user()->preferred_wallet ?? '') == 'indodax' ? 'selected' : '' }}>Indodax</option>
                            <option value="metamask" {{ (Auth::user()->preferred_wallet ?? '') == 'metamask' ? 'selected' : '' }}>MetaMask</option>
                            <option value="trustwallet" {{ (Auth::user()->preferred_wallet ?? '') == 'trustwallet' ? 'selected' : '' }}>Trust Wallet</option>
                            <option value="coinbase" {{ (Auth::user()->preferred_wallet ?? '') == 'coinbase' ? 'selected' : '' }}>Coinbase</option>
                            <option value="phantom" {{ (Auth::user()->preferred_wallet ?? '') == 'phantom' ? 'selected' : '' }}>Phantom</option>
                        </select>
                    </div>

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

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

@push('scripts')
<script src="{{ asset('assets/js/admin/profile.js') }}?v={{ time() }}"></script>
<script>
// Toggle password visibility
function togglePassword(button) {
    const input = button.previousElementSibling;
    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');
    }
}

// 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('{{ route("admin.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('{{ route("admin.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'
        });
    });
});

// Tab switching
document.querySelectorAll('.profile-menu-item').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        const tabId = this.getAttribute('data-tab');

        // Update active menu
        document.querySelectorAll('.profile-menu-item').forEach(i => i.classList.remove('active'));
        this.classList.add('active');

        // Update active tab
        document.querySelectorAll('.profile-tab').forEach(tab => tab.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
    });
});

// Security menu handling
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.querySelectorAll('.security-sub').forEach(el => el.style.display = 'none');
        document.getElementById(securityId).style.display = 'block';
    });
});
</script>
@endpush
@endsection