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

{% block title %}{{ student.get_full_name }} — Report Card — Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
.rc-header-card {
    background: linear-gradient(135deg, #1e3a5f, #2d5a8e);
    color: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 20px;
}
.rc-header-card .student-name { font-size: 1.3rem; font-weight: 800; }
.rc-header-card .meta { font-size: .82rem; opacity: .85; margin-top: 4px; }
.rc-header-card .avg-badge {
    font-size: 2rem; font-weight: 900; line-height: 1;
    background: rgba(255,255,255,.15); border-radius: 10px;
    padding: 8px 16px; text-align: center; min-width: 90px;
}
.rc-header-card .avg-label { font-size: .68rem; opacity: .75; text-align: center; margin-top: 3px; }

.section-card {
    border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; margin-bottom: 16px; overflow: hidden;
}
.section-card .section-title {
    background: #f8fafc; border-bottom: 1px solid #e5e7eb;
    padding: 10px 16px; font-weight: 700; font-size: .85rem;
    color: #374151; display: flex; align-items: center; gap: 8px;
}

/* Marks summary table */
.marks-summary { width: 100%; border-collapse: collapse; font-size: .8rem; }
.marks-summary th {
    background: #1e3a5f; color: #fff; padding: 7px 10px;
    font-weight: 600; font-size: .72rem; text-align: center;
}
.marks-summary th.left { text-align: left; }
.marks-summary td {
    border: 1px solid #e5e7eb; padding: 5px 10px;
    text-align: center; vertical-align: middle;
}
.marks-summary td.subj-name { text-align: left; font-size: .78rem; }
.marks-summary tr.domain-row td {
    background: #f1f5f9; font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .3px; color: #475569;
}
.marks-summary tr:hover td { background: #f8fafc; }
.marks-summary tr:hover td.domain-row { background: #f1f5f9; }

/* Appreciation badges */
.appr-badge {
    font-size: .68rem; font-weight: 700; padding: 2px 7px;
    border-radius: 99px; display: inline-block;
}
.appr-badge.NA  { background: #fee2e2; color: #991b1b; }
.appr-badge.ECA { background: #fef3c7; color: #92400e; }
.appr-badge.A   { background: #d1fae5; color: #065f46; }
.appr-badge.Ap  { background: #dbeafe; color: #1d4ed8; }

/* Conduct checkboxes (francophone) */
.conduct-checkbox { display: flex; align-items: center; gap: 8px; font-size: .83rem; }

/* Promotion badges */
.promo-btn { border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: all .15s; }
.promo-btn:hover { transform: translateY(-1px); }

/* Sibling nav */
.sibling-link {
    font-size: .76rem; padding: 4px 10px; border-radius: 6px;
    border: 1px solid #e5e7eb; text-decoration: none; color: #374151;
    background: #f9fafb; transition: background .12s;
    display: inline-block; white-space: nowrap;
}
.sibling-link:hover { background: #e5e7eb; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- Breadcrumb -->
    <nav style="font-size:.8rem" class="mb-2">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'rc-dashboard' %}">Report Cards</a></li>
            <li class="breadcrumb-item">
                <a href="{% url 'rc-marks' rc.school_class.pk rc.term.pk %}">
                    {{ rc.school_class.name }} — Term {{ rc.term.term }}
                </a>
            </li>
            <li class="breadcrumb-item active">{{ student.get_full_name }}</li>
        </ol>
    </nav>

    <!-- Student header card -->
    <div class="rc-header-card mb-3">
        <div class="d-flex align-items-start justify-content-between flex-wrap gap-3">
            <div>
                <div class="student-name">{{ student.last_name|upper }}, {{ student.first_name }}</div>
                <div class="meta">
                    <i class="fas fa-id-card me-1"></i>{{ student.student_id }}
                    &nbsp;·&nbsp;
                    <i class="fas fa-chalkboard me-1"></i>{{ rc.school_class.name }}
                    &nbsp;·&nbsp;
                    <i class="fas fa-calendar me-1"></i>Term {{ rc.term.term }} — {{ rc.term.academic_year }}
                    &nbsp;·&nbsp;
                    <span class="badge" style="background:rgba(255,255,255,.2);font-size:.68rem">
                        {{ rc.get_report_type_display }}
                    </span>
                </div>
                {% if rc.is_finalised %}
                <span class="badge mt-2" style="background:#10b981">
                    <i class="fas fa-lock me-1"></i>Finalised
                </span>
                {% endif %}
            </div>
            <div class="text-center">
                {% if rc.average %}
                <div class="avg-badge">{{ rc.average }}</div>
                <div class="avg-label">/20 Average</div>
                {% if rc.position %}
                <div style="font-size:.72rem;opacity:.8;margin-top:4px">
                    Position {{ rc.position }}/{{ term_data.class_size }}
                </div>
                {% endif %}
                {% else %}
                <div class="avg-badge text-center" style="font-size:.85rem">—</div>
                <div class="avg-label">Not computed</div>
                {% endif %}
            </div>
        </div>

        <!-- Action buttons -->
        <div class="d-flex gap-2 flex-wrap mt-3">
            <a href="{% url 'rc-preview' rc.pk %}" class="btn btn-sm btn-light" target="_blank">
                <i class="fas fa-eye me-1"></i>Preview
            </a>
            <a href="{% url 'rc-pdf' rc.pk %}" class="btn btn-sm btn-danger" target="_blank">
                <i class="fas fa-file-pdf me-1"></i>Download PDF
            </a>
            <form method="post" action="{% url 'rc-compute' rc.pk %}" class="d-inline">
                {% csrf_token %}
                <button class="btn btn-sm btn-warning text-dark">
                    <i class="fas fa-calculator me-1"></i>Compute Average
                </button>
            </form>
            <a href="{% url 'rc-marks' rc.school_class.pk rc.term.pk %}"
               class="btn btn-sm btn-outline-light">
                <i class="fas fa-arrow-left me-1"></i>Back to Class
            </a>
        </div>
    </div>

    <div class="row g-3">

        <!-- LEFT: Marks summary -->
        <div class="col-lg-8">
            <div class="section-card">
                <div class="section-title">
                    <i class="fas fa-table text-primary"></i>
                    Marks Summary — Term {{ rc.term.term }}
                </div>
                <div style="overflow-x:auto">
                    <table class="marks-summary">
                        <thead>
                            <tr>
                                <th class="left" style="min-width:150px">Subject / Activity</th>
                                {% for lbl in term_data.month_labels %}
                                <th>{{ lbl }}</th>
                                {% endfor %}
                                <th>Synthèse</th>
                                <th>Appréciation</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in term_data.rows %}
                            {% if row.show_domain %}
                            <tr class="domain-row">
                                <td colspan="6" style="padding-left:10px">{{ row.domain }}</td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td class="subj-name" style="padding-left:20px">{{ row.sub_activity }}</td>
                                {% for score in row.month_scores %}
                                <td>{{ score|default:'—' }}</td>
                                {% endfor %}
                                <td style="font-weight:700">{{ row.synthese|default:'—' }}</td>
                                <td>
                                    {% if row.appreciation %}
                                    <span class="appr-badge {% if row.appreciation == 'A+' %}Ap{% else %}{{ row.appreciation }}{% endif %}">
                                        {{ row.appreciation }}
                                    </span>
                                    {% else %}—{% endif %}
                                </td>
                            </tr>
                            {% endfor %}

                            <!-- Totals -->
                            <tr style="background:#f8fafc;font-weight:700;border-top:2px solid #cbd5e1">
                                <td class="subj-name">TOTAL</td>
                                {% for t in term_data.month_totals %}<td>{{ t|default:'—' }}</td>{% endfor %}
                                <td>{{ term_data.total_synthese|default:'—' }}</td>
                                <td></td>
                            </tr>
                            <tr style="background:#f8fafc;font-weight:700">
                                <td class="subj-name">AVERAGE</td>
                                {% for a in term_data.month_averages %}<td>{{ a|default:'—' }}</td>{% endfor %}
                                <td style="color:#1d4ed8">{{ term_data.average|default:'—' }}</td>
                                <td>
                                    {% if rc.average %}
                                    <span class="appr-badge {% if rc.get_appreciation == 'A+' %}Ap{% else %}{{ rc.get_appreciation }}{% endif %}">
                                        {{ rc.get_appreciation }}
                                    </span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr style="background:#f8fafc;font-weight:700">
                                <td class="subj-name">POSITION</td>
                                <td colspan="4"></td>
                                <td>
                                    {% if rc.position %}{{ rc.position }}/{{ term_data.class_size }}
                                    {% else %}—{% endif %}
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Annual results (Term 3 only) -->
            {% if is_term3 %}
            <div class="section-card">
                <div class="section-title">
                    <i class="fas fa-chart-line text-success"></i>
                    Annual Results
                </div>
                <form method="post" class="p-3">
                    {% csrf_token %}
                    <!-- Hidden fields to preserve other POST data -->
                    <input type="hidden" name="conduct" value="{{ rc.conduct }}">
                    <input type="hidden" name="class_teacher_remark" value="{{ rc.class_teacher_remark }}">
                    <input type="hidden" name="head_teacher_remark" value="{{ rc.head_teacher_remark }}">
                    <input type="hidden" name="promotion_status" value="{{ rc.promotion_status }}">

                    <div class="row g-3">
                        {% for label, field in annual_fields %}
                        <div class="col-6 col-md-4">
                            <label class="form-label" style="font-size:.78rem;font-weight:600">{{ label }}</label>
                            <input type="number" name="{{ field }}"
                                   value="{{ rc|attr:field }}"
                                   step="0.01" min="0" max="20"
                                   class="form-control form-control-sm">
                        </div>
                        {% endfor %}
                        <div class="col-6 col-md-4">
                            <label class="form-label" style="font-size:.78rem;font-weight:600">Annual Position</label>
                            <input type="number" name="annual_position"
                                   value="{{ rc.annual_position|default:'' }}"
                                   class="form-control form-control-sm">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary mt-3">
                        <i class="fas fa-save me-1"></i>Save Annual Results
                    </button>
                </form>
            </div>
            {% endif %}
        </div>

        <!-- RIGHT: Comments, conduct, promotion -->
        <div class="col-lg-4">

            <!-- Comments & Conduct form -->
            <div class="section-card">
                <div class="section-title">
                    <i class="fas fa-comment-alt text-warning"></i>
                    Comments &amp; Conduct
                </div>
                <form method="post" class="p-3">
                    {% csrf_token %}
                    <!-- Preserve annual results hidden -->
                    {% if is_term3 %}
                    <input type="hidden" name="term1_average" value="{{ rc.term1_average|default:'' }}">
                    <input type="hidden" name="term2_average" value="{{ rc.term2_average|default:'' }}">
                    <input type="hidden" name="term3_average" value="{{ rc.term3_average|default:'' }}">
                    <input type="hidden" name="annual_average" value="{{ rc.annual_average|default:'' }}">
                    <input type="hidden" name="annual_position" value="{{ rc.annual_position|default:'' }}">
                    {% endif %}

                    <!-- Conduct -->
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:.8rem">Conduct</label>
                        <select name="conduct" class="form-select form-select-sm">
                            <option value="">— Select —</option>
                            {% for val, label in rc.CONDUCT_CHOICES %}
                            <option value="{{ val }}" {% if rc.conduct == val %}selected{% endif %}>
                                {{ label }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    {% if is_francophone %}
                    <!-- Francophone conduct checkboxes -->
                    <div class="mb-3 p-2" style="background:#f8fafc;border-radius:8px;font-size:.8rem">
                        <div class="fw-bold mb-2" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.3px;color:#475569">
                            Observation sur la Conduite
                        </div>
                        <div class="conduct-checkbox mb-1">
                            <input type="checkbox" name="discipline_brutal" id="cb_brutal"
                                   class="form-check-input"
                                   {% if rc.discipline_brutal %}checked{% endif %}>
                            <label for="cb_brutal">Discipline Brutal(e)</label>
                        </div>
                        <div class="conduct-checkbox mb-1">
                            <input type="checkbox" name="absenteisme" id="cb_absent"
                                   class="form-check-input"
                                   {% if rc.absenteisme %}checked{% endif %}>
                            <label for="cb_absent">Absentéisme</label>
                        </div>
                        <div class="conduct-checkbox">
                            <input type="checkbox" name="barvade" id="cb_barvade"
                                   class="form-check-input"
                                   {% if rc.barvade %}checked{% endif %}>
                            <label for="cb_barvade">Barvade(e)</label>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Class teacher remark -->
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:.8rem">
                            Class Teacher Remark
                        </label>
                        <textarea name="class_teacher_remark" rows="3"
                                  class="form-control form-control-sm"
                                  placeholder="Enter remark…">{{ rc.class_teacher_remark }}</textarea>
                    </div>

                    <!-- Head teacher remark -->
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:.8rem">
                            Head Teacher / Direction Remark
                        </label>
                        <textarea name="head_teacher_remark" rows="3"
                                  class="form-control form-control-sm"
                                  placeholder="Enter remark…">{{ rc.head_teacher_remark }}</textarea>
                    </div>

                    <!-- Attendance -->
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:.8rem">Attendance</label>
                        <div class="row g-2">
                            <div class="col-4">
                                <label style="font-size:.72rem;color:#666">Present</label>
                                <input type="number" name="days_present" min="0"
                                       value="{{ rc.days_present }}"
                                       class="form-control form-control-sm text-center">
                            </div>
                            <div class="col-4">
                                <label style="font-size:.72rem;color:#666">Absent</label>
                                <input type="number" name="days_absent" min="0"
                                       value="{{ rc.days_absent }}"
                                       class="form-control form-control-sm text-center">
                            </div>
                            <div class="col-4">
                                <label style="font-size:.72rem;color:#666">Late</label>
                                <input type="number" name="days_late" min="0"
                                       value="{{ rc.days_late }}"
                                       class="form-control form-control-sm text-center">
                            </div>
                        </div>
                    </div>

                    <!-- Promotion Decision -->
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:.8rem">Promotion Decision</label>
                        <div class="d-flex gap-2 flex-wrap">
                            {% for val, label in rc.PROMOTION_CHOICES %}
                            <div>
                                <input type="radio" name="promotion_status"
                                       id="promo_{{ val }}" value="{{ val }}"
                                       class="btn-check"
                                       {% if rc.promotion_status == val %}checked{% endif %}>
                                <label for="promo_{{ val }}" class="btn btn-sm
                                    {% if val == 'promoted' %}btn-outline-success
                                    {% elif val == 'repeat' %}btn-outline-warning
                                    {% elif val == 'dismissed' %}btn-outline-danger
                                    {% else %}btn-outline-secondary{% endif %}">
                                    {{ label }}
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Promoted to class -->
                    <div class="mb-3" id="promotedToRow"
                         style="{% if rc.promotion_status != 'promoted' %}display:none{% endif %}">
                        <label class="form-label" style="font-size:.78rem">Promoted to Class</label>
                        <input type="text" name="promoted_to_class"
                               value="{{ rc.promoted_to_class }}"
                               class="form-control form-control-sm"
                               placeholder="e.g. Class 4">
                    </div>

                    <!-- Next term begins -->
                    <div class="mb-3">
                        <label class="form-label" style="font-size:.78rem">Next Term Begins</label>
                        <input type="date" name="next_term_begins"
                               value="{{ rc.next_term_begins|date:'Y-m-d'|default:'' }}"
                               class="form-control form-control-sm">
                    </div>

                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-save me-1"></i>Save All Changes
                    </button>
                </form>
            </div>

            <!-- Sibling students in same class -->
            {% if sibling_cards %}
            <div class="section-card">
                <div class="section-title">
                    <i class="fas fa-users text-info"></i>
                    Other Students in {{ rc.school_class.name }}
                </div>
                <div class="p-3 d-flex flex-wrap gap-2">
                    {% for sib in sibling_cards %}
                    <a href="{% url 'rc-detail' sib.pk %}" class="sibling-link">
                        {{ sib.student.last_name|upper }}, {{ sib.student.first_name|truncatechars:10 }}
                    </a>
                    {% endfor %}
                    <a href="{% url 'rc-marks' rc.school_class.pk rc.term.pk %}"
                       class="sibling-link" style="color:#3b82f6;border-color:#bfdbfe">
                        View all →
                    </a>
                </div>
            </div>
            {% endif %}

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

{% block extra_js %}
<script>
// Show/hide "promoted to class" field based on promotion selection
document.querySelectorAll('input[name="promotion_status"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        const row = document.getElementById('promotedToRow');
        if (this.value === 'promoted') {
            row.style.display = 'block';
        } else {
            row.style.display = 'none';
        }
    });
});
</script>
{% endblock %}
