@extends('templates.default')

@section('css')
{{ HTML::style('css/datepicker.css') }}
{{ HTML::style('css/lightbox.css') }}
<style type="text/css">
	.text-danger{
		color:red;
	}
	.eliminar-contacto{
		padding-top: 8px;
	}
	.grayscale{
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
	}
	#map-canvas{
		width:100%;
		height:500px;
	}
	
	
	
	.fileUpload {
	position: relative;
	overflow: hidden;
	}
	
	.fileUpload input.upload {
		position: absolute;
		top: 2px;
		right: 0;
		margin: 0;
		padding: 0;
	/* 	font-size: 20px; */
		cursor: pointer!important;
	 	width:108px;
		height:100%;
		opacity: 0;
		filter: alpha(opacity = 0);
	}
	.padding-left-0{
		padding-left:0;
	}
	.label-imagen{
		display:block;
		border-bottom:1px solid #ccc;
	}
</style>
@endsection

@section('nav')
<li><a href="{{ URL::to('/') }}">Home</a></li>
<li><a href="{{ URL::to('persona') }}">Persona</a></li>
<li>Registrar</li>
@endsection

@section('content')
@if($errors->count() > 0)
<div class="col-md-12">
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <ul class="list-unstyled">
        @foreach($errors->all('<li>:message</li>') as $message)
            {{ $message }}
        @endforeach
        </ul>
    </div>
</div>
@endif
<form class="form-horizontal" role="form" method="POST" enctype="multipart/form-data">
    {{ Form::token() }}
    {{ $form->id }}
    {{ Form::hidden('tipo_contacto', 'PER') }}
    {{ Form::hidden('contactos_delete', '') }}
    {{ Form::hidden('destinos_delete', '') }}
    <div class="col-md-8 col-sm-10">
	    <div class="form-group">
	      <div class="col-sm-4">
	      	  <label>Estado</label>
	          {{ $form->estado }}
	      </div>
	    
	      <div class="col-sm-4">
	      	  <label>Tipo</label>
	          {{ $form->tipo }}
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <div class="col-sm-6">
		      <label>Razón Social</label>
	          {{ $form->razon_social }}
	      </div>
	    
	      <div class="col-sm-6">
	      	  <label>Nombre Comercial</label>
	          {{ $form->nombre_comercial }}
	      </div>
	    </div>
	    
	    <div class="form-group contenedor_identificacion">
	      <div class="col-sm-6" id="contenedor_cedula">
	       	  <label>Cédula</label>
	          {{ $form->cedula }}
	      </div>
	    
	      <div class="col-sm-6" id="contenedor_ruc">
	      	  <label>Ruc</label>
	          {{ $form->ruc }}
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <div class="col-sm-6">
		      <label>Email</label>
	          {{ $form->email }}
	      </div>
	    
	      <div class="col-sm-6">
		      <label>Teléfonos</label>
	          {{ $form->telefonos }}
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <div class="col-sm-12">
	      	  <label>Direccion</label>
	          {{ $form->direccion }}
	      </div>
	    </div>
    </div>


	<div class="col-md-12 col-sm-12"><hr /></div>
	
	<div class="col-sm-12" role="tabpanel">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs" style="background-color: #fafafa;" role="tablist">
			<li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">Datos Generales</a></li>
			<li role="presentation"><a class="@if(Session::has('contactos_errors')) text-danger @endif" href="#contacto" aria-controls="contacto" role="tab" data-toggle="tab">@if(Session::has('contactos_errors'))* @endif Personas de Contacto</a></li>
			<li role="presentation"><a class="@if(Session::has('destinos_errors')) text-danger @endif" href="#destino" aria-controls="destino" role="tab" data-toggle="tab">@if(Session::has('destinos_errors'))* @endif Destinos</a></li>
			<li role="presentation" class="info_chofer"><a href="#imagenes" aria-controls="imagenes" role="tab" data-toggle="tab">Información del Chofer</a></li>
		</ul>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="general">
				<div class="col-md-12 col-sm-12">
					
					@if(Session::get('nombre_usuario') != 'transportista')
				    <div class="form-group">
				        <label class="col-sm-5">
				            {{ $form->es_cliente }}
				            Es Cliente
				        </label>
				    </div>
				    @endif
				    
				    @if(Session::get('nombre_usuario') != 'transportista')
				    <div class="form-group">
				        <label class="col-sm-5">
				            {{ $form->es_empleado }}
				            Es Empleado 
				        </label>
				    </div>
				    @endif
				    
				    <div class="form-group">
				        <label class="col-sm-12">
				            {{ $form->es_agencia_naviera }}
				            Es L&iacute;nea Naviera
				        </label>
				    </div>
				    
				    <div class="form-group">
				        <label class="col-sm-12">
				            {{ $form->es_agencia_carga }}
				            Es Agencia de Carga/Consolidadora
				        </label>
				    </div>
				    
				    <div class="form-group">
				        <label class="col-sm-12">
				            {{ $form->es_transportista }}
				            Es Transportista
				        </label>
				    </div>
				    
				    @if(Session::get('nombre_usuario') != 'transportista')
				    <div class="form-group">
				        <label class="col-sm-12">
				            <!--input type="checkbox" name="es_funcionario_aduana"  value="{{ isset($persona)?$persona->es_funcionario_aduana:Input::old('es_funcionario_aduana') }}" /-->
				            {{ $form->es_funcionario_aduana }}
				            Es Funcionario de Aduana
				        </label>
				    </div>
				    @endif
				    
				    @if(Session::get('nombre_usuario') != 'transportista')
				    <div class="form-group">
				        <label class="col-sm-12">
				            {{ $form->es_aseguradora }}
				            Es Aseguradora
				        </label>
				    </div>
				    @endif
				    
				    <div class="form-group">
				        <label class="col-sm-12">
				            {{ $form->es_chofer }}
				            Es Chofer
				        </label>
				    </div>
				    
				    
			    </div>
		    </div>
			<!-- contactos -->
		    <div role="tabpanel" class="tab-pane" id="contacto">
		    	<table class="table table-bordered table-condensed">
		    		<thead>
		    			<tr>
		    				<th></th>
		    				<th>Notificar</th>
		    				<th width="90">Sufijo</th>
		    				<th>Cargo</th>
		    				<th>Area</th>
		    				<th>Nombres</th>
		    				<th>Email</th>
		    				<th>Convencional</th>
		    				<th>Celular</th>
		    				<th>Trabajo</th>
		    			</tr>
		    		</thead>
		    		<tbody id="contenedor-tr-contacto">
		    					    			@foreach($form->contactos_lista as $contacto)
		    			<tr>
		    				<td style="vertical-align: middle;">
		    					<a class="btn btn-link btn-xs eliminar-contacto" href="#" data-id="{{ $contacto->id_contacto }}"><span class="glyphicon glyphicon-trash"></span></a>
		    					{{ $contacto->contacto_id }}
		    				</td>
		    				<td style="text-align: center; vertical-align: middle;">
		    					{{ $contacto->notificar }}
		    				</td>
		    				<td >
		    					
		    					{{ $contacto->sufijo }}
		    				</td>
		    				<td>
		    					{{ $contacto->cargo }}
		    					{{ $errors->{'contacto_'.$it}->first('cargo', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td>
		    					{{ $contacto->area }}
		    					{{ $errors->{'contacto_'.$it}->first('area', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td width="300">
		    					{{ $contacto->nombres }}
		    					{{ $errors->{'contacto_'.$it}->first('nombres', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td width="200">
		    					{{ $contacto->email }}
		    					{{ $errors->{'contacto_'.$it}->first('email', '<span class="text-danger">:message</span>') }}
	    					</td>
		    				<td>
		    					{{ $contacto->convencional }}
		    					{{ $errors->{'contacto_'.$it}->first('convencional', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td>
		    					{{ $contacto->celular }}
		    					{{ $errors->{'contacto_'.$it}->first('celular', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td>
		    					{{ $contacto->trabajo }}
		    					{{ $errors->{'contacto_'.$it}->first('trabajo', '<span class="text-danger">:message</span>') }}
		    				</td>
		    			</tr>
		    					    			@endforeach
		    		</tbody>
		    		<tfoot>
		    			<tr>
		    				<td colspan="10">
		    					<a id="agregar-contacto" class="btn btn-link btn-sm" href="#"><i class="glyphicon glyphicon-plus"></i>&nbsp;Agregar Contacto</a>
		    				</td>
		    			</tr>
		    		</tfoot>
		    	</table>
		    </div>
			<!-- fin contactos -->
			<!-- destinos -->
		    <div role="tabpanel" class="tab-pane" id="destino">
		    	<table class="table table-bordered table-condensed">
		    		<thead>
		    			<tr>
		    				<th></th>
		    				<th width="300">Nombre</th>
		    				<th width="200">Email</th>
		    				<th>Convencional</th>
		    				<th>Celular</th>
		    				<th>Trabajo</th>
		    				<th>Direcci&oacute;n</th>
		    				<th>Ubicaci&oacute;n</th>
		    			</tr>
		    		</thead>
		    		<tbody id="contenedor-tr-destino">
		    					    			@foreach($form->destinos_lista as $destino)
		    			<tr class="tr_{{$it_destino}}">
		    				<td style="vertical-align: middle;">
		    					<a class="btn btn-link btn-xs eliminar-destino" href="#" data-id="{{ $destino->id_destino }}"><span class="glyphicon glyphicon-trash"></span></a>
		    					{{ $destino->destino_id }}
		    				</td>
		    				<td width="300">
		    					{{ $destino->nombre_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('nombre', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td width="200">
		    					{{ $destino->email_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('email', '<span class="text-danger">:message</span>') }}
	    					</td>
		    				<td>
		    					{{ $destino->convencional_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('convencional', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td>
		    					{{ $destino->celular_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('celular', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td>
		    					{{ $destino->trabajo_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('trabajo', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td>
		    					{{ $destino->direccion_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('direccion', '<span class="text-danger">:message</span>') }}
		    				</td>
		    				<td class="text-center">
		    					{{ $destino->latitud_destino }}
		    					{{ $destino->longitud_destino }}
		    					{{ $errors->{'destino_'.$it_destino}->first('latitud', '<span class="text-danger">:message</span>') }}
		    					{{ $errors->{'destino_'.$it_destino}->first('longitud', '<span class="text-danger">:message</span>') }}
		    					<a class="btn btn-link btn-xs btn-agregar-ubicacion @if(!$destino->tieneUbicacion) grayscale @endif" href="javascript:;" onclick="mostrarMapa(this);" data-tr="tr_{{$it_destino}}"><img src="/images/icons/map_marker.png" width="28" /></a>
		    				</td>
		    			</tr>
		    					    			@endforeach
		    		</tbody>
		    		<tfoot>
		    			<tr>
		    				<td colspan="10">
		    					<a id="agregar-destino" class="btn btn-link btn-sm" href="#"><i class="glyphicon glyphicon-plus"></i>&nbsp;Agregar Destino</a>
		    				</td>
		    			</tr>
		    		</tfoot>
		    	</table>
		    </div>
			<!-- fin destinos -->
			
			
			<div role="tabpanel" class="tab-pane" id="imagenes">
				<br />
				<div class="form-group">
			    	<div class="col-sm-3">
			    		<label>Fecha de Vencimiento de Licencia: </label>
			        	{{ $form->fecha_vencimiento_licencia }}
			      	</div>
			  	</div><br/>
				<div class="row">
					<!-- imagen licencia -->
					<div class="col-sm-4">
						<div class="panel panel-default">
  							<div class="panel-heading">
								<label class="">Imagen de Licencia:</label>
  							</div>
  							<div class="panel-body text-center">
								@if( $form->path_imagen_licencia_txt )
									<a href="{{ URL::asset('/images/choferes/licencias/'.$form->path_imagen_licencia_txt) }}" data-lightbox="image-1" data-title=" <br/> Imagen de Licencia"> 
										<img class="img-thumbnail" width="140" src="{{ URL::asset('/images/choferes/licencias/thumbs/'.$form->path_imagen_licencia_txt) }}">
									</a> 
								@else
									<div class="imagen-vacia text-muted">
										<span class="fa fa-circle-o"></span>&nbsp;<span class="fa fa-circle-o"></span>&nbsp;<span class="fa fa-circle-o"></span>
									</div>
								@endif
							</div>
							<div class="panel-footer">
								<div class="fileUpload">
									@if( $form->path_imagen_licencia_txt )
										<a target="_blank" class="btn btn-link btn-sm text-success" href="{{ URL::asset('/images/choferes/licencias/'.$form->path_imagen_licencia_txt) }}">
											<span class="fa fa-arrow-circle-o-down"></span>&nbsp;Descargar
										</a>
									@endif
									<a class="btn btn-default btn-sm btn-link pull-right" href="javascript:;">
										<span class="fa fa-upload" aria-hidden="true"></span>&nbsp;Subir imagen
										{{ $form->path_imagen_licencia }}
									</a>
								</div>
							</div>
						</div>
					</div>
					<!-- fin imagen licencia -->
					<!-- imagen cedula -->
					<div class="col-sm-4">
						<div class="panel panel-default">
  							<div class="panel-heading">
								<label class="">Imagen de Cédula:</label>
  							</div>
  							<div class="panel-body text-center">
								@if( $form->path_imagen_cedula_txt )
									<a href="{{ URL::asset('/images/choferes/cedulas/'.$form->path_imagen_cedula_txt) }}" data-lightbox="image-1" data-title=" <br/> Imagen de Cédula"> 
										<img class="img-thumbnail" width="140" src="{{ URL::asset('/images/choferes/cedulas/thumbs/'.$form->path_imagen_cedula_txt) }}">
									</a> 
								@else
									<div class="imagen-vacia text-muted">
										<span class="fa fa-circle-o"></span>&nbsp;<span class="fa fa-circle-o"></span>&nbsp;<span class="fa fa-circle-o"></span>
									</div>
								@endif
							</div>
							<div class="panel-footer">
								<div class="fileUpload">
									@if( $form->path_imagen_cedula_txt )
										<a target="_blank" class="btn btn-link btn-sm text-success" href="{{ URL::asset('/images/choferes/cedulas/'.$form->path_imagen_cedula_txt) }}">
											<span class="fa fa-arrow-circle-o-down"></span>&nbsp;Descargar
										</a>
									@endif
									<a class="btn btn-default btn-sm btn-link pull-right" href="javascript:;">
										<span class="fa fa-upload" aria-hidden="true"></span>&nbsp;Subir imagen
										{{ $form->path_imagen_cedula }}
									</a>
								</div>
							</div>
						</div>
					</div>
					<!-- fin imagen cedula -->
					<!-- imagen papel de votacion -->
					<div class="col-sm-4">
						<div class="panel panel-default">
  							<div class="panel-heading">
								<label class="">Imagen de Papel Votación:</label>
  							</div>
  							<div class="panel-body text-center">
								@if( $form->path_imagen_papel_votacion_txt )
									<a href="{{ URL::asset('/images/choferes/pvotaciones/'.$form->path_imagen_papel_votacion_txt) }}" data-lightbox="image-1" data-title=" <br/> Imagen Papel de Votación"> 
										<img class="img-thumbnail" width="140" src="{{ URL::asset('/images/choferes/pvotaciones/thumbs/'.$form->path_imagen_papel_votacion_txt) }}">
									</a> 
								@else
									<div class="imagen-vacia text-muted">
										<span class="fa fa-circle-o"></span>&nbsp;<span class="fa fa-circle-o"></span>&nbsp;<span class="fa fa-circle-o"></span>
									</div>
								@endif
							</div>
							<div class="panel-footer">
								<div class="fileUpload">
									@if( $form->path_imagen_papel_votacion_txt )
										<a target="_blank" class="btn btn-link btn-sm text-success" href="{{ URL::asset('/images/choferes/pvotaciones/'.$form->path_imagen_papel_votacion_txt) }}">
											<span class="fa fa-arrow-circle-o-down"></span>&nbsp;Descargar
										</a>
									@endif
									<a class="btn btn-default btn-sm btn-link pull-right" href="javascript:;">
										<span class="fa fa-upload" aria-hidden="true"></span>&nbsp;Subir imagen
										{{ $form->path_imagen_papel_votacion }}
									</a>
								</div>
							</div>
						</div>
					</div>
					<!-- fin imagen papel de votacion -->
				</div>
			</div>
			
	    </div>
    </div>
    
    <div class="col-sm-12">
        <button type="submit" class="btn btn-success">
            <span class="glyphicon glyphicon-floppy-disk"></span>
            Guardar
        </button>
    </div>
<div class="clearfix"></div>    
<div class="col-md-12"><hr/></div>  
</form>
<div id="modalMapa" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="cell text-center">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="semibold text-primary">Click para agregar ubicacion</h4>
                </div>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <div id="map-canvas"></div>
            </div>
            <div class="modal-footer" style="margin-top:0;">
            	<!--<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>-->
                <button type="button" class="btn btn-success" onclick="guardarUbicacionMapa();">Guardar Ubicacion</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
@endsection

@section('js-footer')
{{ HTML::script('js/contacto.js') }}
{{ HTML::script('js/destino.js') }}
{{ HTML::script('https://maps.googleapis.com/maps/api/js?key=AIzaSyBS53fWEJGaH9ZaAzzZRjDXyyQMbgQWOUw') }}
{{ HTML::script('js/mapa.js') }}
{{ HTML::script('js/bootstrap-datepicker.js') }}  
{{ HTML::script('js/lightbox.js') }}
<script type="text/javascript">
	var it = 0;
	var it_destino = 0;
	@if($it > 0)
		it = '{{ $it }}';
	@endif
	@if($it_destino > 0)
		it_destino = '{{ $it_destino }}';
	@endif
    $(function(){
        
        $('#id_tipo').bind('change',function(){
            if ($('#id_tipo').val() == 'N'){
               $('#contenedor_cedula').show(); 
               $('#contenedor_ruc').show();
            }
            if ($('#id_tipo').val() == 'J'){
               $('#contenedor_cedula').hide();
               $('#contenedor_ruc').show();
            }
        });
        $("#id_tipo").trigger("change");
        
        //para agregar un contacto en la tabla
        $('#agregar-contacto').click(function(e){
        	e.preventDefault();
        	var tr = crearContactoForm(it);
        	it++;
        	$('#contenedor-tr-contacto').append(tr);
        });
        //para eliminar un contacto de la tabla
        $('.eliminar-contacto').click(function(e){
        	e.preventDefault();
        	eliminarContactoForm($(this));
        });

        //para agregar un destino en la tabla
        $('#agregar-destino').click(function(e){
        	e.preventDefault();
        	var tr = crearDestinoForm(it_destino);
        	it_destino++;
        	$('#contenedor-tr-destino').append(tr);
        });
        //para eliminar un contacto de la tabla
        $('.eliminar-destino').click(function(e){
        	e.preventDefault();
        	eliminarDestinoForm($(this));
        });

		//se muestra el modal del mapa
        $('#modalMapa').on('shown.bs.modal', function(e){
    	  	ubicacionInicial();
    	});
		//se oculta el modal del mapa
        $('#modalMapa').on('hidden.bs.modal', function(e){
    	  	ubicacionInicial();
    	  	deleteMarker();
    	});
    	
    	var fecha_vencimiento_licencia = $('input[name="fecha_vencimiento_licencia"]').datepicker({'format': 'dd/mm/yyyy' }).on('changeDate', function(ev){
	        fecha_vencimiento_licencia.hide();
	    }).data('datepicker');
    	
    	
    	$("input[name='es_chofer']").bind('click', chequear_info_chofer);
    	chequear_info_chofer();
    });
    
    function chequear_info_chofer(){
	    if($("input[name='es_chofer']").is(':checked')) {  
	        $('.info_chofer').show();
	    } else {  
	        $('.info_chofer').hide();  
	    }
    }
 </script>
@endsection