38146-vm/core/templates/core/student_dashboard.html

{% extends 'base.html' %}
{% load i18n static %}

{% block title %}لوحة تحكم الطالب - EduPlatform{% endblock %}

{% block content %}
<div class="container" style="margin-top: 100px; margin-bottom: 50px;">
    <!-- Welcome Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold">مرحباً بعودتك، <span style="color: var(--primary-color);">{{ user.first_name|default:user.username }}</span>! 👋</h2>
            <p class="text-muted">إليك نظرة عامة على رحلتك التعليمية.</p>
        </div>
    </div>

    <div class="row">
        <!-- Sidebar / Profile Card -->
        <div class="col-lg-4 mb-4">
            <div class="glass-card h-100 text-center">
                <div class="mb-3 position-relative d-inline-block">
                    {% if student_profile.avatar %}
                        <img src="{{ student_profile.avatar.url }}" alt="Avatar" class="rounded-circle img-thumbnail" style="width: 150px; height: 150px; object-fit: cover;">
                    {% else %}
                        <div class="rounded-circle bg-light d-flex align-items-center justify-content-center mx-auto" style="width: 150px; height: 150px;">
                            <span class="text-muted display-4">{{ user.first_name|first|upper }}</span>
                        </div>
                    {% endif %}
                    
                    {% if student_profile.is_mobile_verified and student_profile.is_email_verified %}
                        <span class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle p-2" title="Verified Account">
                            <span class="visually-hidden">مؤكد</span>
                        </span>
                    {% endif %}
                </div>

                <h4 class="fw-bold mb-1">{{ user.get_full_name|default:user.username }}</h4>
                <p class="text-muted mb-3">طالب {% if student_profile.classroom %} • {{ student_profile.classroom.name_ar }}{% endif %}</p>

                <hr class="my-4">

                <div class="text-start">
                    <div class="mb-3">
                        <small class="text-muted d-block">البريد الإلكتروني</small>
                        <span>{{ user.email }}</span>
                        {% if student_profile.is_email_verified %}
                            <span class="badge bg-success ms-1">مؤكد</span>
                        {% else %}
                            <span class="badge bg-warning text-dark ms-1">غير مؤكد</span>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">رقم الهاتف</small>
                        <span>{{ student_profile.mobile_number|default:"-" }}</span>
                        {% if student_profile.is_mobile_verified %}
                            <span class="badge bg-success ms-1">مؤكد</span>
                        {% else %}
                            <span class="badge bg-warning text-dark ms-1">غير مؤكد</span>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">المدينة</small>
                        <span>{{ student_profile.city.name_ar|default:"-" }}</span>
                    </div>
                </div>
                
                <div class="mt-4">
                     <a href="#" class="btn btn-outline-primary w-100 rounded-pill">تعديل الملف الشخصي</a>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Stats Row -->
            <div class="row mb-4">
                <div class="col-md-6 mb-3 mb-md-0">
                    <div class="glass-card py-3 px-4 d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted mb-0">المواد المسجلة</h6>
                            <h2 class="fw-bold mb-0 text-primary">{{ subscribed_subjects.count }}</h2>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
                              <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.99c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="glass-card py-3 px-4 d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="text-muted mb-0">الصف الدراسي</h6>
                            <h5 class="fw-bold mb-0 text-success">{{ student_profile.classroom.name_ar|default:"غير معين" }}</h5>
                        </div>
                         <div class="bg-success bg-opacity-10 p-3 rounded-circle text-success">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-mortarboard" viewBox="0 0 16 16">
                              <path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z"/>
                              <path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Z"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- My Subjects Section -->
            <div class="mb-4">
                <h4 class="fw-bold mb-3">موادي</h4>
                {% if subscribed_subjects %}
                <div class="row g-4">
                    {% for subject in subscribed_subjects %}
                    <div class="col-md-6">
                        <div class="glass-card p-0 overflow-hidden h-100">
                             {% if subject.image %}
                                <div style="height: 150px; overflow: hidden;">
                                    <img src="{{ subject.image.url }}" class="w-100 h-100 object-fit-cover" alt="{{ subject.name_en }}">
                                </div>
                            {% else %}
                                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 150px;">
                                    <span class="text-muted">لا توجد صورة</span>
                                </div>
                            {% endif %}
                            <div class="p-3">
                                <h5 class="fw-bold mb-2">{{ subject.name_ar }}</h5>
                                <p class="text-muted small mb-3 text-truncate">{{ subject.description_ar }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-primary bg-opacity-10 text-primary">
                                        {% for teacher in subject.teachers.all %}
                                            {{ teacher.user.get_full_name|default:teacher.user.username }}{% if not forloop.last %}, {% endif %}
                                        {% empty %}
                                            بدون معلم
                                        {% endfor %}
                                    </span>
                                    <div>
                                        <a href="{% url 'live_classroom' subject.id %}" class="btn btn-sm btn-danger rounded-pill me-1" title="انضم للدرس المباشر">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video-fill" viewBox="0 0 16 16">
                                              <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.461a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5z"/>
                                            </svg>
                                        </a>
                                        <a href="{% url 'subject_detail' subject.id %}" class="btn btn-sm btn-primary rounded-pill">الذهاب للصف</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="glass-card text-center py-5">
                    <h5 class="text-muted">لم تسجل في أي مادة بعد.</h5>
                </div>
                {% endif %}
            </div>

            <!-- Available Packages Section -->
            {% if packages %}
            <div class="mb-4">
                <h4 class="fw-bold mb-3">الباقات المتاحة 🎁</h4>
                <div class="row g-4">
                    {% for package in packages %}
                    <div class="col-md-6">
                        <div class="glass-card p-0 overflow-hidden h-100" style="border: 2px solid #ffc107;">
                             {% if package.image %}
                                <div style="height: 150px; overflow: hidden;">
                                    <img src="{{ package.image.url }}" class="w-100 h-100 object-fit-cover" alt="{{ package.name_en }}">
                                </div>
                            {% else %}
                                <div class="bg-warning bg-opacity-25 d-flex align-items-center justify-content-center" style="height: 150px;">
                                    <span class="text-muted display-4">📦</span>
                                </div>
                            {% endif %}
                            <div class="p-3">
                                <h5 class="fw-bold mb-2">{{ package.name_ar }}</h5>
                                <p class="text-muted small mb-3">{{ package.description_ar|truncatechars:100 }}</p>
                                
                                <div class="mb-2">
                                    <small class="text-muted">تشمل المواد:</small>
                                    <div class="d-flex flex-wrap gap-1 mt-1">
                                    {% for subject in package.subjects.all|slice:":3" %}
                                        <span class="badge bg-secondary bg-opacity-10 text-dark">{{ subject.name_ar }}</span>
                                    {% endfor %}
                                    {% if package.subjects.count > 3 %}
                                        <span class="badge bg-secondary bg-opacity-10 text-dark">+{{ package.subjects.count|add:"-3" }}</span>
                                    {% endif %}
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <span class="fw-bold text-success fs-5">{{ package.price }} OMR</span>
                                    <a href="{% url 'subscribe_package' package.id %}" class="btn btn-sm btn-warning text-dark fw-bold rounded-pill">شراء الباقة</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Available Subjects Section -->
            <div class="mb-4">
                <h4 class="fw-bold mb-3">المواد المتاحة</h4>
                {% if available_subjects %}
                <div class="row g-4">
                    {% for subject in available_subjects %}
                    <div class="col-md-6">
                        <div class="glass-card p-0 overflow-hidden h-100">
                             {% if subject.image %}
                                <div style="height: 150px; overflow: hidden;">
                                    <img src="{{ subject.image.url }}" class="w-100 h-100 object-fit-cover" alt="{{ subject.name_en }}">
                                </div>
                            {% else %}
                                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 150px;">
                                    <span class="text-muted">لا توجد صورة</span>
                                </div>
                            {% endif %}
                            <div class="p-3">
                                <h5 class="fw-bold mb-2">{{ subject.name_ar }}</h5>
                                <p class="text-muted small mb-3 text-truncate">{{ subject.description_ar }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fw-bold text-success">{{ subject.price }} OMR</span>
                                    <a href="{% url 'subscribe_subject' subject.id %}" class="btn btn-sm btn-success rounded-pill">اشتراك</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="glass-card text-center py-5">
                    <h5 class="text-muted">لا توجد مواد جديدة متاحة.</h5>
                </div>
                {% endif %}
            </div>

        </div>
    </div>
</div>
{% endblock %}