@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('multi.invoice.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="invoice_number"> Invoice number</label>
                          <input type="text" class="form-control" id="invoice_number" name="invoice_number" placeholder="shipment  ">
                         </div>

                        </div> -->
      <div class="col-md-8">
       {{-- <div class="form-group">
        <label for="invoice_number"> GC Number</label>
        <input type="text" class="form-control" id="invoice_number" name="invoice_number" placeholder="GC Number">
       </div> --}}
       {{-- <div class="form-group">
        <label for="consignee_id"> 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>
      <div class="col-md-8">
       {{-- <div class="form-group">
        <label for="invoice_number"> GC Number</label>
        <input type="text" class="form-control" id="invoice_number" name="invoice_number" placeholder="GC Number">
       </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">
       <br>
       <label for="invoice_date"> Invoice date</label>
       <div class="form-group">
        <input type="date" class="form-control" name="invoice_date" id="invoice_date">
        <input type="hidden" name="invoice_type" id="invoice_type" value="foreign">
       </div>

      </div>
      <div class="col-md-8">
       <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="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 ">
       </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">
         @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">
         @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">
       </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">
       </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 Roles" style="width: 100%;"
         name="loadingport_id">
         @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;"></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="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 consignee_id">
       <div class="col-md-8">
        <label for="consignee_id" class="col-md-4 control-label"><br>Select Buyer:</label>
        <select id="consignee_id" class="form-control select2 buyer" data-placeholder="Select Roles"
         style="width: 100%;" name="consignee_id" required>
         @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"><br> 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 ">
        </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');
   $('.consignee_id').hide();
   $('.buyer').removeAttr('required');
   $('#premium_details').hide();
   $('#premium_status').on('change', function() {
    val = this.value;

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

     $('#premium_details').show()

     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') {
     $('.consignee_id').show();
     $('.buyer').prop('required', true);
    } else {
     $('.consignee_id').hide();
     $('.buyer').removeAttr('required');
    }

   });

   $('.select2').select2()

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

  })
 </script>
@endsection