@extends('layouts.app')

@section('content')
	<div class="container" id="app">
		<div class="row">
			<div class="col">
				<h3>Viajes <small>Nuevo</small></h3>
			</div>
		</div>
		<div class="row mb-2">
			<div class="col-8">
				{!! Form::open(['url'=>'viajes','method'=>'POST']) !!}

				<div class="form-row">
					<div class="form-group col-3">
						{!! Form::label('linea_id', 'Linea', ['class' => 'form-control-label']) !!}
						<select class="form-control" name="linea_id" v-model="linea_id">
							<option v-for="item in listLineas" :value="item.value">@{{ item.label }}</option>
						</select>
					</div>

					<div class="form-group col-3">
						{!! Form::label('buque_id', 'Buque', ['class' => 'form-control-label']) !!}
						<select class="form-control" name="buque_id" v-model="buque_id">
							<option v-for="item in listBuques" :value="item.value">@{{ item.label }}</option>
						</select>
					</div>

					<div class="form-group col-3">
						{!! Form::label('nombre', 'Viaje', ['class' => 'form-control-label']) !!}
						{!! Form::text('nombre', null, ['class' =>'form-control']) !!}
					</div>
				</div>

				<div class="form-row">
					<div class="form-group col-3">
						{!! Form::label('eta', 'ETA', ['class' => 'form-control-label']) !!}
						{!! Form::date('eta', \Illuminate\Support\Carbon::now(), ['class' => 'form-control']) !!}
					</div>
					<div class="form-group col-3">
						{!! Form::label('arribo', 'Arribo', ['class' => 'form-control-label']) !!}
						{!! Form::date('arribo', \Illuminate\Support\Carbon::now(), ['class' => 'form-control']) !!}
					</div>
				</div>

				{{ Form::button('Registrar ' . '<i class="fas fa-sign-in-alt"></i>', ['type' => 'submit', 'class' => 'btn btn-success'] )  }}
				<a class="btn btn-warning" href="{{ url()->previous() }}">Cancelar</a>

				{!! Form::close() !!}
			</div>
		</div>
	</div>
@endsection

@section('js')
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',

		data: {
			linea_id: 0,
			listLineas: [
				{ 'value': 0, 'label': 'Seleccion' }
			],
			buque_id: 0,
			listBuques: [
				{ 'value': 0, 'label': 'Seleccion' }
			]
		},

		created(){
			axios.get('/listLineas')
			.then(response => {
				this.listLineas = response.data
				console.log(response.data)
			})
			.catch(function(error) {
				console.log(error)
			})
		},

		watch: {
			linea_id: function(){
				axios.get('/' + this.linea_id + '/filterBuques')
				.then(response => {
					this.listBuques = response.data
				})
				.catch(function(error) {
					console.log(error)
				})
			}
		},

	})
	</script>
@endsection