{% extends "Master/MenuTemplate.html.twig" %}

{% block javascripts %}

    {{ parent() }}


    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    <!-- Bootstrap JS, Popper.js, and Font Awesome -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>

    <script src="{{ asset('Dinamic/Assets/Vendor/uppy/uppy.min.js') }}"></script>
    <script src="{{ asset('Dinamic/Assets/JS/Plugins/uppy.js') }}"></script>
    <script src="{{ asset('Plugins/Partes/Assets/JS/oi_camera.js') }}"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>

	<script>

	function bloquearModificables() {
		// Obtener todos los elementos modificables
		var modificables = document.querySelectorAll('input, textarea, select, [contenteditable=true]');

		// Iterar sobre cada elemento y desactivarlo
		modificables.forEach(function(elemento) {
			if (elemento.tagName !== 'SELECT' || elemento.id !== 'estadoPartes') {
				elemento.setAttribute('disabled', 'disabled');
				if (elemento.hasAttribute('contenteditable')) {
					elemento.removeAttribute('contenteditable');
				}
			}
		});
	}

	function borrarElementos() {
		// Borrar elementos por ID
		var elementosPorID = ['guardarKilometraje', 'actualizarTarea', 'pedirMaterial', 'enviarFormularioIncidencia', 'guardarChecklist'];
		elementosPorID.forEach(function(id) {
				var elemento = document.getElementById(id);
				if (elemento) {
				elemento.parentNode.removeChild(elemento);
				}
				});

		// Borrar elementos por clase
		var elementosPorClase = ['actualizarKilometraje', 'materialPte'];
		elementosPorClase.forEach(function(clase) {
				var elementos = document.getElementsByClassName(clase);
				while (elementos.length > 0) {
				elementos[0].parentNode.removeChild(elementos[0]);
				}
				});
	}

        window.partesDeleteAttachmentUrl = "{{ fsc.url() }}?action=eliminarAdjunto";
	document.addEventListener('DOMContentLoaded', function() {
		{% if fsc.orden.estado != 'Abierta' %} 
//			bloquearModificables();
			borrarElementos()
		{% endif %} 
	});


	async function enviarFormularioIncidencia(){
		var titulo = document.getElementById("IncTitulo").value
		var descripcion = document.getElementById("incidenciaDescripcion").value
		var idorden = document.getElementById("idorden").value
		var idproyecto = document.getElementById("idproyecto").value

		var formData = new FormData();
		formData.append("descripcion", descripcion);
		formData.append("titulo", titulo);
		formData.append("idorden", idorden);
		formData.append("idproyecto", idproyecto);

		var imagenesIncidencia = saveImages.filter(function(item) {
			return item.idtarea == 99999999;
		});

		for (var i = 0; i < imagenesIncidencia.length; i++) {
			formData.append('files[]', imagenesIncidencia[i].archivo);
		}

		try {
			await $.ajax({
				type: "POST",
				url: "{{fsc.url()}}?action=guardarIncidencia",
				data: formData,
				contentType: false,
				processData: false
			});
			saveImages = saveImages.filter(function(item) {
				return item.idtarea != 99999999;
			});
			location.reload(true);
		} catch (error) {
			console.error('Error al registrar la incidencia', error);
		}
	}

        function eliminarKilometraje(id){
                var formData = new FormData();
                formData.append("action", "eliminarKilometraje");
                formData.append("id", id);
                formData.append("code", "{{ fsc.orden.id }}");
                formData.append("multireqtoken", "{{ formToken(false) }}");

                $.ajax({
                        type: "POST",
                        url: "{{fsc.url()}}?action=eliminarKilometraje",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(respuesta) {
                                location.reload(true);
                        },
                        error: function() {
                        }
                });

        }

        function eliminarMaterial(id){
                var formData = new FormData();
                formData.append("action", "eliminarMaterial");
                formData.append("id", id);
                if(formData){
                        $.ajax({
                                type: "POST",
                                url: "{{fsc.url()}}?action=eliminarMaterial",
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function(respuesta) {
                                        location.reload(true);
                                },
                                error: function() {
                                }
                        });
                }

        }

       function eliminarChecklist(id){
               var formData = new FormData();
               formData.append("action", "eliminarChecklist");
               formData.append("id", id);
               if(formData){
                       $.ajax({
                               type: "POST",
                               url: "{{fsc.url()}}?action=eliminarChecklist",
                               data: formData,
                               contentType: false,
                               processData: false,
                               success: function(respuesta) {
                                       location.reload(true);
                               },
                               error: function() {
                               }
                       });
               }

       }

async function enviarFormulario(idtarea){

	window.partesTaskSubmitState = window.partesTaskSubmitState || {};
	if (window.partesTaskSubmitState[idtarea]) {
		return;
	}
	window.partesTaskSubmitState[idtarea] = true;

	// Obtener el valor de la variable 'comentarios'
	var comentarios = $('#summernote' + idtarea).summernote('code');

		// Crear un elemento de entrada de texto
		var inputObservaciones = document.createElement('input');
		inputObservaciones.type = 'hidden'; // Cambia el tipo a 'hidden'
		inputObservaciones.name = 'observaciones';
		inputObservaciones.value = comentarios;

		// Obtener el formulario por su ID (formulario + idtarea)
		var formulario = document.getElementById("formulario" + idtarea);

		// Agregar el campo de entrada creado al formulario
		formulario.appendChild(inputObservaciones);

		var idsToSearch = "summernote" + idtarea

		var elementos = $('[id^="' + idsToSearch + '"]');
		elementos.each(function(index) {
			var id = $(this).attr('id');
			var comentarios = $(this).summernote('code');
			var idSuffix = id.slice(-4);


			// Crear un campo oculto para cada conjunto de comentarios
			var campoComentarios = document.createElement('input');
			campoComentarios.type = 'hidden';
			campoComentarios.name = 'comentariosSubtarea_' + idSuffix;
			campoComentarios.value = comentarios;

			// Agregar el campo oculto al formulario
			formulario.appendChild(campoComentarios);
		});

	var formData = new FormData(formulario);

	try {
		var uploadResult = await partesUploadPendingImages({
			endpoint: "{{fsc.url()}}?action=guardarImagenTarea",
			mainId: idtarea,
			baseId: formData.get("baseidtareaimagen") || idtarea
		});

		if (!uploadResult || uploadResult.success !== true) {
			throw new Error("upload-failed");
		}

		saveImages = uploadResult.remaining || [];
	} catch (error) {
		console.error('Error al subir las imágenes', error);
		delete window.partesTaskSubmitState[idtarea];
		return;
	}

	try {
		var actionUrl = formulario.getAttribute('action') || "{{fsc.url()}}";
		await $.ajax({
			type: "POST",
			url: actionUrl,
			data: formData,
			contentType: false,
			processData: false
		});
		delete window.partesTaskSubmitState[idtarea];
		location.reload(true);
	} catch (error) {
		console.error('Error al guardar la tarea', error);
		delete window.partesTaskSubmitState[idtarea];
	}
}

		function borrar_subtarea(idsubtarea){
			$("#subtarea_" + idsubtarea).remove()
			$("#collapse_subtarea_" + idsubtarea).remove()
		}

		window.onpageshow = function(event) {
			if (event.persisted) {
				location.reload(true);
			}
		};

	</script>

{% endblock %}

{% block body %}
    {{ parent() }}
    {% set proyecto = fsc.orden.getProyecto() %}

    <input id="idproyecto" type="hidden" name="idproyecto" value="{{proyecto.idproyecto}}"/>
<div id="wrapper">
    <div id="content">
        <div class="container mt-3">
            <div class="row">
                <div class="col-2 border-right text-muted text-center">
	            {% if fsc.orden.fechaapertura %} 
                    <h6 class="text-center"><small class="text-muted"><i class="fa fa-calendar-day"></i>&nbsp;
                            	Apertura:<br/>{{ fsc.orden.fechaapertura|date("m/d/Y") }}
				</small>
		    </h6>
		    {% endif %} 
	            {% if fsc.orden.fechacierre %} 
                    <h6 class="text-center"><small class="text-muted"><i class="fa fa-calendar-day"></i>&nbsp;
				    Cierre:<br/>{{ fsc.orden.fechacierre|date("m/d/Y") }}
			</small>
		    </h6>
		   {% endif %} 
                </div>
                <div class="col-5 border-right">
                    <h5 class="text-center"><i class="fa fa-clipboard-list"></i>&nbsp; Orden de Instalación</h5>
                </div>
                <div class="col-2">
                    <h5 class="h5">
                        <small class="text-muted">Parte Nº:<br/><i
                                    class="fa fa-clipboard-list"></i>&nbsp;&nbsp;{{ fsc.orden.id }}</small>
                    </h5>
                </div>
		<div class="col-3">
			
			<form method="post" class="form" id="guardarEstado" onsubmit="">
				<input type="hidden" name="action" value="guardarEstado"/>
				<input type="hidden" name="idorden" value="{{fsc.orden.id}}"/>
				{{ formToken() }}

				<div class="form-group text-center">
					<label for="estadoPartes">Estado de la Orden de Instalación:</label>

					{% if fsc.orden.estado != 'Cerrada' %} 

						<select class="form-control" id="estadoPartes" name="estadoPartes">
							<option value="Pendiente" {% if fsc.orden.estado == 'Pendiente' %} selected {% endif %}>Pendiente</option>
							<option value="Abierta" {% if fsc.orden.estado == 'Abierta' %} selected {% endif %}>Abierta</option>
							<option value="Cerrada" {% if fsc.orden.estado == 'Cerrada' %} selected {% endif %}>Cerrada</option>
						</select>

					{% else %} 

						<select class="form-control" id="estadoPartes" name="estadoPartes">
							<option value="Cerrada" {% if fsc.orden.estado == 'Cerrada' %} selected {% endif %}>Cerrada</option>
						</select>

					{% endif %}

				</div>
			</form>
    <script>
    document.getElementById('estadoPartes').addEventListener('change', function() {
	    document.getElementById('guardarEstado').submit();
	    setTimeout(function () { alert("Estado cambiado");window.location.reload(); }, 10)
    });
	</script>

                </div>
            </div>
        </div>

        {% if fsc.orden.estado != 'Abierta' %}

        <div class="container mt-4 text-center">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                Para modificar los campos la orden tiene que estar abierta
		</div>
	</div>

	{% endif %}


	{% include 'partes/proyecto.html.twig' %}

        {% if settings('partes', 'planos') == '1' %}
        {% include 'partes/planos.html.twig' %}
        {% endif %}

        {% if settings('partes', 'vehiculo_kilometraje') == '1' %}
        {% include 'partes/kilometraje.html.twig' %}
        {% endif %}


        <div class="container" style="margin-top: 5px;">
            <div class="card shadow mb-5">
                <div class="card-header bg-info text-white">
                    <h3 class="h5">
                        <i class="fas fa-arrow-circle-down" aria-hidden="true"></i>&nbsp;&nbsp; Trabajos Pendientes
                    </h3>
                </div>
                {#  Mostramos las tareas pendientes  #}
                {% for tarea in fsc.orden.getTareas()['tarea'] %}

			{% if tarea.idorden|format == fsc.orden.id|format %}

                    <div class="card-body shadow bg-grey">
                        <form id="formulario{{tarea.idtarea}}" method="post" id="taskForm" enctype="multipart/form-data">
                            <input type="hidden" name="action" value="guardarTarea"/>
                            <input type="hidden" name="idtarea" value="{{tarea.idtarea}}"/>
                            {% if settings('partes', 'imagenes') == '1' %}
                            <input id="imagenesBorradas" type="hidden" name="imagenesBorradas"/>
                            {% endif %}
                            <!-- Task Card -->
                            <div class="card task-card">
                                <div class="card-body ">
                                    <!-- Task Name and Camera Button -->

				    {% include 'partes/header_tarea.twig' %}

                                    {% include 'partes/subtarea.twig' %}

                                    {% if settings('partes', 'nuevo_fichaje') == '1' %}
                                    {% include 'partes/fichajes.twig' %}

                                    <p>
                                        <button class="btn btn-outline-info btn-block" type="button" data-toggle="collapse"
                                                data-target="#collapseFichajes{{tarea.idtarea}}" aria-expanded="false"
                                                aria-controls="collapseFichajes{{tarea.idtarea}}">
                                                <i class="fas fa-search" aria-hidden="true"></i> &nbsp;Nuevo Fichaje
                                        </button>
                                        <button class="btn btn-outline-info btn-block" type="button" data-toggle="collapse"
                                                data-target="#collapseFichajes{{tarea.idtarea}}" aria-expanded="false"
                                                aria-controls="collapseFichajes{{tarea.idtarea}}">
                                                <i class="fas fa-search" aria-hidden="true"></i> &nbsp;Ver Fichajes
                                        </button>
                                    </p>

                                    <div class="collapse" id="collapseFichajes{{tarea.idtarea}}">

                                            <div class="row mt-4">
                                                <div class="col-4">

                                                {% for fichaje in tarea.fichajes %}
                                                    <div class="form-group">
                                                        <div class="form-group">
                                                            <input readonly value="{{fichaje.nick}}" type="text" class="form-control" required>
                                                        </div>
                                                    </div>
                                                {% endfor %}

                                                </div>
                                                <div class="col-4">
                                                {% for fichaje in tarea.fichajes %}
                                                    <div class="form-group">
                                                        <div class="form-group">
                                                            <input readonly value="{{fichaje.inicio}}" type="text" class="form-control" required>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                                </div>
                                                <div class="col-4">
                                                {% for fichaje in tarea.fichajes %}
                                                    <div class="form-group">
                                                        <div class="form-group">
                                                            <input readonly value="{{fichaje.fin}}" type="text" class="form-control" required>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                                </div>
                                            </div>

                                    </div>
                                    {% endif %}

                                    {% if settings('partes', 'nueva_observacion') == '1' %}
                                    <div class="row">
                                        <div class="form-group col-12">
                                            <p class="font-weight-bold">
                                                Nueva Observación
                                            </p>
                                            <div id="summernote{{tarea.idtarea}}"></div>
                                            <script>
                                                $(document).ready(function() {
                                                    $('#summernote{{tarea.idtarea}}').summernote({
                                                                        toolbar: [
                                                                                ['style', ['bold', 'italic', 'underline', 'clear']]
                                                                        ],
                                                    });
                                                });
                                            </script>
                                        </div>
                                    </div>

                                    <p>
                                        <button class="btn btn-outline-info btn-block" type="button" data-toggle="collapse"
                                                data-target="#collapseObservaciones{{tarea.idtarea}}" aria-expanded="false"
                                                aria-controls="collapseObservaciones{{tarea.idtarea}}">
                                                <i class="fas fa-search" aria-hidden="true"></i> &nbsp;Ver Observaciones
                                        </button>
                                    </p>

                                    <div class="collapse" id="collapseObservaciones{{tarea.idtarea}}">
                                        {% for comentario in tarea.comentarios %}
                                            <div class="row mt-4">
                                                <textarea type="text" class="form-control" readonly>{{comentario}}</textarea>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {% endif %}

                                        <p class="mt-5" id="actualizarTarea">
                                            <button class="btn btn-outline-info btn-block" type="button" onclick="enviarFormulario({{tarea.idtarea}})">
                                                <i class="fa-solid fa-list-check"></i> &nbsp;Actualizar {{tarea.nombre}}
                                            </button>
                                        </p>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- Modal Camara -->
                    <div id="modalContainer{{tarea.idtarea}}"></div>
                    <script>
                        imprimirModalCamara({{tarea.idtarea}})
                    </script>
                    {% for file in tarea.files %}
                        <script>
                            mostrarImagenesGuardadas({{ tarea.idtarea }}, {{ file.filename|json_encode|raw }}, {{ myFilesUrl(file.path)|json_encode|raw }}, {{ file.idfile }});
                        </script>
                    {% endfor %}
                            <!-- Modal Fin -->
			{% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="container" style="margin-top: 2px;">
            <div class="card shadow mb-5">
                <div class="card-header bg-info">
                    <h3 class="h5 text-white">
                        <i class="fas fa-taxi" aria-hidden="true"></i> &nbsp;Material Pendiente de Recibir
                    </h3>
                </div>
                <div class="card-body">
                    {% for materialPte in fsc.orden.getMaterialPte() %}
                        <form method="post" class="form mt-3" id="formWizard">
                            <input type="hidden" name="action" value="actualizarMaterial"/>
                            {{ formToken() }}
                            <input type="hidden" name="id" value="{{ materialPte.id }}"/>
                            <div class="form-row align-items-center border-bottom pb-2 mb-2">
                                <div class="col-2">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <input type="number" class="form-control" id="cantidad"
                                                   name="cantidad" value="{{ materialPte.cantidad }}" required>
                                            <label for="inicial">Cant</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-7">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="descripcion"
                                                   value="{{ materialPte.descripcion }}" id="descripcion">
                                            <label for="final">Descripcion</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3 d-flex align-items-center gap-2 materialPte">
                                    <button type="submit" class="btn btn-outline-info btn-sm">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                    <button type="button" onclick="eliminarMaterial({{materialPte.id}})" class="btn btn-outline-danger btn-sm">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    {% endfor %}
                    <p>
                        <button class="btn btn-outline-info btn-block" type="button" data-toggle="collapse"
                                data-target="#collapseMaterial" aria-expanded="false"
                                aria-controls="collapseMaterial">
                            <i class="fas fa-taxi" aria-hidden="true"></i> &nbsp;Nuevo Material Pendiente
                        </button>
                    </p>
                    <div class="collapse" id="collapseMaterial">
                        <form method="post" class="form" id="formWizard">
                            <input type="hidden" name="action" value="guardarMaterialPte"/>
                            {{ formToken() }}
                            <div class="form-row">
                                <div class="col-2">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <label for="cantidad">Cant</label>
                                            <input type="text" class="form-control" id="cantidad" name="cantidad"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-10">
                                    <div class="form-group">
                                        <div class="form-group">
                                            <label for="descripcion">Descripcion</label>
                                            <input type="text" class="form-control" id="descripcion" name="descripcion"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group" id="pedirMaterial">
                                    <button type="submit" class="btn btn-outline-info btn-block">
                                        <i class="fas fa-plus"></i>Pedir Material
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="container" style="margin-top: 2px;">
            <nav class="navbar fixed-bottom align-items-center navbar-light bg-light">
                    <div class="col-6 bg-info">
                        <a class="nav-item nav-link text-white" href="/EditTareaProyecto?return=1&idproyecto={{proyecto.idproyecto}}&idorden={{fsc.orden.id}}"><i class="fas fa-plus-square"></i> Tarea</a>
                    </div>
                    <div class="col-6 bg-danger">
                        <a class="nav-item nav-link text-white" data-toggle="modal" href="#crearIncidencia"><i class="fas fa-circle-exclamation"></i>Incidencia</a>
                    </div>
            </nav>
        </div>




	{% include 'partes/modal/incidenia.twig' %}



        <div class="modal fade" id="crearTarea" tabindex="-1" role="dialog" aria-labelledby="crearTareaLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content justify-center">
                    <div class="modal-header">
                        <h5 class="modal-title text-muted" id="exampleModalLongTitle">Nueva Tarea</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="card mb-5">
                            <div class="card-header bg-info text-white">
                                <h3 class="h5">
                                    <i class="fas fa-warning" aria-hidden="true"></i> &nbsp;Crear nueva Tarea
                                </h3>
                            </div>
                            <div class="card-body justify-content-between">
                                <div class="col-auto">
                                    <div class="form-group">
                                        <label for="tareaTitulo">Título de la Tarea</label>
                                        <input type="text" class="form-control" name="tareaTitulo" id="tareaTitulo">
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div class="form-group">

                                        <label for="tareadesc">Observaciones</label>
                                        <input type="textarea" class="form-control" name="tareanotas"
                                               id="tareadesc">

                                    </div>
                                </div>
                                {% if settings('partes', 'imagenes') == '1' %}
                                <div class="col-auto">
                                    <div class="form-group">
                                        <label for="imgtarea">Adjunta imagenes</label>
                                        <input type="file" class="form-control" name="imagenesTarea" id="imgtarea">
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-info btn-block">
                            <i class="fas fa-square-envelope"></i>&nbsp; Guardar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        {% if settings('partes', 'imagenes') == '1' %}
<div id="modalContainer99999999"></div>
        <script>
imprimirModalCamara(99999999)
        </script>
{% endif %}

{% endblock %}

{% block css %}
    {{ parent() }}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <!-- 1. Add CSS to `<head>` -->
    <link href="https://releases.transloadit.com/uppy/v3.21.0/uppy.min.css" rel="stylesheet">
    <script src="{{ asset('Dinamic/Assets/Vendor/uppy/uppy.min.css') }}"></script>
	<style>
		.super_center{
			margin-bottom: 0; flex-grow: 1; text-align: left;white-space: nowrap;margin-top:1px;
		}
	</style>
{% endblock %}