{% extends "base.html" %}

{% block title %}پروفایل کاربری | {{ site_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-lg-3 mb-4">
            <div class="card shadow-sm border-0">
                <div class="card-body text-center">
                    <div class="avatar-circle mb-3" style="width: 100px; height: 100px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 40px; color: var(--primary);">
                        <i class="fas fa-user"></i>
                    </div>
                    <h5 class="mb-1">{{ user.full_name or user.username }}</h5>
                    <p class="text-muted small">{{ user.email }}</p>
                    {% if user_rewards %}
                        <span class="badge bg-warning text-dark">
                            <i class="fas fa-star"></i> {{ user_rewards.get_level_badge() }}
                        </span>
                        <span class="badge bg-primary">
                            <i class="fas fa-coins"></i> {{ user_rewards.points|persian_number }} امتیاز
                        </span>
                    {% endif %}
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item active">
                        <i class="fas fa-user me-2"></i> اطلاعات شخصی
                    </li>
                    <li class="list-group-item">
                        <a href="{{ url_for('profile') }}#orders" class="text-decoration-none text-dark">
                            <i class="fas fa-shopping-bag me-2"></i> سفارشات من
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="{{ url_for('profile') }}#wishlist" class="text-decoration-none text-dark">
                            <i class="fas fa-heart me-2"></i> علاقه‌مندی‌ها
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="{{ url_for('profile') }}#rewards" class="text-decoration-none text-dark">
                            <i class="fas fa-star me-2"></i> امتیازات و جوایز
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="{{ url_for('logout') }}" class="text-decoration-none text-danger">
                            <i class="fas fa-sign-out-alt me-2"></i> خروج
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-9">
            <!-- ===== اطلاعات شخصی ===== -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-user-edit text-primary me-2"></i> ویرایش اطلاعات شخصی</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('profile_edit') }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">نام کامل</label>
                                <input type="text" name="full_name" class="form-control" value="{{ user.full_name or '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">نام کاربری</label>
                                <input type="text" class="form-control" value="{{ user.username }}" disabled>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ایمیل</label>
                                <input type="email" class="form-control" value="{{ user.email }}" disabled>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">تلفن</label>
                                <input type="text" name="phone" class="form-control" value="{{ user.phone or '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">آدرس</label>
                                <textarea name="address" class="form-control" rows="3">{{ user.address or '' }}</textarea>
                            </div>
                            
                            <div class="col-12">
                                <hr>
                                <h6 class="mb-3">تغییر رمز عبور</h6>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">رمز عبور فعلی</label>
                                        <input type="password" name="current_password" class="form-control">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">رمز عبور جدید</label>
                                        <input type="password" name="new_password" class="form-control">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">تکرار رمز جدید</label>
                                        <input type="password" name="confirm_password" class="form-control">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i> ذخیره تغییرات
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- ===== سفارشات ===== -->
            <div id="orders" class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-shopping-bag text-primary me-2"></i> سفارشات من</h5>
                </div>
                <div class="card-body">
                    {% set user_orders = user.orders|sort(attribute='created_at', reverse=True) %}
                    {% if user_orders %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>شماره سفارش</th>
                                        <th>تاریخ</th>
                                        <th>مبلغ</th>
                                        <th>وضعیت</th>
                                        <th>عملیات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for order in user_orders %}
                                        <tr>
                                            <td><strong>{{ order.order_number }}</strong></td>
                                            <td>{{ order.created_at|jalali_date }}</td>
                                            <td>{{ order.final_amount|persian_price }} تومان</td>
                                            <td>
                                                {% if order.order_status == 'pending' %}
                                                    <span class="badge bg-warning">در انتظار</span>
                                                {% elif order.order_status == 'processing' %}
                                                    <span class="badge bg-info">در حال پردازش</span>
                                                {% elif order.order_status == 'shipped' %}
                                                    <span class="badge bg-primary">ارسال شده</span>
                                                {% elif order.order_status == 'delivered' %}
                                                    <span class="badge bg-success">تحویل داده شد</span>
                                                {% elif order.order_status == 'cancelled' %}
                                                    <span class="badge bg-danger">لغو شده</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <a href="{{ url_for('order_tracking', order_id=order.id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-shopping-bag fa-3x text-muted mb-3 d-block"></i>
                            <p class="text-muted">هنوز سفارشی ثبت نکرده‌اید</p>
                            <a href="{{ url_for('products') }}" class="btn btn-primary">مشاهده محصولات</a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- ===== علاقه‌مندی‌ها ===== -->
            <div id="wishlist" class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-heart text-danger me-2"></i> علاقه‌مندی‌ها</h5>
                </div>
                <div class="card-body">
                    {% set wishlist_items = user.wishlist %}
                    {% if wishlist_items %}
                        <div class="row">
                            {% for item in wishlist_items %}
                                <div class="col-md-4 col-sm-6 mb-3">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            {% if item.product.images %}
                                                <img src="{{ item.product.images[0].image_url }}" alt="{{ item.product.title }}" class="img-fluid" style="max-height: 80px;">
                                            {% endif %}
                                            <h6 class="mt-2">{{ item.product.title|truncate(30) }}</h6>
                                            <p class="text-primary fw-bold">{{ item.product.get_final_price()|persian_price }} تومان</p>
                                            <a href="{{ url_for('product_detail', slug=item.product.slug) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-eye"></i> مشاهده
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-heart fa-3x text-muted mb-3 d-block"></i>
                            <p class="text-muted">هنوز محصولی به علاقه‌مندی‌ها اضافه نکرده‌اید</p>
                            <a href="{{ url_for('products') }}" class="btn btn-primary">مشاهده محصولات</a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- ===== امتیازات و جوایز ===== -->
            <div id="rewards" class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-star text-warning me-2"></i> امتیازات و جوایز</h5>
                </div>
                <div class="card-body">
                    {% if user_rewards %}
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>امتیاز کل</span>
                                        <span class="h4 mb-0 text-primary">{{ user_rewards.points|persian_number }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>سطح</span>
                                        <span class="h5 mb-0">{{ user_rewards.get_level_badge() }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>تعداد خرید</span>
                                        <span class="h5 mb-0">{{ user_rewards.total_purchases|persian_number }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>مجموع هزینه</span>
                                        <span class="h5 mb-0">{{ user_rewards.total_spent|persian_price }} تومان</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {% if user_rewards.get_next_level_points() > 0 %}
                            <div class="mt-3">
                                <p class="text-muted small">
                                    <i class="fas fa-arrow-up text-success"></i> 
                                    برای رسیدن به سطح بعدی {{ user_rewards.get_next_level_points()|persian_number }} امتیاز دیگر نیاز دارید
                                </p>
                                <div class="progress" style="height: 8px;">
                                    {% set progress = ((user_rewards.points / 1000) * 100)|round %}
                                    {% if progress > 100 %}{% set progress = 100 %}{% endif %}
                                    <div class="progress-bar bg-primary" style="width: {{ progress }}%"></div>
                                </div>
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-star fa-3x text-muted mb-3 d-block"></i>
                            <p class="text-muted">هنوز امتیازی کسب نکرده‌اید</p>
                            <p class="small text-muted">با خرید از ما امتیاز دریافت کنید و از جوایز ویژه بهره‌مند شوید</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}