{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
  {{ block.super }}
  <link href="{% static 'projects/css/frappe-gantt.css' %}" rel="stylesheet">
  <style>
    .gantt-container {
      padding: 20px;
      background: white;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
{% endblock %}

{% block content %}
<div class="gantt-container">
  <h2>Diagramme de Gantt des Projets</h2>
  <div id="gantt"></div>
</div>
{% endblock %}

{% block extrajs %}
  {{ block.super }}
  <script src="{% static 'projects/js/frappe-gantt.min.js' %}"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var tasks = [
        {% for project in projects %}
          {% for task in project.tasks.all %}
          {
            id: '{{ task.id }}',
            name: '{{ task.name }}',
            start: '{{ task.start_date|date:"Y-m-d" }}',
            end: '{{ task.end_date|date:"Y-m-d" }}',
            progress: {{ task.progress|default:0 }},
            project: '{{ project.name }}'
          },
          {% endfor %}
        {% endfor %}
      ];

      var gantt = new Gantt("#gantt", tasks, {
        view_mode: 'Month',
        header_height: 50,
        column_width: 30,
        step: 24,
        view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
        bar_height: 20,
        bar_corner_radius: 3,
        arrow_curve: 5,
        padding: 18,
        date_format: 'YYYY-MM-DD',
        custom_popup_html: function(task) {
          return `
            <div class="details-container">
              <h5>${task.name}</h5>
              <p>Projet: ${task.project}</p>
              <p>Du ${task.start} au ${task.end}</p>
              <p>Progrès: ${task.progress}%</p>
            </div>
          `;
        }
      });
    });
  </script>
{% endblock %}