{% extends 'generic/base_supervisor.html' %}

{% load crispy_forms_tags %}

{% block content %}
<div class="container py-4">
    <!-- Header Card -->
    <div class="card bg-dark bg-opacity-50 border-secondary mb-4">
        <div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-info bg-opacity-10 border border-info border-opacity-25 rounded-circle p-3 d-flex align-items-center justify-content-center text-info" style="width: 56px; height: 56px;">
                    <i class="bi bi-person-workspace fs-3"></i>
                </div>
                <div>
                    <h2 class="h4 mb-0 text-light">Supervisor: {{ supervisor.name }}</h2>
                    <p class="text-muted mb-0 small"><i class="bi bi-envelope me-1"></i>{{ supervisor.email }} &middot; <i class="bi bi-geo-alt me-1"></i>{{ supervisor.site|default:"No site linked" }}</p>
                </div>
            </div>
            
            <div class="d-flex gap-3 text-center">
                <div class="border-start border-secondary ps-3">
                    <div class="text-muted small">Trainees</div>
                    <div class="fs-4 fw-semibold text-info">{{ trainees.count }}</div>
                </div>
                <div class="border-start border-secondary ps-3">
                    <div class="text-muted small">Total Attempts</div>
                    <div class="fs-4 fw-semibold text-light">{{ attempts|length }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Help Info -->
    <div class="alert alert-secondary border-secondary bg-dark bg-opacity-25 mb-4">
        <div class="d-flex gap-2">
            <i class="bi bi-info-circle text-info fs-5"></i>
            <div>
                <span class="fw-semibold text-light">Supervisor Dashboard Guide:</span>
                <p class="mb-1 text-muted small">This hub allows you to monitor and review your trainees' progress on exams and case collections.</p>
                <p class="mb-0 text-muted small">Trainees have option to choose which attempts to share. Shared attempts are fully viewable (score and answers link). Private attempts show the completion date only, keeping results confidential.</p>
            </div>
        </div>
    </div>

    <!-- Dashboard Tabs -->
    <ul class="nav nav-tabs border-secondary mb-4" id="supervisorTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active text-light border-secondary bg-transparent" id="trainees-tab" data-bs-toggle="tab" data-bs-target="#trainees" type="button" role="tab" aria-controls="trainees" aria-selected="true">
                <i class="bi bi-people-fill me-1"></i>Trainees List
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link text-muted border-transparent bg-transparent" id="attempts-tab" data-bs-toggle="tab" data-bs-target="#attempts" type="button" role="tab" aria-controls="attempts" aria-selected="false">
                <i class="bi bi-clock-history me-1"></i>Recent Trainee Attempts
            </button>
        </li>
    </ul>

    <div class="tab-content" id="supervisorTabContent">
        <!-- Trainees Tab -->
        <div class="tab-pane fade show active" id="trainees" role="tablist" aria-labelledby="trainees-tab">
            <div class="card bg-dark bg-opacity-25 border-secondary">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-dark table-striped table-hover align-middle mb-0">
                            <thead>
                                <tr class="text-muted border-secondary">
                                    <th class="ps-4">Trainee Name</th>
                                    <th>Email</th>
                                    <th>Grade</th>
                                    <th>Site</th>
                                    <th class="text-center">Shared / Private Attempts</th>
                                    <th>Last Activity</th>
                                    <th class="text-end pe-4">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for stat in trainee_stats %}
                                    <tr class="border-secondary">
                                        <td class="ps-4 fw-semibold">
                                            <i class="bi bi-person-fill text-muted me-2"></i>{{ stat.trainee.first_name }} {{ stat.trainee.last_name }}
                                        </td>
                                        <td>{{ stat.trainee.email }}</td>
                                        <td><span class="badge bg-secondary">{{ stat.trainee.userprofile.grade|default:"N/A" }}</span></td>
                                        <td>{{ stat.trainee.userprofile.site|default:"N/A" }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-success" title="Shared attempts">{{ stat.shared_count }}</span>
                                            <span class="badge bg-secondary" title="Private attempts">{{ stat.private_count }}</span>
                                        </td>
                                        <td class="text-muted small">
                                            {% if stat.last_active %}
                                                {{ stat.last_active|date:"d M Y H:i" }}
                                            {% else %}
                                                No activity
                                            {% endif %}
                                        </td>
                                        <td class="text-end pe-4">
                                            <a href='{% url "generic:supervisor_trainee" supervisor.pk stat.trainee.pk %}' class="btn btn-sm btn-outline-info">
                                                <i class="bi bi-speedometer2 me-1"></i>View Progress
                                            </a>
                                        </td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">
                                            <i class="bi bi-people display-6 mb-2 d-block"></i>
                                            You currently have no associated trainees.
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Attempts Tab -->
        <div class="tab-pane fade" id="attempts" role="tabpanel" aria-labelledby="attempts-tab">
            <div class="card bg-dark bg-opacity-25 border-secondary">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-dark table-striped table-hover align-middle mb-0">
                            <thead>
                                <tr class="text-muted border-secondary">
                                    <th class="ps-4">Trainee</th>
                                    <th>Attempt Item</th>
                                    <th>Type</th>
                                    <th>Date Completed</th>
                                    <th>Sharing</th>
                                    <th>Score / Progress</th>
                                    <th class="text-end pe-4">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in attempts %}
                                    <tr class="border-secondary">
                                        <td class="ps-4 fw-semibold">
                                            {{ item.trainee.first_name }} {{ item.trainee.last_name }}
                                        </td>
                                        <td>{{ item.exam }}</td>
                                        <td>
                                            <span class="badge {% if item.type == 'casecollection' %}bg-primary{% else %}bg-secondary{% endif %}">
                                                {{ item.type_display }}
                                            </span>
                                        </td>
                                        <td class="text-muted small">{{ item.date|date:"d M Y H:i" }}</td>
                                        <td>
                                            {% if item.is_shared %}
                                                <span class="badge bg-success"><i class="bi bi-eye-fill me-1"></i>Shared</span>
                                            {% else %}
                                                <span class="badge bg-secondary"><i class="bi bi-lock-fill me-1"></i>Private</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if item.is_shared %}
                                                <span class="text-light fw-medium">{{ item.score_str }}</span>
                                            {% else %}
                                                <span class="text-muted small">Locked</span>
                                            {% endif %}
                                        </td>
                                        <td class="text-end pe-4">
                                            {% if item.is_shared and item.detail_url %}
                                                <a href="{{ item.detail_url }}" class="btn btn-sm btn-outline-info">
                                                    <i class="bi bi-arrow-right-short me-1"></i>View Details
                                                </a>
                                            {% else %}
                                                <button class="btn btn-sm btn-outline-secondary" disabled>
                                                    <i class="bi bi-lock-fill"></i> Private
                                                </button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">
                                            <i class="bi bi-clock-history display-6 mb-2 d-block"></i>
                                            No trainee attempts recorded.
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
<style>
    .nav-tabs .nav-link.active {
        border-color: var(--bs-secondary) var(--bs-secondary) var(--bs-body-bg) !important;
        border-bottom-width: 2px !important;
    }
    .nav-tabs .nav-link:hover:not(.active) {
        border-color: transparent !important;
        color: var(--bs-light) !important;
    }
</style>
{% endblock css %}