{% extends 'layouts/base.html' %}

{% block title %}Suite Consultance - Tasks{% endblock %}
{% block module_name %}Tasks{% endblock %}

{% block content %}
{% import "tasks/macros.html" as tsk %}
{% import "tasks/manage_macros.html" as tskm %}
<div class="container" style="max-width:1100px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h4 mb-0">Gestion des tâches</h1>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTaskModal">
      <i class="fas fa-plus me-1"></i> Nouvelle tâche
    </button>
  </div>

  <form class="card p-3 mb-3" method="get">
    <div class="row g-2">
      <div class="col-md-3">
        <label class="form-label">Statut</label>
        <select name="status" class="form-select" onchange="this.form.submit()">
          <option value="" {% if not status %}selected{% endif %}>Tous</option>
          <option value="todo" {% if status=='todo' %}selected{% endif %}>À faire</option>
          <option value="done" {% if status=='done' %}selected{% endif %}>Faites</option>
          <option value="canceled" {% if status=='canceled' %}selected{% endif %}>Annulées</option>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label">Type d’entité</label>
        <select name="entity_type" class="form-select">
          <option value="" {% if not entity_type %}selected{% endif %}>Toutes</option>
          <option value="client" {% if entity_type=='client' %}selected{% endif %}>Client</option>
          <option value="prospect" {% if entity_type=='prospect' %}selected{% endif %}>Prospect</option>
          <option value="project" {% if entity_type=='project' %}selected{% endif %}>Projet</option>
          <option value="campaign" {% if entity_type=='campaign' %}selected{% endif %}>Campagne</option>
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label">ID entité</label>
        <input type="text" name="entity_id" class="form-control" value="{{ entity_id or '' }}" placeholder="Filtrer par ID">
      </div>
      <div class="col-md-2 d-flex align-items-end">
        <button class="btn btn-outline-secondary w-100" type="submit">
          <i class="fas fa-filter me-1"></i> Filtrer
        </button>
      </div>
    </div>
  </form>

  <div class="card p-3">
    {{ tskm.render_tasks_table_actions(tasks, show_entity=True, show_due_date=True) }}
  </div>
</div>

{# Modal de création global #}
{% include 'partials/task_create_modal.html' %}

{# Modal d'édition de tâche #}
<div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form method="post" action="{{ url_for('tasks.update_task') }}" class="modal-content">
      <input type="hidden" name="task_id" id="edit_task_id">
      <div class="modal-header">
        <h5 class="modal-title" id="editTaskModalLabel"><i class="fas fa-pen me-2"></i>Éditer la tâche</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Titre *</label>
          <input type="text" name="title" id="edit_title" class="form-control" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Échéance *</label>
          <input type="date" name="due_date" id="edit_due_date" class="form-control" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Description</label>
          <textarea name="description" id="edit_description" class="form-control" rows="3"></textarea>
        </div>
        <div class="row">
          <div class="mb-3 col-md-6">
            <label class="form-label">Priorité</label>
            <select name="priority" id="edit_priority" class="form-select">
              <option value="basse">Basse</option>
              <option value="normale">Normale</option>
              <option value="haute">Haute</option>
            </select>
          </div>
          <div class="mb-3 col-md-6">
            <label class="form-label">Type d’entité</label>
            <select name="entity_type" id="edit_entity_type" class="form-select">
              <option value="">Aucune</option>
              <option value="client">Client</option>
              <option value="prospect">Prospect</option>
              <option value="project">Projet</option>
              <option value="campaign">Campagne</option>
            </select>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">ID de l’entité (optionnel)</label>
          <input type="text" name="entity_id" id="edit_entity_id" class="form-control" placeholder="cli_xxx / pros_xxx / id projet...">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit"><i class="fas fa-save me-1"></i> Enregistrer</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('click', function(e){
    const btn = e.target.closest('.btn-edit-task');
    if (!btn) return;
    document.getElementById('edit_task_id').value = btn.dataset.id || '';
    document.getElementById('edit_title').value = btn.dataset.title || '';
    document.getElementById('edit_due_date').value = btn.dataset.due_date || '';
    document.getElementById('edit_priority').value = btn.dataset.priority || 'normale';
    document.getElementById('edit_description').value = btn.dataset.description || '';
    document.getElementById('edit_entity_type').value = btn.dataset.entity_type || '';
    document.getElementById('edit_entity_id').value = btn.dataset.entity_id || '';
  });
</script>
{% endblock %}