{% block css %}

<style>

.bar-wrapper[data-id^="Proyect"] .bar {
  fill: #3498db; 
}

.bar-wrapper[data-id^="Proyect"] .bar-label {
  fill: #fff !important;
}

.bar-wrapper[data-id^="Tarea"] .bar {
  fill: #2ecc71; 
}

.bar-wrapper[data-id^="Tarea"] .bar-label {
  fill: #fff !important;
}

.bar-wrapper[data-id^="SubTarea"] .bar {
  fill: #e74c3c; 
}
.bar-wrapper[data-id^="SubTarea"] .bar-label {
  fill: #fff !important;
}

</style>

    <link rel="stylesheet" type="text/css" id="custom"
          href="{{ asset('Plugins/PartesSemanales/node_modules/frappe-gantt/dist/frappe-gantt.css') }}">
{% endblock %}

{% block javascripts %}
    <script type="text/javascript" id="frappe-gantt"
            src="{{ asset('Plugins/PartesSemanales/node_modules/frappe-gantt/dist/frappe-gantt.js') }}"></script>
    <script type="text/javascript" id="snap-svg"
            src="{{ asset('Plugins/PartesSemanales/node_modules/snapsvg/dist/snap.svg.js') }}"></script>
    <script type="text/javascript" id="moment"
            src="{{ asset('Plugins/PartesSemanales/node_modules/moment/moment.js') }}"></script>
{% endblock %}

{% block body %}

	{% set tasks = [] %} {# Inicializar el array de tareas #}

	{% for tarea in fsc.gantt %}
		{% set task = {
			'start': tarea.start, 
			'end': tarea.end, 
 		        'name': tarea.name, 
            		'id': tarea.id, 
			'progress': tarea.progress, 
			'dependencies': tarea.dependencies
		} %}
		{# Agregar la tarea al array #}
		{% set tasks = tasks|merge([task]) %}
	{% endfor %}

	<div class="container-fluid">
		<svg id="gantt"></svg>
	</div>

    <script>

    	let tasks = {{ tasks | json_encode | raw }};

        let gantt = new Gantt("#gantt", tasks, {
            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,
            view_mode: 'Day',
            date_format: 'YYYY-MM-DD',
            language: 'es', // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
            custom_popup_html: null
        });
        // gantt.change_view_mode('Week') // Quarter Day, Half Day, Day, Week, Month
    </script>
{% endblock %}