{% 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/PartesSemanales/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]);
				}
				});
	}

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


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

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

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

                saveImages = restantes;

        }

	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(1000);

                var formulario = document.getElementById("formulario" + idtarea);

                {% if settings('partessemanales', 'partes_observaciones') %}
                // 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;

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

                formulario.submit()
	}

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

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

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

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

			<div class="row g-3 pt-3">
				<div class="col-md-6 col-12">
					{% include 'partessemanales/proyecto.html.twig' %}
				</div>
                                {% if settings('partessemanales', 'partes_planos') %}
                                <div class="col-md-6 col-12">
                                        {% include 'partessemanales/planos.html.twig' %}
                                </div>
                                {% endif %}
                                {% if settings('partessemanales', 'vehiculo_kilometraje') and settings('partessemanales', 'partes_vehiculo_kilometraje') %}
                                <div class="col-md-6 col-12">
                                        {% include 'partessemanales/kilometraje.html.twig' %}
                                </div>
                                {% endif %}
                                {% if settings('partessemanales', 'partes_material_pendiente') %}
                                <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 }}"/>
                                                                        <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('partessemanales', 'partes_imagenes_finales') %}
                                                                                        <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('partessemanales', 'partes_imagenes_finales') %}
                                                        {% for file in fsc.orden.getImagenesMaterial() %}
                                                                <script>
                                                                                mostrarImagenesGuardadas(888{{ file.idmaterial }}, "{{ file.filename }}", "{{ myFilesUrl(file.path) }}");
                                                                </script>
                                                        {% endfor %}
                                                        {% endif %}
              {% include 'partessemanales/nuevo_material_pendiente_partes.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('partessemanales', 'partes_checklist') %}
                                                {% include 'partessemanales/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 settings('partessemanales', 'partes_fichaje') and tarea.fichaje_pendiente %}
                        <div class="mt-2 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>
                      {% endif %}

									</li>


								</ul>
                                                                {% if settings('partessemanales', 'partes_imagenes_finales') %}
                                                                <!-- 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 %}
							</div>	
						{% endfor %}
					</div>
				</div>
			</div>
        	
                <div class="container">
            <nav class="navbar align-items-center navbar-light bg-light fixed-bottom">
                {% if settings('partessemanales', 'incidencias') %}
                    <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>
                    <div class="col-6">
                        <button class="btn btn-danger w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasIncidencia" aria-controls="offcanvasRight"><span class="fas fa-exclamation-circle fs-9"></span> Incidencia</button>
                    </div>
                {% else %}
                    <div class="col-12">
                        <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>
                {% endif %}
            </nav>
                </div>

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

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

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


	<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;
                }
                /* Ensure the bottom navbar is always above list items */
                .navbar.fixed-bottom {
                        z-index: 1050;
                }
        </style>
{% endblock %}