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

{% block title %}{{ student }} - Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Student Header -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <h2 class="text-primary">{{ student.first_name }} {{ student.last_name }}</h2>
                    <p class="text-muted">
                        Student ID: {{ student.student_id }} • 
                        Class: {{ student.current_class|default:"Not Assigned" }} • 
                        Status: <span class="badge badge-{{ student.status }}">{{ student.status|title }}</span>
                    </p>
                </div>
                <div class="col-md-4 text-right">
                    <a href="{% url 'students:student_edit' student.pk %}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <a href="{% url 'finance:payment_add' %}?student_id={{ student.pk }}"
                       class="btn btn-success" title="Record Payment">
                        <i class="fas fa-dollar-sign"></i> Pay
                    </a>
                    <a href="{% url 'finance:invoice_list' %}?student={{ student.pk }}"
                       class="btn btn-info" title="View Invoices">
                        <i class="fas fa-file-invoice-dollar"></i> Invoices
                    </a>
                    <a href="{% url 'students:student_delete' student.pk %}"
                       onclick="return confirm('Delete {{ student.first_name }} {{ student.last_name }}? This cannot be undone.')"
                       class="btn btn-danger">
                        <i class="fas fa-trash"></i> Delete
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Student Information -->
        <div class="col-lg-4">
            <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">
                        <tr>
                            <td><strong>Date of Birth:</strong></td>
                            <td>{{ student.date_of_birth|date:"d M Y" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Age:</strong></td>
                            <td>{{ student.get_age }} years</td>
                        </tr>
                        <tr>
                            <td><strong>Gender:</strong></td>
                            <td>{{ student.get_gender_display }}</td>
                        </tr>
                        <tr>
                            <td><strong>Admission Date:</strong></td>
                            <td>{{ student.admission_date|date:"d M Y" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Home Address:</strong></td>
                            <td>{{ student.home_address }}</td>
                        </tr>
                        <tr>
                            <td><strong>Quarter:</strong></td>
                            <td>{{ student.quarter }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Contact Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td><strong>Phone:</strong></td>
                            <td>{{ student.phone|default:"Not provided" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Emergency Contact:</strong></td>
                            <td>{{ student.emergency_contact|default:"Not provided" }}</td>
                        </tr>
                        <tr>
                            <td><strong>Emergency Name:</strong></td>
                            <td>{{ student.emergency_contact_name|default:"Not provided" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Academic Information -->
        <div class="col-lg-8">
            <div class="row">
                <!-- Attendance Summary -->
                <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">Attendance (This Month)</h6>
                        </div>
                        <div class="card-body text-center">
                            <h1 class="display-4 text-success">85%</h1>
                            <p class="text-muted">Present: 17 days • Absent: 3 days</p>
                        </div>
                    </div>
                </div>

                <!-- Fee Status -->
                <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">Fee Status</h6>
                        </div>
                        <div class="card-body text-center">
                            <h1 class="display-4 text-{{ student.fee_status_color }}">Paid</h1>
                            <p class="text-muted">Last Payment: 15 Nov 2024</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
                    <button class="btn btn-sm btn-primary">View All</button>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <!-- Add timeline items here -->
                        <p class="text-muted text-center py-4">No recent activity</p>
                    </div>
                </div>
            </div>

            <!-- Parent/Guardian Information -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Parent/Guardian Information</h6>
                </div>
                <div class="card-body">
                    {% if parents %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Relationship</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Primary</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for parent in parents %}
                                <tr>
                                    <td>{{ parent.first_name }} {{ parent.last_name }}</td>
                                    <td>{{ parent.get_relationship_display }}</td>
                                    <td>
                                        <a href="tel:{{ parent.phone }}">{{ parent.phone }}</a>
                                    </td>
                                    <td>{{ parent.email|default:"-" }}</td>
                                    <td>
                                        {% if parent.is_primary_contact %}
                                        <span class="badge bg-success">Primary</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{% url 'students:parent_detail' parent.pk %}"
                                           class="btn btn-sm btn-outline-primary" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'students:parent_edit' parent.pk %}"
                                           class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted text-center py-4">No parent/guardian information on record.</p>
                    <div class="text-center">
                        <a href="{% url 'students:parent_add' %}?student={{ student.pk }}"
                           class="btn btn-primary">
                            <i class="fas fa-user-plus"></i> Add Parent/Guardian
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}