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

{% block title %}{{ student.get_full_name }} — Parent Portal{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{{ student.get_full_name }}</h1>
            <p class="text-muted">{{ student.current_class|default:"No class assigned" }} &bull; {{ student.student_id }}</p>
        </div>
        <a href="{% url 'parents:parent_dashboard' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Dashboard
        </a>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Attendance Rate</div>
                    <div class="h4 fw-bold {% if attendance_rate >= 80 %}text-success{% elif attendance_rate >= 60 %}text-warning{% else %}text-danger{% endif %}">{{ attendance_rate }}%</div>
                    <div class="text-muted small">{{ present_days }} / {{ total_days }} days this month</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Student Status</div>
                    <div class="h5 fw-bold mt-1"><span class="badge bg-{% if student.status == 'active' %}success{% else %}secondary{% endif %} fs-6">{{ student.get_status_display }}</span></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Quick Links</div>
                    <div class="d-flex flex-column gap-1 mt-1">
                        <a href="{% url 'parents:parent_student_attendance' student.pk %}" class="btn btn-sm btn-outline-primary">Attendance</a>
                        <a href="{% url 'parents:parent_student_fees' student.pk %}" class="btn btn-sm btn-outline-warning">Fees</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Student Info -->
    <div class="row">
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">Student Information</h6></div>
                <div class="card-body">
                    <table class="table table-borderless mb-0">
                        <tr><td class="text-muted">Full Name</td><td class="fw-bold">{{ student.get_full_name }}</td></tr>
                        <tr><td class="text-muted">Student ID</td><td>{{ student.student_id }}</td></tr>
                        <tr><td class="text-muted">Date of Birth</td><td>{{ student.date_of_birth|date:"d M Y"|default:"—" }}</td></tr>
                        <tr><td class="text-muted">Gender</td><td>{{ student.get_gender_display }}</td></tr>
                        <tr><td class="text-muted">Class</td><td>{{ student.current_class|default:"—" }}</td></tr>
                        <tr><td class="text-muted">Admission Date</td><td>{{ student.admission_date|date:"d M Y"|default:"—" }}</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-success">Recent Attendance</h6></div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light"><tr><th>Date</th><th>Status</th></tr></thead>
                        <tbody>
                            {% for att in recent_attendance %}
                            <tr>
                                <td>{{ att.date|date:"d M Y" }}</td>
                                <td><span class="badge bg-{% if att.status == 'present' %}success{% elif att.status == 'absent' %}danger{% elif att.status == 'late' %}warning{% else %}info{% endif %}">{{ att.get_status_display }}</span></td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="2" class="text-center text-muted py-3">No records yet</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <a href="{% url 'parents:parent_student_attendance' student.pk %}" class="btn btn-sm btn-outline-primary w-100">View Full Attendance</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
