@extends('layouts.app')

@section('title',"Actualizar visita")

@section('content')
@if (session('update'))
    <div class="alert alert-success">
        {{ session('update') }}
    </div>
@endif
<div class="alert alert-secundary p-2 mb-0"><a href="{{ url('visitas') }}"><i class="icon-arrow-left13"></i> Volver al listado de visitas</a></div>
<div class="response-data">
	
</div>
<div class="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title">Actualizar Visita </h5>
		<div class="header-elements">
			<div class="list-icons">
        		<a class="list-icons-item" data-action="collapse"></a>
        		<a class="list-icons-item" data-action="reload"></a>
        		<a class="list-icons-item" data-action="remove"></a>
        	</div>
    	</div>
	</div>	
	<div class="card-body">
		<br/>
		<form action="{{ url('visitas/'.$data['visita']->id) }}" method="POST" onsubmit="updatingform(this); return false">
			<input type="hidden" name="action" value="add">
			<input type="hidden" id="items_json" name="items_json">

			<div class="row">
				<div class="col-4">
					<label for="">Nombre y apellido</label>
					<input type="text" class="form-control" name="nombre" required="" placeholder="Escribe tu nombre y apellido" value="{{ $data['visita']->nombre }}">
				</div>
				<div class="col-4">
					<label for="">Dni</label>
					<div class="input-group">
                        <input type="text" class="form-control" name="dni" id="tipe_c" placeholder="dni:10xxxxxx"  value="{{ $data['visita']->dni }}">
                        <span class="input-group-append pr-0 pl-0">
							<a href="#" class="btn btn-info btn-sm" onclick="search_document(this); return false"><i class="icon-eye"></i></a>
                        </span>
                    </div>
				</div>
				<div class="col-4">
					<label for="">Entidad</label>
					<select name="entidad_id"   id="dynamic_selects"  data-name="entidad" class="form-control dynamic_selects selectpicker text-uppercase select_json" data-live-search="true"  required="">
						<option value="0" data-name="-"  data-id="0" >Seleccionar..</option>
						@forelse($data['entidad'] as $e)

							<option value="{{$e->id}}" data-id="{{$e->id}}" data-name="{{$e->nsocial}}" onchange="json_inputs()" {{($items_json->entidad->id == $e->id) ? 'selected' : ''}} >
								{{$e->nsocial}}
							</option>
						@empty
						@endforelse
					</select>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-4">
					<label for="">Motivo</label>
					<select name="motivos_id"   id="dynamic_selects"  data-name="motivo"   class="form-control dynamic_selects selectpicker text-uppercase select_json" data-live-search="true" required="" >
						<option value="0" data-name="-"  data-id="0" >Seleccionar..</option>
						@forelse($data['motivos'] as $m)
							<option value="{{$m->id}}"  data-id="{{$m->id}}" data-name="{{$m->motivo}}" onchange="json_inputs()"  {{($items_json->motivo->id == $m->id) ? 'selected' : ''}}>
								{{$m->motivo}}
							</option>
						@empty
						@endforelse

					</select>	
				</div>
				<div class="col-4">
					<label for="">Empleado</label>
					<select name="empleados_id"   id="dynamic_selects"  data-name="empleado" onchange="json_inputs()"   class="form-control dynamic_selects selectpicker text-uppercase select_json" data-live-search="true"  required="">
						<option value="0" data-name="-"  data-id="0" >Seleccionar..</option>
						@forelse($data['empleados'] as $e)
							<option value="{{$e->id}}"  data-id="{{$e->id}}" data-name="{{$e->nombre}}"  {{($items_json->empleado->id == $e->id) ? 'selected' : ''}}>
								{{$e->nombre}}
							</option>
						@empty
						@endforelse

					</select>
				</div>
				<div class="col-4">

					<label for="">Sedes</label>
					<select   id="sedes_select"  onchange="json_inputs(); sedes_change(this);" data-name="sede"  class="form-control dynamic_selects selectpicker text-uppercase select_json" data-live-search="true" >
						<option value="0" data-name="-"  data-id="0" >Seleccionar Sede..</option>
						@forelse($data['sedes'] as $s)
							<option data-id="{{$s->id}}"   {{($items_json->sede->id == $s->id) ? 'selected' : ''}} data-json="{{$s->items_json}}" data-name="{{$s->nombre}}"  value="{{$s->id}}" >
								{{$s->nombre}}
							</option>
						@empty
						@endforelse

					</select>
					
				</div>
			</div>
			<hr>
			<div class="row">
		
				<div class="col-6">
					<input type="text" class="form-control" placeholder="Lugar de reunion" name="lugar" value="{{ $data['visita']->lugar }}"> 
				</div>
				<div class="col-6">
					<select name="oficinas_id"   id="oficinas_id"  onchange="json_inputs()" data-name="oficina"  class="form-control dynamic_selects selectpicker text-uppercase select_json" data-live-search="true" >
						<option value="0" data-name="-"  data-id="0" >Seleccionar Oficina..</option>
			
						

					</select>
				</div>
		
			</div>
			<div class="row mt-2">
				<div class="col-12 text-center">
					<label for=""><b>Seleccione si tiene una herramienta</b></label>
				</div>
			</div>
			<div class="row ">
				<div class="col-12 text-center">
					Si <input type="radio" name="herramienta" id="herramienta" {{(count($data['herramientas']) > 0) ? 'checked' : '' }} value="si" required=""  >
					No <input type="radio" name="herramienta" id="herramienta" {{(count($data['herramientas']) <= 0 ) ? 'checked' : '' }}  value="no" required="" >
				</div>
			</div>
			<hr>
			@forelse($data['herramientas'] as $h)
				<div class="row text-center mb-3 mt-3" id="codenv{{$h->id}}" >
					<input type="hidden" name="idherramienta[]" value="{{$h->id}}">
					<div class="col-4  ">
						<label for=""><b>Herramienta de  trabajo</b></label>
						<input type="text" id="htrabajo" placeholder="herramienta de trabajo" class="form-control" value="{{$h->nombre}}" name="htrabajo[]">
					</div>
					<div class="col-4  ">
						<label for=""><b>Marca</b></label>
						<input type="text" id="mtrabajo" placeholder="Marca" class="form-control" value="{{$h->marca}}" name="mtrabajo[]">
					</div>
				
					<div class="col-2  ">
						<label for=""><b>Serial</b></label>
						<input type="text" id="strabajo" placeholder="serial" class="form-control" value="{{$h->serial}}" name="strabajo[]">
					</div>
					<div class="col-2 ">
						<label><b>Accion</b></label>
						<div>
							<a href="#" id="delete_htrabajobd" data-url="{{ url('visitas/herra&'.$h->id) }}" data-id="{{$h->id}}" class="fn_delete" style="color: red;"> <i style="font-size: 30px;" class="icon-cross3 "></i></a>
						</div>
					</div>
				</div>
			@empty

			@endforelse
			<div class="htrabajos text-center text-uppercase" style="display: none;">
				<a href="#" class="text-center" id="addherramienta"><i class="icon-plus-circle2 "></i></a>
				<hr>
				<div class="content-htrabajo mb-2">
					
				</div>
				<hr>
			</div>

			  <hr>
	          <div class="row col-imagenes" style="display: none;">
	            <div class="col-12 text-center text-uppercase font-weight-light text-primary">
	               <span>1 imagen tomada para guardar</span>
	            </div>
	          </div>
              	@if(!empty($data['visita']->src_foto))
                  <div class="row col-imagenes" >
                    <div class="col-12 text-center text-uppercase font-weight-light text-primary">
                       <span>Este  registro tiene una imagen, presione el boton para verla </span>
                    </div>
                  </div>
               	@endif
               <div class="row">
                <div class="col-12 text-center"> 
                  <a href="#" onclick="return false" class="btn btn-primary updateimg"><i class="fa fa-camera" aria-hidden="true"></i> Actualizar imagen</a>
                </div>
              </div>
			<div class="row mt-2">
				<div class="col-12 text-center">
					<button class="btn btn-primary"><i class="icon-rotate-cw2 "></i> Actualizar</button>
				</div>
			</div>
		</form>
	</div>
</div>
  <div class="modal fade" id="fotomodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Foto update modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="row box-1" style="display: none;">
              <div class="col-12 text-center">
                 <video id="video" width="640" height="480" autoplay></video>
                <div class="row">
                    <div class="col-12 text-center">
                      <button class="btn btn-primary" id="snap"><i class="fa fa-camera-retro" aria-hidden="true"></i> Capture</button>
                    </div>
                 </div>
              </div>
            </div>
           <div class="row box-2" style="display: none;">
              <div class="col-12 text-center">
                <canvas id="canvas" width="640" height="480"></canvas>
                  <div class="row">
                    <div class="col-12 text-center">
                      <button class="btn btn-primary" id="return"><i class="fa fa-camera-retro" aria-hidden="true"></i> Tomar nuevamente o eliminar</button>
                    </div>
                 </div>
              </div>
           </div>

           <br>
           <div class="row  box-3">
               <div class="col-12 text-center">
                  <img src="{!! asset('storage/Visitas/'.$data['visita']->src_foto) !!}" alt="">
                  <div class="row mt-2">
                    <div class="col-12 text-center">
                       <button class="btn btn-primary btn-retoma" id="btn-retoma"><i class="fa fa-camera-retro" aria-hidden="true"></i> Tomar nuevamente o actualizar</button>
                    </div>
                  </div>
               </div>
           </div>
        </div>
      </div>
    </div>
  </div>
	@section('scripts')
		<script src="{!! asset('assets/views_functions/visitas.js') !!}"></script>
		<script>
			let oficina_name = '';
			let oficina_id ='';
		</script>
		@if(!empty($items_json->oficina->id))
			<script>
				oficina_name = "{{$items_json->oficina->name}}";
				oficina_id = "{{$items_json->oficina->id}}";
			</script>
		@endif
		<script>

			json_inputs();
			function json_inputs(){
		        let data_json = {};

		        $( ".select_json" ).each(function( index, element ) {
		          if ($(this).attr('data-name') !== undefined) {
		            let tipe =  $(this).attr('data-name');
		            data_json[tipe] = {
		              id:$(this).find(':selected').attr('data-id'),
		              name: $(this).find(':selected').attr('data-name'),
		            };
		          }
		        });
		        $('#items_json').val(JSON.stringify(data_json));
		    }
		   sedes_change();
		   function sedes_change(){
		    	$('#oficinas_id').empty().append(`<option value="0" data-name="-"  data-id="0" >Seleccionar Oficina..</option>`).selectpicker('refresh');
		    	if ($('#sedes_select').find(':selected').attr('data-json') !== '') {
		    		let jsons = $('#sedes_select').find(':selected').attr('data-json');
		    		$.each(JSON.parse(jsons), function(index, val) {

		    			if (oficina_id == val.id) {
		    				$('#oficinas_id').append(`
		    				<option data-id="${val.id}"  data-name="${val.nombre}" value="${val.id}" selected="">
								${val.nombre}
							</option>
		    				`);
		    			}else{
		  
			    			$('#oficinas_id').append(`
			    				<option data-id="${val.id}"  data-name="${val.nombre}" value="${val.id}">
									${val.nombre}
								</option>
			    			`);
		    			}
		    		});
		    		$('#oficinas_id').selectpicker('refresh');

		    	}else{
		    		$('#oficinas_id').empty().append(`<option value="0" data-name="-"  data-id="0" >Seleccionar Oficina..</option>`).selectpicker('refresh');

		    	}
		    }
		   
		    
		</script>	
	@endsection
@endsection