@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="{{ asset('js/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 ?? '') ?? ''}}"> --}}
                    @if(isset($datos_firma[0]))
    <img src="{{ asset("fotos/".$datos_firma[0]->url_firma) }}" alt="Firma">
@endif
                </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)}}" 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>