{% 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-3 has-text-grey-dark">
                        <span class="icon-text">
                            <span class="icon has-text-primary">
                                <i class="fas fa-project-diagram fa-lg"></i>
                            </span>
                            <span>{{ project.title }}</span>
                        </span>
                    </h1>
                    <h2 class="subtitle has-text-grey">
                        Client: {{ project.client.user.get_full_name }}
                        <span class="tag is-medium {% if project.status == 'PLANNING' %}is-info{% elif project.status == 'IN_PROGRESS' %}is-warning{% elif project.status == 'COMPLETED' %}is-success{% else %}is-danger{% endif %} ml-2">
                            {{ project.get_status_display }}
                        </span>
                    </h2>
                </div>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <div class="buttons">
                    <a href="{% url 'app:dashboard_projects_list' %}" class="button is-light">
                        <span class="icon">
                            <i class="fas fa-arrow-left"></i>
                        </span>
                        <span>Retour aux projets</span>
                    </a>
                    {% if user_type == 'DRH' %}
                    <button class="button is-primary" onclick="openAddActivityModal()">
                        <span class="icon">
                            <i class="fas fa-plus"></i>
                        </span>
                        <span>Nouvelle activité</span>
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="columns">
        <!-- Informations du projet -->
        <div class="column is-4">
            <div class="card" style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
                <header class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px 12px 0 0;">
                    <p class="card-header-title has-text-white">
                        <span class="icon">
                            <i class="fas fa-info-circle"></i>
                        </span>
                        Informations du projet
                    </p>
                </header>
                
                <div class="card-content">
                    <div class="content">
                        <div class="field mb-4">
                            <label class="label is-small">Description</label>
                            <div class="content is-small">
                                {{ project.description|safe }}
                            </div>
                        </div>

                        <div class="columns is-mobile">
                            <div class="column">
                                <div class="field">
                                    <label class="label is-small">Progression</label>
                                    <div class="content">
                                        <progress class="progress is-primary" value="{{ project.completion_percentage }}" max="100">{{ project.completion_percentage }}%</progress>
                                        <p class="has-text-centered is-size-7 mt-1">{{ project.completion_percentage }}%</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="columns is-mobile">
                            <div class="column">
                                <div class="field">
                                    <label class="label is-small">Date de début</label>
                                    <p class="is-size-7">
                                        <span class="icon-text">
                                            <span class="icon has-text-grey">
                                                <i class="fas fa-calendar-alt"></i>
                                            </span>
                                            <span>{{ project.start_date|date:"d/m/Y"|default:"Non définie" }}</span>
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="column">
                                <div class="field">
                                    <label class="label is-small">Date de fin</label>
                                    <p class="is-size-7">
                                        <span class="icon-text">
                                            <span class="icon has-text-grey">
                                                <i class="fas fa-calendar-check"></i>
                                            </span>
                                            <span>{{ project.end_date|date:"d/m/Y"|default:"Non définie" }}</span>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        {% if project.budget %}
                        <div class="field">
                            <label class="label is-small">Budget</label>
                            <p class="is-size-6 has-text-weight-semibold has-text-primary">
                                <span class="icon-text">
                                    <span class="icon">
                                        <i class="fas fa-coins"></i>
                                    </span>
                                    <span>{{ project.budget|floatformat:0 }} FCFA</span>
                                </span>
                            </p>
                        </div>
                        {% endif %}

                        <hr>

                        <div class="field">
                            <label class="label is-small">Créé par</label>
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-32x32">
                                        {% if project.created_by.image %}
                                            <img src="{{ project.created_by.image.url }}" alt="Avatar" class="is-rounded">
                                        {% else %}
                                            <div class="avatar-placeholder is-rounded" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; width: 32px; height: 32px;">
                                                {{ project.created_by.user.first_name|first|default:project.created_by.user.username|first|upper }}
                                            </div>
                                        {% endif %}
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="is-size-7">
                                        <strong>{{ project.created_by.user.get_full_name|default:project.created_by.user.username }}</strong><br>
                                        <span class="has-text-grey">{{ project.created_at|date:"d/m/Y à H:i" }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        {% if project.assigned_technicians.count > 0 %}
                        <div class="field">
                            <label class="label is-small">Techniciens assignés</label>
                            {% for tech in project.assigned_technicians.all %}
                            <div class="media mb-2">
                                <div class="media-left">
                                    <figure class="image is-24x24">
                                        {% if tech.image %}
                                            <img src="{{ tech.image.url }}" alt="Avatar" class="is-rounded">
                                        {% else %}
                                            <div class="avatar-placeholder is-rounded" style="background: linear-gradient(135deg, #ffb347 0%, #ff8c42 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem; width: 24px; height: 24px;">
                                                {{ tech.user.first_name|first|default:tech.user.username|first|upper }}
                                            </div>
                                        {% endif %}
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="is-size-7">
                                        {{ tech.user.get_full_name|default:tech.user.username }}
                                        <span class="tag is-small is-warning is-light">{{ tech.get_type_display }}</span>
                                    </p>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Liste des activités -->
        <div class="column is-8">
            <div class="card" style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
                <header class="card-header" style="background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); border-radius: 12px 12px 0 0;">
                    <p class="card-header-title has-text-white">
                        <span class="icon">
                            <i class="fas fa-tasks"></i>
                        </span>
                        Activités du projet ({{ activities.count }})
                    </p>
                </header>
                
                <div class="card-content p-0">
                    {% if activities %}
                        <div class="timeline p-4">
                            {% for activity in activities %}
                            <div class="timeline-item mb-4" style="border-left: 3px solid 
                                {% if activity.activity_type == 'FACTURE' %}#00d1b2{% elif activity.activity_type == 'NOTE' %}#ffdd57{% elif activity.activity_type == 'DEVIS' %}#3273dc{% else %}#ff3860{% endif %}; 
                                padding-left: 1rem; margin-left: 1rem; position: relative;">
                                
                                <div class="timeline-marker" style="position: absolute; left: -8px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: 
                                    {% if activity.activity_type == 'FACTURE' %}#00d1b2{% elif activity.activity_type == 'NOTE' %}#ffdd57{% elif activity.activity_type == 'DEVIS' %}#3273dc{% else %}#ff3860{% endif %};"></div>
                                
                                <div class="card" style="border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px;">
                                    <div class="card-content">
                                        <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 {% if activity.activity_type == 'FACTURE' %}is-success{% elif activity.activity_type == 'NOTE' %}is-warning{% elif activity.activity_type == 'DEVIS' %}is-info{% else %}is-danger{% endif %}">
                                                            <span class="icon">
                                                                {% if activity.activity_type == 'FACTURE' %}
                                                                    <i class="fas fa-file-invoice"></i>
                                                                {% elif activity.activity_type == 'NOTE' %}
                                                                    <i class="fas fa-sticky-note"></i>
                                                                {% elif activity.activity_type == 'DEVIS' %}
                                                                    <i class="fas fa-calculator"></i>
                                                                {% else %}
                                                                    <i class="fas fa-paperclip"></i>
                                                                {% endif %}
                                                            </span>
                                                            <span>{{ activity.get_activity_type_display }}</span>
                                                        </span>
                                                        {% if activity.is_completed %}
                                                            <span class="tag is-small is-success is-light">
                                                                <span class="icon">
                                                                    <i class="fas fa-check"></i>
                                                                </span>
                                                                <span>Terminé</span>
                                                            </span>
                                                        {% else %}
                                                            <span class="tag is-small is-light">
                                                                <span class="icon">
                                                                    <i class="fas fa-clock"></i>
                                                                </span>
                                                                <span>En cours</span>
                                                            </span>
                                                        {% endif %}
                                                        <br>
                                                        {{ activity.description|striptags|truncatewords:15 }}
                                                        <br>
                                                        <small class="has-text-grey">
                                                            <span class="icon-text">
                                                                <span class="icon">
                                                                    <i class="fas fa-user"></i>
                                                                </span>
                                                                <span>{{ activity.created_by.user.get_full_name|default:activity.created_by.user.username }}</span>
                                                            </span>
                                                            &nbsp;•&nbsp;
                                                            <span class="icon-text">
                                                                <span class="icon">
                                                                    <i class="fas fa-calendar"></i>
                                                                </span>
                                                                <span>{{ activity.created_at|date:"d/m/Y à H:i" }}</span>
                                                            </span>
                                                            {% if activity.due_date %}
                                                                &nbsp;•&nbsp;
                                                                <span class="icon-text {% if activity.is_overdue %}has-text-danger{% endif %}">
                                                                    <span class="icon">
                                                                        <i class="fas fa-clock"></i>
                                                                    </span>
                                                                    <span>Échéance: {{ activity.due_date|date:"d/m/Y" }}</span>
                                                                </span>
                                                            {% endif %}
                                                        </small>
                                                    </p>
                                                    
                                                    {% if activity.assigned_to %}
                                                    <div class="media mt-2">
                                                        <div class="media-left">
                                                            <figure class="image is-24x24">
                                                                {% if activity.assigned_to.image %}
                                                                    <img src="{{ activity.assigned_to.image.url }}" alt="Avatar" class="is-rounded">
                                                                {% else %}
                                                                    <div class="avatar-placeholder is-rounded" style="background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem; width: 24px; height: 24px;">
                                                                        {{ activity.assigned_to.user.first_name|first|default:activity.assigned_to.user.username|first|upper }}
                                                                    </div>
                                                                {% endif %}
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <p class="is-size-7 has-text-grey">
                                                                Assigné à: <strong>{{ activity.assigned_to.user.get_full_name|default:activity.assigned_to.user.username }}</strong>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    {% endif %}
                                                    
                                                    <!-- Statistiques des fichiers -->
                                                    <div class="tags are-small mt-2">
                                                        {% if activity.images.count > 0 %}
                                                        <span class="tag is-info is-light">
                                                            <span class="icon">
                                                                <i class="fas fa-images"></i>
                                                            </span>
                                                            <span>{{ activity.images.count }} image(s)</span>
                                                        </span>
                                                        {% endif %}
                                                        {% if activity.videos.count > 0 %}
                                                        <span class="tag is-success is-light">
                                                            <span class="icon">
                                                                <i class="fas fa-video"></i>
                                                            </span>
                                                            <span>{{ activity.videos.count }} vidéo(s)</span>
                                                        </span>
                                                        {% endif %}
                                                        {% if activity.files.count > 0 %}
                                                        <span class="tag is-warning is-light">
                                                            <span class="icon">
                                                                <i class="fas fa-file"></i>
                                                            </span>
                                                            <span>{{ activity.files.count }} fichier(s)</span>
                                                        </span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="media-right">
                                                <div class="dropdown is-hoverable">
                                                    <div class="dropdown-trigger">
                                                        <button class="button is-small is-ghost" aria-haspopup="true" aria-controls="dropdown-menu-{{ activity.id }}">
                                                            <span class="icon">
                                                                <i class="fas fa-ellipsis-v"></i>
                                                            </span>
                                                        </button>
                                                    </div>
                                                    <div class="dropdown-menu" id="dropdown-menu-{{ activity.id }}" role="menu">
                                                        <div class="dropdown-content">
                                                            <a href="{% url 'app:dashboard_activity_detail' activity.id %}" class="dropdown-item">
                                                                <span class="icon">
                                                                    <i class="fas fa-eye"></i>
                                                                </span>
                                                                Voir les détails
                                                            </a>
                                                            {% if user_type == 'DRH' %}
                                                            <a href="#" class="dropdown-item" onclick="editActivity({{ activity.id }})">
                                                                <span class="icon">
                                                                    <i class="fas fa-edit"></i>
                                                                </span>
                                                                Modifier
                                                            </a>
                                                            <hr class="dropdown-divider">
                                                            <a href="#" class="dropdown-item has-text-danger" onclick="deleteActivity({{ activity.id }})">
                                                                <span class="icon">
                                                                    <i class="fas fa-trash"></i>
                                                                </span>
                                                                Supprimer
                                                            </a>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="notification is-info is-light m-5">
                            <div class="content has-text-centered">
                                <span class="icon is-large has-text-info">
                                    <i class="fas fa-tasks fa-3x"></i>
                                </span>
                                <p class="title is-5">Aucune activité</p>
                                <p>Ce projet n'a pas encore d'activités. {% if user_type == 'DRH' %}Commencez par en créer une.{% endif %}</p>
                                {% if user_type == 'DRH' %}
                                <button class="button is-primary mt-4" onclick="openAddActivityModal()">
                                    <span class="icon">
                                        <i class="fas fa-plus"></i>
                                    </span>
                                    <span>Créer une activité</span>
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.avatar-placeholder {
    font-size: 0.8rem;
}

.timeline-item {
    transition: all 0.3s ease;
}

.timeline-item:hover .card {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.timeline-marker {
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card {
    transition: all 0.3s ease;
}

.button {
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dropdown {
    transition: all 0.3s ease;
}
</style>

<script>
function openAddActivityModal() {
    // Logique pour ouvrir le modal d'ajout d'activité
    console.log('Ouvrir modal d\'ajout d\'activité');
}

function editActivity(activityId) {
    // Logique pour éditer une activité
    console.log('Éditer activité:', activityId);
}

function deleteActivity(activityId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette activité ?')) {
        // Logique pour supprimer une activité
        console.log('Supprimer activité:', activityId);
    }
}
</script>
{% endblock %}
