@extends('templates.default')

@section('css')
<link href="{{ URL::to('/css/bootstrap.vertical-tabs.min.css') }}" media="all" rel="stylesheet" type="text/css" />
<link href="{{ URL::to('/css/lightbox.css') }}" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
	.controlInfo {
		background-color: #F5F5FF;
	}
	.colorA {
		border-left: 3px solid yellow !important;
	}
	.colorR {
		border-left: 3px solid red !important;
	}
	.activa {
		background-color: white !important;
	}

	.tamanio_pequeno {
		font-size: 11.5px;
		font-family: Helvetica;
	}
	.tamanio_pequeno strong {
		font-size: 11px;
		font-family: Helvetica;
	}

	.row-even {
		background-color: #ddd;
	}
	.plantilla {
		display: none;
	}
	.icon-order {
		font-size: 10px;
		background-color: #fafafa;
		color: #888;
	}
	.thead-orden {
		cursor: pointer;
	}
	.fondo-tabs {
		background-color: whitesmoke;
	}
	.panel-title a:focus, .panel-title a:hover{
		text-decoration:none;
	}
	.progress{
		height: 8px;
		margin-bottom:0;
		margin-top:5px;
	}
	.table tbody>tr>td.vert-align{
    	vertical-align: middle;
	}
	.descripcion{
		max-width: 380px;
	}
</style>
{{ HTML::style('css/bootstrap-datetimepicker.min.css') }}

{{ HTML::style('css/file-upload/jquery.fileupload.css') }}
{{ HTML::style('css/file-upload/jquery.fileupload-ui.css') }}

{{ HTML::style('css/firma/signpad.css') }}
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript>
	{{ HTML::style('css/file-upload/jquery.fileupload-noscript.css') }}
</noscript>
<noscript>
	{{ HTML::style('css/file-upload/jquery.fileupload-ui-noscript.css') }}
</noscript>
@endsection

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

@section('title_right')
@endsection

@section('content')

<div class="row-fluid">
	<div class="clearfix"></div>
	<div class="col-md-6">
		<h4><small>OCE:</small>
		<br />
		@if($envio->oce == 'IMP')
		Importaci&oacute;n
		@else
		Exportaci&oacute;n
		@endif </h4>
	</div>
	<div class="col-md-6">
		<h4><small>Cliente:</small>
		<br />
		{{ $envio->cliente->razon_social }} </h4>
	</div>
	<div class="col-md-6">
		<h4><small>Fecha Apertura:</small>
		<br />
		{{ date('d/m/Y', strtotime(str_replace('/', '-', $envio->fecha_apertura))) }} </h4>
	</div>
	<div class="col-md-6">
		<h4><small>Fecha Arribo/Salida:</small>
		<br />
		@if($envio->oce == 'IMP' && isset($envio->fecha_arribo))
		{{ date('d/m/Y', strtotime(str_replace('/', '-', $envio->fecha_arribo))) }}
		@endif
		@if($envio->oce == 'EXP' && isset($envio->fecha_salida))
		{{ date('d/m/Y', strtotime(str_replace('/', '-', $envio->fecha_salida))) }}
		@endif </h4>
	</div>
	<div class="col-md-6">
		<h4><small>Agencia Naviera:</small>
		<br />
		@if($envio->agencia)
		{{ $envio->agencia->razon_social }}
		@else
		N/A
		@endif </h4>
	</div>
	<div class="col-md-6">
		<h4><small># Manifiesto:</small>
		<br />
		<span> @if(!$envio->numero_manifiesto)
			N/A
			@else
			{{ $envio->numero_manifiesto }}
			@endif </span></h4>
	</div>
	<div class="col-md-6">
		<h4><small>Agencia de Carga/Consolidadora:</small>
		<br />
		<span>
			@if(!$envio->agenciacarga)
			N/A
			@else
			{{ $envio->agenciacarga->nombre_comercial }}
			@endif </span></h4>
	</div>
	<div class="col-md-6">
		<h4><small># Refrendo:</small>
		<br />
		<span> @if(!$envio->numero_refrendo)
			N/A
			@else
			{{ $envio->numero_refrendo }}
			@endif </span></h4>
	</div>
	<div class="col-md-6">
		<h4><small>Bodega:</small>
		<br />
		@if($envio->bodega)
		{{ $envio->bodega->nombre }}
		@else
		N/A
		@endif </h4>
	</div>
	<div class="col-md-6">
		<h4><small># Orden:</small>
		<br />
		<span> @if(!$envio->numero_orden)
			N/A
			@else
			{{ $envio->numero_orden }}
			@endif </span></h4>
	</div>
	<div class="col-md-12">
		<h4><small>Descripción del envío:</small>
		<br />
		@if($envio->descripcion)
		{{ $envio->descripcion }}
		@else
		N/A
		@endif </h4>
	</div>
	<div class="col-md-12">
		<hr />
	</div>

	<div class="col-md-12 col-sm-12">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs fondo-tabs" role="tablist">
			<li class="@if((isset($solo_contenedores) && $solo_contenedores) || isset($inspecciona_contenedor)) active @elseif(count($contenedores)==0) hide @endif">
				<a class="" href="#contenedores" role="tab" data-toggle="tab">Contenedores (FCL) @if(Session::has('contenedores_errors'))<span class="text-danger">*</span>@endif</a>
			</li>
			<li class="@if((isset($solo_cargas) && $solo_cargas) || isset($inspecciona_carga)) active @elseif(count($cargas)==0) hide @endif">
				<a class="" href="#cargas" role="tab" data-toggle="tab">Cargas Sueltas (LCL) @if(Session::has('cargas_errors'))<span class="text-danger">*</span>@endif</a>
			</li>
			<li class="@if((isset($solo_granel) && $solo_granel) || isset($inspecciona_granel)) active @elseif(count($graneles)==0) hide @endif">
				<a class="" href="#granel" role="tab" data-toggle="tab">Granel (GLC) @if(Session::has('granel_errors'))<span class="text-danger">*</span>@endif</a>
			</li>
		</ul>
		<!-- Tab panes -->
		<div class="tab-content row">
			<br />
			<!--inicio tab contenedores-->
			<div class="tab-pane @if((isset($solo_contenedores) && $solo_contenedores) || isset($inspecciona_contenedor)) active @else  @endif" id="contenedores">
				<div class="col-sm-3">
					<div class="list-group">
						@foreach($contenedores as $c)
						<a href="{{ URL::route('inspeccionar_contenedor', $c->id) }}" data-id="{{ $c->id }}" class="list-group-item @if(isset($contenedor) && ($c->id == $contenedor->id)) active @endif">{{ $c->codigo }}</a>
						@endforeach
						@if(isset($informe_contenedor) && $informe_contenedor->inspeccion->estado != 'F')
						<div class="list-group-item">
							<a class="btn btn-success btn-sm" href="{{ URL::route('finalizar_inspeccion',$informe_contenedor->inspeccion->id) }}"><span class="glyphicon glyphicon-ok"></span>&nbsp;Finalizar Inspecci&oacute;n</a>
						</div>
						@endif
					</div>
				</div>
				<div id="actividades-contenedores" class="col-sm-9">
					@if(isset($contenedor))
					<h4>Informe</h4>
					<hr style="margin-top:10px;" />
					<form action="{{ URL::route('inspeccionar_contenedor', $contenedor->id) }}" method="post">
						{{ $form_informe->id }}
						<input id="id_proceso" type="hidden" name="proceso" value="contenedor" />
						<div class="row">
							<div class="col-sm-4">
								<label>Fecha Inicio</label>
								{{ $form_informe->fecha_inicio }}
							</div>
							<div class="col-sm-2">
								<label>Cuadrilla</label><br/>	
								{{ $form_informe->cuadrilla }}
							</div>
							<div class="col-sm-2">
								<label>Observado</label><br/>
								{{ $form_informe->observado }}
							</div>
						</div>
						<div class="row">
							<div class="col-sm-6">
								<label>Contenido</label>
								{{ $form_informe->contenido }}
							</div>
							<div class="col-sm-6 class_observado">
								<label>Observaciones</label>
								{{ $form_informe->observaciones }}
							</div>
						</div>
						<div class="">
							<br />
							<button class="btn btn-success btn-sm" type="submit"><i class="glyphicon glyphicon-floppy-disk"></i>&nbsp;Guardar</button>
						</div>
					</form>
					<br />
					<div class="clearfix"></div>
					<h4>Actividades</h4>
						@if(isset($informe_contenedor))
							<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
								@foreach($actividades_contenedores as $ac)
								<div class="panel panel-default">
									<div class="panel-heading" role="tab" id="heading{{$ac->id}}">
										<h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#actividad{{$ac->id}}" aria-expanded="false" aria-controls="collapseTwo"> <span class="badge">{{ $ac->orden }}</span>&nbsp;&nbsp;{{ $ac->nombre }} [ mínimo {{ $ac->minimo_imagenes }} foto(s) ] </a></h4>
									</div>
									<div id="actividad{{$ac->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$ac->id}}">
										<div class="panel-body">
											<div class="">
												@if($informe_contenedor->estado != 'F' || Usuario::getLogueado()->esAdministrador() )
												<span class="btn btn-success btn-sm fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Agregar Foto</span> <!-- The file input field used as target for the file upload widget -->
													<input class="cont-upload" type="file" name="file-cont[]" multiple="true" data-actividad="{{ $ac->id }}" />
												</span>&nbsp;
												@endif
												<!-- <span class="btn btn-success btn-sm btn-subir-todos">
													<i class="glyphicon glyphicon-floppy-disk"></i> <span>Guardar Todos</span>
												</span> -->
													<!-- <button type="submit" class="btn btn-primary start">
									                    <i class="glyphicon glyphicon-upload"></i>
									                    <span>Start upload</span>
									                </button> -->
											</div><br />
											<!-- <div class="progress">
												<div class="progress-bar progress-bar-success"></div>
											</div> -->
											<div class="table-responsive">
												<table class="table table-striped table-condensed files">
													@foreach($ac->getImagenes($informe_contenedor->id) as $img)
														<tr id="tr_{{$img->id}}" data-actividad="{{ $ac->id }}">
															<td width="100">
																<a target="_blank" href="{{ URL::asset($img->path) }}" data-lightbox="image-1" data-title=" <br/> Observación: {{ ($img->observacion)?$img->observacion:"N/A" }}">
																	<img width="130" height="96" src="{{ URL::asset('/images/informes/thumbs/'.$img->id.'.jpg') }}" />																
																</a>
																<input type="hidden" class="id_detalle_actividad" name="id_detalle_actividad" value="comp:{{ $ac->id }},{{ $informe_contenedor->id }},{{ $img->id }}" />
															</td>
															<td>
																<label>Observaciones</label>
																<textarea id="observacion_{{$img->id}}" class="form-control descripcion" name="descripcion" required="">{{ $img->observacion }}</textarea>
																<input type="hidden" name="tipo" value="contenedor">
															</td>
															<td class="vert-align text-center" width="200">
																<button class="btn btn-success btn-sm" onclick="actualizarActividadDetalle(this, {{$img->id}})">Actualizar</button>&nbsp;<button class="btn btn-sm btn-danger" onclick="eliminarActividadDetalle(this, {{$img->id}})">Eliminar</button><br>
																<div class="progress" style="display: none;">
																	<div class="progress-bar progress-bar-success" style="width: 100%;"></div>
																</div>
															</td>
														</tr>
													@endforeach
												</table>
											</div>
										</div>
									</div>
								</div>
								@endforeach
							</div>
							
							<br/>
							@if(isset($informe_contenedor) && $informe_contenedor->estado != 'F' )
							<div class="list-group-item">
								<a class="btn btn-success btn-sm" href="{{ URL::route('finalizar_informe',$informe_contenedor->id) }}"><span class="glyphicon glyphicon-ok"></span>&nbsp;Finalizar Informe</a>
							</div>
							@else
							<h4>Firmas</h4>
							<hr style="margin-top:10px;" />
							<!-- para las firmas del informe por contenedor -->
							<button type="button" class="btn @if(!is_null($informe_contenedor->firma_bodega)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_contenedor->id }}" data-firma="bodega" data-url="@if(!is_null($informe_contenedor->firma_bodega)){{ URL::asset($informe_contenedor->firma_bodega) }}@endif">
								<span class="glyphicon @if(!is_null($informe_contenedor->firma_bodega)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Delegado Bodega
							</button>&nbsp;&nbsp;
							<button type="button" class="btn @if(!is_null($informe_contenedor->firma_inspector)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_contenedor->id }}" data-firma="inspector" data-url="@if(!is_null($informe_contenedor->firma_inspector)){{ URL::asset($informe_contenedor->firma_inspector) }}@endif">
								<span class="glyphicon @if(!is_null($informe_contenedor->firma_inspector)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Inspector Comextgando
							</button>&nbsp;&nbsp;
							<button type="button" class="btn @if(!is_null($informe_contenedor->firma_aduana)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_contenedor->id }}" data-firma="aduana" data-url="@if(!is_null($informe_contenedor->firma_aduana)){{ URL::asset($informe_contenedor->firma_aduana) }}@endif">
								<span class="glyphicon @if(!is_null($informe_contenedor->firma_aduana)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Funcionario Aduana
							</button>
							<br />
							<br />
							@endif							
						@else
							<h4 class="text-muted">Seleccione Primero Guardar el Informe.</h4>
						@endif
					@else
					<h4 class="text-muted">Seleccione el contenedor a inspeccionar</h4>
					@endif
				</div>
			</div>
			<!--fin tab contenedores-->
			
			
			
			<!--inicio tab cargas-->
			<div class="tab-pane @if((isset($solo_cargas) && $solo_cargas) || isset($inspecciona_carga)) active @endif" id="cargas">
				<div class="col-sm-3">
					<div class="list-group">
						@foreach($cargas as $c)
						<a href="{{ URL::route('inspeccionar_carga', $c->id) }}" data-id="{{ $c->id }}" class="list-group-item @if(isset($carga) && ($c->id == $carga->id)) active @endif">{{ ($c->descripcion)?$c->descripcion:'N/A'  }}</a>
						@endforeach
						@if(isset($informe_carga) && $informe_carga->inspeccion->estado != 'F')
						<div class="list-group-item">
							<a class="btn btn-success btn-sm" href="{{ URL::route('finalizar_inspeccion',$informe_carga->inspeccion->id) }}"><span class="glyphicon glyphicon-ok"></span>&nbsp;Finalizar Inspecci&oacute;n</a>
						</div>
						@endif
					</div>
				</div>
				<div id="actividades-cargas" class="col-sm-9">
					@if(isset($carga))
						<h4>Informe</h4>
						<hr style="margin-top:10px;" />
						<form action="{{ URL::route('inspeccionar_carga', $carga->id) }}" method="post">
							{{ $form_informe->id }}
							<input id="id_proceso" type="hidden" name="proceso" value="carga" />
							<div class="row">
								<div class="col-sm-4">
									<label>Fecha Inicio</label>
									{{ $form_informe->fecha_inicio }}
								</div>
								<div class="col-sm-2">
									<label>Cuadrilla</label><br/>	
									{{ $form_informe->cuadrilla }}
								</div>
								<div class="col-sm-2">
									<label>Observado</label><br/>
									{{ $form_informe->observado }}
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<label>Contenido</label>
									{{ $form_informe->contenido }}
								</div>
								<div class="col-sm-6 class_observado">
									<label>Observaciones</label>
									{{ $form_informe->observaciones }}
								</div>
							</div>
							<div class="">
								<br />
								<button class="btn btn-success btn-sm" type="submit"><i class="glyphicon glyphicon-floppy-disk"></i>&nbsp;Guardar</button>
							</div>
						</form>
						<br />
						<div class="clearfix"></div>
						<h4>Actividades</h4>
						@if(isset($informe_carga))
							<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
								@foreach($actividades_cargas as $ac)
								<div class="panel panel-default">
									<div class="panel-heading" role="tab" id="heading{{$ac->id}}">
										<h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#actividad{{$ac->id}}" aria-expanded="false" aria-controls="collapseTwo"> <span class="badge">{{ $ac->orden }}</span>&nbsp;&nbsp;{{ $ac->nombre }} [ mínimo {{ $ac->minimo_imagenes }} foto(s) ]</a></h4>
									</div>
									<div id="actividad{{$ac->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$ac->id}}">
										<div class="panel-body">
											<div class="">
												@if($informe_carga->estado != 'F' || Usuario::getLogueado()->esAdministrador() )
												<span class="btn btn-success btn-sm fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Agregar Foto</span> <!-- The file input field used as target for the file upload widget -->
													<input class="cont-upload" type="file" name="file-cont[]" multiple="true" data-actividad="{{ $ac->id }}" />
												</span>
												@endif
											</div><br /><!-- file input carga -->
											<div class="table-responsive">
												<table class="table table-striped table-condensed files">
													@foreach($ac->getImagenes($informe_carga->id) as $img)
														<tr id="tr_{{$img->id}}" data-actividad="{{ $ac->id }}">
															<td width="100">
																<a target="_blank" href="{{ URL::asset($img->path) }}" data-lightbox="image-1" data-title=" <br/> Observación: {{ ($img->observacion)?$img->observacion:"N/A" }}">
																	<img width="130" height="95" src="{{ URL::asset('/images/informes/thumbs/'.$img->id.'.jpg') }}" />																
																</a>
																<input type="hidden" class="id_detalle_actividad" name="id_detalle_actividad" value="comp:{{ $ac->id }},{{ $informe_carga->id }},{{ $img->id }}" />
															</td>
															<td>
																<label>Observaciones</label>
																<textarea id="observacion_{{$img->id}}" class="form-control descripcion" name="descripcion" required="">{{ $img->observacion }}</textarea>
																<input type="hidden" name="tipo" value="contenedor">
															</td>
															<td class="vert-align text-center" width="200">
																<button class="btn btn-success btn-sm" onclick="actualizarActividadDetalle(this, {{$img->id}})">Actualizar</button>&nbsp;<button class="btn btn-sm btn-danger" onclick="eliminarActividadDetalle(this, {{$img->id}})">Eliminar</button><br>
																<div class="progress" style="display: none;">
																	<div class="progress-bar progress-bar-success" style="width: 100%;"></div>
																</div>
															</td>
														</tr>
													@endforeach
												</table>
											</div>
										</div>
									</div>
								</div>
								@endforeach
							</div>
							
							<br/>
							@if(isset($informe_carga) && $informe_carga->estado != 'F' )
							<div class="list-group-item">
								<a class="btn btn-success btn-sm" href="{{ URL::route('finalizar_informe',$informe_carga->id) }}"><span class="glyphicon glyphicon-ok"></span>&nbsp;Finalizar Informe</a>
							</div>
							@else
							<h4>Firmas</h4>
							<hr style="margin-top:10px;" />
							<!-- para las firmas del informe por carga -->
							<button type="button" class="btn @if(!is_null($informe_carga->firma_bodega)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_carga->id }}" data-firma="bodega" data-url="@if(!is_null($informe_carga->firma_bodega)){{ URL::asset($informe_carga->firma_bodega) }}@endif">
								<span class="glyphicon @if(!is_null($informe_carga->firma_bodega)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Delegado Bodega
							</button>&nbsp;&nbsp;
							<button type="button" class="btn @if(!is_null($informe_carga->firma_inspector)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_carga->id }}" data-firma="inspector" data-url="@if(!is_null($informe_carga->firma_inspector)){{ URL::asset($informe_carga->firma_inspector) }}@endif">
								<span class="glyphicon @if(!is_null($informe_carga->firma_inspector)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Inspector Comextgando
							</button>&nbsp;&nbsp;
							<button type="button" class="btn @if(!is_null($informe_carga->firma_aduana)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_carga->id }}" data-firma="aduana" data-url="@if(!is_null($informe_carga->firma_aduana)){{ URL::asset($informe_carga->firma_aduana) }}@endif">
								<span class="glyphicon @if(!is_null($informe_carga->firma_aduana)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Funcionario Aduana
							</button>
							<br />
							<br />
							@endif
						
						@else
							<h4 class="text-muted">Seleccione Primero Guardar el Informe.</h4>
						@endif
					@else
					<h4 class="text-muted">Seleccione la carga a inspeccionar</h4>
					@endif
				</div>
			</div>
			<!--fin tab cargas-->
			
			
			
			
			<!--inicio tab granel-->
			<div class="tab-pane @if((isset($solo_granel) && $solo_granel) || isset($inspecciona_granel)) active @endif" id="granel">
				<div class="col-sm-3">
					<div class="list-group">
						@foreach($graneles as $g)
						<a href="{{ URL::route('inspeccionar_granel', $g->id) }}" data-id="{{ $g->id }}" class="list-group-item @if(isset($granel) && ($g->id == $granel->id)) active @endif">{{ ($g->descripcion)?$g->descripcion:'N/A'  }}</a>
						@endforeach
						@if(isset($informe_granel) && $informe_granel->inspeccion->estado != 'F')
						<div class="list-group-item">
							<a class="btn btn-success btn-sm" href="{{ URL::route('finalizar_inspeccion',$informe_granel->inspeccion->id) }}"><span class="glyphicon glyphicon-ok"></span>&nbsp;Finalizar Inspecci&oacute;n</a>
						</div>
						@endif
					</div>
				</div>
				<div id="actividades-granel" class="col-sm-9">
					@if(isset($granel))
					<h4>Informe</h4>
						<hr style="margin-top:10px;" />
						<form action="{{ URL::route('inspeccionar_granel', $granel->id) }}" method="post">
							{{ $form_informe->id }}
							<input id="id_proceso" type="hidden" name="proceso" value="granel" />
							<div class="row">
								<div class="col-sm-4">
									<label>Fecha Inicio</label>
									{{ $form_informe->fecha_inicio }}
								</div>
								<div class="col-sm-2">
									<label>Cuadrilla</label><br/>	
									{{ $form_informe->cuadrilla }}
								</div>
								<div class="col-sm-2">
									<label>Observado</label><br/>
									{{ $form_informe->observado }}
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<label>Contenido</label>
									{{ $form_informe->contenido }}
								</div>
								<div class="col-sm-6 class_observado" >
									<label>Observaciones</label>
									{{ $form_informe->observaciones }}
								</div>
							</div>
							<div class="">
								<br />
								<button class="btn btn-success btn-sm" type="submit"><i class="glyphicon glyphicon-floppy-disk"></i>&nbsp;Guardar</button>
							</div>
						</form>
						<br />
						<div class="clearfix"></div>
						<h4>Actividades</h4>
						@if(isset($informe_granel))
							<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
								@foreach($actividades_graneles as $ac)
								<div class="panel panel-default">
									<div class="panel-heading" role="tab" id="heading{{$ac->id}}">
										<h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#actividad{{$ac->id}}" aria-expanded="false" aria-controls="collapseTwo"> <span class="badge">{{ $ac->orden }}</span>&nbsp;&nbsp;{{ $ac->nombre }}  [ mínimo {{ $ac->minimo_imagenes }} foto(s) ]</a></h4>
									</div>
									<div id="actividad{{$ac->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$ac->id}}">
										<div class="panel-body">
											<div class="">
												@if($informe_granel->estado != 'F' || Usuario::getLogueado()->esAdministrador() )
												<span class="btn btn-success btn-sm fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Agregar Foto</span> <!-- The file input field used as target for the file upload widget -->
													<input class="cont-upload" type="file" name="file-cont[]" multiple="true" data-actividad="{{ $ac->id }}" />
												</span>
												@endif
											</div><br /><!-- file input carga -->
											<div class="table-responsive">
												<table class="table table-striped table-condensed files">
													@foreach($ac->getImagenes($informe_granel->id) as $img)
														<tr id="tr_{{$img->id}}" data-actividad="{{ $ac->id }}">
															<td width="100">
																<a target="_blank" href="{{ URL::asset($img->path) }}" data-lightbox="image-1" data-title=" <br/> Observación: {{ ($img->observacion)?$img->observacion:"N/A" }}">
																	<img width="130" height="96" src="{{ URL::asset('/images/informes/thumbs/'.$img->id.'.jpg') }}" />																
																</a>
																<input type="hidden" class="id_detalle_actividad" name="id_detalle_actividad" value="comp:{{ $ac->id }},{{ $informe_granel->id }},{{ $img->id }}" />
															</td>
															<td>
																<label>Observaciones</label>
																<textarea id="observacion_{{$img->id}}" class="form-control descripcion" name="descripcion" required="">{{ $img->observacion }}</textarea>
																<input type="hidden" name="tipo" value="contenedor">
															</td>
															<td class="vert-align text-center" width="200">
																<button class="btn btn-success btn-sm" onclick="actualizarActividadDetalle(this, {{$img->id}})">Actualizar</button>&nbsp;<button class="btn btn-sm btn-danger" onclick="eliminarActividadDetalle(this, {{$img->id}})">Eliminar</button><br>
																<div class="progress" style="display: none;">
																	<div class="progress-bar progress-bar-success" style="width: 100%;"></div>
																</div>
															</td>
														</tr>
													@endforeach
												</table>
											</div>
										</div>
									</div>
								</div>
								@endforeach
							</div>
							
							@if(isset($informe_granel) && $informe_granel->estado != 'F' )
							<div class="list-group-item">
								<a class="btn btn-success btn-sm" href="{{ URL::route('finalizar_informe',$informe_granel->id) }}"><span class="glyphicon glyphicon-ok"></span>&nbsp;Finalizar Informe</a>
							</div>
							@else
							<h4>Firmas</h4>
							<hr style="margin-top:10px;" />
							<!-- para las firmas del informe por granel -->
							<button type="button" class="btn @if(!is_null($informe_granel->firma_bodega)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_granel->id }}" data-firma="bodega" data-url="@if(!is_null($informe_granel->firma_bodega)){{ URL::asset($informe_granel->firma_bodega) }}@endif">
								<span class="glyphicon @if(!is_null($informe_granel->firma_bodega)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Delegado Bodega
							</button>&nbsp;&nbsp;
							<button type="button" class="btn @if(!is_null($informe_granel->firma_inspector)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_granel->id }}" data-firma="inspector" data-url="@if(!is_null($informe_granel->firma_inspector)){{ URL::asset($informe_granel->firma_inspector) }}@endif">
								<span class="glyphicon @if(!is_null($informe_granel->firma_inspector)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Inspector Comextgando
							</button>&nbsp;&nbsp;
							<button type="button" class="btn @if(!is_null($informe_granel->firma_aduana)) btn-primary @else btn-default @endif" data-toggle="modal" data-target="#modal-firma" data-keyboard="false" data-backdrop="static" data-informe="{{ $informe_granel->id }}" data-firma="aduana" data-url="@if(!is_null($informe_granel->firma_aduana)){{ URL::asset($informe_granel->firma_aduana) }}@endif">
								<span class="glyphicon @if(!is_null($informe_granel->firma_aduana)) glyphicon-ok-sign @else glyphicon-record @endif"></span>&nbsp;Funcionario Aduana
							</button>
							<br />
							<br />
							@endif
							
						@else
							<h4 class="text-muted">Seleccione Primero Guardar el Informe.</h4>
						@endif
					@else
					<h4 class="text-muted">Seleccione el granel a inspeccionar</h4>
					@endif
				</div>
			</div>
			<!--fin tab granel-->
		</div>
	</div>
</div>
<!-- modal para las firmas -->
<div id="modal-firma" class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-body" style="min-width: 400px;min-height: 300px;background-color: #ccc;">
				<div id="signature-pad" class="m-signature-pad">
					<div class="m-signature-pad--body">
						<canvas id="canvas-firma"></canvas>
					</div>
				</div>
			</div>
			<div class="modal-footer" style="padding: 10px 15px 10px;margin-top: 0;background-color: #ccc;">
				<span id="modal-footer" class=""></span>
		        <button id="cancela-firma" type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancelar</button>
		        <button id="clear-firma" type="button" class="btn btn-sm btn-danger">Borrar Firma</button>
		        <form id="form-firma" class="form-inline pull-right" style="margin:0;margin-left:10px;" action="{{ URL::route('firmar_informe') }}" method="post">
		        	<div class="form-group">
			        	<input type="hidden" id="id_firma_imagen" name="id_firma_imagen" />
			        	<input type="hidden" id="id_firma_informe" name="id_firma_informe" />
			        	<input type="hidden" id="id_firma_firma" name="id_firma_firma" />
			        	<button id="send-firma" type="submit" class="btn btn-sm btn-success">Guardar Firma</button>
			        </div>
	        	</form>
		    </div>
		</div>
	</div>
</div>
@endsection

@section('js-footer')
{{ HTML::script('js/load-image.all.min.js') }}
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
{{ HTML::script('js/canvas-to-blob.min.js') }}
{{ HTML::script('js/file-upload/jquery.iframe-transport.js') }}
{{ HTML::script('js/file-upload/jquery.fileupload.js') }}
{{ HTML::script('js/file-upload/jquery.fileupload-process.js') }}
{{ HTML::script('js/file-upload/jquery.fileupload-image.js') }}
{{ HTML::script('js/moment.js') }}
{{ HTML::script('js/bootstrap-datetimepicker.js') }}

{{ HTML::script('js/firma/signature_pad.min.js') }}
{{ HTML::script('js/firma/app.js') }}


{{ HTML::script('js/lightbox.js') }}

<script type="text/javascript">
	var button_click=null, id_actual=0;
	var data_submit = null;
	var data_submit_all = null;
	var button_related = null;
	
	$("#id_observado").change(function(){
        if($(this).is(':checked')){
            $('.class_observado').show();
        }else{
            $('.class_observado').hide();
        }
    });
    if($("#id_observado").is(':checked')){
        $('.class_observado').show();
    }else{
        $('.class_observado').hide();
    }
	
	//actualiza el detalle de la actividad
	function actualizarActividadDetalle(el, id_detalle){
		var obs = $('#observacion_'+id_detalle).val();
		var boton = el;
		//se actualiza
	    $.ajax({
			url: '{{ URL::route("server_actualizar") }}',
			type: 'POST',
			async: true,
			data: {'id': id_detalle, 'observacion': obs},
			beforeSend: function(x){
				$(boton).text('Actualizando...');
			},
			complete: function(d){
				$(boton).text('Actualizar');
			},
			success: function(d){
				$(boton).text('Actualizar');
			},
			error: function(xhr, e, d){
				$(boton).text('Actualizar');
			}
		});
	}
	
	//elimina el detalle de la actividad
	function eliminarActividadDetalle(el, id_detalle){
		var tr_eliminar = $('#tr_'+id_detalle);
		var actividad = tr_eliminar.attr('data-actividad');
		var boton = el;
		//se elimina
	    $.ajax({
			url: '{{ URL::route("server_eliminar") }}',
			type: 'POST',
			async: true,
			data: {'id': id_detalle, 'actividad': actividad},
			beforeSend: function(x){
				$(boton).text('Eliminando...');
			},
			complete: function(d){
			},
			success: function(d){
				if(d.ok == '1'){
					$(tr_eliminar).remove();
				}
			},
			error: function(xhr, e, d){
				$(boton).text('Eliminar');
			}
		});
	}
	
	$(function() {
		'use strict';
		// Change this to the location of your server-side upload handler:
		var url = '{{ URL::route("subir_actividad") }}', uploadButton = $('<button/>').addClass('btn btn-success btn-sm').prop('disabled', true).text('Procesando...').on('click', function() {
			button_click = $(this);
			var $this = $(this), data = $this.data();
			$this.off('click').text('Abort').on('click', function() {
				$this.remove();
				data.abort();
			});
			data_submit = data;
			data.submit().always(function() {
				var button_update = $('<button class="btn btn-success btn-sm" />');
				button_update.text('Actualizar').on('click', function(e){
					//aqui se actualiza la descripcion.
					//data_submit.submit();
					var id_detalle = data_submit.context.find('.id_imagen').val();
					var obs = data_submit.context.find('textarea').val();
					var boton = $(this);
					//se actualiza
				    $.ajax({
						url: '{{ URL::route("server_actualizar") }}',
						type: 'POST',
						async: true,
						data: {'id': id_detalle, 'observacion': obs},
						beforeSend: function(x){
							$(boton).text('Actualizando...');
						},
						complete: function(d){
							$(boton).text('Actualizar');
						},
						success: function(d){
							$(boton).text('Actualizar');
						},
						error: function(xhr, e, d){
							$(boton).text('Actualizar');
						}
					});
				});
				$this.closest('td').prepend('&nbsp;').prepend(button_update);
				$this.removeClass('btn-success').addClass('btn-danger').text('Eliminar').on('click', function(e){
					e.preventDefault();
					var this_btn = $(this);
					var id_detalle = data_submit.context.find('input.id_detalle_actividad').val();
					var actividad = data_submit.context.find('input.id_actividad').val();
					var imagen = data_submit.context.find('input.id_imagen').val();
					//eliminar por ajax se elimina
				    $.ajax({
						url: '{{ URL::route("server_eliminar") }}',
						type: 'POST',
						async: true,
						data: {'id': imagen, 'actividad': actividad},
						beforeSend: function(x){
							$(this_btn).text('Eliminando...');
						},
						complete: function(d){
						},
						success: function(d){
							if(d.ok == '1'){
								data_submit.context.remove();
							}
						},
						error: function(xhr, e, d){
							$(this_btn).text('Eliminar');
						}
					});
				});
			});
		});
		$('.btn-subir-todos').click(function(){
			if(data_submit_all){
				data_submit_all.submit();
			}
		});
		$('.cont-upload').fileupload({
			url : url,
			dataType : 'json',
			autoUpload : false,
			acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,
			//maxFileSize : 5000000, // 5 MB
			// Enable image resizing, except for Android and Opera,
			// which actually support image resizing, but fail to
			// send Blob objects via XHR requests:
			disableImageResize : /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
			previewMaxWidth : 100,
			previewMaxHeight : 100,
			previewCrop : false
		}).on('fileuploadadd', function(e, data) {
			data.context = $('<tr/>').appendTo($(this).closest('div.panel-body').find('table.files'));
			data_submit_all = data;
			$.each(data.files, function(index, file) {
				var node_thumb = $('<td width="100"/>');//.append($('<span/>').text(file.name))
				var node_desc = $('<td/>');
				var node_button = $('<td class="vert-align text-center" width="200"/>');
				if (!index) {
					node_button.append(uploadButton.clone(true).data(data));
					node_button.append('<br/><div class="progress"><div class="progress-bar progress-bar-success"></div></div>');
				}
				node_desc.append('<label>Observaciones</label>')
						 .append($('<textarea class="form-control descripcion" name="descripcion" required />'))
						 .append($('<input type="hidden" name="tipo" value="contenedor" />'));
				node_thumb.appendTo(data.context);
				node_desc.appendTo(data.context);
				node_button.appendTo(data.context);
			});
		}).on('fileuploadprocessalways', function(e, data) {
			var index = data.index, file = data.files[index], node = $(data.context.children()[index]);
			if (file.preview) {
				node.prepend(file.preview);
			}
			if (file.error) {
				node.append('<br>').append($('<span class="text-danger"/>').text(file.error));
			}
			if (index + 1 === data.files.length) {
				data.context.find('button').text('Guardar').prop('disabled', !!data.files.error);
			}
			$(data.context.find('button')).trigger( "click" );
		}).on('fileuploadsubmit', function (e, data) {
			var proceso = '';
		    //se setea el campo descripcion
		    var desc = data.context.find('textarea').val();
		    //if(desc == '') return false;
		    var tipo = data.context.find('input').val();
		    //id del informe
		    var id_informe = $('#id_informe').val();
		    //id del informe
		    var id_actividad = $(this).attr('data-actividad');
		    //proceso
		    var id_proceso = $('#id_proceso').val(); //contenedor, carga, granel
		    if(id_proceso == 'contenedor'){
		    	proceso = 'CONT';
		    }
		    if(id_proceso == 'carga'){
		    	proceso = 'CARG';
		    }
		    if(id_proceso == 'granel'){
		    	proceso = 'GRAN';
		    }
		    data.formData = {'descripcion': desc, 'tipo': tipo, 'id_informe': id_informe, 'id_actividad': id_actividad, 'proceso': proceso};
		}).on('fileuploadprogressall', function(e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			var progress_bar = $(button_click).closest('tr').find('div.progress-bar');
			progress_bar.css('width', progress + '%');
			if(progress == 100){
				$(button_click).closest('tr').find('div.progress').fadeOut(3000);
			}
		}).on('fileuploaddone', function(e, data) {
			$.each(data.result.files, function(index, file) {
				if (file.url) {
					var url_thumbnail = 'images/informes/thumbnails/' + file.id;
					var td_link = $('<td width="100"/>');
					var in_id = $('<input type="hidden" class="id_detalle_actividad" name="id_detalle_actividad" />');
					var in_act = $('<input type="hidden" class="id_actividad" name="id_actividad" />');
					var in_img = $('<input type="hidden" class="id_imagen" name="id_imagen" />');
					var control_a = $('<a>');
					$(control_a).attr('target', '_blank').prop('href', file.url);
					$(control_a).attr('data-lightbox', 'image-1');
					//var link = $('<a>').attr('target', '_blank').prop('href', file.url_thumb);												
					
					in_id.attr('value', file.id);
					in_act.attr('value', file.actividad);
					in_img.attr('value', file.imagen);
					td_link.append(control_a);
					td_link.append(in_id);
					td_link.append(in_act);
					$(data.context.children()[index]).append(control_a).append(in_id).append(in_act).append(in_img);
				} else if (file.error) {
					var error = $('<span class="text-danger"/>').text(file.error);
					$(data.context.children()[index]).append('<br>').append(error);
				}
			});
			//$(this).closest('div.panel-body').find('div.progress').fadeOut(2000);
		}).on('fileuploadfail', function(e, data) {
			$.each(data.files, function(index) {
				var error = $('<span class="text-danger"/>').text('File upload failed.');
				$(data.context.children()[index]).append('<br>').append(error);
			});
		}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
	
		//para los campos de fechas
		var fecha = $('.fecha').datetimepicker({  pick12HourFormat: false, useCurrent: false, autoClose: true });
	
		//para el modal de las firmas
		$('#modal-firma').on('show.bs.modal', function(e){
			button_related = $(e.relatedTarget);
			$('#id_firma_informe').val(button_related.data('informe'));
			$('#id_firma_firma').val(button_related.data('firma'));
			var urlFirma = button_related.data('url');
			if(urlFirma){
				convertImgToBase64(urlFirma, function(base64Img){
					signaturePad.fromDataURL(base64Img);
			    });
			}
		});
		$('#modal-firma').on('shown.bs.modal', function(e){
			// if(window.innerHeight > window.innerWidth){
				// bootbox.alert("Debe estar en modo horizontal");
				// $('#modal-firma').modal('hide');
				// return ;
			// }
			resizeCanvas();
		});
		//esconde el modal
		$('#modal-firma').on('hide.bs.modal', function(e){
			resizeCanvas();
			//reinicio el form
			$('#id_firma_imagen').val('');
			$('#id_firma_informe').val('');
			$('#id_firma_firma').val('');
			
			button_related = null;
			
			//elimino los mensajes
			$('#modal-footer').html('');
		});
		
		// window.addEventListener('orientationchange', function(e){
			// if(window.innerHeight > window.innerWidth){
				// bootbox.alert("Debe estar en modo horizontal");
				// $('#modal-firma').modal('hide');
				// return ;
			// }
		// });
	}); 
</script>

@endsection