@extends('mobile.template.app')

@section('content')
    <div class="min-h-screen bg-gray-50 pb-24">
        <!-- Header with Profile Card -->
        <div class="bg-gradient-to-br from-indigo-600 to-indigo-800 pt-4 pb-20">
            <div class="px-4">
                <h1 class="text-white text-xl font-bold mb-4">Profil Saya</h1>

                <!-- Profile Card -->
                <div class="bg-white rounded-2xl p-4 shadow-lg">
                    <div class="flex items-center gap-4 mb-4">
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center relative overflow-hidden">
                            @if (Auth::user()->photo)
                                <img src="{{ Auth::user()->photo_url }}" alt="Profile" class="w-full h-full object-cover">
                            @else
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                </svg>
                            @endif
                        </div>
                        <div class="flex-1">
                            <h2 class="font-bold text-gray-900">{{ Auth::user()->name }}</h2>
                            <p class="text-sm text-gray-500">@\{{ Auth::user()->username }}</p>
                            <p class="text-xs text-indigo-600 mt-1">Member sejak
                                {{ Auth::user()->joined_at ? Auth::user()->joined_at->format('d M Y') : '-' }}</p>
                        </div>
                    </div>

                    <!-- Stats -->
                    <div class="grid grid-cols-2 gap-3 pt-4 border-t border-gray-100">
                        <div class="text-center">
                            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_orders']) }}</p>
                            <p class="text-xs text-gray-500">Total Order</p>
                        </div>
                        <div class="text-center">
                            <p class="text-2xl font-bold text-indigo-600">
                                Rp {{ number_format($stats['total_commission'], 0, ',', '.') }}</p>
                            <p class="text-xs text-gray-500">Total Komisi</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="px-4 -mt-12">
            <!-- Personal Info Card -->
            <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-semibold text-gray-800 text-sm">Informasi Pribadi</h3>
                    <button id="edit-profile-btn"
                        class="text-indigo-600 hover:text-indigo-700 text-xs font-medium flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        Edit
                    </button>
                </div>
                <div class="space-y-3">
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        <div class="flex-1">
                            <p class="text-xs text-gray-500">Email</p>
                            <p class="text-sm font-medium text-gray-900">{{ Auth::user()->email }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        <div class="flex-1">
                            <p class="text-xs text-gray-500">No. Telepon</p>
                            <p class="text-sm font-medium text-gray-900">{{ Auth::user()->phone ?? '-' }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <div class="flex-1">
                            <p class="text-xs text-gray-500">Alamat</p>
                            <p class="text-sm font-medium text-gray-900">{{ Auth::user()->address ?? '-' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Menu Items -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4">
                <button id="bank-menu-btn"
                    class="w-full flex items-center gap-3 p-4 hover:bg-gray-50 transition-colors border-b border-gray-100">
                    <div class="w-10 h-10 bg-indigo-50 rounded-lg flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                        </svg>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="font-medium text-gray-900 text-sm">Rekening Bank</p>
                        <p class="text-xs text-gray-500">Kelola rekening bank</p>
                    </div>
                    <span class="bg-indigo-100 text-indigo-600 text-xs font-medium px-2 py-1 rounded-full">
                        {{ count($banks) }}
                    </span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>

                <button id="notification-menu-btn"
                    class="w-full flex items-center gap-3 p-4 hover:bg-gray-50 transition-colors border-b border-gray-100">
                    <div class="w-10 h-10 bg-yellow-50 rounded-lg flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="font-medium text-gray-900 text-sm">Notifikasi</p>
                        <p class="text-xs text-gray-500">Pengaturan notifikasi</p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>

                <button id="password-menu-btn"
                    class="w-full flex items-center gap-3 p-4 hover:bg-gray-50 transition-colors border-b border-gray-100">
                    <div class="w-10 h-10 bg-red-50 rounded-lg flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="font-medium text-gray-900 text-sm">Ubah Password</p>
                        <p class="text-xs text-gray-500">Keamanan akun</p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>

                <button id="help-menu-btn"
                    class="w-full flex items-center gap-3 p-4 hover:bg-gray-50 transition-colors">
                    <div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="flex-1 text-left">
                        <p class="font-medium text-gray-900 text-sm">Bantuan & FAQ</p>
                        <p class="text-xs text-gray-500">Pusat bantuan</p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>

            <!-- Logout Button -->
            <button id="logout-btn"
                class="w-full bg-red-50 text-red-600 font-semibold py-3 rounded-xl flex items-center justify-center gap-2 hover:bg-red-100 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                </svg>
                <span>Keluar</span>
            </button>

            <!-- Version -->
            <p class="text-center text-xs text-gray-400 mt-4">
                CS-Doorasi v1.0.0
            </p>
        </div>
    </div>

    <!-- Edit Profile Modal -->
    <div id="edit-profile-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="fixed inset-x-0 bottom-0">
            <div class="bg-white rounded-t-2xl p-4 max-h-[80vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800 text-lg">Edit Profil</h3>
                    <button id="close-edit-modal" class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
                </div>

                <div class="space-y-4">
                    <!-- Photo Upload -->
                    <div class="text-center">
                        <div class="w-24 h-24 mx-auto bg-gray-200 rounded-full overflow-hidden mb-2">
                            <img id="preview-photo" src="{{ Auth::user()->photo_url }}" alt="Photo"
                                class="w-full h-full object-cover">
                        </div>
                        <label class="text-sm text-indigo-600 font-medium cursor-pointer hover:text-indigo-700">
                            Ubah Foto
                            <input type="file" id="photo-input" accept="image/*" class="hidden">
                        </label>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
                        <input type="text" id="edit-name" value="{{ Auth::user()->name }}"
                            class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input type="email" id="edit-email" value="{{ Auth::user()->email }}"
                            class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">No. Telepon</label>
                        <input type="tel" id="edit-phone" value="{{ Auth::user()->phone }}"
                            class="w-full border border-gray-300 rounded-lg p-3">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>
                        <textarea id="edit-address" rows="3"
                            class="w-full border border-gray-300 rounded-lg p-3">{{ Auth::user()->address }}</textarea>
                    </div>

                    <button id="save-profile-btn"
                        class="w-full bg-indigo-600 text-white font-semibold py-3 rounded-xl hover:bg-indigo-700">
                        Simpan Perubahan
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bank Modal -->
    <div id="bank-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="fixed inset-x-0 bottom-0">
            <div class="bg-white rounded-t-2xl p-4 max-h-[80vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800 text-lg">Rekening Bank</h3>
                    <button id="close-bank-modal" class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
                </div>

                <!-- Bank List -->
                <div id="bank-list" class="space-y-3 mb-4">
                    @foreach ($banks ?? [] as $bank)
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <p class="font-bold text-gray-900">{{ $bank->bank_name }}</p>
                                    <p class="text-sm text-gray-600">{{ $bank->account_number }}</p>
                                    <p class="text-xs text-gray-500">{{ $bank->account_name }}</p>
                                </div>
                                @if ($bank->is_primary)
                                    <span
                                        class="bg-green-100 text-green-700 text-xs font-medium px-2 py-1 rounded-full">
                                        Utama
                                    </span>
                                @endif
                            </div>
                            <div class="flex gap-2 mt-3">
                                <button onclick="editBank({{ $bank->id }})"
                                    class="flex-1 bg-indigo-600 text-white text-xs py-2 rounded-lg hover:bg-indigo-700">
                                    Edit
                                </button>
                                <button onclick="deleteBank({{ $bank->id }})"
                                    class="flex-1 bg-red-50 text-red-600 text-xs py-2 rounded-lg hover:bg-red-100">
                                    Hapus
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Add Bank Button -->
                <button id="add-bank-btn"
                    class="w-full bg-indigo-600 text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2 hover:bg-indigo-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 4v16m8-8H4" />
                    </svg>
                    <span>Tambah Rekening Baru</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Add/Edit Bank Modal -->
    <div id="bank-form-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="fixed inset-x-0 bottom-0">
            <div class="bg-white rounded-t-2xl p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800 text-lg" id="bank-form-title">Tambah Rekening</h3>
                    <button id="close-bank-form-modal" class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
                </div>

                <div class="space-y-4">
                    <input type="hidden" id="bank-id">

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nama Bank</label>
                        <select id="bank-name" class="w-full border border-gray-300 rounded-lg p-3">
                            <option value="">Pilih Bank</option>
                            <option value="BCA">BCA</option>
                            <option value="Mandiri">Mandiri</option>
                            <option value="BNI">BNI</option>
                            <option value="BRI">BRI</option>
                            <option value="BSI">BSI</option>
                            <option value="CIMB Niaga">CIMB Niaga</option>
                            <option value="Permata">Permata</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Rekening</label>
                        <input type="text" id="account-number"
                            class="w-full border border-gray-300 rounded-lg p-3" placeholder="1234567890">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nama Pemilik Rekening</label>
                        <input type="text" id="account-name" class="w-full border border-gray-300 rounded-lg p-3"
                            placeholder="Sesuai dengan buku tabungan">
                    </div>

                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="is-primary" class="w-4 h-4 text-indigo-600 rounded">
                        <label for="is-primary" class="text-sm text-gray-700">Jadikan rekening utama</label>
                    </div>

                    <button id="save-bank-btn"
                        class="w-full bg-indigo-600 text-white font-semibold py-3 rounded-xl hover:bg-indigo-700">
                        Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Change Password Modal -->
    <div id="password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="fixed inset-x-0 bottom-0">
            <div class="bg-white rounded-t-2xl p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800 text-lg">Ubah Password</h3>
                    <button id="close-password-modal" class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password Lama</label>
                        <div class="relative">
                            <input type="password" id="current-password"
                                class="w-full border border-gray-300 rounded-lg p-3 pr-10"
                                placeholder="Masukkan password lama">
                            <button type="button" onclick="togglePassword('current-password')"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password Baru</label>
                        <input type="password" id="new-password"
                            class="w-full border border-gray-300 rounded-lg p-3" placeholder="Minimal 8 karakter">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Konfirmasi Password Baru</label>
                        <input type="password" id="confirm-password"
                            class="w-full border border-gray-300 rounded-lg p-3" placeholder="Ketik ulang password baru">
                    </div>

                    <button id="save-password-btn"
                        class="w-full bg-indigo-600 text-white font-semibold py-3 rounded-xl hover:bg-indigo-700">
                        Simpan Password
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // Modal Controls
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }

        // Edit Profile
        document.getElementById('edit-profile-btn').addEventListener('click', () => openModal('edit-profile-modal'));
        document.getElementById('close-edit-modal').addEventListener('click', () => closeModal('edit-profile-modal'));

        // Photo Preview
        document.getElementById('photo-input').addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    document.getElementById('preview-photo').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        // Save Profile
        document.getElementById('save-profile-btn').addEventListener('click', async () => {
            const formData = new FormData();
            formData.append('name', document.getElementById('edit-name').value);
            formData.append('email', document.getElementById('edit-email').value);
            formData.append('phone', document.getElementById('edit-phone').value);
            formData.append('address', document.getElementById('edit-address').value);

            const photoInput = document.getElementById('photo-input');
            if (photoInput.files.length > 0) {
                formData.append('photo', photoInput.files[0]);
            }

            try {
                const response = await axios.post('/api/profile', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'X-HTTP-Method-Override': 'PUT'
                    }
                });

                alert('Profil berhasil diperbarui!');
                location.reload();
            } catch (error) {
                alert('Gagal memperbarui profil: ' + (error.response?.data?.message || error.message));
            }
        });

        // Bank Modal
        document.getElementById('bank-menu-btn').addEventListener('click', () => openModal('bank-modal'));
        document.getElementById('close-bank-modal').addEventListener('click', () => closeModal('bank-modal'));

        // Add Bank
        document.getElementById('add-bank-btn').addEventListener('click', () => {
            document.getElementById('bank-form-title').textContent = 'Tambah Rekening';
            document.getElementById('bank-id').value = '';
            document.getElementById('bank-name').value = '';
            document.getElementById('account-number').value = '';
            document.getElementById('account-name').value = '';
            document.getElementById('is-primary').checked = false;
            openModal('bank-form-modal');
        });

        document.getElementById('close-bank-form-modal').addEventListener('click', () => closeModal(
            'bank-form-modal'));

        // Edit Bank
        async function editBank(id) {
            try {
                const response = await axios.get(`/api/profile/banks`);
                const bank = response.data.find(b => b.id === id);

                document.getElementById('bank-form-title').textContent = 'Edit Rekening';
                document.getElementById('bank-id').value = bank.id;
                document.getElementById('bank-name').value = bank.bank_name;
                document.getElementById('account-number').value = bank.account_number;
                document.getElementById('account-name').value = bank.account_name;
                document.getElementById('is-primary').checked = bank.is_primary;
                openModal('bank-form-modal');
            } catch (error) {
                alert('Gagal memuat data bank');
            }
        }

        // Save Bank
        document.getElementById('save-bank-btn').addEventListener('click', async () => {
            const bankId = document.getElementById('bank-id').value;
            const data = {
                bank_name: document.getElementById('bank-name').value,
                account_number: document.getElementById('account-number').value,
                account_name: document.getElementById('account-name').value,
                is_primary: document.getElementById('is-primary').checked
            };

            try {
                if (bankId) {
                    await axios.put(`/api/profile/banks/${bankId}`, data);
                    alert('Rekening berhasil diperbarui!');
                } else {
                    await axios.post('/api/profile/banks', data);
                    alert('Rekening berhasil ditambahkan!');
                }
                location.reload();
            } catch (error) {
                alert('Gagal menyimpan rekening: ' + (error.response?.data?.message || error.message));
            }
        });

        // Delete Bank
        async function deleteBank(id) {
            if (!confirm('Apakah Anda yakin ingin menghapus rekening ini?')) return;

            try {
                await axios.delete(`/api/profile/banks/${id}`);
                alert('Rekening berhasil dihapus!');
                location.reload();
            } catch (error) {
                alert('Gagal menghapus rekening: ' + (error.response?.data?.message || error.message));
            }
        }

        // Password Modal
        document.getElementById('password-menu-btn').addEventListener('click', () => openModal('password-modal'));
        document.getElementById('close-password-modal').addEventListener('click', () => closeModal('password-modal'));

        // Toggle Password Visibility
        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            input.type = input.type === 'password' ? 'text' : 'password';
        }

        // Save Password
        document.getElementById('save-password-btn').addEventListener('click', async () => {
            const currentPassword = document.getElementById('current-password').value;
            const newPassword = document.getElementById('new-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;

            if (newPassword !== confirmPassword) {
                alert('Password baru tidak cocok!');
                return;
            }

            if (newPassword.length < 8) {
                alert('Password minimal 8 karakter!');
                return;
            }

            try {
                await axios.post('/api/profile/change-password', {
                    current_password: currentPassword,
                    new_password: newPassword,
                    new_password_confirmation: confirmPassword
                });

                alert('Password berhasil diubah!');
                closeModal('password-modal');
                document.getElementById('current-password').value = '';
                document.getElementById('new-password').value = '';
                document.getElementById('confirm-password').value = '';
            } catch (error) {
                alert('Gagal mengubah password: ' + (error.response?.data?.message || error.message));
            }
        });

        // Notification Menu (placeholder)
        document.getElementById('notification-menu-btn').addEventListener('click', () => {
            alert('Fitur pengaturan notifikasi akan segera hadir!');
        });

        // Help Menu (placeholder)
        document.getElementById('help-menu-btn').addEventListener('click', () => {
            window.location.href = '/help'; // atau route yang sesuai
        });

        // Logout
        document.getElementById('logout-btn').addEventListener('click', async () => {
            if (!confirm('Apakah Anda yakin ingin keluar?')) return;

            try {
                await axios.post('{{ route('logout') }}');
                window.location.href = '/login';
            } catch (error) {
                console.error('Logout error:', error);
                window.location.href = '/login';
            }
        });
    </script>
@endpush