{% extends "MasterMotoTaller/MenuTemplateMT.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/PartesSemanales/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]);
				}
				});
	}

	document.addEventListener('DOMContentLoaded', function() {
		{% if fsc.orden.estado != 'Abierta' %} 
//			bloquearModificables();
			borrarElementos()
		{% endif %} 
	});


        async function enviarFormularioIncidencia(){
                const btn = document.querySelector('#enviarFormularioIncidencia button');
                if (btn) {
                        btn.disabled = true;
                }
                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 iddiaInput = document.getElementById("iddia");
                var iddia = iddiaInput ? iddiaInput.value : "";

		var formData = new FormData();
		formData.append("descripcion", descripcion);
		formData.append("titulo", titulo);
		formData.append("idorden", idorden);
                formData.append("idproyecto", idproyecto);
                if(iddia !== ""){
                    formData.append("iddia", iddia);
                }

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

                if(formData){
                        await $.ajax({
                                type: "POST",
                                url: "{{fsc.url()}}?action=guardarIncidencia",
                                data: formData,
                                contentType: false,
                                processData: false
                        });
                }
                if (btn) {
                        btn.disabled = false;
                }
                location.reload(true);
        }

	function eliminarKilometraje(id){
		var formData = new FormData();
		formData.append("action", "eliminarKilometraje");
		formData.append("id", id);
		if(formData){
			$.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 sleep(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}

	async function enviarFormulario(idtarea){

		var formData = new FormData();

		for (var i = 0; i < saveImages.length; i++) {
//			if(saveImages[i].idtarea == idtarea){
				formData.append('files[]', saveImages[i].archivo);
				formData.append("idtarea", saveImages[i].idtarea);
//			}
		}

		if(formData){
			$.ajax({
				type: "POST",
				url: "{{fsc.url()}}?action=guardarImagenTarea",
				data: formData,
				contentType: false,
				processData: false,
				success: function(respuesta) {

				},
				error: function() {
				}
			});

		}

		await sleep(10000);

		// 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);
		});

		formulario.submit()
	}

		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 == 'Pendiente' %}

	<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 'partessemanales/proyecto.html.twig' %}

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

	{% include 'partessemanales/kilometraje.html.twig' %}


        <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}}"/>
                            <input id="imagenesBorradas" type="hidden" name="imagenesBorradas"/>
                            <!-- Task Card -->
                            <div class="card task-card">
                                <div class="card-body ">
                                    <!-- Task Name and Camera Button -->

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

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

                                    {% if settings('partessemanales', 'fichajes') %}
                                    {% include 'partessemanales/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('partessemanales', 'observaciones') %}
                                    <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>
                    {% if settings('partessemanales', 'imagenes') %}
                    <!-- Modal Camara -->
                    <div id="modalContainer{{tarea.idtarea}}"></div>
                    <script>
                        imprimirModalCamara({{tarea.idtarea}})
                    </script>
                    {% for file in tarea.files %}
                        <script>
                            mostrarImagenesGuardadas({{ tarea.idtarea }}, "{{ file.filename }}", "{{ myFilesUrl(file.path) }}");
                        </script>
                    {% endfor %}
                            <!-- Modal Fin -->
                    {% endif %}
			{% 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">
                {% if settings('partessemanales', 'incidencias') %}
                    <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>
                {% else %}
                    <div class="col-12 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>
                {% endif %}
            </nav>
        </div>

        {% if settings('partessemanales', 'incidencias') %}
        {% include 'partessemanales/modal/incidenia.twig' %}
        {% endif %}



        <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>
                                <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>
                            </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>

<div id="modalContainer99999999"></div>
	<script>
imprimirModalCamara(99999999)
	</script>

{% 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 %}