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

{% block title %}{% trans "Student Dashboard" %} - 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">{% trans "Welcome back," %} <span style="color: var(--primary-color);">{{ user.first_name|default:user.username }}</span>! 👋</h2>
            <p class="text-muted">{% trans "Here is an overview of your learning journey." %}</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">Verified</span>
                        </span>
                    {% endif %}
                </div>

                <h4 class="fw-bold mb-1">{{ user.get_full_name|default:user.username }}</h4>
                <p class="text-muted mb-3">{% trans "Student" %} {% if student_profile.classroom %} • {{ student_profile.classroom.name_en }}{% endif %}</p>

                <hr class="my-4">

                <div class="text-start">
                    <div class="mb-3">
                        <small class="text-muted d-block">{% trans "Email" %}</small>
                        <span>{{ user.email }}</span>
                        {% if student_profile.is_email_verified %}
                            <span class="badge bg-success ms-1">{% trans "Verified" %}</span>
                        {% else %}
                            <span class="badge bg-warning text-dark ms-1">{% trans "Unverified" %}</span>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">{% trans "Phone" %}</small>
                        <span>{{ student_profile.mobile_number|default:"-" }}</span>
                        {% if student_profile.is_mobile_verified %}
                            <span class="badge bg-success ms-1">{% trans "Verified" %}</span>
                        {% else %}
                            <span class="badge bg-warning text-dark ms-1">{% trans "Unverified" %}</span>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">{% trans "City" %}</small>
                        <span>{{ student_profile.city.name|default:"-" }}</span>
                    </div>
                </div>
                
                <div class="mt-4">
                     <a href="#" class="btn btn-outline-primary w-100 rounded-pill">{% trans "Edit Profile" %}</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">{% trans "Enrolled Subjects" %}</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">{% trans "Classroom" %}</h6>
                            <h5 class="fw-bold mb-0 text-success">{{ student_profile.classroom.name_en|default:"Not assigned" }}</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">{% trans "My Subjects" %}</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">{% trans "No Image" %}</span>
                                </div>
                            {% endif %}
                            <div class="p-3">
                                <h5 class="fw-bold mb-2">{{ subject.name_en }}</h5>
                                <p class="text-muted small mb-3 text-truncate">{{ subject.description_en }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-primary bg-opacity-10 text-primary">
                                        {{ subject.teacher.user.get_full_name|default:"No Teacher" }}
                                    </span>
                                    <a href="{% url 'subject_detail' subject.id %}" class="btn btn-sm btn-primary rounded-pill">{% trans "Go to Class" %}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="glass-card text-center py-5">
                    <h5 class="text-muted">{% trans "You haven't enrolled in any subjects yet." %}</h5>
                </div>
                {% endif %}
            </div>

            <!-- Available Subjects Section -->
            <div class="mb-4">
                <h4 class="fw-bold mb-3">{% trans "Available Subjects" %}</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">{% trans "No Image" %}</span>
                                </div>
                            {% endif %}
                            <div class="p-3">
                                <h5 class="fw-bold mb-2">{{ subject.name_en }}</h5>
                                <p class="text-muted small mb-3 text-truncate">{{ subject.description_en }}</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">{% trans "Subscribe" %}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="glass-card text-center py-5">
                    <h5 class="text-muted">{% trans "No new subjects available." %}</h5>
                </div>
                {% endif %}
            </div>

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