@extends('menu/menu')
{{-- <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> --}}
<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-fluid">
    <form action="{{ route('create.addcapacitacion')}} "
            method="POST" enctype="multipart/form-data">
            @csrf
        <div class="container">
            <!-- BARRA DE BUSQUEDA -->
            <h1 style="margin-top: 50px">Capacitación&nbsp;</h1>
                <div class="row reex" style="height: auto">

                    <!-- ASIGNACIÓN -->
                    <div class="container col-12" style="margin-top: 10px">
                        <h2><strong>Datos de la sucursal&nbsp;</strong></h2>
                    </div>
                    <!-- Fila 1 ------------------------------------------------------>
                    <div class="container col-sm-3 form-group ali ">
                        <label for="email"><h2>CUI o Código Sucursal</h2></label>
                        {{-- <label for="email"><h2>CUI o Código Sucursal</h2></label>
                        <input type="" required class="form-control" id="dcui" placeholder="CUI O CÓDIGO SUCURSAL" name="dcui">
                        <div class="input-group-append">
                            <span class="input-group-text">@example.com</span>
                          </div> --}}
                          <div class="input-group mb-3">
                            <input type="" required class="form-control" 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="input-group-text btn-success" id="buscando">Buscar</span>
                            </div>
                          </div>
                    </div>



                    <div class="container col-sm-3 form-group">
                        <label for="email"><h2>Cliente</h2></label>
                        <input type="" required class="form-control" id="cliente" value="{{$cambioestado[0]->sCliente ?? ''}}" placeholder="CLIENTE" name="cliente">
                    </div>
                    <div class="container col-sm-3 form-group">
                        <label for=""><h2>Proyecto asociado</h2></label>
                    <select id="proyectos" name="proyectos" required class="custom-select col-mb-3">
                        <option value="" selected>SELECCIONE</option>
                                @if(!empty($proyectos))
                            @foreach ($proyectos  as $los_datos3)
                               {{--  <option value="{{$los_datos3->id_proyecto}}">{{$los_datos3->nombre." (".$los_datos3->razon_social.")" }}  </option> --}}
                               @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="container col-sm-3 form-group">
                        <label for="email"><h2>Técnico</h2></label>
                        <input type="" required class="form-control" id="" placeholder="TÉCNICO" name=""  value="{{ $datos_tecnico[0]->nombre_uno." ". $datos_tecnico[0]->apellido_uno }}">
                    </div>                  

                    <!-- Fila 2 ------------------------------------------------------>
                    <div class="container col-sm-6 form-group ali">
                        <label for="email"><h2>Dirección</h2></label>
                        <input type="" required class="form-control" id="direccion" placeholder="DIRECCIÓN" name="direccion" value="{{$cambioestado[0]->sDireccion ?? ''}}">
                    </div>
                    <div class="container col-sm-3 form-group ali">
                        <label for="email"><h2>Comuna</h2></label>
                        <input type="" required class="form-control" id="comuna" placeholder="COMUNA" name="comuna" value="{{$cambioestado[0]->sComuna ?? ''}}">
                    </div>
                    <div class="container col-sm-3 form-group ali">
                        <label for="email"><h2>Ciudad</h2></label>
                        <input type="" required class="form-control" id="ciudad" placeholder="CIUDAD" name="ciudad" value="{{$cambioestado[0]->sCiudad ?? ''}}">
                         <input type="hidden" required class="form-control" id="idtecnico" value="{{$firma_datos[0]->id_tecnico}}" placeholder="CIUDAD" name="idtecnico">
                    </div>

                    <!-- Fila 2 ------------------------------------------------------>
                    
                    <div class="container col-sm-9 form-group ali"></div>


                <!-- CARGA DE IMAGEN-->
				<div class="container"><hr class="linea"></div>
				<div class="container col-12" style="margin-top: 10px">
					<h2><strong>Carga de imagen</strong></h2>
				</div>
				<div class="container col-sm-9 form-group" style="margin-top: auto">
					<label for="email"><h2>Adjunte una imagen de la capacitación</h2>
					</label>
                    <input type="file" id="cargafoto1" name="cargafoto1" ><br>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_fotos_android">
                        Android
                    </button>	
                </div>
                

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

                    <div class="container"><hr class="linea"></div>

                    <div class="container">

                        <div class="col-sm-12">
                            <div class="col-sm" class="overflow-auto"><br>
                                <label for="">Personas Capacitadas</label>

                                  <div>
                                    <div class="input-group mb-3">

                                            <input type=""  class="form-control" id="scontacto_old" placeholder="DATOS DE CONTACTO" name="scontacto" >
                                            <span class="input-group-text btn-success btn" id="agregar">Agregar</span>
                                        </div>
                                  </div>

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


                        </div>
                    
                        <div class="col-sm-12">
                        
                        </div>
                    </div>


                    <div class="container"><hr class="linea"></div>

                    <!-- FIRMAS CONTRAPARTES -->
                    <div class="container col-sm-6" style="padding: 0">
                        <div class="container col-sm-12 form-group ali">
                            <label for="email"><h2>Datos del Técnico</h2></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="container col-sm-12 form-group ali">
                            <label for="email"><h2>Firma técnico</h2></label>
<br>
                            <img src="{{ asset ("fotos/".$firma_datos[0]->url_firma)}}" alt="">
                        </div>
                    </div>

                    <div class="container col-sm-6" style="padding: 0">
                        <div class="container col-sm-12 form-group ali">
                            <label for="email"><h2>Datos de contacto</h2></label>
                            <input type="" required class="form-control" id="scontacto" placeholder="DATOS DE CONTACTO" name="scontacto" >
                            {{-- <div class="" id="listaarrow"></div> --}}
                        </div>
                        <div class="container col-sm-12 form-group ali">
                            <label for="email"><h2>Firma contacto</h2></label>
                                                <table width="450px">
                                                   <tr><td><canvas required id="pizarra" name="img_firma" ><_tecnico/canvas></td></tr>
                                               </table>
                                               <input type="text" style="display:none "  id="imagen_firma" value="" name="imagen_firma">
                                                <div id="contenedor"></div>

                                              <button type='button' id="firmasave">Generar Firma</button>
                                              <button type='button' id="borrars"  onclick="borrar()" >Reestablecer</button>
                                               <input type='hidden' name='imagen' id='imagen'>
                        </div>
                    </div>
                    <!-- FIN FIRMAS CONTRAPARTES -->


                </div>

        </div>

        <div class="container form-group">
             <br>
            <button class="btn btn-guardar float-sm-right" type="submit"> GUARDAR</button>
    </div>
    </form>
</div>


<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>