{% extends 'base.html' %}

{% block title %}پنل دانشجو | آکادمی مهبد نتاج{% endblock %}

{% block content %}
<div class="profile-container">
    <!-- User Header Card -->
    <div class="profile-header">
        <div class="profile-avatar-lg">
            {{ user.name|default:user.phone|slice:":1"|upper }}
        </div>
        <div>
            <h1 style="font-size: 2.2rem; font-weight: 800; margin-bottom: 0.25rem;">
                خوش آمدید، <span>{{ user.name|default:user.phone }}</span>
            </h1>
            <p style="color: var(--text-muted); font-size: 0.95rem;">
                <i class="bi bi-telephone-fill" style="color: var(--gold-light);"></i> {{ user.phone }} &nbsp;|&nbsp;
                <i class="bi bi-calendar-check"></i> Member since {{ user.date_joined|date:"M Y" }}
            </p>
        </div>
        <div style="margin-left: auto;">
            <span class="badge-gold"><i class="bi bi-shield-lock-fill"></i> دسترسی دانشجو</span>
        </div>
    </div>

    <!-- Enrolled Courses Section -->
    <section style="margin-bottom: 4rem;">
        <h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem;">
            دوره‌های <span>فعال من</span>
        </h2>
        
        <div class="course-grid" style="padding: 0;">
            {% for item in enrollments %}
                <div class="course-card">
                    <div class="card-image-wrap">
                        <img src="{{ item.course.get_cover }}" alt="{{ item.course.name }}">
                        <span class="card-level-badge">{{ item.course.level }}</span>
                    </div>
                    
                    <div class="card-body">
                        <h3 class="card-title">
                            <a href="{% url 'courses:player' item.course.id %}">{{ item.course.name }}</a>
                        </h3>
                        
                        <a href="{% url 'courses:player' item.course.id %}" class="btn-emerald" style="width: 100%; justify-content: center;">
                            <i class="bi bi-play-fill"></i> ورود به کلاس
                        </a>
                    </div>
                </div>
            {% empty %}
                <div style="grid-column: 1 / -1; padding: 4rem; text-align: center; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-subtle);">
                    <i class="bi bi-collection-play" style="font-size: 3.5rem; color: var(--gold-light);"></i>
                    <h3 style="margin-top: 1rem; font-size: 1.4rem;">هنوز دوره فعالی ندارید</h3>
                    <p style="color: var(--text-muted); margin-top: 0.5rem;">از میان دوره‌ها، مسیر مناسب خود را انتخاب کنید.</p>
                    <a href="{% url 'courses:catalog' %}" class="btn-gold" style="margin-top: 1.5rem;">مشاهده دوره‌ها</a>
                </div>
            {% endfor %}
        </div>
    </section>

    <!-- Enrolled courses -->
    <section style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 4rem;">
        <h2 style="font-size: 1.6rem; font-weight: 800; margin-bottom: 1.5rem;">
            دوره‌های من و <span>سفارش‌ها</span>
        </h2>
        
        {% if enrollments %}
            <table class="enrollments-table">
                <thead>
                    <tr>
                        <th>دوره</th><th>نحوه فعال‌سازی</th><th>تاریخ فعال‌سازی</th><th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in enrollments %}
                        <tr>
                            <td>
                                <strong>{{ item.course.name }}</strong>
                            </td>
                            <td>
                                {{ item.get_source_display }}
                            </td>
                            <td style="color: var(--text-muted); font-size: 0.9rem;">
                                {{ item.created_at|date:"M d, Y" }}
                            </td>
                            <td>
                                <a href="{% url 'courses:player' item.course.id %}" class="btn-gold" style="padding: 0.35rem 0.75rem; font-size: 0.8rem;">
                                    مشاهده دوره
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p style="color: var(--text-muted);">هنوز دوره‌ای برای شما فعال نشده است.</p>
        {% endif %}
    </section>

    <!-- Account Details Form -->
    <section style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2rem;">
        <h2 style="font-size: 1.6rem; font-weight: 800; margin-bottom: 1.5rem;">
            تنظیمات <span>حساب کاربری</span>
        </h2>
        
        <form method="POST" action="{% url 'courses:profile' %}" style="max-width: 500px;">
            {% csrf_token %}
            <div class="form-group">
                <label>شماره موبایل</label>
                <input type="text" value="{{ user.phone }}" class="form-control" disabled style="opacity: 0.6;">
            </div>
            
            <div class="form-group">
                <label>نام و نام خانوادگی</label>
                <input type="text" name="name" value="{{ user.name }}" placeholder="نام و نام خانوادگی" class="form-control">
            </div>
            
            <div class="form-group">
                <label>نشانی ایمیل</label>
                <input type="email" name="email" value="{{ user.email }}" placeholder="alexander@company.com" class="form-control">
            </div>
            
            <button type="submit" class="btn-gold">ذخیره تغییرات</button>
        </form>
    </section>
</div>
{% endblock %}
