{% block css %}

{% endblock %}

{% block stylesheets %}
	
	<link rel="stylesheet" href="{{ asset('Dinamic/Assets/CSS/hopeui/hope-ui.min.css') }}">
	<link rel="stylesheet" href="{{ asset('Dinamic/Assets/CSS/hopeui/custom.min.css') }}">

{% endblock %}

{% block body %}

            <div class="content-inner container-fluid pb-0" id="page_layout">
<div class="row">

	{% for fase in fsc.kanban %}

    <div class="col-lg-3">
        <div class="card-transparent mb-0 desk-info">
            <div class="card-body p-0">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h6 style="color: {{fase.color}}">{{fase.title}}</h6>
                                    <div class="dropdown">
                                        <span class="d-flex align-items-center h5 mb-0" id="dropdownMenuButton07" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

		    <!-- 

                    <div class="col-lg-12">
                        <div class="card bg-transparent shadow-none">
                            <div class="iq-dashed-border">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h6 class="text-body mb-0">New Task</h6>
                                    <svg class="icon-20" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 24 24" fill="none">
                                        <g>
                                        <path d="M12.0711 18.9706V4.82847M19.1421 11.8995H5" stroke="currentColor" stroke-linecap="round"/>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

		    -->

                    <div class="group{{fase['idfase']}}-wrap">
                        <div class="group" id="group{{fase['idfase']}}">

			{% for tareas in fase['item'] %}

			    <div id="{{tareas['idtarea']}}" class="col-lg-12 group__item">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-grid grid-flow-col align-items-center justify-content-between mb-2">
                                            <div class="d-flex align-items-center">
						    <a id="miElemento" href="EditProyecto?code={{tareas['idproyecto']}}">
							    <p class="mb-0">{{tareas['title']}}</p>
						    </a>
					    </div>
                                            <div class="dropdown">
                                                <span class="h5" id="dropDown-004" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <svg class="icon-24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <g>
                                                        <g>
                                                        <circle cx="7" cy="12" r="1" fill="black"/>
                                                        <circle cx="12" cy="12" r="1" fill="black"/>
                                                        <circle cx="17" cy="12" r="1" fill="black"/>
                                                        </g>
                                                        </g>
                                                    </svg>
                                                </span>
                                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropDown-004" style="">
                                                    <a class="dropdown-item" href="#">
                                                        <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path opacity="0.4" d="M19.643 9.48851C19.643 9.5565 19.11 16.2973 18.8056 19.1342C18.615 20.8751 17.4927 21.9311 15.8092 21.9611C14.5157 21.9901 13.2494 22.0001 12.0036 22.0001C10.6809 22.0001 9.38741 21.9901 8.13185 21.9611C6.50477 21.9221 5.38147 20.8451 5.20057 19.1342C4.88741 16.2873 4.36418 9.5565 4.35445 9.48851C4.34473 9.28351 4.41086 9.08852 4.54507 8.93053C4.67734 8.78453 4.86796 8.69653 5.06831 8.69653H18.9388C19.1382 8.69653 19.3191 8.78453 19.4621 8.93053C19.5953 9.08852 19.6624 9.28351 19.643 9.48851Z" fill="currentColor"></path>
                                                        <path d="M21 5.97686C21 5.56588 20.6761 5.24389 20.2871 5.24389H17.3714C16.7781 5.24389 16.2627 4.8219 16.1304 4.22692L15.967 3.49795C15.7385 2.61698 14.9498 2 14.0647 2H9.93624C9.0415 2 8.26054 2.61698 8.02323 3.54595L7.87054 4.22792C7.7373 4.8219 7.22185 5.24389 6.62957 5.24389H3.71385C3.32386 5.24389 3 5.56588 3 5.97686V6.35685C3 6.75783 3.32386 7.08982 3.71385 7.08982H20.2871C20.6761 7.08982 21 6.75783 21 6.35685V5.97686Z" fill="currentColor"></path>
                                                        </svg>
                                                        Borrar
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <h6 class="mb-3">{{tareas['descripcion']}}</h6>
                                        <h6 class="mb-3">Fecha de fin: {{tareas['fecha_limite']}}</h6>
                                        <h6 class="mb-3">Tareas: {{tareas['numTareas']}}</h6>
                                    </div>
                                    <span class="remove"></span>
                                </div>
                            </div>                        

    {% endfor %}
			    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% endfor %}

</div>
</div>

{% endblock %}


{% block scripts %}


	<script>
		function observarCambiosEnElemento(idFase) {
		const elemento = document.getElementById(idFase);
		if (!elemento) {
			console.error(`El elemento con ID "${idFase}" no se encontró.`);
			return;
		}

		const observador = new MutationObserver(function(mutationsList, observer) {
			for (const mutation of mutationsList) {
				if (mutation.type === 'childList') {

					var idTarea = 1
					var idEstado = 1


					const groupX = document.getElementById(idFase);

					// Obtiene la colección de elementos hijos directos
					const elementosPrimerNivel = groupX.children;

					for (let i = 0; i < elementosPrimerNivel.length; i++) {
						const elemento = elementosPrimerNivel[i];
						const idTarea = elemento.id;

						$.ajax({
							type: "POST",
							url: '{{ fsc.url() }}?action=actualizarKanban',
							data: {
								idtarea: idTarea,
								fase: idFase
							},
							success: function(response){

							},
							error: function(response){

							}
						});

					}
				}
			}
		});

		observador.observe(elemento, { childList: true });

		}

		{% for fase in fsc.kanban %}
			observarCambiosEnElemento('group{{fase['idfase']}}');
		{% endfor %}
	</script>

	<script src="{{ asset('Dinamic/Assets/JS/Plugins/Sortable.min.js') }}"></script>
	<script src="{{ asset('Dinamic/Assets/JS/Plugins/kanban.js') }}"></script>

{% endblock %}