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

{% block title %}{{ page_title }} - ECOLUX Dashboard{% endblock %}

{% block content %}
<section class="section is-main-section">
    <div class="level">
        <div class="level-left">
            <div class="level-item">
                <div class="title">
                    <h1 class="title is-5 has-text-ecolux-primary">{{ page_title }}</h1>
                     
                </div>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <div class="buttons">
                    <a href="{% url 'app:dashboard_profile' %}" class="button is-ecolux-primary">
                        <span class="icon">
                            <i class="fas fa-user"></i>
                        </span>
                        <span>Mon Profil</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% if user_type == 'DRH' %}
    <!-- Vue DRH: Statistiques globales -->
    <div class="columns is-multiline">
        <div class="column is-3">
            <div class="card ecolux-card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-project-diagram fa-2x has-text-ecolux-primary"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4 has-text-ecolux-primary">{{ total_projects }}</p>
                            <p class="subtitle is-6">Projets Total</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="column is-3">
            <div class="card ecolux-card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-play-circle fa-2x has-text-ecolux-secondary"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4 has-text-ecolux-primary">{{ active_projects }}</p>
                            <p class="subtitle is-6">Projets Actifs</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="column is-3">
            <div class="card ecolux-card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-tasks fa-2x has-text-ecolux-primary"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4 has-text-ecolux-primary">{{ total_activities }}</p>
                            <p class="subtitle is-6">Activités Total</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="column is-3">
            <div class="card ecolux-card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-clock fa-2x has-text-ecolux-secondary"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">{{ pending_activities }}</p>
                            <p class="subtitle is-6">En Attente</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="columns">
        <div class="column is-8">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">Projets Récents</p>
                </header>
                <div class="card-content">
                    {% if recent_projects %}
                        {% for project in recent_projects %}
                        <div class="media">
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>
                                            <a href="{% url 'app:dashboard_project_detail' project.id %}">
                                                {{ project.title }}
                                            </a>
                                        </strong>
                                        <span class="tag is-small {{ project.status|lower }}">
                                            {{ project.get_status_display }}
                                        </span>
                                        <br>
                                        <small>Client: {{ project.client.user.get_full_name }}</small>
                                        <small>{{ project.created_at|timesince }} ago</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="has-text-grey">Aucun projet récent</p>
                    {% endif %}
                </div>
                <footer class="card-footer">
                    <a href="{% url 'app:dashboard_projects_list' %}" class="card-footer-item">
                        Voir tous les projets
                    </a>
                </footer>
            </div>
        </div>
        
        <div class="column is-4">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">Activités Récentes</p>
                </header>
                <div class="card-content">
                    {% if recent_activities %}
                        {% for activity in recent_activities %}
                        <div class="media">
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>
                                            <a href="{% url 'app:dashboard_activity_detail' activity.id %}">
                                                {{ activity.title }}
                                            </a>
                                        </strong>
                                        <span class="tag is-small is-light">
                                            {{ activity.get_activity_type_display }}
                                        </span>
                                        <br>
                                        <small>{{ activity.project.title }}</small>
                                        <small>{{ activity.created_at|timesince }} ago</small>
                                        {% if activity.assigned_users.exists %}
                                        <br>
                                        <div class="tags are-small">
                                            {% for assigned_user in activity.assigned_users.all|slice:":3" %}
                                            <span class="tag is-info is-light">
                                                {{ assigned_user.user.get_full_name|default:assigned_user.user.username }}
                                            </span>
                                            {% endfor %}
                                            {% if activity.assigned_users.count > 3 %}
                                            <span class="tag is-light">+{{ activity.assigned_users.count|add:"-3" }}</span>
                                            {% endif %}
                                        </div>
                                        {% elif activity.assigned_to %}
                                        <br>
                                        <span class="tag is-small is-info is-light">
                                            {{ activity.assigned_to.user.get_full_name|default:activity.assigned_to.user.username }}
                                        </span>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="has-text-grey">Aucune activité récente</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    {% elif user_type == 'CLIENT' %}
    <!-- Vue CLIENT: Mes projets -->
    <div class="columns is-multiline">
        <div class="column is-4">
            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-folder fa-2x has-text-primary"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">{{ my_projects_count }}</p>
                            <p class="subtitle is-6">Mes Projets</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="column is-4">
            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-play-circle fa-2x has-text-warning"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">{{ my_active_projects }}</p>
                            <p class="subtitle is-6">En Cours</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="column is-4">
            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <i class="fas fa-tasks fa-2x has-text-info"></i>
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">{{ my_activities.count }}</p>
                            <p class="subtitle is-6">Activités</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <header class="card-header">
            <p class="card-header-title">Mes Projets</p>
        </header>
        <div class="card-content">
            {% if my_projects %}
                {% for project in my_projects %}
                <div class="media">
                    <div class="media-content">
                        <div class="content">
                            <p>
                                <strong>
                                    <a href="{% url 'app:dashboard_project_detail' project.id %}">
                                        {{ project.title }}
                                    </a>
                                </strong>
                                <span class="tag is-small {{ project.status|lower }}">
                                    {{ project.get_status_display }}
                                </span>
                                <br>
                                <small>{{ project.activities_count }} activités</small>
                                <small>Progression: {{ project.completion_percentage }}%</small>
                            </p>
                            <div class="progress is-small is-primary">
                                <progress class="progress is-primary" value="{{ project.completion_percentage }}" max="100">{{ project.completion_percentage }}%</progress>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p class="has-text-grey">Aucun projet en cours</p>
            {% endif %}
        </div>
        <footer class="card-footer">
            <a href="{% url 'app:dashboard_projects_list' %}" class="card-footer-item">
                Voir tous mes projets
            </a>
        </footer>
    </div>
    
    {% elif user_type == 'TECHNICIEN' %}
    <!-- Vue TECHNICIEN: Notes assignées -->
    <div class="columns">
        <div class="column is-6">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">Mes Notes</p>
                </header>
                <div class="card-content">
                    {% if my_notes %}
                        {% for note in my_notes %}
                        <div class="media">
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>
                                            <a href="{% url 'app:dashboard_activity_detail' note.id %}">
                                                {{ note.title }}
                                            </a>
                                        </strong>
                                        {% if note.is_completed %}
                                            <span class="tag is-success">Terminé</span>
                                        {% else %}
                                            <span class="tag is-warning">En cours</span>
                                        {% endif %}
                                        <br>
                                        <small>Projet: {{ note.project.title }}</small>
                                        {% if note.due_date %}
                                            <small>Échéance: {{ note.due_date }}</small>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="has-text-grey">Aucune note assignée</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="column is-6">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">Projets Assignés</p>
                </header>
                <div class="card-content">
                    {% if assigned_projects %}
                        {% for project in assigned_projects %}
                        <div class="media">
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>
                                            <a href="{% url 'app:dashboard_project_detail' project.id %}">
                                                {{ project.title }}
                                            </a>
                                        </strong>
                                        <span class="tag is-small {{ project.status|lower }}">
                                            {{ project.get_status_display }}
                                        </span>
                                        <br>
                                        <small>Client: {{ project.client.user.get_full_name }}</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="has-text-grey">Aucun projet assigné</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</section>

<style>
.tag.planning { background-color: #3273dc; color: white; }
.tag.in_progress { background-color: #ffdd57; color: #363636; }
.tag.completed { background-color: #48c774; color: white; }
.tag.on_hold { background-color: #f14668; color: white; }
</style>
{% endblock %}
