{% extends 'public/parent_base.html' %}
{% block title %}Dashboard | {{ student.name }}{% endblock %}

{% block content %}
<style>
    .welcome-card { background: var(--primary); color: #fff; padding: 30px; margin-bottom: 25px; border-radius: 0; position: relative; overflow: hidden; }
    .welcome-card::after { content: '\f19d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: -20px; bottom: -20px; font-size: 8rem; opacity: 0.05; }
    
    .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
    .mini-stat { background: #fff; border: 1px solid var(--border); padding: 20px; }
    .mini-stat label { display: block; font-size: 0.6rem; font-weight: 950; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
    .mini-stat .val { font-size: 1.2rem; font-weight: 900; color: var(--text-main); }
    
    .quick-section { margin-bottom: 30px; }
    .section-head { font-size: 0.75rem; font-weight: 950; color: var(--text-muted); text-transform: uppercase; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
    
    .recent-item { background: #fff; border: 1px solid var(--border); padding: 15px; display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
    .status-dot { width: 10px; height: 10px; border-radius: 50%; }
</style>

<div class="welcome-card">
    <div style="font-size: 0.7rem; font-weight: 800; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;">Guardian Portal</div>
    <h2 style="font-weight: 900; font-size: 1.5rem; margin-bottom: 5px;">{{ student.name }}</h2>
    <div style="font-size: 0.8rem; opacity: 0.8; font-weight: 600;">{{ student.student_class.name }} • Roll: {{ student.roll }}</div>
    
    <div style="margin-top: 20px;">
        <a href="{% url 'parent_logout' %}" style="color: #fff; font-size: 0.7rem; font-weight: 900; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px;">LOGOUT SESSION &rarr;</a>
    </div>
</div>

<div class="stat-row">
    <div class="mini-stat">
        <label>Current Due</label>
        <div class="val" style="color: #ef4444;">৳{{ total_due }}</div>
    </div>
    <div class="mini-stat">
        <label>Latest GPA</label>
        <div class="val" style="color: var(--accent);">{{ last_res.gpa|default:"N/A" }}</div>
    </div>
</div>

<div class="quick-section">
    <div class="section-head">
        <i class="fas fa-clock"></i> TODAY'S ATTENDANCE
    </div>
    <div class="recent-item">
        {% if today_log %}
        <div class="status-dot" style="background: {% if today_log.status == 'LATE' %}#f59e0b{% else %}#10b981{% endif %};"></div>
        <div style="flex: 1;">
            <div style="font-size: 0.85rem; font-weight: 800;">{{ today_log.status }}</div>
            <div style="font-size: 0.7rem; color: var(--text-muted); font-weight: 600;">Time: {{ today_log.timestamp|date:"g:i A" }}</div>
        </div>
        {% else %}
        <div class="status-dot" style="background: #e2e8f0;"></div>
        <div style="font-size: 0.85rem; font-weight: 800; color: var(--text-muted);">NOT RECORDED YET</div>
        {% endif %}
        <a href="{% url 'parent_attendance' %}" style="font-size: 0.7rem; font-weight: 900; color: var(--primary); text-decoration: none;">HISTORY</a>
    </div>
</div>

<div class="quick-section">
    <div class="section-head">
        <i class="fas fa-bullhorn"></i> INSTITUTIONAL NOTICES
    </div>
    <div class="card" style="padding: 20px; border-style: dashed; border-color: #cbd5e1; text-align: center;">
        <i class="fas fa-envelope-open" style="font-size: 1.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
        <div style="font-size: 0.75rem; color: #94a3b8; font-weight: 700;">No active notices for {{ student.name }}</div>
    </div>
</div>

<div style="padding-bottom: 100px;"></div>
{% endblock %}