{% extends "base.html" %}
{% block title %}Dashboard - Професор{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>Добредојде, {{ user_name }}!</h2>
        <p class="lead">Професорска контролна табла</p>
    </div>
</div>

<!-- Управување со содржина -->
<div class="row mt-4">
    <div class="col-md-3 mb-3">
        <div class="card h-100">
            <div class="card-header bg-primary text-white">
                <h5><i class="bi bi-flask"></i> Хемиски елементи</h5>
            </div>
            <div class="card-body">
                <p>Управување со хемиски елементи</p>
                <a href="/elements" class="btn btn-outline-primary btn-sm">Прегледај</a>
                <a href="/elements/add" class="btn btn-primary btn-sm">Додај нов</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card h-100">
            <div class="card-header bg-success text-white">
                <h5><i class="bi bi-tools"></i> Лабораториска опрема</h5>
            </div>
            <div class="card-body">
                <p>Управување со опрема</p>
                <a href="/equipment" class="btn btn-outline-success btn-sm">Прегледај</a>
                <a href="/equipment/add" class="btn btn-success btn-sm">Додај нова</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card h-100">
            <div class="card-header bg-warning text-dark">
                <h5><i class="bi bi-diagram-3"></i> Реакции</h5>
            </div>
            <div class="card-body">
                <p>Креирање на реакции</p>
                <a href="/reactions" class="btn btn-outline-warning btn-sm">Прегледај</a>
                <a href="/reactions/add" class="btn btn-warning btn-sm">Додај нова</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card h-100">
            <div class="card-header bg-danger text-white">
                <h5><i class="bi bi-radioactive"></i> Лабораторија</h5>
            </div>
            <div class="card-body">
                <p>Тестирај реакции</p>
                <a href="/laboratory" class="btn btn-danger">Отвори</a>
            </div>
        </div>
    </div>
</div>

<!-- Експерименти и студенти -->
<div class="row">
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-header text-white" style="background: linear-gradient(45deg, #FF6B6B, #4ECDC4);">
                <h5><i class="bi bi-journal-check"></i> Експерименти</h5>
            </div>
            <div class="card-body">
                <p>Преглед на експерименти</p>
                <a href="/experiments" class="btn btn-outline-info btn-sm">Сите</a>
                <a href="/my-experiments" class="btn btn-info btn-sm">Мои</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-header bg-info text-white">
                <h5><i class="bi bi-people"></i> Студенти</h5>
            </div>
            <div class="card-body">
                <p>Следете го напредокот на студентите</p>
                <a href="/my_students" class="btn btn-info">Види студенти</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-header bg-secondary text-white">
                <h5><i class="bi bi-file-earmark-bar-graph"></i> Извештаи</h5>
            </div>
            <div class="card-body">
                <p>Детални статистики</p>
                <a href="/reports" class="btn btn-secondary">Види извештаи</a>
            </div>
        </div>
    </div>
</div>

<!-- Брзи акции -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-dark text-white">
                <h5><i class="bi bi-lightning"></i> Брзи акции</h5>
            </div>
            <div class="card-body">
                <div class="btn-group" role="group">
                    <a href="/reactions/add" class="btn btn-outline-primary">
                        <i class="bi bi-plus-circle"></i> Нова реакција
                    </a>
                    <a href="/elements/add" class="btn btn-outline-success">
                        <i class="bi bi-plus-circle"></i> Нов елемент
                    </a>
                    <a href="/equipment/add" class="btn btn-outline-warning">
                        <i class="bi bi-plus-circle"></i> Нова опрема
                    </a>
                    <a href="/reports/student_experiments" class="btn btn-outline-info">
                        <i class="bi bi-graph-up"></i> Експерименти на студенти
                    </a>
                    <a href="/reports/low_activity_students" class="btn btn-outline-danger">
                        <i class="bi bi-exclamation-triangle"></i> Неактивни студенти
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Статистики -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Статистики на системот</h5>
                <div class="row text-center">
                    <div class="col-md-3">
                        <div class="stat-box">
                            <h3 class="text-primary" id="student-count">0</h3>
                            <p class="text-muted">Мои студенти</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-box">
                            <h3 class="text-success" id="reaction-count">0</h3>
                            <p class="text-muted">Креирани реакции</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-box">
                            <h3 class="text-warning" id="experiment-count">0</h3>
                            <p class="text-muted">Вкупно експерименти</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-box">
                            <h3 class="text-info" id="activity-count">0</h3>
                            <p class="text-muted">Активности денес</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.stat-box {
    padding: 15px;
    border-radius: 10px;
    transition: transform 0.3s;
}
.stat-box:hover {
    transform: translateY(-5px);
}
</style>

<script>
// Вчитај статистики при вчитување на страна
document.addEventListener('DOMContentLoaded', function() {
    // TODO: Повикај API за статистики
    loadTeacherStatistics();
});

function loadTeacherStatistics() {
    fetch('/api/dashboard-stats')
        .then(response => response.json())
        .then(data => {
            document.getElementById('student-count').textContent = data.student_count || 0;
            document.getElementById('reaction-count').textContent = data.reaction_count || 0;
            document.getElementById('experiment-count').textContent = data.experiment_count || 0;
            document.getElementById('activity-count').textContent = data.activity_count || 0;
        })
        .catch(error => console.error('Грешка при вчитување статистики:', error));
}
</script>
{% endblock %}