@extends('admin.layout.app')

@section('more-head')
<link rel="stylesheet" type="text/css" href="{{asset('admin/bower_components/select2/dist/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('admin/dist/css/AdminLTE.min.css')}}">
@endsection

@section('main-content')

<section class="content-header">
	<h1>
		WPO TRANSPORT ALLOCATION
		
	</h1>

</section>

<section class="content">

	<!-- Default box -->
	<div class="box">
		<div class="box-header with-border">
			<h3 class="box-title">VEHICLE ALLOCATION</h3>

			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
				title="Collapse">
				<i class="fa fa-minus"></i></button>

			</div>
		</div>
		 @include('includes.messages')
		<form role="form" method="post" action="{{ route('allocation.store') }}" enctype="multipart/form-data">
		{{csrf_field()}}
			<div class="box-body">
				<div class=" col-md-offset-0 col-md-5">
					<div class="col-md-8">
						

						<div class="form-group">

						
							<label for="psp_ref_id"> PSP Reference</label>
						 <select id="psp_ref_id" class="form-control select2 required" data-placeholder="Select pspref"
							style="width: 100%;" name="psp_ref_id">
							<option value="">Select PSP Reference no.</option>
							@foreach ($psprefs as $pspref)
								<option value="{{$pspref->id}}">{{$pspref->ref_no}}</option>
							@endforeach
							
						</select>
						<br><br>
					
				</div>
				<div class="form-group">

						
							<label for="psp_ref_id"> PSP Vessels</label>
						 <select id="vessel" class="form-control select2" data-placeholder="Select pspref"
							style="width: 100%;" name="vessel">
							<option value="">Select PSP Vessel.</option>
							
							
						</select>
						<br><br>
					
				</div>
						<div class="form-group">
							<label for="name"> ETA for Vessel:</label>
							<input type="date" class="form-control" id="eta" name="eta" placeholder="ETA">
						</div>

						<div class="form-group">
						<label for="port_id" class="col-md-4 control-label">SELECT POL</label>
						
							<select id="port_id" class="form-control select2 required" data-placeholder="Select loading port"
							style="width: 100%;" name="port_id">
							<option value="default">Select Loading Port</option>
							@foreach ($ports as $port)
							<option value="{{$port->id}}">{{$port->name}}</option>
							@endforeach

						</select>
					
				</div>
						
						
						
                </div>
						

					</div>

           <div class="col-md-4">
			<div class="form-group">
							<label for="transporter" class="col-md-4 control-label">SELECT TRANSPORTER:</label>
							
								<select id="transporter" class="form-control select2" data-placeholder="Select Transporter"
								style="width: 100%;" name="transporter_id">
								<option value="">Select Transporter</option>
								@foreach ($transporters as $transporter)
								<option value="{{$transporter->id}}">{{$transporter->name}}</option>
								@endforeach

							</select>
						
					</div> 
					<!--<div class="form-group">
							<label for="agent_id" class="col-md-4 control-label">SELECT AGENT:</label>
							
								<select id="agent_id" class="form-control select2" data-placeholder="Select Agent"
								style="width: 100%;" name="agent_id">
								<option value="">Select Agent</option>
								foreach ($agents as $agent)
								<option value="{{--$agent->id}}">{{$agent->name--}}</option>
								endforeach

							</select>
						
					</div> -->
						<div class="form-group">
							<label for="agent">Agent:</label>
							<input type="text" class="form-control" id="agent" name="agent" placeholder="Agent"><br>
						</div>

						<div class="form-group">
							<label for="allocated_tonnage">Allocated Tonnage:</label>
							<input type="number" step="any" class="form-control" id="allocated_tonnage" name="allocated_tonnage" placeholder="Tonnage"><br>
						</div>

						<div class="form-group">

						<label for="month">Select Month</label>
						 <select id="roles" class="form-control select2" data-placeholder="Select Month"
							style="width: 100%;" name="month">
							<option value="">Select Month</option>
							<option value="January">January</option>
							<option value="February">February</option>
							<option value="March">March</option>
							<option value="April">April</option>
							<option value="May">May</option>
							<option value="June">June</option>
							<option value="July">July</option>
							<option value="August">August</option>
							<option value="September">September</option>
							<option value="October">October</option>
							<option value="November">November</option>
							<option value="December">December</option>
						</select>
					  <br><br>
				</div>
					
		</div>
		</div>
				
				
			<!-- /.box-body -->
			<div class="box-footer">
			 @can('allocations.create', Auth::user())
				<button type="submit" class="btn btn-primary">Submit</button>
			 @endcan
			</div>
		</form>
		<!-- /.box-footer-->
	</div>
	<!-- /.box -->

</section>

@endsection


@section('more-scripts')
	<script src="{{asset('admin/bower_components/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
    <script src="{{asset('admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
    <script>
  $(function () {
   
    $('.select2').select2();
    
    $('#example1').DataTable({'pageLength':25, 'paging' : false, 'searching':false});
    
    $('#psp_ref_id').on('change', function(event) { 
    	//alert('WORKING');
    	var pspref_id = $('#psp_ref_id').val();
        
        var vessel = $('#vessel').val();
        var token = $('input[name=_token]').val();
    	//alert(pspref_id);
        $.post('/get_vessel_by_psp/'+pspref_id, {psp_ref_id: pspref_id, '_token': token},
        function(data){ 
          //console.log(data);
          $('#vessel').html(data);
          var vessel = $('#vessel').val();
          ////
          $.get('/get_agent_by_psp/'+vessel ,
          	function(data){ 
          		//console.log(data);

          		$('#agent').val(data);
          		var vessel = $('#vessel').val();
		        $.post('/get_eta_by_psp/'+vessel, {vessel: vessel, '_token': token},
		        function(data){ 
		          //console.log(data);
		          
		          //document.write(data)
		          $('#eta').val(data);
		          $('#eta').load(url + ' #eta');

          
       			 });


          	});


          
        });
        
        
    });
     
     $('#vessel').on('change', function(event) { 
     	var vessel = $('#vessel').val();
     	var token = $('input[name=_token]').val();

     	 $.get('/get_agent_by_psp/'+vessel ,
          	function(data){ 
          		//console.log(data);

          		$('#agent').val(data);

         var vessel = $('#vessel').val();
        $.post('/get_eta_by_psp/'+vessel, {vessel: vessel, '_token': token},
        function(data){ 
          //console.log(data);
          
          //document.write(data)
          $('#eta').val(data);
          $('#eta').load(url + ' #eta');

          
        });

          	});
     	
        
     });

     
     /*$('#agent').on('click', function(event) { 
    	var vessel = $('#vessel').val();
          	//alert(vessel);
          	$('#agent').val(vessel);
     	//var token = $('input[name=_token]').val();
     	$.get('/get_agent_by_psp/'+vessel ,
        function(data){ 
          //console.log(data);
          	
          //document.write(data)
          //$('.box').load(url + ' .box');
           $('#agent').val(data);

          
        });
     });*/
    /*
    $('#search-btn').on('click', function(event) {
      var q = $('#q').val();
      var token = $('input[name=_token]').val();
      $.post('/search', {q: q, '_token': token},
        function(data){ 
          //console.log(data);
          //document.write(data)
           $('.box').html(data);
          $('.box').load(url + ' .box');

          
        });
    });*/

    /*$('#q').on('keypress', function(event) {
     var q = $(this).val();
     var token = $('input[name=_token]').val();
      $.post('/search', {q: q, '_token': token},
        function(data){ 
          ////console.log(data);
          //document.write(data)
          $('#example1').html(data);
          $('#example1').load(url + ' #example1');

          
        });

    });*/
     
  })
</script>

@endsection