{% extends "MasterMotoTaller/MenuTemplateMT.html.twig" %}

{% block javascripts %}


<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>


    {{ 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="{{ asset('Dinamic/Assets/JS/partes.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 guardarImagenMaterial(idMaterialPendiente, idMaterial){
                var formData = new FormData();
                var restantes = [];
                for (var i = 0; i < saveImages.length; i++) {
                        if(saveImages[i].idtarea == idMaterialPendiente){
                                formData.append('files[]', saveImages[i].archivo);
                        }else{
                                restantes.push(saveImages[i]);
                        }
                }

                if(!formData.has('files[]')){
                        return;
                }

                formData.append("idMaterial", idMaterial);

                try {
                        await $.ajax({
                                type: "POST",
                                url: "{{fsc.url()}}?action=guardarImagenMaterial",
                                data: formData,
                                contentType: false,
                                processData: false
                        });
                        saveImages = restantes;
                } catch (error) {
                        console.error('Error al guardar las imágenes del material', error);
                }

        }

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

                document.addEventListener('DOMContentLoaded', function() {
                        var footer = document.querySelector('#formEditOIVehiculoOrden .card-footer');
                        if (!footer) {
                                footer = document.querySelector('form .card-footer');
                        }
                        if (footer) {
                                footer.classList.add('fixed-update-footer');
                                document.body.style.paddingBottom = footer.offsetHeight + 'px';
                        }
                });

        function parseDateTime(text) {
                var parts = text.split(' ');
                var date = parts[0].split('-');
                var time = parts[1].split(':');
                return new Date(date[2], date[1] - 1, date[0], time[0], time[1], time[2]);
        }

        function updateCronometros() {
                document.querySelectorAll('.cronometro').forEach(function(span) {
                        var inicio = parseDateTime(span.dataset.inicio);
                        var diff = Math.floor((Date.now() - inicio.getTime()) / 1000);
                        var h = Math.floor(diff / 3600);
                        var m = Math.floor((diff % 3600) / 60);
                        var s = diff % 60;
                        span.textContent = h.toString().padStart(2, '0') + ':' + m.toString().padStart(2, '0') + ':' + s.toString().padStart(2, '0');
                });
        }

        document.addEventListener('DOMContentLoaded', function() {
                updateCronometros();
                setInterval(updateCronometros, 1000);

                document.querySelectorAll('.btnFicharSalida').forEach(function(button) {
                        button.addEventListener('click', function() {
                                var tareaId = this.dataset.tareaId;
                                $.ajax({
                                        type: 'POST',
                                        url: '{{ fsc.url() }}',
                                        data: {
                                                action: 'guardarFichaje',
                                                tipo_fichaje: 'salida',
                                                idtarea: tareaId
                                        },
                                        success: function() {
                                                location.reload();
                                        }
                                });
                        });
                });
        });

        </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 px-0 pt-navbar">
        	<div class="mt-5 kanban-header">
            <div class="row gx-6 gy-3 align-items-center justify-content-between">
					<div class="col-md-6 col-12 order-md-1 order-2">
            <h3 class="text-secondary"><span class="fas fa-clipboard-list fs-6"></span>&nbsp; {{fsc.orden.nombre}}</h3>
						<div class="d-flex">
							{% if fsc.orden.fechaapertura %} 
								<h4 class="fw-normal me-3"><small class="text-muted"><i class="fa fa-calendar-day"></i>&nbsp; Apertura: {{ fsc.orden.fechaapertura|date("m/d/Y") }}</small></h4>
							{% endif %} 
							{% if fsc.orden.fechacierre %} 
								<h4 class="fw-normal"><small class="text-muted"><i class="fa fa-calendar-day"></i>&nbsp; Cierre: {{ fsc.orden.fechacierre|date("m/d/Y") }}</small></h4>
							{% endif %}
						</div>
						
					</div>
					<!--<div class="col-auto">
						<p class="m-2">Parte Nº: <i class="fa fa-clipboard-list"></i>&nbsp;&nbsp;{{ fsc.orden.id }}</p>
					</div>-->
					<div class="col-md-6 col-12 order-md-2 order-1 justify-content-end d-flex">
						<p class="m-2 me-5">Parte Nº: <i class="fa fa-clipboard-list"></i>&nbsp;&nbsp;{{ fsc.orden.id }}</p>
						
						<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-end d-flex align-items-center">
								<label class="me-3" for="estadoPartes">Estado:</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 %}

			<div class="row g-3 pt-3">
				<div class="col-md-6 col-12">
					{% include 'partes/proyecto.html.twig' %}
				</div>
                                {% if settings('partes', 'planos') == '1' %}
                                <div class="col-md-6 col-12">
                                        {% include 'partes/planos.html.twig' %}
                                </div>
                                {% endif %}
                                {% if settings('partes', 'vehiculo_kilometraje') == '1' %}
                                <div class="col-md-6 col-12">
                                        {% include 'partes/kilometraje.html.twig' %}
                                </div>
                                {% endif %}
                                {% if settings('partes', 'material_pendiente') == '1' %}
                                <div class="col-md-6 col-12">
                                        <div class="card h-100">
                                                <div class="card-header">
                                                        <h4 class="text-secondary"><i class="fas fa-taxi" aria-hidden="true"></i> &nbsp;Material Pendiente de Recibir</h4>
                                                </div>
                                                <div class="card-body">
                                                        {% for materialPte in fsc.orden.getMaterialPte() %}
                                                                <form method="post" class="form" id="formWizard">
                                                                        <input type="hidden" name="action" value="actualizarMaterial"/>
                                                                                {{ formToken() }}
                                                                        <input type="hidden" name="id" value="{{ materialPte.id }}"/>
                                                                        <input id="imagenesBorradas888{{materialPte.id}}" type="hidden" name="imagenesBorradas"/>
                                                                        <div class="row g-2 align-items-center border-bottom pb-2 mb-2">
                                                                                <div class="col-md-2 col-3 mt-0">
                                                                                        <div class="form-group">
                                                                                                <div class="form-group">
                                                                                                        <label class="form-label" for="inicial">Cant</label>
                                                                                                        <input type="number" class="form-control" id="cantidad" name="cantidad" value="{{ materialPte.cantidad }}" required>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div class="col-md-7 col-9 mt-0">
                                                                                        <div class="form-group">
                                                                                                        <div class="form-group">
                                                                                                                <label class="form-label" for="final">Descripcion</label>
                                                                                                                <input type="text" class="form-control" name="descripcion" value="{{ materialPte.descripcion }}" id="descripcion">
                                                                                                        </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div class="col-md-3 col-12 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>
                                                                                        {% if settings('partes', 'imagenes') == '1' %}
                                                                                        <input onchange="mostrarImagenes(this, 888{{materialPte.id}})" type="file" id="archivos888{{materialPte.id}}" name="imagenesIncidencia" multiple style="display: none;">
                                                                                        <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#modalCamara888{{materialPte.id}}">
                                                                                                <i class="fas fa-camera"></i>
                                                                                        </button>

                                                                                        <div id="modalContainer888{{materialPte.id}}"></div>
                                                                                        <script>
                                                                                                imprimirModalCamara(888{{materialPte.id}})

                                                                                                $(document).ready(function() {
                                                                                                        $('#modalCamara888{{materialPte.id}}').on('hidden.bs.modal', function (e) {
                                                                                                                guardarImagenMaterial(888{{materialPte.id}}, {{materialPte.id}})
                                                                                                        });
                                                                                                });

                                                                                        </script>
                                                                                        {% endif %}

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


                                                        {% if settings('partes', 'imagenes') == '1' %}
                                                        {% for file in fsc.orden.getImagenesMaterial() %}
                                                                <script>
                                                                                mostrarImagenesGuardadas(888{{ file.idmaterial }}, {{ file.filename|json_encode|raw }}, {{ myFilesUrl(file.path)|json_encode|raw }}, {{ file.idfile }});
                                                                </script>
                                                        {% endfor %}
                                                        {% endif %}
              {% include 'partes/nuevo_material_pendiente.html.twig' %}
            </div>
                                        </div>
                                </div>
                                {% endif %}




				<div class="col-12">
					<div class="card h-100">
						<div class="card-header">
							<h4 class="text-secondary">
								<i class="fas fa-arrow-circle-down" aria-hidden="true"></i> Trabajos Pendientes
							</h4>
						</div>
						{#  Mostramos las tareas pendientes  #}
						
						{% for tarea in fsc.orden.getTareas()['tarea'] %}

              {% include 'proyectosPro/modal/modificarTareaMini.html.twig' %}

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

                                                {% if settings('partes', 'nuevo_checklist') == '1' %}
                                                {% include 'partes/modal/checklist.twig' %}
                                                {% endif %}

							<div class="card-body p-0">
								<ul class="list-group">


									<li class="list-group-item">
											Tarea: 
											<button class="btn btn-link" type="button" 
															data-bs-toggle="offcanvas" 
															data-bs-target="#offcanvasRight{{tarea.idtarea}}" 
															aria-controls="offcanvasRight{{tarea.idtarea}}">
													{{tarea.nombre}}
											</button>

											<!-- Texto e icono para mostrar que el cronómetro está corriendo -->
                      {% if tarea.fichaje_pendiente %}
                        <div class="mt-2">
                          <div class="text-success">
                            <i class="fas fa-stopwatch"></i> Marcaje de entrada: {{tarea.fichaje_pendiente.inicio}}
                            <span class="cronometro ms-2" data-inicio="{{tarea.fichaje_pendiente.inicio}}"></span>
                          </div>
                          <button type="button"
                                  class="btn btn-danger btn-sm mt-2 btnFicharSalida"
                                  data-tarea-id="{{tarea.idtarea}}">Fichar salida</button>
                        </div>
                      {% endif %}

									</li>


								</ul>
                                                                {% if settings('partes', 'imagenes') == '1' %}
                                                                <!-- 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 %}
								{% endif %}
							</div>	
                                                {% endfor %}
                                        </div>
                                </div>

                                {% if settings('partes', 'incidencias') == '1' %}
                                <div class="col-12">
                                        <div class="card h-100">
                                                <div class="card-header">
                                                        <h4 class="text-secondary">
                                                                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Incidencias
                                                        </h4>
                                                </div>
                                                {% for incidencia in fsc.orden.getIncidencias() %}
                                                        <div class="card-body p-0">
                                                                <ul class="list-group">
                                                                        <li class="list-group-item">
                                                                                <strong>{{ incidencia.name }}</strong>
                                                                                <p class="mb-0">{{ incidencia.descripcion_incidencia }}</p>
                                                                        </li>
                                                                </ul>
                                                        </div>
                                                {% else %}
                                                        <div class="card-body">
                                                                <p class="text-muted mb-0">No hay incidencias.</p>
                                                        </div>
                                                {% endfor %}
                                        </div>
                                </div>
                                {% endif %}

                        </div>
        	
        	<div class="container">
            <nav class="navbar align-items-center navbar-light bg-light fixed-bottom">
					<div class="col-6">
						<button class="btn btn-primary w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight2" aria-controls="offcanvasRight"><span class="far fa-plus-square fs-9"></span> Tarea</button>
					</div>
                                        {% if settings('partes', 'incidencias') == '1' %}
                                        <div class="col-6">
                                                <button class="btn btn-danger w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight1" aria-controls="offcanvasRight"><span class="fas fa-exclamation-circle fs-9"></span> Incidencia</button>
                                        </div>
                                        {% endif %}
            </nav>
                </div>
                        {% if settings('partes', 'incidencias') == '1' %}
                        {% include 'partes/modal/incidenia.twig' %}
                        {% endif %}
        	</div>
    	</div>
	</div>

	<!-- Modal Nueva Tarea -->
	<!-- Integrar la logica de EditTareaProyecto -->

  {% include 'proyectosPro/modal/nuevaTarea.html.twig' %}


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

        <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                                <div class="modal-header">
                                        <h5 class="modal-title"></h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                        <img src="" class="img-fluid" alt="">
                                </div>
                        </div>
                </div>
        </div>

{% 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>
    <link rel="stylesheet" href="{{ asset('Plugins/Partes/CSS/edit-partes.css') }}">
        <style>
                .super_center{
                        margin-bottom: 0; flex-grow: 1; text-align: left;white-space: nowrap;margin-top:1px;
                }
        </style>
{% endblock %}