<?php
session_start();
include('config.php');
include($rutaPhp.$rutaHtml.'/maqueta/includes.php');


include($rutaPhp.$rutaHtml.'/maqueta/arriba.php');


    
if($_POST && $_POST['fotoCodificada']) {

	$base64_string_png=$_POST['fotoCodificada'];
	
	//echo $base64_string_png;
	
	$dirTemporal=$_SERVER["DOCUMENT_ROOT"].$rutaHtml.'/fotos/tmp';
	//echo '<p>dirTemporal: '.$dirTemporal.'</p>';
	
	if( !file_exists($dirTemporal) ) {
		mkdir($dirTemporal);
		chmod($dirTemporal,0777);
	}
	
	$nombre=bin2hex(random_bytes(16)).'.jpg';
	$archivoSubido=$dirTemporal.'/'.$nombre;
	
	$data = explode(',', $base64_string_png);
	$binary_data = base64_decode($data[1]);
	
	$imagen = imagecreatefromstring($binary_data);
	
	if ($imagen) {
		
		$quality = 90;
	
		if (imagejpeg($imagen, $archivoSubido, $quality)) {
			
			//echo '<p>Imagen JPG creada exitosamente como '.$archivoSubido.'</p>';
			
			$url=$_SERVER['REQUEST_URI'];
			$partes=explode('?',$url);
			$parametros=$partes[1];
			
			$redireccion='fotos.php?'.$parametros.'&archivo='.$archivoSubido.'&nombreArchivo='.$nombre;
			
			?>
            <script>
				mostrarCargando(true);
				window.location='<?php echo $redireccion; ?>';
            </script>
            <?php
		
		} else {
			echo '<p>Error al guardar la imagen JPG.</p>';
		}
	
		imagedestroy($imagen);
		
	} else {
	
		echo '<p>Error al crear la imagen desde la cadena Base64.</p>';
		
	}

}
else {

	?>

	<style>
        html,body { width:100%;height:100%; background-color:#000000;overflow:hidden;background-image:none!important }
        #video { width:100%;position:absolute;top:0;left:0;z-index:1;border:0; }
        canvas { display: none; }
		#botonTomarFoto { position:absolute;bottom:40px;left:calc(50% - 45px);width:90px;height:90px;z-index:2;cursor:pointer;display:none }
		
		#botonVolver { position:absolute;bottom:40px;left:calc(50% - 205px);width:90px;height:90px;z-index:4;cursor:pointer;display:none }
		#botonCambiarCamara { position:absolute;bottom:40px;left:calc(50% + 120px);width:90px;height:90px;z-index:2;cursor:pointer;display:none }
		
		#botonConfirmar { position:absolute;bottom:40px;left:calc(50% - 45px);width:90px;height:90px;z-index:4;cursor:pointer;display:none }
		#botonCancelar { position:absolute;bottom:40px;left:calc(50% + 120px);width:90px;height:90px;z-index:4;cursor:pointer;display:none }
        .foto { display: none;width:100%;height:100%;position:absolute;top:0;left:0;z-index:3;border:0; }
    </style>

    <video id="video" playsinline autoplay></video>

	<img id="botonVolver" src="img_nx/botones/camara/volver.png">

	<img id="botonTomarFoto" src="img_nx/botones/camara/tomar-foto.png">
    <img id="botonConfirmar" src="img_nx/botones/camara/foto-ok.png">
    
    <img id="botonCancelar" src="img_nx/botones/camara/cancelar.png">
    <img id="botonCambiarCamara" src="img_nx/botones/camara/cambiar-camara.png">


    <p id="capaZoom" style="display:none">
    	<label>Zoom Factor: <input id="zoomInput" type="range" min="1" max="4" value="1" onChange="setZoom();"></label>
    </p>
    
    <img id="photo" class="foto">
    
    <form name="formularioFoto" method="post" action="">
    <input type="hidden" id="fotoCodificada" name="fotoCodificada">
    </form>

<script>
        const video = document.getElementById('video');
        const photo = document.getElementById('photo');
		const botonVolver = document.getElementById('botonVolver');
        const botonTomarFoto = document.getElementById('botonTomarFoto');
		const botonConfirmar = document.getElementById('botonConfirmar');
		const botonCancelar = document.getElementById('botonCancelar');
        const botonCambiarCamara = document.getElementById('botonCambiarCamara');
        const canvas = document.createElement('canvas'); // Usamos un canvas temporal
        let stream;
        let facingMode = 'environment'; // 'user' para frontal, 'environment' para trasera

        // 1. Obtener acceso a la cámara
        async function startCamera() {
            const constraints = {
                video: {
                    facingMode: facingMode,
                    width: { ideal: window.innerWidth },
                    height: { ideal: window.innerHeight },
                    zoom:true
                }
            };
            try {
				
				const capaZoom=document.getElementById('capaZoom');
				let zoom = document.getElementById("zoomInput");
			
                stream = await navigator.mediaDevices.getUserMedia(constraints);
                video.srcObject = stream;
                video.play();
				
				botonVolver.style.display='block';
				botonTomarFoto.style.display='block';
				botonCambiarCamara.style.display='block';
				
				const videoTracks = video.srcObject.getVideoTracks();
				track = videoTracks[0];
				let capabilities = track.getCapabilities();
				if ('zoom' in capabilities) {
				
					const constraints = {advanced: [{zoom: 1}]};
					await track.applyConstraints(constraints);
					
					//capaZoom.style.display='block';
					zoom.value=1;
					
					//alert("This camera support zoom");
				}else{
					capaZoom.style.display='none';
					//alert("This camera does not support zoom");
				}
				
            } catch (err) {
                console.error("Error al acceder a la cámara:", err);
            }
        }
		
		async function setZoom(){
		
			const video = document.querySelector('video');
		  	const videoTracks = video.srcObject.getVideoTracks();
		  	track = videoTracks[0];
		
		  	let expectedZoom = document.getElementById("zoomInput").value;
		  	const constraints = {advanced: [{zoom: expectedZoom}]};
		  	await track.applyConstraints(constraints);
		}

        // 2. Tomar la foto
        botonTomarFoto.addEventListener('click', () => {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            // Dibuja el frame actual del video en el canvas
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            // Convierte el canvas a una URL de imagen (PNG)
            photo.src = canvas.toDataURL('image/png');
			photo.style.display='block';
			video.style.display='none';
			botonConfirmar.style.display='block';
			botonCancelar.style.display='block';
        });

        // 3. Cambiar entre cámaras (frontal/trasera)
        botonCambiarCamara.addEventListener('click', () => {
            // Detener el stream actual
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
            }
            // Cambiar el modo y reiniciar la cámara
            facingMode = facingMode === 'user' ? 'environment' : 'user';
            startCamera();

        });
		
		botonCancelar.addEventListener('click', () => {
			botonConfirmar.style.display='none';
			botonCancelar.style.display='none';
			video.style.display='block';
			photo.style.display='none';
 		});
		
		botonConfirmar.addEventListener('click', () => {
			const fotoCodificada = document.getElementById('fotoCodificada');
			fotoCodificada.value=photo.src;
			mostrarCargando(true);
			document.formularioFoto.submit();
			video.style.display='none';
			photo.style.display='none';
		});
		
		// Iniciar la cámara al cargar la página
        startCamera();
		
    </script>
    
<?php
} //Fin if hay post

include($rutaPhp.$rutaHtml.'/maqueta/abajo.php');

?>