@extends('layouts.app')
@section('content')
	<div class="container" id="app">
		<div class="row">
			<div class="col-12">
				<h3>Reportes</h3>
				<div class="card">
					<div class="card-header">Filtros</div>
					<div class="card-body">
						{!! Form::open(['route'=>'reportes.inventario','method'=>'GET']) !!}
						<div class="form-row">
							<div class="form-group col">
								{!! Form::label('movimiento', 'Movimiento', ['class' => 'form-control-label']) !!}
								{!! Form::select('movimiento', ['gatein' => 'Ingreso', 'gateout' => 'Egreso'], request()->movimiento ?? null, ['class' => 'form-control','placeholder' => 'Selección','v-model'=>'movimiento']) !!}
							</div>
							<div class="form-group col">
								{!! Form::label('linea_id', 'Linea', ['class' => 'form-control-label']) !!}
								<select class="form-control" name="linea_in_id" v-model="linea_id">
									<option v-for="item in listLineas" :value="item.value">@{{ item.label }}</option>
								</select>
								{!! $errors->first('linea_in_id', '<small class="help-block text-danger">:message</small>') !!}
							</div>
							<div class="form-group col">
								{!! Form::label('buque_id', 'Buque', ['class' => 'form-control-label']) !!}
								<select class="form-control" name="buque_in_id" v-model="buque_id">
									<option v-for="item in listBuques" :value="item.value">@{{ item.label }}</option>
								</select>
								{!! $errors->first('buque_in_id', '<small class="help-block text-danger">:message</small>') !!}
							</div>
							<div class="form-group col">
								{!! Form::label('viaje_id', 'Viaje', ['class' => 'form-control-label']) !!}
								<select class="form-control" name="viaje_in_id" v-model="viaje_id">
									<option v-for="item in listViaje" :value="item.value">@{{ item.label }}</option>
								</select>
								{!! $errors->first('viaje_in_id', '<small class="help-block text-danger">:message</small>') !!}
							</div>
						</div>
						<div class="form-row">
							<div class="form-group col">
								{!! Form::label('patio', 'Patio', ['class' => 'form-control-label']) !!}
								{!! Form::select('patio', \App\Patio::pluck('nombre','id'), request()->patio, ['class' => 'form-control form-control-sm','placeholder' => 'Selección']) !!}
							</div>
							<div class="form-group col">
								{!! Form::label('estatus', 'Estatus', ['class' => 'form-control-label']) !!}
								{!! Form::select('estatus', ['FULL' => 'FULL', 'EMPTY' => 'EMPTY'], request()->estatus, ['class' => 'form-control form-control-sm','placeholder' => 'Selección']) !!}
							</div>
							<div class="form-group col">
								{!! Form::label('condicion', 'Condicion', ['class' => 'form-control-label']) !!}
								{!! Form::select('condicion', ['OPR' => 'OPR', 'DMG' => 'DMG'], request()->condicion, ['class' => 'form-control form-control-sm','placeholder' => 'Selección']) !!}
							</div>
							<div class="form-row" v-if="movimiento != ''">
								<div class="form-group col">
									{!! Form::label('inicio', 'Inicio', ['class' => 'form-control-label']) !!}
									{!! Form::date('inicio', request()->inicio ?? null, ['class' => 'form-control form-control-sm']) !!}
								</div>
								<div class="form-group col">
									{!! Form::label('fin', 'Fin', ['class' => 'form-control-label']) !!}
									{!! Form::date('fin', request()->fin ?? null, ['class' => 'form-control form-control-sm']) !!}
								</div>
							</div>


						</div>
						{{ Form::button('Consultar ' . '<i class="fas fa-sign-in-alt"></i>', ['type' => 'submit', 'class' => 'btn btn-primary'] )  }}
						<a class="btn btn-warning" href="{{ route('reportes.inventario') }}">Limpiar</a>
						{!! Form::close() !!}
					</div>
				</div>
			</div>
		</div>
	</div>

	@if (!$results->isEmpty())
		<div class="container-fluid">
			<div class="row mt-3">
				<div class="col">
					<div class="table-responsive">
						<table class="table table-sm table-bordered">
							<caption>Inventario</caption>
							<thead class="bg-light">
								<tr class="text-center">
									<th>#</th>
									<th>Acta</th>
									<th>EIR <sup>IN</sup></th>
									<th>BL</th>
									<th>Booking</th>
									<th>Consignatario</th>
									<th title="FRD">Recepción</th>
									<th>Linea <sup>IN</sup></th>
									<th>Buque <sup>IN</sup></th>
									<th>Viaje <sup>IN</sup></th>
									<th>Contenedor</th>
									<th>Estatus</th>
									<th>Condicion</th>
									<th>Tipo</th>
									<th>ISO</th>
									<th>Patio</th>
									<th>EIR <sup>OUT</sup></th>
									<th title="FDESP">Despacho</th>
									<th>Pase</th>
									<th>Factura</th>
									<th>Precintos</th>
									<th>Linea <sup>OUT</sup></th>
									<th>Buque <sup>OUT</sup></th>
									<th>Viaje <sup>OUT</sup></th>
									<th>D/Pais</th>
									<th>D/Patio</th>
								</tr>
							</thead>
							<tbody>
								@foreach ($results as $element)
									<tr>
										<td>{{ $element->id }}</td>
										<td>{{ $element->acta }}</td>
										<td>{{ $element->eir_in }}</td>
										<td>{{ $element->bl }}</td>
										<td>{{ $element->booking }}</td>
										<td>{{ $element->consignatario->nombre }}</td>
										<td>{{ $element->frd->format('Y-m-d') }}</td>
										<td>{{ $element->linea_in->acronimo }}</td>
										<td>{{ $element->buque_in->nombre }}</td>
										<td>{{ $element->viaje_in->nombre }}</td>
										<td>{{ $element->contenedor->numero }}</td>
										<td>{{ $element->estatus_in }}</td>
										<td>{{ $element->condicion_in }}</td>
										<td>{{ $element->contenedor->tipo->tamano }} {{ $element->contenedor->tipo->tipo }}</td>
										<td>{{ $element->contenedor->iso_id }}</td>
										<td>{{ $element->patio->nombre }}</td>
										<td>{{ $element->eir_out }}</td>
										<td>{{ $element->fdesp ? $element->fdesp->format('Y-m-d') : null }}</td>
										<td>{{ $element->pase }}</td>
										<td>{{ $element->factura }}</td>
										<td>{{ $element->precintos_out }}</td>
										<td>{{ $element->linea_out->acronimo }}</td>
										<td>{{ @$element->buque_out->nombre }}</td>
										<td>{{ @$element->viaje_out->nombre }}</td>
										<td>{{ $element->DC }}</td>
										<td>{{ $element->DW }}</td>
									</tr>
								@endforeach
							</tbody>
						</table>
						{{ $results->appends(request()->query())->links() }}
					</div>
				</div>
			</div>
		</div>
	@else
		<div class="container">
			<div class="row mt-5">
				<div class="col-4">
					<div class="alert alert-warning">
						Debe hacer una Selección
					</div>
				</div>

				<div class="col-6">
					<div class="alert alert-info">
						<ul>
							<li>Inicio y Fin son campos requeridos.</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	@endif

@endsection

@section('js')
	<script type="text/javascript">
	const toast = swal.mixin({
		toast: true,
		position: 'top-end',
		showConfirmButton: false,    timer: 4000
	});

	var app = new Vue({
		el: '#app',

		data: {
			movimiento: '',
			linea_id: '{{ request()->linea_in_id ?? 0 }}',
			listLineas: [],
			buque_id: '{{ request()->buque_in_id ?? 0 }}',
			listBuques: [{ 'value': 0, 'label': 'Selección' }],
			viaje_id: '{{ request()->viaje_in_id ?? 0 }}',
			listViaje: [{ 'value': 0, 'label': 'Selección' }],
			contenedor: null,
			tipo_id: [{ 'value': 0, 'label': 'Selección' }],
			isoList: null,
			iso_id: 0
		},

		created(){
			axios.get('/listLineas')
			.then(response => {
				response.data.forEach(element => this.listLineas.push(element))
			})
			.catch(function(error) {
				console.log(error)
			})
			if( this.linea_id != 0 && (this.buque_id != 0 || typeof this.buque_id !== 'undefined') ){
				axios.get('/' + this.linea_id + '/filterBuques')
				.then(response => {
					if( response.data.length > 1 ){
						this.listBuques = response.data
					}else {
						this.buque_id = 0
						this.listBuques = [{ 'value': 0, 'label': 'Selección' }]
						toast.fire({
							type: 'warning',
							title: 'No hay buques registrado',
						});
					}
				})
				.catch(function(error) {
					console.log(error)
				})
				axios.get('/' + this.buque_id +'/filterViajes')
				.then(response => {
					this.listViaje = response.data
				})
				.catch(function(error) {
					console.log(error)
				})
			}
		},

		watch: {
			linea_id: function(){
				axios.get('/' + this.linea_id + '/filterBuques')
				.then(response => {
					if( response.data.length > 1 ){
						this.listBuques = response.data
						this.buque_id = 0
					}else {
						this.buque_id = null
						this.listBuques = [{ 'value': null, 'label': 'Selección' }]
						toast.fire({
							type: 'warning',
							title: 'No hay buques registrado',
						});
					}
				})
				.catch(function(error) {
					console.log(error)
				})
			},
			buque_id: function(){
				axios.get('/' + this.buque_id +'/filterViajes')
				.then(response => {
					this.listViaje = response.data
					this.viaje_id = 0
				})
				.catch(function(error) {
					console.log(error)
				})
			},
			contenedor: function(){
				if( this.contenedor.length == 11 ){
					axios.get('/contenedores/' + this.contenedor + '/getPropiedades')
					.then(response => {
						this.tipo_id = response.data.tipo_id
						this.iso_id = response.data.iso_id
					})
					.catch(function(error) {
						console.log(error)
					})
				}
			},
			tipo_id: function(){
				axios.get('/isos/filtroIso/' + this.tipo_id)
				.then(response => {
					this.isoList = response.data
				})
				.catch(function(error) {
					console.log(error)
				})
			},
			iso_id: function(){}
		},

	})
	</script>
@endsection