@extends('menu/menu')
<style>
.mostrar {
  display: none;

}
@media (max-width: 768px) {
    .mostrar {
    display: block;
    
  }
}
</style>
{{-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> --}}
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>
<!--<link src="sftp://aya_pruebafinal@35.232.42.155/var/www/html/rendicion/css/_______a%26a_style.css" rel="stylesheet" type="text/css">-->
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>



@section('content')

<style>
    canvas {
        width: 250px;
        height: 250px;
        background-color: #fff;
    }
@media screen and (max-width: 768px) {
  canvas {
         width: 250px;
         height: 250px;
      z-index:99999;
      float:center;
         background-color: #fff;
     }
}
</style>
@if ( session('mensaje') )
    <div class="alert alert-success">{{ session('mensaje') }}</div>
@endif


@if ( session('mensaje_error') )

    <div class="alert alert-danger">{{ session('mensaje_error') }}</div>

@endif

<div class="container" style="margin-top:30px">
 <h2>Firma Trabajador</h2>
<div class="mostrar" style="text-align: right">
   <a  href="javascript: history.go(-1)"><img src="img/volver.png" ></a>

</div>
<div class="container table-responsive"> <div id="form-container" class="container-fluid">
    <div class="row">
    
        <h4>Firma actual</h4>
        <div class="input-group mb-6">
           
            <img src="{{ asset ("fotos/".$datos_firma[0]->url_firma) ?? ''}}" >
        </div>
      
    </div>
    <div class="row">
    
        <h4>Cambiar Firma</h4>
        <div class="input-group mb-6">
            <div id="contenido" class="table table-responsive" style="background-color:#e8f5fe; display;"  >
                                                      <form id='formCanvas' method='post' action="{{route('guardarfirmatrabajador')}} " enctype='multipart/form-data'>
                                                          @csrf
                                                          <table>
                                                              <tr><td><canvas id="pizarra" name="img_firma" ><_tecnico/canvas></td></tr>
                                                          </table>
                                                          <input type="text" style="display:none "  id="imagen_firma" value="" name="imagen_firma">

                                                          <input type="text" style="display:none "  id="check" value="{{Crypt::encryptString($datos_trabajador[0]->id_persona)}}" name="check">
                                                          <div id="contenedor"></div>
                                                          <button type='button'class="btn btn-info" id="firmasave" >Generar imagen</button>
                                                          <button type='button' id="borrars" class="btn btn-danger"  onclick="borrar()" >Reestablecer</button>

                                                             <button type='submit' class="btn btn-success" id="enviar_firma" >Guardar Firma</button>
                                                      </form>
            </div>
        </div>
      
    </div>
</div>

@endsection
  <script>
      var lineas = [];


  function borrar(){
          
          // Creamos nuestro canvas
      $("#contenedor").empty();
          var canvas = document.getElementById("pizarra");
          var ctx = canvas.getContext("2d");
          
          // Borramos el área que nos interese
          ctx.clearRect(0, 0, canvas.width, canvas.height);
      //    console.log(lineas);
          lineas = [];
      
      }

  $(function(){
    $('#firmasave').on('click', function () {
        url_img =document.getElementById("pizarra").toDataURL('image/png');

         $("#imagen_firma").val(url_img);
                       $("#contenedor").html("<h4>Firma generada</h4><br><img src='"+url_img+"' >");
        
    });
    var element = $("#pizarra"); // global variable
    var getCanvas; // global variable

          function downloadURI(uri, name) {
            var link = document.createElement("a");
            link.download = name;
            link.href = uri;

          }
    html2canvas(element, {
     onrendered: function (canvas) {
                               getCanvas = canvas;
     }
    });


   

    //======================================================================
        // VARIABLES
        //======================================================================
        let miCanvas = document.querySelector('#pizarra');
     
        let correccionX = 0;
        let correccionY = 0;
        let pintarLinea = false;

        let posicion = miCanvas.getBoundingClientRect()
        correccionX = posicion.x;
        correccionY = posicion.y;

        miCanvas.width = 250;
        miCanvas.height = 250;

        //======================================================================
        // FUNCIONES
        //======================================================================

        /**
         * Funcion que empieza a dibujar la linea
         */
        function empezarDibujo () {
            pintarLinea = true;
            lineas.push([]);
        };

        /**
         * Funcion dibuja la linea
         */
        function dibujarLinea (event) {
            event.preventDefault();
            if (pintarLinea) {
                let ctx = miCanvas.getContext('2d')
                // Estilos de linea
                ctx.lineJoin = ctx.lineCap = 'round';
                ctx.lineWidth = 5;
                // Color de la linea
                ctx.strokeStyle = '#000';
                // Marca el nuevo punto
                let nuevaPosicionX = 0;
                let nuevaPosicionY = 0;
                if (event.changedTouches == undefined) {
                    // Versión ratón
                    nuevaPosicionX = event.layerX;
                    nuevaPosicionY = event.layerY;
                } else {
                    // Versión touch, pantalla tactil
                    nuevaPosicionX = event.changedTouches[0].pageX - correccionX;
                    nuevaPosicionY = event.changedTouches[0].pageY - correccionY;
                }
                // Guarda la linea
                lineas[lineas.length - 1].push({
                    x: nuevaPosicionX,
                    y: nuevaPosicionY
                });
                // Redibuja todas las lineas guardadas
                ctx.beginPath();
                lineas.forEach(function (segmento) {
                    ctx.moveTo(segmento[0].x, segmento[0].y);
                    segmento.forEach(function (punto, index) {
                        ctx.lineTo(punto.x, punto.y);
                    });
                });
                ctx.stroke();
            }
        }

        /**
         * Funcion que deja de dibujar la linea
         */
        function pararDibujar () {
            pintarLinea = false;
        }

        //======================================================================
        // EVENTOS
        //======================================================================

        // Eventos raton
        miCanvas.addEventListener('mousedown', empezarDibujo, false);
        miCanvas.addEventListener('mousemove', dibujarLinea, false);
        miCanvas.addEventListener('mouseup', pararDibujar, false);

        // Eventos pantallas táctiles
        miCanvas.addEventListener('touchstart', empezarDibujo, false);
        miCanvas.addEventListener('touchmove', dibujarLinea, false);
    
    //////////////////////////////////////////////////////
});

function guardandofirna(){

  url_img =document.getElementById("pizarra").toDataURL('image/png');

  $("#imagen_firma").val(url_img);
 
   // var formData = new FormData(document.getElementById("formCanvas"));
   var _token = $('input[name="_token"]').val();

      var imagen_firma = $("#imagen_firma").val();
      var check = $("#check").val();
      //alert(imagen);
     // alert(id);

 //   formData.append("dato", url_img);
    //formData.append(f.attr("name"), $(this)[0].files[0]);
    $.ajax({
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

        url:"{{ route('guardarfirmatrabajador') }}",
        type: "post",
        dataType: "html",
        data: {'imagen_firma': imagen_firma,'check': check},

      //   cache: false,
      //   contentType: false,
      //   processData: false,
         success: function(response) {
                    alert(response);
         },
        error: function(xhr, status) {
            alert('Disculpe, ha ocurrido un problema, intente mas tarde');
        }
    })
        .done(function(res){
     //    alert("error");
        });
   }
  </script>