@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::model($vessel, [
                                'method' => 'POST',
                                'route' => ['logistic.order.vessel.storecopy'],
                                'class' => 'form-vertical',
                                'id' => 'myform',
                                'files' => true
                            ]) !!}

                            @include ('logistic.order.vessel.form', ['submitButtonText' => 'Submit'])

                            {!! 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,
                },
                'berth' : {
                    required : true,
                },
                'port' : {
                    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",
                },
                'berth' : {
                    required: "The berth field is required",
                },
                'port' : {
                    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