@extends('layouts.template')

@section('content')
<section class="order-booking">
    <div class="container-fluid">
	    <h1 class="heading">Order Booking  <a href="{{ route('logistic.order.create') }}" 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">
			@foreach($check as $s)
            @php $filter=$s; @endphp
            @endforeach
    		<div class="table-heading" style="background:">
	            <h4 class="col-md-6 col-sm-6 col-xs-6"> Vessel Records </h4>
	            <div class="tools">
	            	<a href="javascript:void(0)" style="background: unset;font-weight: 600;color: #fff;"><i data-toggle="modal" data-target="#myModal3" aria-hidden="true"><u>Add Vessel</u></i></a>
                    {!! Form::open(['method' => 'GET', 'route' => 'logistic.order.vessel','id'=> 'form2','style' => 'display:inline'])  !!}
                     <input type="checkbox" @if($filter=='on')checked @endif name="checkboxitem" id="checkboxitem" style="margin-top:1%;">  Show All
                   {!! Form::close()!!}
                </div>
	        </div>
	        <div class="panel-body">
	    		<div class="row-fluid">
		            <div class="span12">
		                <div class="portlet box green">
		                    <div class="portlet-body">
		                        <div class="clearfix">
		                            <div class="btn-group pull-right" style="padding-bottom: 1%;">
		                               <a id="addNewFormId" href="javascript:void(0)" class="btn btn-sm btn-success" title="Add New Vessel">
		                                    <i class="fa fa-plus" aria-hidden="true"></i> Add New Vessel
		                                </a>
		                                <button type="button" name="bulk_status" id="bulk_status" class="btn btn-sm btn-warning">Change Status</button>
		                            </div>
		                        
		                        </div>
		                        <table class="table table-striped table-bordered table-hover table-full-width" id="vesselTableId">
		                            <thead>
		                                <tr>
		                                <th>{{--<input type="checkbox" id="select_all">--}}#</th> <th>SL</th><th>Port</th><th>CS</th><th>Vessel</th><th>Voyage</th><th>Vgm</th><th>MR</th><th>Open</th><th>Close</th><th>Eta</th><th>Berth</th><th>Etd</th><th>Depature</th><th>Storage Start</th><th>Status</th><th>Actions</th>
		                                </tr>
		                            </thead>
		                            
		                            <tbody class="vessel-body-class">
		                                @foreach($vessel as $item)
		                                    <tr class="edit-row-class">
		                                        <td>{!! Form::checkbox("status[]",$item->id,false,['class'=>'vessel_status']) !!}</td>
		                                        <td>{{ $item->shipping_line['name'] }}</td>
		                                        <td>
		                                        {{ $item->ports['port_name'] }}
		                                        </td>
		                                        <td>{{ $item->call_sign }}</td>
		                                        <td style="white-space: nowrap;">{{ $item->vessel }}</td>
		                                        <td>{{ $item->voyage }}</td>
		                                        <td>{{ $item->vgm_wrap }}</td>
		                                        <td>{{ $item->mates_receipt_wrap }}</td>
		                                        <td>{{ $item->stack_open_wrap }}</td>
		                                        <td>{{ $item->stack_close_wrap }}</td>
		                                        <td>{{ $item->eta_wrap }}</td>
		                                        <td>{{ $item->berth_wrap }}</td>
		                                        <td>{{ $item->etd_wrap }}</td>
		                                        <td>{{ $item->depature_wrap }}</td>
		                                        		                                        <td>13/01/70</td>
		                                        <td>{!! $item->status == 0 ? '<span class="label label-warning">Inactive</span>' : '<span class="label label-success">Active</span>' !!}</td>
		                                        <td style="white-space: nowrap;">
		                                            <a href="javascript:void(0)" class="copy-btn" data-id="{{encrypt($item->id)}}"><button class="btn btn-xs btn-success" type="button"><i class="fa fa-copy" aria-hidden="true"></i></button></a>
		                                            <!-- <a href="{{ route('logistic.order.vessel.show', $item->id) }}" class="edit-btn" title="View Vessel"><button class="btn blue btn-xs btn-primary"><i class="fa fa-eye" aria-hidden="true"></i></button></a> -->
		                                            <a href="javascript:void(0);" title="Edit Vessel" class="edit-btn" data-id="{{encrypt($item->id)}}"><button class="btn btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button></a>
		                                            {!! Form::open([
		                                                'method'=>'DELETE',
		                                                'route' => ['logistic.order.vessel.destroy', $item->id],
		                                                'style' => 'display:inline'
		                                            ]) !!}
		                                                {!! Form::button('<i class="fa fa-trash" aria-hidden="true"></i>', array(
		                                                        'type' => 'submit',
		                                                        'class' => 'btn btn-danger btn-xs',
		                                                        'title' => 'Delete Vessel',
		                                                        'onclick'=>'return confirm("Confirm delete?")'
		                                                )) !!}
		                                            {!! Form::close() !!}
		                                        </td>
		                                    </tr>
		                                @endforeach
		                            </tbody>
		                        </table>
		                    </div>
		                </div>
		            </div>
		        </div>
	        </div>
		</div>
	</div>
</section>
<div class="data-modal modal fade" id="myModal3" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <div class="modal-body">
                {!! Form::open(['route' => 'logistic.order.vessel.add_new_vessel', 'id' => 'addnewvesselform', 'class' => 'form-vertical', 'files' => true]) !!}
                    
                <div class="row-fluid size">
                    <h5>Add New Vessel</h5>
                    <br/>
                    <div class="form-group col-sm-3 {{ $errors->has('vessel') ?  'has-error' : ''}}">
                        <label class="control-label">{!! Html::decode(Form::label('name', 'Name<span class="error">*</span>')) !!}</label>
                        {!! Form::text('vessel', null, ['class' => 'typeahead m-wrap form-control', 'required' => 'true', 'autocomplete' => 'off']) !!}
                        {!! $errors->first('vessel', '<p class="help-block">:message</p>') !!}
                    </div>
                    <div class="form-group customer-save-btn" style="margin-top: 2.4%;">
                        <input type="submit" value="Add">
                    </div>
                    <br/>
                </div>
                {!! Form::close() !!}
            </div>
        </div>     
    </div>
</div>
@if( app('request')->input('checkboxitem') == 'on')
	<script>
		$(document).ready(function () {
			$('#vesselTableId').DataTable({
		    	aLengthMenu: [
			        [10, 25, 50, 100, 200, -1],
			        [10, 25, 50, 100, 200, "All"]
			    ],
			    iDisplayLength: -1
		    });
		});
	</script>
@else
<script>
	$(document).ready(function () {
		$('#vesselTableId').DataTable({
	    	aLengthMenu: [
		        [10, 25, 50, 100, 200, -1],
		        [10, 25, 50, 100, 200, "All"]
		    ],
	    });

	    $('#addnewvesselform').validate();
	});
</script>
@endif
<script>
$(document).ready(function () {
    $("#checkboxitem").change(function () {
        $("#form2").submit();
    });
});
$(document).ready(function(){
    // $('#select_all').click(function(){
    //     $(".vessel_status").attr('checked', this.checked);
    //     if(this.checked){
    //      $('.vessel_status').parent().addClass("checked");
    //     }else {
    //      $('.vessel_status').parent().removeClass("checked");
    //     }
    // });
});
$(document).on('click', '#bulk_status', function(){
        var id = [];
        if(confirm("Are you sure you want to change the status of this data?"))
        {
            $('.vessel_status:checked').each(function(){
                id.push($(this).val());
            });
            if(id.length > 0)
            {
                $.ajax({
                    url:"{{ route('logistic.order.vessel.status')}}",
                    method:"post",
                    data:{id:id, '_token': '{{csrf_token()}}'},
                    success:function(data)
                    {
                        location.reload();
                    }
                });
            }
            else
            {
                alert("Please select atleast one checkbox");
            }
        }
    });

	$(document).on('click', '#addNewFormId', function(){
        $.ajax({
            url:"{{ route('logistic.order.vessel.add_new_form')}}",
            method:"post",
            dataType:"html",
            data:{'_token': '{{csrf_token()}}'},
            success:function(data)
            {
          		$('.vessel-body-class').prepend(data);
          		initializeValidation();
            }
        });
    });

    $(document).on('click', '.edit-btn', function(){
    	var id = $(this).data('id');
    	var element = $(this).closest('.edit-row-class');
        $.ajax({
            url:"{{ route('logistic.order.vessel.update_vessel_form')}}",
            method:"post",
            dataType:"html",
            data:{'id': id,'_token': '{{csrf_token()}}'},
            success:function(data)
            {
          		element.html(data);
          		initializeValidation();
            }
        });
    });

    function removeTr(element) {
        $(element).closest('.new-form-class').remove();
    }

	function initializeValidation() {
	    jQuery('#myform').validate( {
	        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: "Required",
	            },
	            'vessel' : {
	                required: "Required",
	            },
	            'voyage' : {
	                required: "Required",
	            },
	            'eta' : {
	                required: "Required",
	            },
	            'etd' : {
	                required: "Required",
	            },
	            'berth' : {
	                required: "Required",
	            },
	            'ports_id' : {
	                required: "Required",
	            },
	            'depature' : {
	                required: "Required",
	            },
	            'status' : {
	               required: "Required",
	            },        
	        }
	   });
	}

    $(document).on('click', '.tmp-edit-btn', function() {
        var id = $(this).data('id');
    	var element = $(this).closest('.edit-row-class');
        getVesselRow(id, element);
    });

    $(document).on('click', '.copy-btn', function(){
    	var id = $(this).data('id');
    	var element = $(this).closest('.edit-row-class');
        $.ajax({
            url:"{{ route('logistic.order.vessel.copy_vessel_form')}}",
            method:"post",
            dataType:"html",
            data:{'id': id,'_token': '{{csrf_token()}}'},
            success:function(data)
            {
          		element.html(data);
          		initializeValidation();
            }
        });
    });

    $(document).on('click', '.tmp-copy-btn', function() {
        var id = $(this).data('id');
    	var element = $(this).closest('.edit-row-class');
    	getVesselRow(id, element);
    });
    function getVesselRow(id, element) {
        $.ajax({
            url:"{{ route('logistic.order.vessel.get_vessel_row')}}",
            method:"post",
            dataType:"html",
            data:{'id': id,'_token': '{{csrf_token()}}'},
            success:function(data)
            {
          		element.html(data);
            }
        });
    }
</script>
{!! Html::script('app/js/bootstrap3-typeahead.min.js') !!}
<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>
<style type="text/css">
	#vesselTableId_wrapper {
		overflow-x: auto;
	}
</style>
@endsection