@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>
   Shipment
  </h1>

 </section>

 <section class="content">

  <!-- Default box -->
  <div class="box">
   <div class="box-header with-border">
    <h3 class="box-title">Shipment </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('shipment.store') }}" enctype="multipart/form-data"
    id="myFormId">
    {{ csrf_field() }}
    <div class="box-body">
     <div class="col-md-offset-0 col-md-6">
      <div class="col-md-8">
       {{-- <div class="form-group">
        <label for="consignee_id" class="col-md-4 control-label"><br>Select consignee:</label>
        <select id="consignee_id" class="form-control select2" data-placeholder="Select consignee" style="width: 100%;"
         name="consignee_id" required>
         <option value=""selected disabled>Select consignee:</option>
         @foreach ($consignees as $consignee)
          <option value="{{ $consignee->id }}">{{ $consignee->name }}</option>
         @endforeach

        </select>
       </div> --}}
       <div class="form-group">
        <label for="contract_id" class="col-md-4 control-label"><br>Select Contract:</label>
        <select id="contract_id" class="form-control select2" data-placeholder="Select Contract" style="width: 100%;"
         name="contract_id" required>
         <option value=""selected disabled>Select Contract:</option>
         @foreach ($facs as $fac)
          <option value="{{ $fac->id }}">{{ $fac->contract->number }} (SD: {{ $fac->sd_number }})</option>
         @endforeach

        </select>
       </div>
       @foreach ($facs as $fac)
        <input type="hidden" id="fac_id_{{ $fac->contract->id }}" value="{{ $fac->id }}">
       @endforeach
      </div>
      <input type="hidden" id="fac_id" name="fac_id">
      <div class="col-md-8">
       <br>
       {{-- <div class="form-group">
        <label for="invoice_number"> Invoice number</label>
        <input type="text" class="form-control" id="invoice_number" name="invoice_number" placeholder="GC Number  "
         required>
       </div> --}}
       <div class="form-group">
        <label for="basic-url">Invoice Number</label>
        <div class="input-group">
         <span class="input-group-addon" id="basic-addon3">GC: </span>
         <div class="form-inline">
          <input type="text" class="form-control" id="invoice_number" name="invoice_number" placeholder="xxxx/xxxx"
           maxlength="9" minlength="9" aria-describedby="basic-addon3" required>
         </div>
        </div>
       </div>

      </div>
      <!--<div class="col-md-8">
                                                                                     <div class="form-group">
                                                                                      <label for="reference_number"> Reference Number</label>
                                                                                      <input type="text" class="form-control" id="reference_number" name="reference_number" placeholder="shipment  ">
                                                                                     </div>

                                                                                    </div> -->
      <div class="col-md-8">
       <br>
       <label for="invoice_date"> Invoice date</label>
       <div class="form-group">
        <input type="date" class="form-control" name="invoice_date" id="invoice_date" required>
        <input type="hidden" name="invoice_type" id="invoice_type" value="foreign">
       </div>

      </div>
      <div class="col-md-8 bl">
       <div class="form-group">
        <label for="insurance_number"> Insurance Number</label>
        <input type="text" class="form-control" id="insurance_number" name="insurance_number"
         placeholder="shipment  ">
       </div>

      </div>

      <div class="col-md-8">
       <div class="form-group">
        <label for="tonnage_shipped">Tonnage Shipped</label>
        <input type="text" class="form-control" id="tonnage_shipped" name="tonnage_shipped"
         placeholder="tonnage shipment" step="0.0001" required>
       </div>
       <div>Total tonnage on Contract: <span id="tg" style="color: red; font-weight: bold;"></span> <input
         type="hidden" id="tgv"> </div>
       <div>Total tonnage on Allocation: <span id="ta" style="color: red; font-weight: bold;"></span> <input
         type="hidden" id="tav"> </div>
       <div>Total tonnage Shipped: <span id="ts" style="color: red; font-weight: bold;"></span> <input
         type="hidden" id="tsv"> <input type="hidden" id="shippingmode_id" name="shippingmode_id"></div>
       <br>
       {{-- <div> Tonnage remaining: <span id="tr_show" style="color: red; font-weight: bold;"></span> <input type="hidden" id="tr"> </div> <br> --}}
      </div>

      <div class="col-md-8 bl">
       <div class="form-group">
        <label for="bl_rate"> Freight Exchange Rate</label>
        <input type="number" step="0.0001" class="form-control" id="bl_rate" name="bl_rate"
         placeholder="shipment  bl_rate " min="1">
       </div>

      </div>

      <div class="form-group">
       <div class="col-md-8">
        <label for="vessel_id" class="col-md-4 control-label"><br>Select vessel:</label>
        <select id="vessel_id" class="form-control select2" data-placeholder="Select Roles" style="width: 100%;"
         name="vessel_id" required>
         @foreach ($vessels as $vessel)
          <option value="{{ $vessel->id }}">{{ $vessel->name }}</option>
         @endforeach

        </select>
       </div>
      </div>
      {{-- 	<div class="form-group">
				<div class="col-md-8">
					<label for="shippingmode_id" class="col-md-4 control-label"><br>Select Shipping Mode:</label>
					<select id="shippingmode_id" class="form-control select2" data-placeholder="Select Roles"
					style="width: 100%;" name="shippingmode_id" required>
					@foreach ($shippingmodes as $shippingmode)
					<option value="{{$shippingmode->id}}">{{$shippingmode->name}}</option>
					@endforeach

				</select>
			</div>
		</div> --}}

      <div class="col-md-8">
       <div class="form-group">
        <label for="bill_of_laden_number"> <br> Bill of Laden number</label>
        <input type="text" class="form-control" id="bill_of_laden_number" name="bill_of_laden_number"
         placeholder="shipment  bill_of_laden_number" required>
       </div>

      </div>

      <div class="col-md-8">
       <label for="bill_of_laden_date"> Bill of Laden Date</label>
       <div class="form-group">
        <input type="date" class="form-control" name="bill_of_laden_date" id="bill_of_laden_date" required>
       </div>

      </div>

      <div class="form-group">
       <div class="col-md-8">
        <label for="loadingport_id" class="col-md-4 control-label"><br>Select Loading Port:</label>
        <select id="loadingport_id" class="form-control select2" data-placeholder="Select Loading Port"
         style="width: 100%;" name="loadingport_id" required>
         <option value=""selected disabled>Select Loading Port:</option>
         @foreach ($loadingports as $loadingport)
          <option value="{{ $loadingport->id }}">{{ $loadingport->name }}</option>
         @endforeach

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

      <div class="form-group">
       <div class="col-md-8">
        <label for="consignor_id" class="col-md-4 control-label"> <br> Select Consignor</label>
        <select id="consignor_id" class="form-control select2" data-placeholder="Select Roles" style="width: 100%;"
         name="consignor_id">
         @foreach ($consignors as $consignor)
          <option value="{{ $consignor->id }}">{{ $consignor->name }}</option>
         @endforeach

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

      <div class="col-md-8">
       <label for="name"> Remarks</label>
       <div class="form-group">
        <textarea class="form-control" name="remarks" id="remarks" style="height: 100px;" required></textarea>
       </div>

      </div>
      <div class="col-md-8">
       <label for="name"> Additional Remarks</label>
       <div class="form-group">
        <textarea class="form-control" name="additional_remarks" id="additional_remarks" style="height: 100px;"></textarea>
       </div>

      </div>

      <div class="form-group">
       <div class="col-md-8">
        <label for="prepayment" class="col-md-4 control-label"><br>Pre-Payment:</label>
        <select id="prepayment" class="form-control select2" data-placeholder="Select Roles" style="width: 100%;"
         name="prepayment">
         <option value="no" selected>No</option>
         <option value="yes">Yes</option>
        </select>
        <br> <br>
       </div>
      </div>

      <div class="form-group">
       <div class="col-md-8">
        <label for="warehouse_charges" class="col-md-4 control-label"><br>Applicable Warehouse Charges:</label>
        <select id="warehouse_charges" class="form-control select2" data-placeholder="Select Roles"
         style="width: 100%;" name="warehouse_charges">
         <option value="no" selected>No</option>
         <option value="yes">Yes</option>
        </select>
       </div>
      </div>
      {{-- <div class="form-group">
       <div class="col-md-8">
        <label for="novated" class="col-md-4 control-label"><br>Novated Contract:</label>
        <select id="novated" class="form-control select2" data-placeholder="" style="width: 100%;" name="novated">
         <option value="no" selected>No</option>
         <option value="yes">Yes</option>
        </select>
       </div>
      </div>

      <div class="form-group novated_buyer_id">
       <div class="col-md-8">
        <label for="novated_buyer_id" class="col-md-4 control-label"><br>Select Buyer:</label>
        <select id="novated_buyer_id" class="form-control select2 buyer" data-placeholder="Select Roles"
         style="width: 100%;" name="novated_buyer_id" required>
         <option value=""selected disabled>Select Buyer:</option>
         @foreach ($consignees as $consignee)
          <option value="{{ $consignee->id }}">{{ $consignee->name }}</option>
         @endforeach

        </select>
       </div>
      </div> --}}

      <div class="form-group">
       <div class="col-md-8">
        <label for="premium_status" class="col-md-4 control-label"><br>Premium applicable:</label>
        <select id="premium_status" class="form-control select2" data-placeholder="Select Roles" style="width: 100%;"
         name="premium_status">
         <option value="no" selected>No</option>
         <option value="yes">Yes</option>
        </select>
       </div>
      </div>

      <div id="premium_details">
       <br> <br>
       <hr>
       <div class="col-md-8 bl">
        <div class="form-group">
         <label for="premium_ex_rate"> Freight Exchange Rate</label>
         <input type="number" step="0.0001" class="form-control" id="premium_ex_rate" name="premium_ex_rate"
          placeholder="premium_ex_rate " min="0">
        </div>

       </div>

       <div class="form-group">
        <div class="col-md-8">

         <label for="premium"> Select Premium:</label>
         <select id="premium" class="form-control select2" data-placeholder=" Select Premium" style="width: 100%;"
          name="premium">
          <option value="" id="loading" disabled>Select Premium</option>

         </select>
         <input type="hidden" id="shipment_id" name="shipment_id" value="">
         <br><br>

        </div>
       </div>

      </div>

     </div>
    </div>

    <!-- /.box-body -->
    <div class="box-footer">
     <button type="submit" id="verify_submit" class="btn btn-primary">Submit</button>
    </div>
   </form>
   <!-- /.box-footer-->
  </div>
  <!-- /.box -->

 </section>
@endsection

@section('more-scripts')
 <!-- Select2 -->
 <script src="{{ asset('admin/bower_components/select2/dist/js/select2.full.min.js') }}"></script>

 <script>
  $(function() {
   //alert('hello world');
   $('#premium_details').hide();
   $('.novated_buyer_id').hide();
   $('.buyer').removeAttr('required');

   $('.select2').select2()

   $.ajaxSetup({

    headers: {

     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    }

   });


   $('#contract_id').on('change', function(event) {
    // alert("contract_id");
    contract_id = parseInt($(this).val());
    fac_id = $('#fac_id_' + contract_id).val();
    // alert(contract_id)
    // $.ajax({
    // url:  '{{-- URL::to('/get/contract/tonnage/') --}}' +'/'+contract_id,
    // 	type: 'GET',

    // })
    // .done(function(data) {
    // 	ct = data
    // 	$('#tg').html(ct)
    // 	$('#tgv').val(ct)

    // 	console.log(data);
    // })

    // $.ajax({
    // 	url: '{{-- URL::to('/get/tonnage/shipped/') --}}' +'/'+contract_id,
    // 	type: 'GET',

    // })
    // .done(function(data) {
    // 	ts = data
    // 	$('#ts').html(ts)
    //        $('#tsv').val(ts)

    // 	console.log(data);
    // })
    $.ajax({
     url: '{{ url('get_contract_tonnage') }}',
     type: 'post',
     data: {
      contract_id: contract_id,
      fac_id: fac_id
     },
     success: function(data) {
      data = JSON.parse(data)
      var contract_tonnage = data.contract_tonnage;
      var all_contract_tonnage = data.all_contract_tonnage;
      var shippingmode = data.shipping_mode;
      sm = shippingmode
      ct = contract_tonnage
      at = all_contract_tonnage
      var fac_id = data.fac_id;
      $('#fac_id').val(fac_id);
      $('#shippingmode_id').val(sm)
      $('#tg').html(at)
      $('#ta').html(ct)
      tgv = $('#tgv').val(at)
      tav = $('#tav').val(ct)
      if (data.basis == 3) {
       // console.log(data.basis)
       $('.bl').hide()
      }
      if (data.basis == 1) {
       $('.bl').show()
      }

      console.log(data);
     }
    });
    $.ajax({
     url: '{{ url('get_tonnage_shipped') }}',
     type: 'post',
     data: {
      contract_id: contract_id,
     },
     success: function(data) {
      ts = data
      $('#ts').html(ts)
      tsv = $('#tsv').val(ts)

      console.log(data);
     }
    });

    // tgv = $('#tgv').val();
    // //alert(tgv)
    // tsv = $('#tsv').val();
    // 			tr = tgv - tsv;
    // 			//alert(tr);
    // $('#tr').val(tr);
    // $('#tr_show').html(tr);

   });

   $('#tonnage_shipped').on('input', function(event) {
    value = $(this).val();
    tgv = $('#tgv').val();
    tsv = $('#tsv').val();
    tr = tgv - tsv;

    max_value = tr;

    if ((value !== '') && (value.indexOf('.') === -1)) {

     $(this).val(Math.max(Math.min(value, max_value), -max_value));

    }


   });

   $('#verify_submit').click(function(event) {
    tonnage_shipped = $('#tonnage_shipped').val();
    //
    //return false;
    if (tonnage_shipped == 0 || tonnage_shipped == '') {
     alert('tonnage shipped cannot be ZERO or NULL. Kindly check whether the contract has been shipped already');
     return false;

    } else
     return true;
   });

   $('#premium_status').on('change', function() {
    val = this.value;

    //alert(val)
    if (val === "yes") {
     //alert("working")

     $('#premium_details').show()
     $('#premium_ex_rate').prop('required', true);
     $('#premium').prop('required', true);

     contract_id = $('#contract_id').val();
     shipment_id = $('#shipment_id').val();

     //alert(contract_id)

     $.ajax({
      url: "{{ url('get_premium_options') }}",
      type: "PUT",
      data: {
       contract_id: contract_id,
       shipment_id: shipment_id,
      },
      success: function(data) {
       $('#premium').html(data);
       console.log(data);
      }
     })


    } else {
     $('#premium_details').hide()
    }
   });

   $('#novated').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    novated = $('#novated').val();
    if (novated == 'yes') {
     $('.novated_buyer_id').show();
     $('.buyer').prop('required', true);
    } else {
     $('.novated_buyer_id').hide();
     $('.buyer').removeAttr('required');
    }

   });

   $('#myFormId').submit(function() {
    $("#verify_submit", this)
     .html("Please Wait...")
     .attr('disabled', 'disabled');
    return true;
   });


  })
 </script>
@endsection