<?= $this->extend('estructura/header_actas'); ?>
<?= $this->section('content'); ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<style>
    table {
      width: 100%;
    }

    /* Media query para pantallas pequeñas (móviles) */
    @media (max-width: 768px) {
      #ctnActaAsignacion {
        font-size: 9px!important; /* Ajusta el tamaño de la fuente en pantallas pequeñas */
        width: 100%!important;
      }
    
      table {
        width: 100%;
        font-size: 8px; /* Reduce el tamaño de la fuente en las tablas */
      }
    
      h2, h3, h4, h5 {
        font-size: 14px; /* Reduce el tamaño de los encabezados */
      }
    
      img {
        max-width: 100%;
        height: auto; /* Asegura que las imágenes no excedan el ancho de la pantalla */
      }
    
      td, th {
        padding: 3px; /* Reduce el padding de las celdas de la tabla */
      }
    
      /* Ajuste de la columna con imagen para que no se desborde */
      td[rowspan="2"] {
        width: 100%;
        text-align: center;
      }
    
      /* Ajusta la visualización de la firma y los botones */
      /*table, div {*/
      /*  margin-top: 10px;*/
      /*}*/
    
      /* Ajuste de las tablas para que se adapten mejor */
      table, th, td {
        /*border: 1px solid #ccc;*/
        text-align: center;
      }
    }
</style>
<div class="main-content m-0">
	<div class="page-content p-0">
		<div class="container-fluid p-0">
			<div class="">
				<div class="col-lg-12 px-0">
					<div class="card" style="margin-bottom: 0px!important;">
						<div class="card-header d-flex align-items-center" style="background-color: #e4002b">
							<div class="col-4 d-flex justify-content-center">
								<img src="<?= $baseUrl ?>/<?= $basePublic ?>/images/LOGO-VERISURE-FULL.png" alt="" width="150" height="100" style="background-color: #FFF; border-radius: 50px;">
							</div>
							<div class="col-8 align-items-center">
								<div class="m-0 p-0">
									<h4 class="d-flex align-items-center justify-content-center text-center" style="color: #FFF;">ACTA DE REPOSICIÓN<br><?= $reposicion['NombreAdjudicado'] ?></h4>
								</div>
							</div>
                        </div>
						<div class="row col-12 card-body px-0 m-0" >
							<?php
							if(empty($firmaReposicion))
							{
							?>
							<div class="col-12 col-md-8 p-0">
							<?php
							}
							else
							{
							?>
							<div class="col-12 p-0">
							<?php
							}
							?>
							    <div class="col-12 m-0 p-0">
    								<div class="px-3 d-flex justify-content-center">
                                        <?= $actaReposicion ?>
                                    </div>
                                </div>
							</div>
							<?php
							if(empty($firmaReposicion))
							{
							?>
							<div class="col-12 col-md-4">
								<form class="formulario" id="formSubirFirmaActaReposicion" autocomplete="off" action="<?= $baseUrl ?>/subir-firma-acta-reposicion" method="POST" enctype="multipart/form-data" accept-charset="utf-8">
									<input type="hidden" id="txtIDReposicion" name="txtIDReposicion" value="<?= $reposicion['IDReposicion'] ?>">	
									<label class="form-label">Dibuje su firma:</label>
									<div class="col-md-12 d-flex justify-content-center mb-3">
										<canvas id="draw-canvas" width="300" height="300">
											Tu navegador no es compatible con esta funcionalidad.
										</canvas>
									</div>
									<div class="d-none">
										<div class="row">
											<div class="col-md-12">
												<!--<input type="button" class="button" id="draw-submitBtn" value="Crear Imagen"></input>-->
												<!--<input type="button" class="button" id="draw-clearBtn" value="Borrar Canvas"></input>-->
												<label>Color</label>
												<input type="color" id="color">
												<label>Tamaño Puntero</label>
												<input type="range" id="puntero" min="1" default="1" max="5" width="10%">
											</div>
										</div>
										<br/>
										<div class="row">
											<div class="col-md-12">
												<textarea id="draw-dataUrl" name="firmaActaReposicion" class="form-control" rows="5">Para los que saben que es esto:</textarea>
											</div>
										</div>
										<br/>
										<div class="contenedor">
											<div class="col-md-12">
												<img id="draw-image" src="" alt="Tu Imagen aparecera Aqui!"/>
											</div>
										</div>
									</div>
									<style>
										
										#draw-canvas {
										border: 2px dotted #CCCCCC;
										border-radius: 5px;
										cursor: crosshair;
										}

										#draw-dataUrl {
										width: 100%;
										}
										.button {
											background: #3071a9;
											box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
											font-size: 14px;
											padding: 5px 10px;
											border-radius: 5px;
											margin: 0 15px;
											text-decoration: none;
											color: white;
										}

										.button:active {
											transform: scale(0.9);
										}

										.instrucciones {
											width: 90%;
											display: flex;
											flex-direction: row;
											justify-content: center;
											align-items:center;
											margin-bottom: 10px;
										}
										
										input[type=range] {
										-webkit-appearance: none;
										margin: 18px 0;

										}
										input[type=range]:focus {
										outline: none;
										}
										input[type=range]::-webkit-slider-runnable-track {
										width: 100%;
										height: 8.4px;
										cursor: pointer;
										animate: 0.2s;
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										background: #3071a9;
										border-radius: 1.3px;
										border: 0.2px solid #010101;
										}
										input[type=range]::-webkit-slider-thumb {
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										border: 1px solid #000000;
										height: 36px;
										width: 16px;
										border-radius: 3px;
										background: #ffffff;
										cursor: pointer;
										-webkit-appearance: none;
										margin-top: -14px;
										}
										input[type=range]:focus::-webkit-slider-runnable-track {
										background: #367ebd;
										}
										input[type=range]::-moz-range-track {
										width: 100%;
										height: 8.4px;
										cursor: pointer;
										animate: 0.2s;
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										background: #3071a9;
										border-radius: 1.3px;
										border: 0.2px solid #010101;
										}
										input[type=range]::-moz-range-thumb {
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										border: 1px solid #000000;
										height: 36px;
										width: 16px;
										border-radius: 3px;
										background: #ffffff;
										cursor: pointer;
										}
										input[type=range]::-ms-track {
										width: 100%;
										height: 8.4px;
										cursor: pointer;
										animate: 0.2s;
										background: transparent;
										border-color: transparent;
										border-width: 16px 0;
										color: transparent;
										}
										input[type=range]::-ms-fill-lower {
										background: #2a6495;
										border: 0.2px solid #010101;
										border-radius: 2.6px;
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										}
										input[type=range]::-ms-fill-upper {
										background: #3071a9;
										border: 0.2px solid #010101;
										border-radius: 2.6px;
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										}
										input[type=range]::-ms-thumb {
										box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
										border: 1px solid #000000;
										height: 36px;
										width: 16px;
										border-radius: 3px;
										background: #ffffff;
										cursor: pointer;
										}
										input[type=range]:focus::-ms-fill-lower {
										background: #3071a9;
										}
										input[type=range]:focus::-ms-fill-upper {
										background: #367ebd;
										}

									</style>
									
									<div class="mb-3">
										<label for="fileFotoDNI" class="form-label">Adjunte Foto con los elementos entregados:</label>
										<input class="form-control" type="file" id="fileFotoDNI" name="fileFotoDNI">
									</div>
									<div class="d-flex justify-content-center">
										<button type="button" class="btn btn-primary mx-3" id="draw-clearBtn" value="Borrar Canvas">
											<i class="mdi mdi-broom"></i> Limpiar Firma
										</button>
										<button type="submit" class="btn btn-primary mx-3" id="draw-submitBtn">
											<i class="mdi mdi-content-save"></i> Guardar Firma
										</button>
									</div>
									<script>
										/*
												El siguiente codigo en JS Contiene mucho codigo
												de las siguietes 3 fuentes:
												https://stipaltamar.github.io/dibujoCanvas/
												https://developer.mozilla.org/samples/domref/touchevents.html - https://developer.mozilla.org/es/docs/DOM/Touch_events
												http://bencentra.com/canvas/signature/signature.html - https://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
										*/

										(function() { // Comenzamos una funcion auto-ejecutable

										// Obtenenemos un intervalo regular(Tiempo) en la pamtalla
										window.requestAnimFrame = (function (callback) {
											return window.requestAnimationFrame ||
														window.webkitRequestAnimationFrame ||
														window.mozRequestAnimationFrame ||
														window.oRequestAnimationFrame ||
														window.msRequestAnimaitonFrame ||
														function (callback) {
															window.setTimeout(callback, 1000/60);
												// Retrasa la ejecucion de la funcion para mejorar la experiencia
														};
										})();

										// Traemos el canvas mediante el id del elemento html
										var canvas = document.getElementById("draw-canvas");
										var ctx = canvas.getContext("2d");


										// Mandamos llamar a los Elemetos interactivos de la Interfaz HTML
										var drawText = document.getElementById("draw-dataUrl");
										var drawImage = document.getElementById("draw-image");
										var clearBtn = document.getElementById("draw-clearBtn");
										var submitBtn = document.getElementById("draw-submitBtn");
										clearBtn.addEventListener("click", function (e) {
											// Definimos que pasa cuando el boton draw-clearBtn es pulsado
											clearCanvas();
											drawImage.setAttribute("src", "");
										}, false);
											// Definimos que pasa cuando el boton draw-submitBtn es pulsado
										submitBtn.addEventListener("click", function (e) {
										var dataUrl = canvas.toDataURL();
										if (dataUrl === "data:image/png;base64,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") {
                                            Swal.fire({
                                                title: 'Debes realizar la firma para guardarla.',
                                                icon: 'warning',
                                                showCancelButton: false,
                                                confirmButtonColor: '#282E38',
                                                confirmButtonText: 'Confirmar'
                                            });
                                            e.preventDefault();  // No envíes si el canvas está vacío
                                        }
										else
										{
    										drawText.innerHTML = dataUrl;
    										drawImage.setAttribute("src", dataUrl);
										}
										}, false);

										// Activamos MouseEvent para nuestra pagina
										var drawing = false;
										var mousePos = { x:0, y:0 };
										var lastPos = mousePos;
										canvas.addEventListener("mousedown", function (e)
										{
										/*
										Mas alla de solo llamar a una funcion, usamos function (e){...}
										para mas versatilidad cuando ocurre un evento
										*/
											var tint = document.getElementById("color");
											var punta = document.getElementById("puntero");
											console.log(e);
											drawing = true;
											lastPos = getMousePos(canvas, e);
										}, false);
										canvas.addEventListener("mouseup", function (e)
										{
											drawing = false;
										}, false);
										canvas.addEventListener("mousemove", function (e)
										{
											mousePos = getMousePos(canvas, e);
										}, false);

										// Activamos touchEvent para nuestra pagina
										canvas.addEventListener("touchstart", function (e) {
											mousePos = getTouchPos(canvas, e);
										console.log(mousePos);
										e.preventDefault(); // Prevent scrolling when touching the canvas
											var touch = e.touches[0];
											var mouseEvent = new MouseEvent("mousedown", {
												clientX: touch.clientX,
												clientY: touch.clientY
											});
											canvas.dispatchEvent(mouseEvent);
										}, false);
										canvas.addEventListener("touchend", function (e) {
										e.preventDefault(); // Prevent scrolling when touching the canvas
											var mouseEvent = new MouseEvent("mouseup", {});
											canvas.dispatchEvent(mouseEvent);
										}, false);
										canvas.addEventListener("touchleave", function (e) {
										// Realiza el mismo proceso que touchend en caso de que el dedo se deslice fuera del canvas
										e.preventDefault(); // Prevent scrolling when touching the canvas
										var mouseEvent = new MouseEvent("mouseup", {});
										canvas.dispatchEvent(mouseEvent);
										}, false);
										canvas.addEventListener("touchmove", function (e) {
										e.preventDefault(); // Prevent scrolling when touching the canvas
											var touch = e.touches[0];
											var mouseEvent = new MouseEvent("mousemove", {
												clientX: touch.clientX,
												clientY: touch.clientY
											});
											canvas.dispatchEvent(mouseEvent);
										}, false);

										// Get the position of the mouse relative to the canvas
										function getMousePos(canvasDom, mouseEvent) {
											var rect = canvasDom.getBoundingClientRect();
										/*
										Devuelve el tamaño de un elemento y su posición relativa respecto
										a la ventana de visualización (viewport).
										*/
											return {
												x: mouseEvent.clientX - rect.left,
												y: mouseEvent.clientY - rect.top
											};
										}

										// Get the position of a touch relative to the canvas
										function getTouchPos(canvasDom, touchEvent) {
											var rect = canvasDom.getBoundingClientRect();
										console.log(touchEvent);
										/*
										Devuelve el tamaño de un elemento y su posición relativa respecto
										a la ventana de visualización (viewport).
										*/
											return {
												x: touchEvent.touches[0].clientX - rect.left, // Popiedad de todo evento Touch
												y: touchEvent.touches[0].clientY - rect.top
											};
										}

										// Draw to the canvas
										function renderCanvas() {
											if (drawing) {
												var tint = document.getElementById("color");
												var punta = document.getElementById("puntero");
												ctx.strokeStyle = tint.value;
												ctx.beginPath();
														ctx.moveTo(lastPos.x, lastPos.y);
														ctx.lineTo(mousePos.x, mousePos.y);
												console.log(punta.value);
													ctx.lineWidth = punta.value;
														ctx.stroke();
												ctx.closePath();
												lastPos = mousePos;
											}
										}

										function clearCanvas() {
											canvas.width = canvas.width;
										}

										// Allow for animation
										(function drawLoop () {
											requestAnimFrame(drawLoop);
											renderCanvas();
										})();

										})();

									</script>
									<span class="respuesta"></span>
								</form>
							</div>
							<?php
							}
							?>
                        </div>
					</div>
				</div>
			</div>
		</div>
		<!-- container-fluid -->
	</div>
	<!-- End Page-content -->
	<footer class="footer" style="position: relative; left: 0px;">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-6">
					<script>document.write(new Date().getFullYear())</script> © Verisure Peru.
				</div>
				<div class="col-sm-6">
					<div class="text-sm-end d-none d-sm-block">
						Desarrollado por <a href="https://linktr.ee/rbarcenac">Verisure Peru</a>
					</div>
				</div>
			</div>
		</div>
	</footer>
</div>
<!-- end main content-->

<?php $this->endSection(); ?>