@extends('menu/menu')
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>

<script src="https://html2canvas.hertzen.com/dist/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

<div class="container mt-5">
    <div class="title-vista mt-4">Capacitación</div>
</div>

<form action="{{ route('create.addcapacitacion')}} " method="POST" enctype="multipart/form-data">
    @csrf
    <div class="container mt-4">
        
        <!-- BARRA DE BUSQUEDA -->
        <div class="seccion-filtro">Datos de la sucursal</div> 
        <hr class="separador">

        <div class="row">
            <!-- Fila 1 ------------------------------------------------------>
            <div class="col-sm-3 form-group">
                <label for="email">CUI o Código Sucursal</label>
                <div class="input-group mb-3">
                    <input type="" required class="form-control mayuscula" id="dcui" value="{{$cambioestado[0]->sCui ?? ''}}" placeholder="CUI o Código sucursal" name="dcui">
                    <input type="hidden" required class="form-control" id="id_asignacion" value="{{$capas[0]->id ?? ''}}" placeholder="CIUDAD" name="id_asignacion">
                    <div class="input-group-append">
                        <span class="btn btn-prim-input" id="buscando">Buscar</span>
                    </div>
                </div>
            </div>

            <div class="col-sm-3 form-group">
                <label for="email">Cliente</label>
                <input type="" required class="form-control mayuscula" id="cliente" value="{{$cambioestado[0]->sCliente ?? ''}}" placeholder="Cliente" name="cliente">
            </div>

            <div class="col-sm-3 form-group">
                <label for="">Proyecto asociado</label>
                <select id="proyectos" name="proyectos" required class="custom-select mayuscula col-mb-3" >
                    <option value="" selected>SELECCIONE</option>
                    @if(!empty($proyectos))
                        @foreach ($proyectos  as $los_datos3)
                    @if ($los_datos3->id_proyecto != null)
                    @if(empty($proyecto_asociado[0]->id))
                        <option value="{{$los_datos3->id_proyecto}}" >{{$los_datos3->nombre." (".$los_datos3->razon_social.")" }}  </option>
                    @elseif($los_datos3->id_proyecto == $proyecto_asociado[0]->id)
                        <option value="{{$los_datos3->id_proyecto}}" selected>{{$los_datos3->nombre." (".$los_datos3->razon_social.")" }}  </option>
                    @endif
                    @endif
                    @endforeach                             
                    @endif
                </select>
            </div>

            <div class="col-sm-3 form-group">
                <label for="email">Técnico</label>
                <input type="" required class="form-control mayuscula" id="" placeholder="Técnico" name=""  value="{{ $datos_tecnico[0]->nombre_uno." ". $datos_tecnico[0]->apellido_uno }}">
            </div>                  

            <!-- Fila 2 ------------------------------------------------------>
            <div class="col-sm-6 form-group">
                <label for="email">Dirección</label>
                <input type="" required class="form-control mayuscula" id="direccion" placeholder="Dirección" name="direccion" value="{{$cambioestado[0]->sDireccion ?? ''}}">
            </div>

            <div class="col-sm-3 form-group">
                <label for="email">Comuna</label>
                <input type="" required class="form-control mayuscula" id="comuna" placeholder="Comuna" name="comuna" value="{{$cambioestado[0]->sComuna ?? ''}}">
            </div>

            <div class="col-sm-3 form-group">
                <label for="email">Ciudad</label>
                <input type="" required class="form-control mayuscula" id="ciudad" placeholder="Ciudad" name="ciudad" value="{{$cambioestado[0]->sCiudad ?? ''}}">
                <input type="hidden" required class="form-control mayuscula" id="idtecnico" value="{{$firma_datos[0]->id_tecnico}}" placeholder="Ciudad" name="idtecnico">
            </div>
        </div>

        <!-- Fila 3 ------------------------------------------------------>
        <div class="seccion-filtro">Asignación</div> 
        <hr class="separador">

        <div class="row">
            <!-- CARGA DE IMAGEN-->
			<div class="col-sm-9 form-group">
				<label for="email">Adjunte una imagen de la capacitación</label>
                <input type="file" class="custom-file mayuscula" id="cargafoto1" name="cargafoto1">
                <button type="button" class="btn btn-secundario w-25 mt-3" data-toggle="modal" data-target="#modal_fotos_android">Android</button>	
            </div>

            <div class="col-sm-3 form-group">
                <label for="email">Nº de personas capacitadas</label>
                <input type="number" required class="form-control mayuscula" id="nupersonas" onKeyPress="return soloNumeros(event)" placeholder="0" name="nupersonas">
            </div>

            <div class="col-sm-12 form-group">
                <div class="overflow-auto">
                    <label for="">Personas Capacitadas</label>
                    <div class="input-group mb-3">
                         <input type=""  class="form-control mayuscula" id="scontacto_old" placeholder="Datos del contacto" name="scontacto" >
                        <span class="input-group-text btn-prim-input btn" id="agregar">Agregar</span>
                    </div>
                    <div class="" id="listaarrow_old"></div>
                </div>
            </div>

            <div class="col-sm-12">
                <span id="mi_select_2">
            </div>
        </div>

        <div class="row">
            <!-- FIRMAS CONTRAPARTES -->
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <label for="email">Datos del Técnico</label>
                        <input type="" required class="form-control" id="" style="pointer-events: none" readonly="readonly" placeholder="Datos del técnico" name="" value="{{ $datos_tecnico[0]->nombre_uno." ". $datos_tecnico[0]->apellido_uno }}">
                    </div>
                    <div class="col-sm-12 form-group">
                        <label for="email">Firma técnico</label>
                        <img src="{{ asset ("fotos/".$firma_datos[0]->url_firma)}}" alt="">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <label for="email">Datos de contacto</label>
                        <input type="" required class="form-control" id="scontacto" placeholder="Datos del contacto" name="scontacto" >
                    </div>
                    <div class="col-sm-12 form-group">
                        <label for="email">Firma contacto</label>
                        <div class="row">
                            <div class="col-sm-12">
                                <table class="mx-auto">
                                    <tr>
                                        <td> 
                                            <canvas class="rounded-lg" required id="pizarra" name="img_firma"></canvas>
                                        </td>
                                    </tr>
                                </table>
                                <input type="text" style="display:none "  id="imagen_firma" value="" name="imagen_firma">
                                <div id="contenedor"></div>
    
                                <div class="mt-2 text-center">
                                    <button class="btn btn-prim col-sm-5 form-group" type='button' id="firmasave">Generar firma</button>
                                    <button class="btn btn-secundario col-sm-5 form-group" type='button' id="borrars"  onclick="borrar()" >Borrar</button>
                                    <input type='hidden' name='imagen' id='imagen'>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container text-center my-5">
            <button class="btn btn-prim w-25" type="submit">Guardar</button>
        </div>
    </div>
</form>


<div class="modal fade" id="modal_fotos_android" role="dialog">
	<div class="modal-dialog  modal-lg">
	  <div class="modal-content">
		<div class="modal-header">
			<h1 style="margin-top: 50px">Ingresar el siguiente ID en la Aplicacción</h1>
		  <button type="button" class="close" data-dismiss="modal">&times;</button>
		</div>
		<div class="modal-body">
		
					
	  <div class="container-fluid">
		{{-- <form enctype="multipart/form-data" id="formuploadajax" method="post">
			@csrf --}}


	    <div class="container rounded-lg">
			<!-- CARGA DE IMÁGENES DE INSTALACIÓN -->

	
			  {{-- <div class="row reex" style="height: auto"> --}}
				
				<div style="text-align: center; border-style: solid; background: #E8F5FE; border-radius: 5px;border-color: #BAC5D8">
					 <h1>ID = {{$capas[0]->id_capa ?? ''}}</h1>
				</div>
	
			
		</div>
		  
		  
		  <div class="container form-group">
				 <br>  
			 	 <button class="btn btn-cancelar float-sm-right guardar" type="button" data-dismiss="modal">CANCELAR</button>
				{{-- <button class="btn btn-subir-img float-sm-right upload" type="submit">SUBIR IMÁGENES</button> --}}
        	</div>
		  
		{{-- </form>   --}}
		  
      </div>		
								 
								 
								 
		 </div>
							
			 
	  </div>
	</div>
  </div>

@endsection

<script type="text/javascript">


function cambio(nombre){



    var opciones= '<input type="checkbox" required checked id="'+nombre+'" name="selecionados[]" value=" '+nombre+' '+" "+'" {{ (! empty(old('use_signature')) ? 'checked' : '') }}>' +nombre+'<br> ';
        $('#mi_select_2').append(opciones);
        $('#listaarrow').fadeOut(); 

}
    $(document).ready(function() {

        $(".add_id").click(function() {

alert("jajaj");
// var dcui2 = $(this).attr("data-nombre");
// alert(dcui2);
 });

        
    $("#propi").keyup(function(){
    _this = this;
    // Show only matching TR, hide rest of them
    $.each($("#mi_select option"), function() {
    if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
    $(this).hide();
    else
    $(this).show();
    });
    });
    
        $("#mi_select").change(function(){

        var id_nombre = $('select[id=mi_select]').val();
 


        // $("select[id=mi_select_2]").find("option[value='"+$('select[id=mi_select_2]').val()+"']").prop("disabled",true);

        // var opciones = "<option selected  value="+opt[0]+" multiple>"+opt[1]+"</opciones>";

        var opciones= '<input required type="checkbox"  checked id="'+id_nombre+'" name="selecionados[]" value="'+id_nombre+'">' +id_nombre+'<br> ';


        $('#mi_select_2').append(opciones);

});

$(document).on('change','input[type="checkbox"]',function(e){
        if(this.checked == false){
            $('checkbox[value="'+this.value+'"]').remove();
        }
    });

    });
    



    </script>


<script type="text/javascript">
    $(document).ready(function() {


        $('#scontacto').keyup(function(){ 
          var query = $(this).val();
        //  if(query != '')
          //{

           var _token = $('input[name="_token"]').val();
           $.ajax({
             
            url:"{{ route('autocomplete.fetchnombrecontacto') }}",
            method:"POST",
            data:{query:query, _token:_token},
            success:function(data){
              console.log(data);
             $('#listaarrow').fadeIn();  
                      $('#listaarrow').html(data);
            }
           });
        //  }

    //     var conta = 0;
    //     $(document).on('click', 'li', function(){  
    //    //   $('#scontacto').val($(this).text());  




    //    if(conta == 0){
    //     var opciones= '<input type="checkbox"  checked id="'+$(this).text()+'" name="selecionados[]" value="'+$(this).text()+'">' +$(this).text()+'<br> ';
    //     $('#mi_select_2').append(opciones);
    //     $('#listaarrow').fadeOut(); 

    //  conta++;
    //    }

   
      
           
           
    //        //$("#rut_cliente_").val($(this).attr("data-rut"));

    //   });

          
      });


      //script para cargar el modal
//       $('.asignar').click(function() {

// $("#modal_asignacion").modal('show');
//     var dcui2 = $(this).attr("data-id");
//     $("#md_id_cui").val(dcui2);

// });

$( "#agregar" ).click(function() {



var nombre = $('#scontacto_old').val();

if(nombre != ""){

 var opciones= '<input type="checkbox"  checked id="'+nombre+'" name="selecionados[]" value="'+nombre+'">' + nombre+'<br> ';
 $('#mi_select_2').append(opciones);
 $('#scontacto_old').val("");
}

});

         //   $( "#buscando" ).click(function() {
            $( "#buscando" ).click(function() {

            // var _token = $('input[name="_token"]').val();

            var dcui = $("#dcui").val();

            // var _token = $('input[name="_token"]').val();

           // var dcui = $("#dcui").val();
            var _token = $('input[name="_token"]').val();

           // var dcui = $(this).val();
            $.ajax({
                method: "POST",
                url: "{{ route('go.auto_complete_cui') }}",
                data: {'scui': dcui,  _token:_token},
                success: function(data) {

            if(data != ""){
                    console.log(data);
                    $.each(data, function(i, item) {
                        $("#cliente").val(item.sCliente);
                        $("#proyectos").val(item.id_proyecto);
                        $("#direccion").val(item.sDireccion);
                        $("#comuna").val(item.sComuna);
                        $("#ciudad").val(item.sCiudad);
                    });
            }else{
                        $("#cliente").val("");
                        $("#proyectos").val("");
                        $("#direccion").val("");
                        $("#comuna").val("");
                        $("#ciudad").val("");
                alert("sin Datos");
            }

                    
                }
            });
        });
    });
    </script>


<!--Este script se encarga de verificar si un rut ya esta asociado a una organización-->
<script type="text/javascript">
    $(document).ready(function() {







         //   $( "#buscando" ).click(function() {
            $( "#buscando" ).click(function() {

            // var _token = $('input[name="_token"]').val();

            var dcui = $("#dcui").val();

            // var _token = $('input[name="_token"]').val();

           // var dcui = $("#dcui").val();
            var _token = $('input[name="_token"]').val();

           // var dcui = $(this).val();
            $.ajax({
                method: "POST",
                url: "{{ route('go.auto_complete_cui') }}",
                data: {'scui': dcui,  _token:_token},
                success: function(data) {

            if(data != ""){
                    console.log(data);
                    $.each(data, function(i, item) {
                        $("#cliente").val(item.sCliente);
                        $("#proyectos").val(item.id_proyecto);
                        $("#direccion").val(item.sDireccion);
                        $("#comuna").val(item.sComuna);
                        $("#ciudad").val(item.sCiudad);
                    });
            }else{
                        $("#cliente").val("");
                        $("#proyectos").val("");
                        $("#direccion").val("");
                        $("#comuna").val("");
                        $("#ciudad").val("");
                alert("sin Datos");
            }

                    
                }
            });
        });
    });
    </script>

<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(){
  
  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(){
   $('#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;
    }
   });
    });
    function soloNumeros(e){

var key = window.Event ? e.which : e.keyCode
return (key >= 48 && key <= 57)
}

 </script>