@extends('layouts.app')
@section('content')
	<div class="container" id="app" v-cloak>
		<div class="row">
			<div class="col-12">
				{!! Form::open(['route' => 'inventarios.store','method' => 'POST']) !!}
				<div class="form-row">
					<div class="form-group col-3">
						{!! Form::label('linea_in_id', 'Linea', ['class' => 'form-control-label']) !!}
						<select class="form-control" name="linea_in_id" v-model="linea_id" required>
							<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-3">
						{!! Form::label('buque_id', 'Buque', ['class' => 'form-control-label']) !!}
						<select class="form-control" name="buque_in_id" v-model="buque_id" required>
							<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-3">
						{!! Form::label('viaje_id', 'Viaje', ['class' => 'form-control-label']) !!}
						<select class="form-control" name="viaje_in_id" v-model="viaje_id" required>
							<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-2">
						{!! Form::label('acta_id', 'Acta', ['class'=>'form-control-label']) !!}
						{!! Form::text('acta_id', old('acta_id'), ['class'=>'form-control']) !!}
						{!! $errors->first('acta_id', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col-2">
						{!! Form::label('eir_in', 'EIR', ['class'=>'form-control-label']) !!}
						{!! Form::number('eir_in', old('eir_in'), ['class'=>'form-control','required']) !!}
						{!! $errors->first('eir_in', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col">
						{!! Form::label('frd', 'Fecha/Recepción', ['class'=>'form-control-label']) !!}
						<input class="form-control" type="datetime" id="frd" name="frd" value="{{ \Illuminate\Support\Carbon::now() }}" required>
						{{-- {!! Form::date('frd', , ['class' => 'form-control','required']) !!} --}}
						{!! $errors->first('frd', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col-3">
						{!! Form::label('contenedor', 'Contenedor', ['class'=>'form-control-label']) !!}
						{!! Form::text('contenedor', old('contenedor'), ['class'=>'form-control text-uppercase','autocomplete'=>'off','v-model' => 'contenedor','pattern' => '([A-Za-z]{3})(U|u)([0-9]{7})','size'=>'11','required']) !!}
						{!! $errors->first('contenedor', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col">
						{!! Form::label('tipo_id', 'Tipo', ['class' => 'form-control-label']) !!}
						{!! Form::select('tipo_id', \App\Tipo::selectRaw('CONCAT(tamano," ",descripcion) AS descripcion, id')->pluck('descripcion','id'), null, ['class' => 'form-control','v-model' => 'tipo_id','required']) !!}
						{!! $errors->first('tipo_id', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col">
						{!! Form::label('iso_id', 'ISO', ['class' => 'form-control-label']) !!}
						<select class="form-control" name="iso_id" v-model="iso_id">
							<option value="0">Selección</option>
							<option v-for="item in isoList" :value="item.value">@{{ item.label }}</option>
						</select>
						{!! $errors->first('iso_id', '<small class="help-block text-danger">:message</small>') !!}
					</div>
				</div>
				<div class="form-row">
					<div class="form-group col-2">
						{!! Form::label('patio_id', 'Patio', ['class'=>'form-control-label']) !!}
						{!! Form::select('patio_id', \App\Patio::pluck('nombre','id'), null, ['class' => 'form-control','placeholder'=>'Seleccionar Patio','required']) !!}
						{!! $errors->first('patio_id', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col-2">
						<div class="form-group">
							{!! Form::label('estatus_in', 'Estatus', ['class'=>'form-control-label']) !!}
							{!! Form::select('estatus_in', ['EMPTY'=>'EMPTY','FULL'=>'FULL'], null, ['class' => 'form-control','placeholder'=>'Seleccionar Estatus','required']) !!}
							{!! $errors->first('estatus_in', '<small class="help-block text-danger">:message</small>') !!}
						</div>
					</div>
					<div class="form-group col-2">
						<div class="form-group">
							{!! Form::label('condicion_in', 'Condicion', ['class'=>'form-control-label']) !!}
							{!! Form::select('condicion_in', ['OPR'=>'OPR','DMG'=>'DMG'], null, ['class' => 'form-control','placeholder'=>'Seleccionar Condición','required']) !!}
							{!! $errors->first('condicion_in', '<small class="help-block text-danger">:message</small>') !!}
						</div>
					</div>
					<div class="form-group col-6">
						{!! Form::label('consignatario_id', 'Consignatario', ['class'=>'form-control-label']) !!}
						{!! Form::text('consignatario_id', old('consignatario_id'), ['class'=>'form-control','required']) !!}
						{!! $errors->first('consignatario_id', '<small class="help-block text-danger">:message</small>') !!}
					</div>
				</div>
				<div class="form-row">
					<div class="form-group col-3">
						{!! Form::label('observaciones', 'Observaciones', ['class'=>'form-control-label']) !!}
						{!! Form::textarea('observaciones', old('observaciones'), ['class' => 'form-control', 'placeholder' => 'Observaciones', 'rows' => 4, 'cols' => 50]) !!}
						{!! $errors->first('observacion', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col-3">
						{!! Form::label('bl', 'Bill Of Landing', ['class'=>'form-control-label']) !!}
						{!! Form::text('bl', old('bl'), ['class' => 'form-control', 'placeholder' => 'Observaciones']) !!}
						{!! $errors->first('bl', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col-3">
						{!! Form::label('precintos_in', 'Precintos', ['class'=>'form-control-label']) !!}
						{!! Form::text('precintos_in', old('precintos_in'), ['class' => 'form-control', 'placeholder' => 'Precintos']) !!}
						{!! $errors->first('precintos_in', '<small class="help-block text-danger">:message</small>') !!}
					</div>
					<div class="form-group col-3">
						{!! Form::label('booking_id', 'Booking/Asignación', ['class'=>'form-control-label']) !!}
						{!! Form::text('booking_id', old('booking_id'), ['class' => 'form-control', 'placeholder' => 'Booking']) !!}
						{!! $errors->first('booking_id', '<small class="help-block text-danger">:message</small>') !!}
					</div>
				</div>
				{!! Form::submit('Ingreso', ['class'=>'btn btn-success']) !!}
				<a class="btn btn-warning" href="{{ url('inventarios') }}">Cancelar</a>
				{!! Form::close() !!}
			</div>
		</div>
	</div>
@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: {
			linea_id: null,
			listLineas: [{ 'value': null, 'label': 'Selección' }],
			buque_id: null,
			listBuques: [{ 'value': null, 'label': 'Selección' }],
			viaje_id: null,
			listViaje: [{ 'value': null, '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)
			})
		},

		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