@extends('layouts.app')

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

@section('content')
<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="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title">Formulario 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') }}" method="POST" onsubmit="createform(this); return false">
			<input type="hidden" name="action" value="add">
			<input type="hidden" name="hora_entrada" value="{{ date('h:i:s A') }}">
			<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">
				</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" >
                        <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"  onchange="json_inputs()" 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}}">
								{{$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"  onchange="json_inputs()" 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}}">
								{{$m->motivo}}
							</option>
						@empty
						@endforelse

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

					</select>
				</div>
				<div class="col-4">
					<label for="">Sedes</label>
					<select   id="dynamic_selects"  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}}" 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"> 
				</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" value="si" required=""  >
					No <input type="radio" name="herramienta" id="herramienta" value="no" required="" >
				</div>
			</div>
			<hr>
			<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>
	          <div class="row">
	            <div class="col-12 text-center"> 
	              <a href="#" onclick=" return false" class="btn btn-primary tomarimg"><i class="fa fa-camera" aria-hidden="true"></i> Tomar imagen</a>
	            </div>
	          </div>
			<div class="row mt-2">
				<div class="col-12 text-center">
					<button class="btn btn-primary"><i class="icon-floppy-disk "></i> Guardar</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 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">
              <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>
        </div>
      </div>
    </div>
  </div>
	@section('scripts')
		<script src="{!! asset('assets/views_functions/visitas.js') !!}"></script>
		<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));
		    }
		    function sedes_change(i){
		    	$('#oficinas_id').empty().append(`<option value="0" data-name="-"  data-id="0" >Seleccionar Oficina..</option>`).selectpicker('refresh');
		    	if ($(i).find(':selected').attr('data-json') !== '') {
		    		let jsons = $(i).find(':selected').attr('data-json');
		    		$.each(JSON.parse(jsons), function(index, val) {
		    			$('#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