@extends('layouts.template')

@section('content')
<section class="order-booking">
    <div class="container">
	    <div class="row">          
		    <h1 class="heading">Order Booking  <a href="{{ route('logistic.order.vessel') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a> : 
		        @if(Auth::user()->logistic_type == '2') 
		            Export
		        @endif  

		        @if(Auth::user()->logistic_type == '1') 
		            Import 
		        @endif
		    </h1>
		    @if(Session::has('flash_message'))
		    <div class="row">
		        <div class="col-md-12">
		            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
		        </div> 
		    </div>
    		@endif
    		<div class="vessel-div">
	    		<div class="table-heading" style="background:">
		            <h4 class="col-md-6 col-sm-6 col-xs-6"> Vessel Records </h4>
		        </div>
		        <div class="panel-body">
	                <div class="portlet box green">
	                    <div class="portlet-body">
	                        {!! Form::open(['route' => 'logistic.order.vessel.store','id'=>'myform','class' => 'form-vertical', 'files' => true, 'autocomplete' =>'off']) !!}

	                        @include ('logistic.order.vessel.form')

	                        {!! Form::close() !!}
	                        
	                    </div>
	                </div>
		        </div>
    		</div>
		</div>
	</div>
</section>
<style type="text/css">
	.selectboxit-container {
		display: block !important;
	}
</style>
<script type="text/javascript">
	jQuery(document).ready(function () {
	jQuery('#myform').validate( {
	        highlight: function(element) {
	            jQuery(element).closest('.control-group').addClass('error');
	            jQuery(element).closest('.control-group').addClass('error');
	        },
	        unhighlight: function(element) {
	            jQuery(element).closest('.control-group').removeClass('error');
	        },
	        errorElement: 'span',
	        errorClass: 'help-block',
	        focusInvalid: false, // do not focus the last invalid input
	        ignore: "", // validate all fields including form hidden input
	        rules: {
	            'shipping_line_id': {
	               required: true,
	            },
	            'vessel' : {
	                required: true,
	            },
	            'voyage' : {
	                required: true,
	            },
	            'eta' : {
	                required : true,
	            },
	            'etd' : {
	                required: true,
	            },
	            'berth' : {
	                required: true,
	            },
	            'ports_id' : {
	                required: true,
	            },
	            'depature' : {
	                required: true,
	            },
	            'status': {
	               required: true,
	            },
	       },
	       errorPlacement: function (error, element) {
	            if(element.parent('.input-group').length) {
	                error.insertAfter(element.parent());
	            } else {
	                error.insertAfter(element);
	            }
	       },
	       messages: {
	            'shipping_line_id' : {
	                required: "The shipping line field is required",
	            },
	            'vessel' : {
	                required: "The vessel field is required",
	            },
	            'voyage' : {
	                required: "The voyage field is required",
	            },
	            'eta' : {
	                required: "The eta field is required",
	            },
	            'etd' : {
	                required: "The etd field is required",
	            },
	            'berth' : {
	                required: "The berth field is required",
	            },
	            'ports_id' : {
	                required: "The port field is required",
	            },
	            'depature' : {
	                required: "The depature field is required",
	            },
	            'status' : {
	               required: "The status field is required",
	            },        
	        }
	   });
	});
</script>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
    $('#eta').change(function() {
      var vgm = $('#eta').val();
      var mates =  $('#eta').val();
      vgm = moment(vgm).subtract(4 , 'day'); 
      mates = moment(mates).subtract(2 , 'day');
      vgm = vgm.format("YYYY-MM-DD");
      mates = mates.format("YYYY-MM-DD");
      $('#vgm').val(vgm);
      $('#mates_receipt').val(mates);  
    });
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>  
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
@endsection