{% extends "base.html" %}

{% block content %}
<section class="container py-4" data-aos="fade-up">
    <div class="row g-4">
        <!-- ===== سایدبار ===== -->
        <div class="col-lg-3">
            <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
                <div class="card-body text-center p-4">
                    <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                         style="width:100px;height:100px;background:linear-gradient(135deg,#c41e3a,#8b0000);margin:0 auto;">
                        <span style="font-size:2.8rem;font-weight:700;color:#fff;">{{ user.fullname[0] }}</span>
                    </div>
                    <h5 class="fw-bold mt-3">{{ user.fullname }}</h5>
                    <p class="text-secondary small">{{ user.phone }}</p>
                    <span class="badge bg-success"><i class="fas fa-check-circle"></i> فعال</span>
                </div>
            </div>

            <!-- منوی داشبورد -->
            <div class="card border-0 shadow-sm mt-4" style="border-radius:16px;overflow:hidden;">
                <div class="list-group list-group-flush">
                    <a href="{{ url_for('dashboard') }}" class="list-group-item list-group-item-action active" style="background:linear-gradient(135deg,#c41e3a,#8b0000);border:none;color:#fff;">
                        <i class="fas fa-tachometer-alt"></i> داشبورد
                    </a>
                    <a href="{{ url_for('user_wallet') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-wallet"></i> کیف پول
                    </a>
                    <a href="{{ url_for('booking') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-calendar-plus"></i> رزرو جدید
                    </a>
                    <a href="{{ url_for('logout') }}" class="list-group-item list-group-item-action text-danger">
                        <i class="fas fa-sign-out-alt"></i> خروج
                    </a>
                </div>
            </div>
        </div>

        <!-- ===== محتوای اصلی ===== -->
        <div class="col-lg-9">
            <!-- خوش‌آمدگویی -->
            <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-4">
                    <h4 class="fw-bold">خوش آمدید، {{ user.fullname }}! 👋</h4>
                    <p class="text-secondary">به داشبورد کاربری خود خوش آمدید. از اینجا می‌توانید رزروهای خود را مدیریت کنید.</p>
                </div>
            </div>

            <!-- آمار -->
            <div class="row g-3 mt-3">
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm text-center" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h3 class="text-danger fw-bold">{{ user.get_total_bookings()|persian_numbers }}</h3>
                            <p class="text-secondary small mb-0">کل رزروها</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm text-center" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h3 class="text-success fw-bold">{{ user.get_completed_bookings()|persian_numbers }}</h3>
                            <p class="text-secondary small mb-0">تکمیل شده</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm text-center" style="border-radius:16px;overflow:hidden;">
                        <div class="card-body p-4">
                            <h3 class="text-warning fw-bold">{{ user.get_wallet_balance()|persian_numbers }}</h3>
                            <p class="text-secondary small mb-0">موجودی کیف پول (تومان)</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- لیست رزروها -->
            <div class="card border-0 shadow-sm mt-4" style="border-radius:16px;overflow:hidden;">
                <div class="card-header bg-white border-0 p-4">
                    <h5 class="fw-bold mb-0"><i class="fas fa-list" style="color:#c41e3a;"></i> آخرین رزروها</h5>
                </div>
                <div class="card-body p-0">
                    {% if bookings %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>شماره</th>
                                    <th>سرویس</th>
                                    <th>تاریخ</th>
                                    <th>وضعیت</th>
                                    <th>عملیات</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for booking in bookings[:5] %}
                                <tr>
                                    <td><span class="badge bg-secondary">{{ booking.booking_number }}</span></td>
                                    <td>{{ booking.service.title }}</td>
                                    <td>{{ booking.scheduled_date|persian_date }}</td>
                                    <td>
                                        <span class="badge bg-{{ booking.get_status_color() }}">
                                            {% if booking.status == 'pending' %}در انتظار
                                            {% elif booking.status == 'confirmed' %}تأیید شده
                                            {% elif booking.status == 'in_progress' %}در حال انجام
                                            {% elif booking.status == 'completed' %}تکمیل شده
                                            {% elif booking.status == 'cancelled' %}لغو شده
                                            {% else %}{{ booking.status }}{% endif %}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill">جزئیات</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-calendar-times" style="font-size:3rem;opacity:0.3;"></i>
                        <p class="text-secondary mt-2">هنوز رزروی ثبت نکرده‌اید.</p>
                        <a href="{{ url_for('booking') }}" class="btn btn-danger rounded-pill">
                            <i class="fas fa-calendar-plus"></i> رزرو جدید
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}