{% extends 'base.html.twig' %}

{% block title %}داشبورد - باشگاه مشتریان حسابیکس{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="min-h-screen py-10 font-yekan" dir="rtl">
        <div class="container mx-auto px-4">
            <div class="bg-gradient-to-r from-green-500 to-teal-500 text-white p-6 rounded-xl mb-10">
                <h4 class="text-xl font-bold mb-2 flex items-center gap-2">
                    <img src="{{ asset('/img/icons/heart.svg') }}" alt="قلب" class="w-5 h-5"> از عضویت شما در باشگاه مشتریان حسابیکس سپاسگزاریم!
                </h4>
                <p class="mb-0">در این بخش می‌توانید اطلاعات حساب کاربری خود را مشاهده و مدیریت کنید.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="w-full">
                    <div class="card hover:shadow-lg transition-shadow duration-300">
                        <h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
                            <img src="{{ asset('/img/icons/user.svg') }}" alt="کاربر" class="w-5 h-5"> اطلاعات شخصی
                        </h3>
                        
                        <div class="flex justify-between items-center py-4 border-b border-gray-200">
                            <span class="font-semibold text-gray-700">نام و نام خانوادگی:</span>
                            <span class="text-gray-600">{{ user.name }}</span>
                        </div>
                        
                        <div class="flex justify-between items-center py-4 border-b border-gray-200">
                            <span class="font-semibold text-gray-700">پست الکترونیکی:</span>
                            <span class="text-gray-600">{{ user.email }}</span>
                        </div>
                        
                        <div class="flex justify-between items-center py-4 border-b border-gray-200">
                            <span class="font-semibold text-gray-700">شماره موبایل:</span>
                            <span class="text-gray-600">{{ user.phone }}</span>
                        </div>
                        
                        <div class="flex justify-between items-center py-4">
                            <span class="font-semibold text-gray-700">وضعیت حساب:</span>
                            <span class="px-4 py-2 rounded-full text-sm font-bold {{ user.isActive ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800' }}">
                                {{ user.isActive ? 'فعال' : 'غیرفعال' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="w-full">
                    <div class="card hover:shadow-lg transition-shadow duration-300">
                        <h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
                            <img src="{{ asset('/img/icons/calendar.svg') }}" alt="تقویم" class="w-5 h-5"> اطلاعات عضویت
                        </h3>
                        
                        <div class="flex justify-between items-center py-4 border-b border-gray-200">
                            <span class="font-semibold text-gray-700">تاریخ عضویت:</span>
                            <span class="text-gray-600">{{ user.createdAt|date('U')|jdate('Y/m/d') }}</span>
                        </div>
                        
                        <div class="flex justify-between items-center py-4">
                            <span class="font-semibold text-gray-700">آخرین ورود:</span>
                            <span class="text-gray-600">
                                {{ user.lastLoginAt ? user.lastLoginAt|date('U')|jdate('Y/m/d H:i') : 'هنوز وارد نشده' }}
                            </span>
                        </div>
                        
                        <div class="flex justify-between items-center py-4 border-b border-gray-200">
                            <span class="font-semibold text-gray-700">تایید ایمیل:</span>
                            <span class="px-4 py-2 rounded-full text-sm font-bold {{ user.emailVerifiedAt ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800' }}">
                                {{ user.emailVerifiedAt ? 'تایید شده' : 'تایید نشده' }}
                            </span>
                        </div>
                        
                        {% if user.subscriptionType %}
                        <div class="flex justify-between items-center py-4">
                            <span class="font-semibold text-gray-700">نوع اشتراک:</span>
                            <span class="text-gray-600">{{ user.subscriptionType }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- بخش کیف پول‌ها -->
            <div class="w-full mt-8">
                <div class="card">
                    <h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
                        <img src="{{ asset('/img/icons/wallet.svg') }}" alt="کیف پول" class="w-5 h-5"> مدیریت کیف پول‌ها
                    </h3>
                    
                    <!-- فرم اتصال کیف پول جدید -->
                    <div class="bg-white p-6 rounded-xl border border-gray-200 mb-6" 
                         data-controller="wallet-connect"
                         data-wallet-connect-sign-message-value="{{ signMessage }}"
                         data-wallet-connect-csrf-token-value="{{ csrf_token('wallet_connect_form') }}">
                        <h5 class="text-lg font-semibold mb-4">اتصال کیف پول جدید</h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="walletType" class="block text-sm font-medium text-gray-700 mb-2">نوع کیف پول</label>
                                <select class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" id="walletType" data-wallet-connect-target="walletType" data-action="change->wallet-connect#onWalletTypeChange">
                                    <option value="">انتخاب کنید...</option>
                                    <option value="metamask">MetaMask</option>
                                    <option value="trust">Trust Wallet</option>
                                    <option value="walletconnect">WalletConnect</option>
                                    <option value="coinbase">Coinbase Wallet</option>
                                    <option value="other">سایر</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">آدرس کیف پول</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <i class="fas fa-wallet text-gray-400"></i>
                                    </div>
                                    <input type="text" 
                                           class="w-full px-4 py-3 pr-10 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" 
                                           id="walletAddress" 
                                           data-wallet-connect-target="walletAddress"
                                           placeholder="آدرس کیف پول پس از اتصال نمایش داده می‌شود"
                                           readonly>
                                </div>
                                <p class="text-sm text-gray-500 mt-2">آدرس کیف پول شما پس از اتصال به صورت خودکار پر می‌شود</p>
                            </div>
                            <div class="col-span-2">
                                <button type="button" 
                                        class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" 
                                        id="connectBtn" 
                                        data-wallet-connect-target="connectBtn"
                                        data-action="click->wallet-connect#connectWallet"
                                        disabled>
                                    نوع کیف پول را انتخاب کنید
                                </button>
                            </div>
                        </div>
                        <input type="hidden" data-wallet-connect-target="signature">
                    </div>

                    <!-- لیست کیف پول‌های متصل -->
                    <div class="mt-6">
                        <h5 class="text-lg font-semibold mb-4">کیف پول‌های متصل ({{ user.wallets|length }}/5)</h5>
                        
                        {% if user.wallets|length > 0 %}
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">آدرس کیف پول</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ اتصال</th>
                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        {% for wallet in user.wallets %}
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ wallet.shortAddress }}</code>
                                                    {% if wallet.isPrimary %}
                                                        <span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded-full mr-2">اصلی</span>
                                                    {% endif %}
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">{{ wallet.walletType }}</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="px-2 py-1 rounded-full text-xs font-medium {{ wallet.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                        {{ wallet.isActive ? 'فعال' : 'غیرفعال' }}
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ wallet.connectedAt|date('U')|jdate('Y/m/d H:i') }}</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <div class="flex gap-2">
                                                        {% if not wallet.isPrimary and wallet.isActive %}
                                                                                                                    <button class="wallet-set-primary-btn inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors duration-200" 
                                                                data-wallet-id="{{ wallet.id }}"
                                                                data-action="click->wallet-connect#setPrimaryWallet">
                                                            <i class="fas fa-star ml-1"></i> اصلی
                                                        </button>
                                                        {% endif %}
                                                        
                                                        <button class="wallet-toggle-btn inline-flex items-center px-3 py-1 text-xs font-medium text-yellow-600 bg-yellow-50 border border-yellow-200 rounded-lg hover:bg-yellow-100 transition-colors duration-200" 
                                                                data-wallet-id="{{ wallet.id }}"
                                                                data-action="click->wallet-connect#toggleWalletStatus">
                                                            <i class="fas fa-{{ wallet.isActive ? 'pause' : 'play' }} ml-1"></i>
                                                            {{ wallet.isActive ? 'غیرفعال' : 'فعال' }}
                                                        </button>
                                                        
                                                        <button class="wallet-delete-btn inline-flex items-center px-3 py-1 text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors duration-200" 
                                                                data-wallet-id="{{ wallet.id }}"
                                                                data-action="click->wallet-connect#deleteWallet">
                                                            <i class="fas fa-trash ml-1"></i> حذف
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-center text-gray-500 py-12">
                                <i class="fas fa-wallet text-6xl mb-4 text-gray-300"></i>
                                <h5 class="text-gray-500 text-lg mb-2">هنوز هیچ کیف پولی متصل نشده است</h5>
                                <p class="text-gray-400">برای شروع، نوع کیف پول خود را انتخاب کنید و روی دکمه اتصال کلیک کنید</p>
                            </div>
                        {% endif %}
                    </div>
                    </div>
                </div>
            </div>

            <div class="w-full mt-8">
                <div class="card">
                    <h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
                        <img src="{{ asset('/img/icons/cogs.svg') }}" alt="تنظیمات" class="w-5 h-5"> عملیات
                    </h3>
                    
                    <div class="flex flex-wrap gap-4 justify-center">
                        {% if is_granted('ROLE_ADMIN') %}
                            <a href="{{ path('admin') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl font-medium hover:from-green-700 hover:to-emerald-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
                                <img src="{{ asset('/img/icons/cogs.svg') }}" alt="مدیریت" class="w-4 h-4"> پنل مدیریت
                            </a>
                        {% endif %}
                        
                        <a href="{{ path('customer_forgot_password') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
                            <img src="{{ asset('/img/icons/key.svg') }}" alt="کلید" class="w-4 h-4"> بازیابی کلمه عبور
                        </a>
                        
                        <a href="{{ path('app_home') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
                            <img src="{{ asset('/img/icons/home.svg') }}" alt="خانه" class="w-4 h-4"> بازگشت به صفحه اصلی
                        </a>
                        
                        <a href="{{ path('customer_logout') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl font-medium hover:from-red-600 hover:to-red-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
                            <img src="{{ asset('/img/icons/sign-out.svg') }}" alt="خروج" class="w-4 h-4"> خروج
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Beautiful Dialog System
        class BeautifulDialog {
            constructor() {
                this.container = null;
                this.init();
            }

            init() {
                // Wait for DOM to be ready
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', () => {
                        this.createContainer();
                    });
                } else {
                    this.createContainer();
                }
            }

            createContainer() {
                // Create dialog container if it doesn't exist
                this.container = document.getElementById('dialog-container');
                if (!this.container && document.body) {
                    this.container = document.createElement('div');
                    this.container.id = 'dialog-container';
                    this.container.className = 'fixed inset-0 z-50 overflow-y-auto';
                    this.container.style.display = 'none';
                    document.body.appendChild(this.container);
                }
            }

            showConfirm(title, message, confirmText = 'تأیید', cancelText = 'انصراف', onConfirm = null, onCancel = null) {
                // Ensure container exists
                if (!this.container) {
                    this.createContainer();
                }
                
                if (!this.container) {
                    console.error('Dialog container not available');
                    return;
                }

                const dialogId = 'confirm-dialog-' + Date.now();
                const dialogHtml = `
                    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" id="${dialogId}">
                        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full transform transition-all duration-300 scale-95 opacity-0" id="${dialogId}-content">
                            <div class="p-6">
                                <div class="flex items-center mb-4">
                                    <div class="flex-shrink-0 w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                        </svg>
                                    </div>
                                    <div class="mr-3">
                                        <h3 class="text-lg font-semibold text-gray-900">${title}</h3>
                                    </div>
                                </div>
                                <div class="mb-6">
                                    <p class="text-sm text-gray-600 leading-relaxed">${message}</p>
                                </div>
                                <div class="flex justify-end space-x-3 space-x-reverse">
                                    <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200" id="${dialogId}-cancel">
                                        ${cancelText}
                                    </button>
                                    <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors duration-200" id="${dialogId}-confirm">
                                        ${confirmText}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                this.container.innerHTML = dialogHtml;
                this.container.style.display = 'block';

                // Animate in
                setTimeout(() => {
                    const content = document.getElementById(`${dialogId}-content`);
                    content.classList.remove('scale-95', 'opacity-0');
                    content.classList.add('scale-100', 'opacity-100');
                }, 10);

                // Event listeners
                document.getElementById(`${dialogId}-confirm`).addEventListener('click', () => {
                    this.hide();
                    if (onConfirm) onConfirm();
                });

                document.getElementById(`${dialogId}-cancel`).addEventListener('click', () => {
                    this.hide();
                    if (onCancel) onCancel();
                });

                // Close on backdrop click
                document.getElementById(dialogId).addEventListener('click', (e) => {
                    if (e.target.id === dialogId) {
                        this.hide();
                        if (onCancel) onCancel();
                    }
                });
            }

            showSuccess(title, message, duration = 3000) {
                this.showNotification(title, message, 'success', duration);
            }

            showError(title, message, duration = 5000) {
                this.showNotification(title, message, 'error', duration);
            }

            showInfo(title, message, duration = 4000) {
                this.showNotification(title, message, 'info', duration);
            }

            showNotification(title, message, type = 'info', duration = 4000) {
                // Ensure document.body is available
                if (!document.body) {
                    console.error('Document body not available');
                    return;
                }

                const notificationId = 'notification-' + Date.now();
                const icons = {
                    success: `<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>`,
                    error: `<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>`,
                    info: `<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>`
                };

                const colors = {
                    success: 'bg-green-50 border-green-200',
                    error: 'bg-red-50 border-red-200',
                    info: 'bg-blue-50 border-blue-200'
                };

                const notificationHtml = `
                    <div class="fixed top-4 right-4 z-50 transform transition-all duration-300 translate-x-full opacity-0" id="${notificationId}">
                        <div class="max-w-sm w-full ${colors[type]} border rounded-lg shadow-lg">
                            <div class="p-4">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        ${icons[type]}
                                    </div>
                                    <div class="mr-3 w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-900">${title}</p>
                                        <p class="mt-1 text-sm text-gray-600">${message}</p>
                                    </div>
                                    <div class="ml-4 flex-shrink-0 flex">
                                        <button class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none" onclick="document.getElementById('${notificationId}').remove()">
                                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                document.body.insertAdjacentHTML('beforeend', notificationHtml);

                // Animate in
                setTimeout(() => {
                    const notification = document.getElementById(notificationId);
                    notification.classList.remove('translate-x-full', 'opacity-0');
                    notification.classList.add('translate-x-0', 'opacity-100');
                }, 10);

                // Auto remove
                if (duration > 0) {
                    setTimeout(() => {
                        const notification = document.getElementById(notificationId);
                        if (notification) {
                            notification.classList.add('translate-x-full', 'opacity-0');
                            setTimeout(() => {
                                notification.remove();
                            }, 300);
                        }
                    }, duration);
                }
            }

            hide() {
                this.container.style.display = 'none';
                this.container.innerHTML = '';
            }
        }

        // Initialize dialog system after DOM is ready
        let dialog;
        document.addEventListener('DOMContentLoaded', function() {
            dialog = new BeautifulDialog();
        });

        // Helper function to show dialogs with fallback
        function showDialog(type, title, message, ...args) {
            if (dialog && dialog[type]) {
                dialog[type](title, message, ...args);
            } else {
                // Fallback to alert
                alert(`${title}: ${message}`);
            }
        }

        // Wallet Connect Controller
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Wallet Connect script loaded');
            
            // Handle wallet type change
            const walletTypeSelect = document.querySelector('[data-wallet-connect-target="walletType"]');
            if (walletTypeSelect) {
                walletTypeSelect.addEventListener('change', function() {
                    const connectBtn = document.querySelector('[data-wallet-connect-target="connectBtn"]');
                    if (this.value) {
                        connectBtn.disabled = false;
                        connectBtn.textContent = 'اتصال کیف پول';
                    } else {
                        connectBtn.disabled = true;
                        connectBtn.textContent = 'نوع کیف پول را انتخاب کنید';
                    }
                });
            }
            
            // Handle toggle wallet status
            document.addEventListener('click', function(event) {
                if (event.target.closest('.wallet-toggle-btn')) {
                    event.preventDefault();
                    const button = event.target.closest('.wallet-toggle-btn');
                    const walletId = button.dataset.walletId;
                    console.log('Toggle wallet status clicked, ID:', walletId);
                    
                    if (!walletId) {
                        showDialog('showError', 'خطا', 'شناسه کیف پول یافت نشد');
                        return;
                    }
                    
                    const isActive = button.textContent.includes('غیرفعال');
                    const action = isActive ? 'غیرفعال' : 'فعال';
                    
                    showDialog('showConfirm',
                        'تأیید تغییر وضعیت',
                        `آیا مطمئن هستید که می‌خواهید این کیف پول را ${action} کنید؟`,
                        'تأیید',
                        'انصراف',
                        () => {
                            // Show loading
                            button.disabled = true;
                            button.innerHTML = '<i class="fas fa-spinner fa-spin ml-1"></i> در حال پردازش...';
                            
                            fetch(`/api/wallet/${walletId}/toggle-status`, {
                                method: 'PUT',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': '{{ csrf_token('wallet_connect_form') }}'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    showDialog('showSuccess', 'موفقیت', data.message);
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    showDialog('showError', 'خطا', data.message);
                                    button.disabled = false;
                                    button.innerHTML = `<i class="fas fa-${isActive ? 'pause' : 'play'} ml-1"></i> ${isActive ? 'غیرفعال' : 'فعال'}`;
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showDialog('showError', 'خطا', 'خطا در تغییر وضعیت کیف پول: ' + error.message);
                                button.disabled = false;
                                button.innerHTML = `<i class="fas fa-${isActive ? 'pause' : 'play'} ml-1"></i> ${isActive ? 'غیرفعال' : 'فعال'}`;
                            });
                        }
                    );
                }
            });
            
            // Handle delete wallet
            document.addEventListener('click', function(event) {
                if (event.target.closest('.wallet-delete-btn')) {
                    event.preventDefault();
                    const button = event.target.closest('.wallet-delete-btn');
                    const walletId = button.dataset.walletId;
                    console.log('Delete wallet clicked, ID:', walletId);
                    
                    if (!walletId) {
                        showDialog('showError', 'خطا', 'شناسه کیف پول یافت نشد');
                        return;
                    }
                    
                    showDialog('showConfirm',
                        'تأیید حذف کیف پول',
                        'آیا مطمئن هستید که می‌خواهید این کیف پول را حذف کنید؟ این عمل قابل بازگشت نیست.',
                        'حذف',
                        'انصراف',
                        () => {
                            // Show loading
                            button.disabled = true;
                            button.innerHTML = '<i class="fas fa-spinner fa-spin ml-1"></i> در حال حذف...';
                            
                            fetch(`/api/wallet/${walletId}`, {
                                method: 'DELETE',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': '{{ csrf_token('wallet_connect_form') }}'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    showDialog('showSuccess', 'موفقیت', data.message);
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    showDialog('showError', 'خطا', data.message);
                                    button.disabled = false;
                                    button.innerHTML = '<i class="fas fa-trash ml-1"></i> حذف';
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showDialog('showError', 'خطا', 'خطا در حذف کیف پول: ' + error.message);
                                button.disabled = false;
                                button.innerHTML = '<i class="fas fa-trash ml-1"></i> حذف';
                            });
                        }
                    );
                }
            });
            
            // Handle set primary wallet
            document.addEventListener('click', function(event) {
                if (event.target.closest('.wallet-set-primary-btn')) {
                    event.preventDefault();
                    const button = event.target.closest('.wallet-set-primary-btn');
                    const walletId = button.dataset.walletId;
                    console.log('Set primary wallet clicked, ID:', walletId);
                    
                    if (!walletId) {
                        showDialog('showError', 'خطا', 'شناسه کیف پول یافت نشد');
                        return;
                    }
                    
                    showDialog('showConfirm',
                        'تنظیم کیف پول اصلی',
                        'آیا می‌خواهید این کیف پول را به عنوان کیف پول اصلی تنظیم کنید؟',
                        'تأیید',
                        'انصراف',
                        () => {
                            // Show loading
                            button.disabled = true;
                            button.innerHTML = '<i class="fas fa-spinner fa-spin ml-1"></i> در حال تنظیم...';
                            
                            fetch(`/api/wallet/${walletId}/set-primary`, {
                                method: 'PUT',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': '{{ csrf_token('wallet_connect_form') }}'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    showDialog('showSuccess', 'موفقیت', data.message);
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    showDialog('showError', 'خطا', data.message);
                                    button.disabled = false;
                                    button.innerHTML = '<i class="fas fa-star ml-1"></i> اصلی';
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showDialog('showError', 'خطا', 'خطا در تنظیم کیف پول اصلی: ' + error.message);
                                button.disabled = false;
                                button.innerHTML = '<i class="fas fa-star ml-1"></i> اصلی';
                            });
                        }
                    );
                }
            });
        });
    </script>
{% endblock %}