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

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

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* تنظیمات کلی برای فارسی */
        .customer-dashboard * {
            font-family: 'Yekan Bakh FaNum', 'Tahoma', 'Arial', sans-serif;
        }
        
        .customer-dashboard {
            min-height: 80vh;
            padding: 40px 0;
            direction: rtl;
            text-align: right;
        }
        
        .dashboard-header {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            color: white;
            padding: 40px 0;
            margin-bottom: 40px;
            direction: rtl;
        }
        
        .dashboard-header h1 {
            direction: rtl;
            text-align: right;
        }
        
        .dashboard-header p {
            direction: rtl;
            text-align: right;
        }
        
        .dashboard-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
            direction: rtl;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
        }
        
        .dashboard-card h3 {
            color: #0d6efd;
            margin-bottom: 20px;
            font-weight: bold;
            direction: rtl;
            text-align: right;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #e9ecef;
            direction: rtl;
        }
        
        .info-item:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-weight: 600;
            color: #495057;
            direction: rtl;
        }
        
        .info-value {
            color: #6c757d;
            direction: rtl;
        }
        
        .status-badge {
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            direction: rtl;
        }
        
        .status-active {
            background: #d1edff;
            color: #0c5460;
        }
        
        .status-inactive {
            background: #f8d7da;
            color: #721c24;
        }
        
        .action-buttons {
            margin-top: 30px;
            direction: rtl;
            text-align: center;
        }
        
        .btn-customer {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            border: none;
            border-radius: 10px;
            padding: 12px 25px;
            color: white;
            text-decoration: none;
            font-weight: 500;
            margin: 5px;
            display: inline-block;
            transition: all 0.3s ease;
            direction: rtl;
        }
        
        .btn-customer:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
            color: white;
        }
        
        .welcome-message {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            direction: rtl;
            text-align: right;
        }
        
        .welcome-message h4 {
            direction: rtl;
            text-align: right;
        }
        
        .welcome-message p {
            direction: rtl;
            text-align: right;
        }
        
        /* بهبود نمایش آیکون‌های SVG */
        .icon-svg {
            width: 16px;
            height: 16px;
            margin-left: 5px;
            margin-right: 0;
            display: inline-block;
            vertical-align: middle;
        }
        
        /* تغییر رنگ آیکون‌های SVG */
        .icon-svg svg {
            fill: currentColor;
            width: 100%;
            height: 100%;
        }
        
        /* رنگ‌های مختلف برای آیکون‌ها */
        .text-primary .icon-svg svg {
            fill: #0d6efd;
        }
        
        .text-success .icon-svg svg {
            fill: #198754;
        }
        
        .text-danger .icon-svg svg {
            fill: #dc3545;
        }
        
        .text-warning .icon-svg svg {
            fill: #ffc107;
        }
        
        .text-info .icon-svg svg {
            fill: #0dcaf0;
        }
        
        .text-muted .icon-svg svg {
            fill: #6c757d;
        }
        
        .text-white .icon-svg svg {
            fill: #ffffff;
        }
        
        /* بهبود نمایش متن‌های فارسی */
        .text-center {
            direction: rtl;
        }
        
        .text-end {
            direction: rtl;
            text-align: right;
        }

        /* استایل‌های کیف پول */
        .wallet-connect-form {
            background: #ffffff;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 25px;
            border: 1px solid #e9ecef;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .wallet-connect-form h5 {
            color: #0d6efd;
            margin-bottom: 20px;
            direction: rtl;
            text-align: right;
            font-weight: 600;
        }

        #walletAddress {
            font-family: 'Courier New', monospace;
            font-size: 14px;
            direction: ltr;
            text-align: left;
        }

        #walletAddress:read-only {
            background-color: #f8f9fa;
            cursor: not-allowed;
            border: 1px solid #e9ecef;
        }

        .wallet-connect-form .input-group-text {
            background-color: #e9ecef;
            border: 1px solid #e9ecef;
            color: #6c757d;
        }

        .wallet-connect-form .btn-lg {
            padding: 12px 24px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .wallet-connect-form .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .wallets-list table {
            direction: rtl;
            margin-top: 20px;
        }

        .wallets-list th,
        .wallets-list td {
            text-align: right;
            vertical-align: middle;
            padding: 12px;
        }

        .wallets-list th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-bottom: 2px solid #dee2e6;
        }

        .wallets-list code {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            background: #f8f9fa;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }

        .btn-group-sm .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        .btn-group-sm .btn i {
            margin-left: 4px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="customer-dashboard">
        <div class="container">
            <div class="welcome-message">
                <h4><img src="{{ asset('/img/icons/heart.svg') }}" alt="قلب" class="icon-svg icon-heart"> از عضویت شما در باشگاه مشتریان حسابیکس سپاسگزاریم!</h4>
                <p class="mb-0">در این بخش می‌توانید اطلاعات حساب کاربری خود را مشاهده و مدیریت کنید.</p>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="dashboard-card">
                        <h3><img src="{{ asset('/img/icons/user.svg') }}" alt="کاربر" class="icon-svg icon-user"> اطلاعات شخصی</h3>
                        
                        <div class="info-item">
                            <span class="info-label">نام و نام خانوادگی:</span>
                            <span class="info-value">{{ user.name }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">پست الکترونیکی:</span>
                            <span class="info-value">{{ user.email }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">شماره موبایل:</span>
                            <span class="info-value">{{ user.phone }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">وضعیت حساب:</span>
                            <span class="status-badge {{ user.isActive ? 'status-active' : 'status-inactive' }}">
                                {{ user.isActive ? 'فعال' : 'غیرفعال' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="dashboard-card">
                        <h3><img src="{{ asset('/img/icons/calendar.svg') }}" alt="تقویم" class="icon-svg icon-calendar"> اطلاعات عضویت</h3>
                        
                        <div class="info-item">
                            <span class="info-label">تاریخ عضویت:</span>
                            <span class="info-value">{{ user.createdAt|date('Y/m/d') }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">آخرین ورود:</span>
                            <span class="info-value">
                                {{ user.lastLoginAt ? user.lastLoginAt|date('Y/m/d H:i') : 'هنوز وارد نشده' }}
                            </span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">تایید ایمیل:</span>
                            <span class="status-badge {{ user.emailVerifiedAt ? 'status-active' : 'status-inactive' }}">
                                {{ user.emailVerifiedAt ? 'تایید شده' : 'تایید نشده' }}
                            </span>
                        </div>
                        
                        {% if user.subscriptionType %}
                        <div class="info-item">
                            <span class="info-label">نوع اشتراک:</span>
                            <span class="info-value">{{ user.subscriptionType }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- بخش کیف پول‌ها -->
            <div class="row">
                <div class="col-12">
                    <div class="dashboard-card wallet-section">
                        <h3><img src="{{ asset('/img/icons/wallet.svg') }}" alt="کیف پول" class="icon-svg icon-wallet"> مدیریت کیف پول‌ها</h3>
                        
                        <!-- فرم اتصال کیف پول جدید -->
                        <div class="wallet-connect-form mb-4" 
                             data-controller="wallet-connect"
                             data-wallet-connect-sign-message-value="{{ signMessage }}"
                             data-wallet-connect-csrf-token-value="{{ csrf_token('wallet_connect_form') }}">
                            <h5>اتصال کیف پول جدید</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="walletType" class="form-label">نوع کیف پول</label>
                                    <select class="form-select" 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 class="col-md-6">
                                    <label class="form-label">آدرس کیف پول</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-wallet"></i>
                                        </span>
                                        <input type="text" 
                                               class="form-control" 
                                               id="walletAddress" 
                                               data-wallet-connect-target="walletAddress"
                                               placeholder="آدرس کیف پول پس از اتصال نمایش داده می‌شود"
                                               readonly>
                                    </div>
                                    <div class="form-text">آدرس کیف پول شما پس از اتصال به صورت خودکار پر می‌شود</div>
                                </div>
                                <div class="col-12">
                                    <button type="button" 
                                            class="btn btn-primary btn-lg w-100" 
                                            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="wallets-list">
                            <h5>کیف پول‌های متصل ({{ user.wallets|length }}/5)</h5>
                            
                            {% if user.wallets|length > 0 %}
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>آدرس کیف پول</th>
                                                <th>نوع</th>
                                                <th>وضعیت</th>
                                                <th>تاریخ اتصال</th>
                                                <th>عملیات</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for wallet in user.wallets %}
                                                <tr>
                                                    <td>
                                                        <code>{{ wallet.shortAddress }}</code>
                                                        {% if wallet.isPrimary %}
                                                            <span class="badge bg-primary ms-2">اصلی</span>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-info">{{ wallet.walletType }}</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge {{ wallet.isActive ? 'bg-success' : 'bg-danger' }}">
                                                            {{ wallet.isActive ? 'فعال' : 'غیرفعال' }}
                                                        </span>
                                                    </td>
                                                    <td>{{ wallet.connectedAt|date('Y/m/d H:i') }}</td>
                                                    <td>
                                                        <div class="btn-group btn-group-sm">
                                                            {% if not wallet.isPrimary and wallet.isActive %}
                                                                <button class="btn btn-outline-primary btn-sm" 
                                                                        data-wallet-id="{{ wallet.id }}"
                                                                        data-action="click->wallet-connect#setPrimaryWallet">
                                                                    <i class="fas fa-star"></i> اصلی
                                                                </button>
                                                            {% endif %}
                                                            
                                                            <button class="btn btn-outline-warning btn-sm" 
                                                                    data-wallet-id="{{ wallet.id }}"
                                                                    data-action="click->wallet-connect#toggleWalletStatus">
                                                                <i class="fas fa-{{ wallet.isActive ? 'pause' : 'play' }}"></i>
                                                                {{ wallet.isActive ? 'غیرفعال' : 'فعال' }}
                                                            </button>
                                                            
                                                            <button class="btn btn-outline-danger btn-sm" 
                                                                    data-wallet-id="{{ wallet.id }}"
                                                                    data-action="click->wallet-connect#deleteWallet">
                                                                <i class="fas fa-trash"></i> حذف
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <div class="text-center text-muted py-5">
                                    <i class="fas fa-wallet fa-4x mb-4 text-muted"></i>
                                    <h5 class="text-muted">هنوز هیچ کیف پولی متصل نشده است</h5>
                                    <p class="text-muted">برای شروع، نوع کیف پول خود را انتخاب کنید و روی دکمه اتصال کلیک کنید</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="dashboard-card">
                        <h3><img src="{{ asset('/img/icons/cogs.svg') }}" alt="تنظیمات" class="icon-svg icon-cogs"> عملیات</h3>
                        
                        <div class="action-buttons">
                            <a href="{{ path('customer_forgot_password') }}" class="btn-customer">
                                <img src="{{ asset('/img/icons/key.svg') }}" alt="کلید" class="icon-svg icon-key"> بازیابی کلمه عبور
                            </a>
                            
                            <a href="{{ path('app_home') }}" class="btn-customer">
                                <img src="{{ asset('/img/icons/home.svg') }}" alt="خانه" class="icon-svg icon-home"> بازگشت به صفحه اصلی
                            </a>
                            
                            <a href="{{ path('customer_logout') }}" class="btn-customer" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
                                <img src="{{ asset('/img/icons/sign-out.svg') }}" alt="خروج" class="icon-svg icon-sign-out"> خروج
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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