{% 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;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="customer-dashboard">
        <div class="dashboard-header">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1>خوش آمدید، {{ customer.name }} عزیز!</h1>
                        <p class="mb-0">به باشگاه مشتریان حسابیکس خوش آمدید</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <img src="{{ asset('/favicon/favicon.svg') }}" alt="حسابیکس" width="80" height="80">
                    </div>
                </div>
            </div>
        </div>

        <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">{{ customer.name }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">پست الکترونیکی:</span>
                            <span class="info-value">{{ customer.email }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">شماره موبایل:</span>
                            <span class="info-value">{{ customer.phone }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">وضعیت حساب:</span>
                            <span class="status-badge {{ customer.isActive ? 'status-active' : 'status-inactive' }}">
                                {{ customer.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">{{ customer.createdAt|date('Y/m/d') }}</span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">آخرین ورود:</span>
                            <span class="info-value">
                                {{ customer.lastLoginAt ? customer.lastLoginAt|date('Y/m/d H:i') : 'هنوز وارد نشده' }}
                            </span>
                        </div>
                        
                        <div class="info-item">
                            <span class="info-label">تایید ایمیل:</span>
                            <span class="status-badge {{ customer.emailVerifiedAt ? 'status-active' : 'status-inactive' }}">
                                {{ customer.emailVerifiedAt ? 'تایید شده' : 'تایید نشده' }}
                            </span>
                        </div>
                        
                        {% if customer.subscriptionType %}
                        <div class="info-item">
                            <span class="info-label">نوع اشتراک:</span>
                            <span class="info-value">{{ customer.subscriptionType }}</span>
                        </div>
                        {% endif %}
                    </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 %}