@extends('layouts.app')

@section('content')
	<div class="container-fluid" id="app">
		<div class="row">
			@if ($inventarios->isEmpty())
				<div class="col-4">
					<div class="alert alert-warning">
						No hay registros que mostrar
					</div>
				</div>
			@else

			<div class="col">
				<h3 class="float-left mr-5">Inventarios</h3>
				<div class="float-right mr-5">
					<a class="btn btn-sm btn-success" href="{{ route('inventarios.create') }}">Gate IN</a>
				</div>
				<div class="table-responsive">
					<div class="card bg-light">
						<div class="card-header bg-light text-white">
							<div class="row">
								<div class="mr-2">
									<div class="">
										<a href="{{ url('inventarios') }}" class="btn btn-sm btn-outline-info">General</a>
									</div>
								</div>

								<div class="mr-2">
									<div class="">
										{!! Form::open(['class'=>'form-inline','method'=>'GET','route'=>'inventarios.index']) !!}
										{!! Form::hidden('estatus', 'FULL', []) !!}
										{!! Form::submit('FULL', ['class'=>'btn btn-sm btn-outline-primary']) !!}
										{!! Form::close() !!}
									</div>
								</div>

								<div class="mr-2">
									<div class="">
										{!! Form::open(['class'=>'form-inline','method'=>'GET','route'=>'inventarios.index']) !!}
										{!! Form::hidden('estatus', 'EMPTY', []) !!}
										{!! Form::submit('EMPTY', ['class'=>'btn btn-sm btn-outline-warning text-secondary']) !!}
										{!! Form::close() !!}
									</div>
								</div>

								<div class="mr-2">
									<div class="">
										{!! Form::open(['class'=>'form-inline','method'=>'GET','route'=>'inventarios.index']) !!}
										{!! Form::hidden('condicion', 'OPR', []) !!}
										{!! Form::submit('OPR', ['class'=>'btn btn-sm btn-outline-success']) !!}
										{!! Form::close() !!}
									</div>
								</div>

								<div class="mr-2">
									<div class="">
										{!! Form::open(['class'=>'form-inline','method'=>'GET','route'=>'inventarios.index']) !!}
										{!! Form::hidden('condicion', 'DMG', []) !!}
										{!! Form::submit('DMG', ['class'=>'btn btn-sm btn-outline-danger']) !!}
										{!! Form::close() !!}
									</div>
								</div>
								<div class="mr-2">
									<div class="">
										{!! Form::open(['class'=>'form-inline','method'=>'GET','route'=>'inventarios.index']) !!}
										<div class="form-group">
											<span class="mr-2">
												<vue-bootstrap-typeahead
												v-model="contenedor"
												:data="contenedores"
												placeholder="Buscar en inventario"
												/>
											</span>
											<input class="form-control" type="hidden" name="contenedor" :value="contenedor">
										</div>
										{!! Form::submit('Buscar', ['class'=>'btn btn-sm btn-outline-success']) !!}
										{!! Form::close() !!}
									</div>
								</div>
								<div class="float-right">
									<a class="btn btn-outline-primary" href="{{ route('inventarios.export') }}">Exportar</a>
								</div>

							</div>
						</div>
						@if($inventarios->count() > 0)
							<div class="card-body">
								<div class="float-left">
									{{ $inventarios->appends(request()->query())->links() }}
								</div>
								<div class="float-right">

								</div>
								<table class="table table-sm table-hover">
									<caption>Inventario de Contenedores</caption>
									<thead class="bg-info text-white">
										<tr class="text-center">
											<th>#</th>
											<th>EIR</th>
											<th>BL</th>
											<th>Booking</th>
											<th>Consignatario</th>
											<th title="frd">Recepción</th>
											<th>Linea</th>
											<th>Buque</th>
											<th>Viaje</th>
											<th>Contenedor</th>
											<th>Estatus</th>
											<th>Condicion</th>
											<th>Tipo</th>
											<th>ISO</th>
											<th>Patio</th>
											<th>D/Pais</th>
											<th>D/Patio</th>
											<th>Acciones</th>
										</tr>
									</thead>
									<tbody>
										@foreach ($inventarios as $element)
											<tr>
												<td class="text-center">{{ $element->id }}</td>
												<td class="text-center">{{ $element->eir_in }}</td>
												<td class="text-center">
													@if ( $element->asignacion()->where('id',$element->booking_id)->count() == 0 )
														<small>{{ $element->bl }}</small>
													@endif

												</td>
												<td class="text-primary font-weight-bold"><small>{{ @$element->asignacion()->where('id',$element->booking_id)->get()->first()['booking'] }}</small></td>
												<td class="text-left">{{ @$element->consignatario->nombre }}</td>
												<td class="text-center">{{ $element->frd->format('Y-m-d') }}</td>
												<td>{{ $element->linea_in->acronimo }}</td>
												<td>{{ $element->buque_in->nombre }}</td>
												<td class="text-center text-uppercase">{{ @$element->viaje_in->nombre }}</td>
												<td class="text-center">{{ $element->contenedor->numero }}</td>
												@if ( !is_null($element->estatus))
													<td class="text-center">{{ $element->estatus }}</td>
												@else
													<td class="text-center">{{ $element->estatus_in }}</td>
												@endif
												<td @if($element->condicion_in == 'DMG') class="text-center text-danger" @else class="text-center text-success" @endif>{{ $element->condicion_in }}</td>
													<td class="text-center">{{ @$element->contenedor->tipo->tamano }} {{ @$element->contenedor->tipo->tipo }}</td>
													<td class="text-center">{{ $element->contenedor->iso_id }}</td>
													<td class="text-center">{{ @$element->patio->nombre }}</td>
													<td @if($element->DC > 89) class="text-right text-danger" @else class="text-right" @endif >{{ $element->DC }}</td>
														<td class="text-right">{{ $element->DW }}</td>
														<td>
															<a href="{{ route('inventarios.show', $element->id) }}" class="btn btn-sm btn-info" title="Ver"><i class="fas fa-eye"></i></a>
															@if ( is_null($element->reconocido) && is_null($element->estatus && $element->estatus_in == 'FULL') )
																<a href="{{ route('reconocimientos.create', $element->id) }}" class="btn btn-sm btn-success" title="Reconocimiento"><i class="fas fa-door-open"></i></a>
															@endif
															@if ($element->estatus_in == 'FULL' &&  is_null($element->vaciado) || $element->estatus == 'FULL' &&  is_null($element->vaciado))
																<a href="{{ route('inventarios.vaciado', $element->id) }}" class="btn btn-sm btn-light" title="Vaciado"><i class="fas fa-box-open"></i></a>
															@endif
															<a href="{{ route('inventarios.relocalizar', $element->id) }}" class="btn btn-sm btn-light" title="Relocalizar"><i class="fas fa-retweet"></i></a>
															<a href="{{ route('inventarios.edit', $element->id) }}" class="btn btn-sm btn-light" title="Gate-OUT"><i class="fas fa-external-link-alt"></i></a>
															<a href="{{ route('inventarios.editRegistro', $element->id) }}" class="btn btn-sm btn-warning" title="Editar"><i class="fas fa-edit"></i></a>
														</td>
													</tr>
												@endforeach
											</tbody>
										</table>
										{{ $inventarios->appends(request()->query())->links() }}
										{{-- {{ $inventarios->links() }} --}}
									</div>
								@endif
							</div>
						</div>
					</div>
					@endif
				</div>
			</div>
		@endsection
		@section('js')
			<script type="text/javascript">
			var app =	new Vue({
				el: '#app',

				data: {
					contenedor: null,
					contenedores: null
				},

				created(){
					axios.get('/contenedores/autocomplete')
					.then(response => {
						this.contenedores = response.data
					})
					.catch(function(error) {
						console.log(error)
					})
				}
			})
			</script>
		@endsection