{% extends "admin_layout.html" %}

{% block title %}{{ t('nav.dashboard','Dashboard') }} - {{ app_settings.title if app_settings else t('app.name','Survey Manager') }}{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">{{ t('nav.dashboard','Dashboard') }}</h1>
    <div class="text-muted">
        <i class="fas fa-clock me-1"></i>
        <span id="current-time"></span>
    </div>
</div>

<!-- Info Boxes Row 1 -->
<div class="row mb-4">
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box bg-gradient-primary text-white">
            <div class="info-box-icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.users_count }}</div>
                <div class="info-box-text">{{ t('entities.users','Users') }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
                <i class="fas fa-poll"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.surveys_count }}</div>
                <div class="info-box-text">{{ t('entities.surveys','Surveys') }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);">
                <i class="fas fa-project-diagram"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.projects_count }}</div>
                <div class="info-box-text">{{ t('entities.projects','Projects') }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);">
                <i class="fas fa-address-book"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.peoples_count }}</div>
                <div class="info-box-text">{{ t('entities.people','People') }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Info Boxes Row 2 -->
<div class="row mb-4">
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);">
                <i class="fas fa-brain"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.temperaments_count }}</div>
                <div class="info-box-text">{{ t('entities.temperaments','Temperaments') }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);">
                <i class="fas fa-question-circle"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.questions_count }}</div>
                <div class="info-box-text">{{ t('entities.questions','Questions') }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #28a745 0%, #17a2b8 100%);">
                <i class="fas fa-layer-group"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.features_count }}</div>
                <div class="info-box-text">{{ t('entities.features','Features') }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="info-box">
            <div class="info-box-icon" style="background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);">
                <i class="fas fa-comments"></i>
            </div>
            <div class="flex-grow-1">
                <div class="info-box-number">{{ stats.options_count }}</div>
                <div class="info-box-text">{{ t('entities.options','Options') }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Content Cards -->
<div class="row">
    <!-- Recent Users -->
    <div class="col-12 col-lg-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-users me-2"></i>{{ t('dashboard.recent_users','Recent Users') }}
                </h5>
                <a href="{{ url_for('user.index') }}" class="btn btn-sm btn-outline-primary">
                    {{ t('common.view_all','View All') }}
                </a>
            </div>
            <div class="card-body p-0">
                {% if recent_users %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <tbody>
                                {% for user in recent_users %}
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name={{ user.name }}&background=007bff&color=fff&size=32" 
                                             class="rounded-circle me-3" width="32" height="32" alt="{{ user.name }}">
                                        <div>
                                            <div class="fw-semibold">{{ user.name }}</div>
                                            <small class="text-muted">{{ user.email }}</small>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <span class="badge bg-{{ 'primary' if user.role == 'admin' else 'secondary' }}">
                                            {{ user.role|title }}
                                        </span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-users fa-3x text-muted mb-3"></i>
                        <p class="text-muted">{{ t('dashboard.no_users','No users found') }}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent Surveys -->
    <div class="col-12 col-lg-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-poll me-2"></i>{{ t('dashboard.recent_surveys','Recent Surveys') }}
                </h5>
                <a href="{{ url_for('survey.index') }}" class="btn btn-sm btn-outline-primary">
                    {{ t('common.view_all','View All') }}
                </a>
            </div>
            <div class="card-body p-0">
                {% if recent_surveys %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <tbody>
                                {% for survey in recent_surveys %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-poll text-primary me-3"></i>
                                            <div>
                                                <div class="fw-semibold">{{ survey.name }}</div>
                                                <small class="text-muted">
                                                    {{ t('common.created','Created') }} {{ survey.created_at.strftime('%b %d, %Y') }}
                                                </small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <span class="badge bg-{{ 'success' if survey.is_active else 'secondary' }}">
                                            {{ t('common.active','Active') if survey.is_active else t('common.inactive','Inactive') }}
                                        </span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-poll fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No surveys found</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-bolt me-2"></i>{{ t('dashboard.quick_actions','Quick Actions') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="{{ url_for('user.create') }}" class="btn btn-outline-primary w-100">
                            <i class="fas fa-user-plus d-block mb-2"></i>
                            <small>{{ t('dashboard.add_user','Add User') }}</small>
                        </a>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="{{ url_for('temperament.create') }}" class="btn btn-outline-info w-100">
                            <i class="fas fa-brain d-block mb-2"></i>
                            <small>{{ t('dashboard.add_temperament','Add Temperament') }}</small>
                        </a>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="{{ url_for('option.create') }}" class="btn btn-outline-secondary w-100">
                            <i class="fas fa-list-alt d-block mb-2"></i>
                            <small>{{ t('dashboard.add_option','Add Option') }}</small>
                        </a>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="{{ url_for('survey.create') }}" class="btn btn-outline-success w-100">
                            <i class="fas fa-plus-circle d-block mb-2"></i>
                            <small>{{ t('dashboard.new_survey','New Survey') }}</small>
                        </a>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="{{ url_for('project.create') }}" class="btn btn-outline-warning w-100">
                            <i class="fas fa-project-diagram d-block mb-2"></i>
                            <small>{{ t('dashboard.new_project','New Project') }}</small>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Update current time
    function updateTime() {
        const now = new Date();
        const options = { 
            year: 'numeric', 
            month: 'short', 
            day: 'numeric',
            hour: '2-digit', 
            minute: '2-digit',
            second: '2-digit'
        };
        $('#current-time').text(now.toLocaleDateString('en-US', options));
    }
    
    updateTime();
    setInterval(updateTime, 1000);
    
    // Animate info boxes on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '0';
                entry.target.style.transform = 'translateY(20px)';
                entry.target.style.transition = 'all 0.6s ease';
                
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, 100);
                
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    $('.info-box').each(function() {
        observer.observe(this);
    });
});
</script>
{% endblock %}