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


@section('content')
@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


@if(count($informacion_retiro) == 0)
    <div class="alert alert-danger"> Sin Datos</div>
    @endif

<br><br>
<form action="{{route('filtro.estadoequipo' )}} " method="get" id="4" name="primero">
    @csrf

    <div class="container-fluid">
      <div class="container">
      <!-- BARRA DE BUSQUEDA -->
      <div class="row reex" style="height: auto">
    
              <div class="container col-12" style="margin-top: 10px">
          <h2><strong>Filtrar por</strong></h2>
    </div>
    
    <div class="container col-sm-3 form-group">
        <label for="datepicker"><h2>Proyecto asociado</h2></label>
        <select name="proyectos" class="custom-select col-mb-3">
            <option value="" selected>SELECCIONE</option>
            @if(!empty($proyectos))
                @foreach ($proyectos   as $los_datos)
                    <option value="{{$los_datos->id}}">{{$los_datos->nombre  }}  </option>
                @endforeach
            @endif
        </select>
    </div>
    
    <!--AQUI SE CARGA EL SELECT DE ESTADO-->
    <div class="container col-sm form-group">
        <label for="estado"><h2>Serie</h2></label>
        <input type="text" name="serie" id=""  class=" form-control">
     
    </div>
    <!--FIN SELECT DE ESTADO-->
    
    <!--AQUI SE CARGA EL SELECT DE CLIENTE-->
    <div class="container col-sm form-group">
        <label for="clientes"><h2></h2></label><br><br>
        <button type="submit" class="btn btn-success" value="BUSCAR" id="uno" name="uno"> BUSCAR </button>
    </div>


    
    </div>
    <!-- FIN BARRA DE BUSQUEDA -->
    </div>
    </div>

    </form>

<div class="container-fluid">
     

       <div class="container">


       

<div class="mostrar" style="text-align: right">
              <a  href="javascript: history.go(-1)"><img src="img/volver.png" ></a>

           </div>
        <form action="{{route('save.equipoRetiro' )}} " method="POST" enctype="multipart/form-data" >
            @csrf

           <!-- BARRA DE BUSQUEDA -->
           <h1 style="margin-top: 50px">ESTADO DE EQUIPO</h1>

         <div class="row reex" style="height: auto">


               <div class="container col-sm-6 form-group ali">

              </div>
             <div class="container col-sm-6 form-group"></div>
               <div class="container"><hr class="linea"></div>
               
               <!-- Detalle del Cliente -->
               <div class="container col-12">
                   <h2><strong>Detalle del Cliente</strong></h2>
               </div>
               <!-- Fila 2 ------------------------------------------------------>
           <div class="container col-sm-6 form-group">
                   <label for=""><h2>Cliente</h2></label>
                   <input type="" class="form-control" id="" placeholder="CLIENTE"    value="{{$informacion_retiro[0]->sCliente ?? ''}}" name="cliente">
                       @error('cliente')
                           <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
            </div>
        </select>

                <div class="container col-sm-6 form-group">
                    
                 </div>
            


               <!-- Fila 3 ------------------------------------------------------>
               <div class="container col-sm-6 form-group">
                   <label for=""><h2>Dirección</h2></label>
                   <input type="" class="form-control" id=""  placeholder="DIRECCIÓN" value="{{$informacion_retiro[0]->sDireccion ?? ''}}" name="direccion">
                   @error('direccion')
                   <div class="alert alert-danger">{{ $message }}</div>
                   @enderror
                </div>
               <div class="container col-sm-3 form-group">
                   <label for=""><h2>Comuna</h2></label>
                   <input type="" class="form-control" id="" placeholder="COMUNA" value="{{$informacion_retiro[0]->sComuna ?? ''}}" name="sComuna">
                   @error('sComuna')
                   <div class="alert alert-danger">{{ $message }}</div>
                @enderror
                </div>
               <div class="container col-sm-3 form-group">
                   <label for=""><h2>CUI o Código Sucursal</h2></label>
                   <input type="" class="form-control" id="" placeholder="SC"   value="{{$informacion_retiro[0]->sCui ?? ''}}" name="sCui">
                   @error('sCui')
                   <div class="alert alert-danger">{{ $message }}</div>
                @enderror
                </div>
               <!-- Fila 4 ------------------------------------------------------>


               <div class="container col-sm-6 form-group">
                <label for=""><h2>Ubicación</h2></label>
                <input type="" class="form-control" id=""  placeholder="UBICACION" value="{{@old('ubicacion')}}" name="ubicacion">
                @error('ubicacion')
                <div class="alert alert-danger">{{ $message }}</div>
             @enderror
            </div>
            <div class="container col-sm-3 form-group">
                <label for=""><h2>Piso</h2></label>
                <input type="text" class="form-control" id="" placeholder="PISO" name="piso"  value="{{@old('piso')}}">
                @error('piso')
                <div class="alert alert-danger">{{ $message }}</div>
             @enderror
            </div>
            <div class="container col-sm-3 form-group">
                
             </div>

            

               <div class="container"><hr class="linea"></div><br>
             
               <!-- Detalle de Equipamiento -->
               <div class="container col-12">
                   <h2><strong>Detalle de Equipamiento</strong></h2>
               </div>
               <!-- Fila 5 ------------------------------------------------------>
               <div class="container col-sm-3 form-group">
                   <label for=""><h2>Serie</h2></label>
                   <input type="" class="form-control" id="" placeholder="SERIE"  value="{{$informacion_retiro[0]->sSerie ?? ''}}" name="sSerie">
                   @error('sSerie')
                   <div class="alert alert-danger">{{ $message }}</div>
                @enderror
               </div>
               <div class="container col-sm-3 form-group">
                   <label for=""><h2>Modelo</h2></label>
                   <input type="" class="form-control" id="" placeholder="MODELO"  value="{{$informacion_retiro[0]->sModelo ?? ''}}" name="sModelo">
                   @error('sModelo')
                   <div class="alert alert-danger">{{ $message }}</div>
                @enderror
               </div>
               <div class="container col-sm-3 form-group">
                   <label for=""><h2>Contador B/N</h2></label>
                 <input type="number"  onKeyPress="return soloNumeros(event)" class="form-control" id="" placeholder="CONTADOR B/N" value="{{$informacion_retiro[0]->nContador ?? ''}}" name="nContador">
                 @error('nContador')
                 <div class="alert alert-danger">{{ $message }}</div>
              @enderror
                </div>
               <div class="container col-sm-3 form-group">
                   <label for=""><h2>Contador color</h2></label>
 
                   <input type="number"  onKeyPress="return soloNumeros(event)" class="form-control" id="" placeholder="CONTADOR COLOR" value="{{$informacion_retiro[0]->nContador_color ?? ''}}" name="nContador_color">
                   @error('nContador_color')
                   <div class="alert alert-danger">{{ $message }}</div>
                @enderror
                </div>
               <!-- Fila 6 ------------------------------------------------------>
     
               
               <div class="container col-sm-6 form-group"></div>
               <!-- Fila 7 ------------------------------------------------------>
               
               
               <div class="container"><hr class="linea"></div>
             
               <!-- Accsesorios -->
                       
                   <div class="container col-12">
                   <h2><strong>Accesorios</strong></h2>
                          @if ( session('mensaje_error_accesorios') )
                           <div class="alert alert-danger">{{ session('mensaje_error_accesorios') }}</div>
                        @endif
                   </div>
                           
                   <!-- FILA 8.1 -->
                   <div class="col-md-3 form-group checkbox">
                       <input type="checkbox" id="bandeja_adicional" name="bandeja_adicional"  value="si" {{ (! empty(old('bandeja_adicional')) ? 'checked' : '') }}>
                       <label for="bandeja_adicional" style="margin-top: auto"><h3>Bandeja adicional</h3</label>
                   </div>
                   <div class=" col-sm-3 form-group">
                       <input type="checkbox" id="mueble" name="mueble"  value="si" {{ (! empty(old('bandeja_adicional')) ? 'checked' : '') }}>
                       <label for="mueble"><h3>Mueble</h3></label>
                   </div>
                   <div class=" col-sm-3 form-group">
                       <input type="checkbox" id="kit_lector" name="kit_lector"  value="si" {{ (! empty(old('kit_lector')) ? 'checked' : '') }}>
                       <label for="kit_lector"><h3>Kit lector</h3></label>
                   </div>
                   <div class=" col-sm-3 form-group">
                       <input type="checkbox" id="memoria_sd" name="memoria_sd"   value="si" {{ (! empty(old('memoria_sd')) ? 'checked' : '') }}>
                       <label for="memoria_sd"><h3>Memoria SD</h3></label>
                   </div>
                   <!-- FILA 8.2 -->
                   <div class="col-sm-3 form-group checkbox">
                       <input type="checkbox" id="cable_red" name="cable_red"   value="si" {{ (! empty(old('cable_red')) ? 'checked' : '') }}>
                       <label for="cable_red"><h3>Cable red</h3></label>
                   </div>
                                   
                   <div class="col-sm-3 form-group checkbox">
                       <input type="checkbox" id="cable_poder" name="cable_poder"   value="si" {{ (! empty(old('cable_poder')) ? 'checked' : '') }}>
                       <label for="cable_poder"><h3>Cable de poder</h3></label>
                   </div>
                   <div class="col-sm-3 form-group checkbox"></div>
                   <div class="col-sm-3 form-group checkbox"></div>
                        
               <div class="container"><hr class="linea"></div>
                       
             <div class="container">
                <input type="file" id="cargafoto1" name="cargafoto1"><br>
             </div>

                       
               <div class="container"><hr class="linea"></div>
                       
               <div class="container col-sm-12 form-group checkbox">
                   <label for="cambio"> <h3>Observaciones</h3></label>
                   <textarea class="form-control" id="observaciones" name="observaciones" rows="4"></textarea>
               </div>
               
               <div class="container"><hr class="linea"></div>
                       
               
               <div class="container form-group">
               
                <button class="btn btn-success float-sm-right guardar" style="margin-right:10px;" type="submit">GUARDAR</button>
              </div>
   
         </div>
        </form>
       </div>
     </div>

<!-- FIN BARRA DE BUSQUEDA -->

    <!-- MODAL IMAGENES -->
    <div class="modal fade" id="modal_historial_retiros" role="dialog">
      <div class="modal-dialog  modal-lg">
        <div class="modal-content">
          <div class="modal-header">
              <h1 style="margin-top: 50px">CARGA DE IMAGEN DE RETIRO</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 IMAGEN DE RETIRO -->
                                                    
                                                        <div class="row reex" style="height: auto">
                                                            <input type="text" style="display:none" name="check_listRetiro" id="" value="">


                                                            <div class="container col-12" style="margin-top: 10px">
                                                                <h2><strong>Adjunte la imagen que se solicita a continuación</strong></h2>
                                                            </div>
                                                        
                                                            <!-- 1 -->
                                                            <div class="container col-sm-12 form-group" style="margin-top: 10px">
                                                            <label for="" class="espacio_carga_img"><h2>Fotografía de la página de estado</h2></label>
                                                                <input type="file" id="cargafoto1" name="cargafoto1">
                                                            </div>
                                                            
                                                        </div>
                                                        
                                                        <!-- FIN CARGA DE IMAGEN DE RETIRO -->
                                                    </div>
                                                    
                                                    
                                                    <div class="container form-group">
                                                            <br>
                                                            <button class="btn btn-cancelar float-sm-right guardar btn-rechazar" type="button">CANCELAR</button>
                                                            <button class="btn btn-subir-img float-sm-right btn-conf"  style="margin-right:10px;" type="submit">SUBIR IMÁGENES</button>
                                                        </div>
                                    </form>
                                   
                                   
                               </div>
                              
               
        </div>
      </div>
    </div>
 </div>


@endsection
 <script>
    var lineas = [];


function borrar(){
        
        // Creamos nuestro canvas
        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);
  
 
  
  
  //$("#formCanvas").on("submit", function(e){

 
 // });
  
  
  
    });
    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('guardarfirmaretiro') }}",
          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");
          });
     }

 $(document).ready(function(){

      //////////////////////////////////////////////////////
      $("#formuploadajax").on("submit", function(e){
            e.preventDefault();
            var f = $(this);
            var formData = new FormData(document.getElementById("formuploadajax"));
            formData.append("dato", "valor");
            //formData.append(f.attr("name"), $(this)[0].files[0]);
            $.ajax({
				url:"{{ route('save.imagenchecklistRetiro') }}",
				type: "post",
                dataType: "html",
                data: formData,
                cache: false,
                contentType: false,
	     		processData: false,
				 success: function(response) { 

					 console.log(response);


					 $("#mensaje-text").text("Imagenes Guardadas");
					 alert("imagenes guardadas");
                       $("#modal_historial_retiros").modal('hide');
				 }
            })
                .done(function(res){
                    $("#mensaje").html("Respuesta: " + res);
                });
        });
                   
    

   $('.asignarimagen').click(function() {
         
         $("#modal_historial_retiros").modal('show');
    });

    //funcion para cambiar los tres estados
    $("#mueble").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'mueble');
    });
    $("#cable_poder").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'cable_poder');
    });
    $("#cable_red").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'cable_red');
    });
    $("#memoria_sd").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'memoria_sd');
    });
    $("#kit_lector").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'kit_lector');
    });
    $("#equipo_ensamblado").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'equipo_ensamblado');
    });
    $("#negarse_firma").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'negarse_firma');
    });
    $("#bandeja_adicional").data('checked', 0).on('click', function() {
      el = $(this);
      tres_estados(el,'bandeja_adicional');
    });
 
    
    
 })

 //funciones individuales

 function tres_estados(el, id_chec) {

switch (el.data('checked')) {

	case 0: //cehckeado
		el.data('checked', 1);
		el.prop('indeterminate', false);
		el.prop('checked', true);

		var valor2 = id_chec;

		var valor =$("#observaciones").text();



		$("#observaciones").text(valor.replace(" sin "+id_chec+',',""));

		//  console.log('true');
		break;


	case 1:
		el.data('checked', 2);
		el.prop('indeterminate', true);
		el.prop('checked', true);

		var valor2 = id_chec;

		var valor =$("#observaciones").text();

		valor+=" sin "+valor2+',';

		$("#observaciones").text(valor);



		//console.log('null');
		$("#" + id_chec).val("no");

	
		break;


	default:
		el.data('checked', 0);
		el.prop('indeterminate', false);
		el.prop('checked', false);
		//console.log('false');

		var valor2 = id_chec;

		var valor =$("#observaciones").text();


		$("#observaciones").text(valor.replace(" sin "+id_chec+',',""));
}
}
function soloNumeros(e){

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