@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>
   Shipping Instruction
  </h1>

 </section>

 <section class="content">

  <!-- Default box -->
  <div class="box">
   <div class="box-header with-border">
    <h3 class="box-title">Shipping Instruction</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('shipping_instruction.store') }}" enctype="multipart/form-data"
    id="myFormId">
    {{ csrf_field() }}
    <div class="box-body">
     <div class="col-md-offset-0 col-md-8">

      <div class="form-group">
       <div class="col-md-8">
        <label for="sales_advice_id" class="col-md-4 control-label"><br>MK Number:</label>
        <select id="sales_advice_id" class="form-control select2" data-placeholder="Select MK" style="width: 100%;"
         name="sales_advice_id" required>
         <option value=""selected>Select MK Number:</option>
         @foreach ($sales_advices as $sales_advice)
          <option value="{{ $sales_advice->id }}">{{ $sales_advice->mk_number }}</option>
         @endforeach

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

      <div class="form-group">
       <div class="col-md-8">
        <label for="consignee_id" class="col-md-4 control-label"><br>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="form-group">
       <div class="col-md-8">
        <label for="destinationport_id" class="col-md-4 control-label"><br>Select destinationport:</label>
        <select id="destinationport_id" class="form-control select2" data-placeholder="Select destination port"
         style="width: 100%;" name="destinationport_id" required>
         <option value=""selected disabled>Select destinationport:</option>
         @foreach ($destinationports as $destinationport)
          <option value="{{ $destinationport->id }}">{{ $destinationport->name }}</option>
         @endforeach

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

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

        </select>
       </div>
       <input type="hidden" id="basis" name="basis">
      </div>

      <div class="col-md-8">
       <br>
       <div class="form-group">
        <label for="si_tonnage">Shipping Instruction Tonnage: <span id="tonnage_available"
          style="color: red;"></span></label>
        <input type="text" class="form-control" id="si_tonnage" name="si_tonnage" step="0.0001" placeholder="Tonnage"
         min="0.0001" required>
        <input type="hidden" name="tonnage_remaining" id="tonnage_remaining">
       </div>

      </div>

      <div class="col-md-8">
       <div class="form-group">
        <label for="si_date">Shipping Instruction Date:</label>
        <input type="date" class="form-control" id="si_date" name="si_date" placeholder="date" required>
       </div>

      </div>

      <div class="col-md-8">
       <div class="form-group">
        <label for="consignee_reference"> <br>Consignee's Reference</label>
        <input type="text" class="form-control" id="consignee_reference" name="consignee_reference"
         placeholder="Consignee's Reference" required>
       </div>

      </div>

      <div class="form-group">
       <div class="col-md-8">
        <label for="cocoa_type_id" class="col-md-4 control-label"><br>Select Cocoa Type:</label>
        <select id="cocoa_type_id" class="form-control select2 sd" data-placeholder="Select Cocoa Type"
         style="width: 100%;" name="cocoa_type_id" required>
         <option value=""selected disabled>Select Cocoa Type:</option>
         @foreach ($cocoa_types as $cocoa_type)
          <option value="{{ $cocoa_type->id }}">{{ $cocoa_type->type_name }}</option>
         @endforeach

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

      <div class="col-md-8">
       <div class="form-group hise">
        <label for="specialty_type"> <br>Specialty: </label>
        <input type="text" class="form-control sd" id="specialty_type" name="specialty_type"
         placeholder="Specialty" required>

       </div>

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

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

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

     </div>
    </div>

    <!-- /.box-body -->
    <div class="box-footer">
     <button type="submit" id="submit_form" 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');

   $('.select2').select2()


   $.ajaxSetup({

    headers: {

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

    }

   });

   $('#destinationport_id').on('change', function(event) {
    //event.preventDefault();
    /* Act on the event */

    var dp_id = parseInt($(this).val());
    var sales_id = parseInt($('#sales_advice_id').val());
    var token = $('input[name="_token"]').val();
    var bid = '';
    $.ajax({
     url: '{{ url('get_destination_basis') }}',
     type: 'post',
     data: {
      token: token,
      dp_id: dp_id,
      sales_id: sales_id
     },
     success: function(data) {
      console.log(data);
      data = JSON.parse(data)
      $("#base_id").val(data.base_id).attr('disabled', true).change();
      $("#basis").val(data.base_id);
      //alert($('#basis').val())
     }
    })
   });

   $('#sales_advice_id').on('change', function(event) {
    //event.preventDefault();
    var sa_id = parseInt($(this).val());
    var token = $('input[name="_token"]').val();
    //alert(sa_id);
    $.ajax({
     url: '{{ url('get_sales_advice_details') }}',
     type: 'post',
     data: {
      token: token,
      sa_id: sa_id,
     },
     success: function(data) {
      console.log(data);
      data = JSON.parse(data)
      var mk_number = data.mk_number;
      var shipping_period = data.shipping_period;
      var shipping_year = data.shipping_year;
      var count = data.count;
      console.log(data);

      var contract_number = shipping_period + shipping_year + mk_number + count;
      console.log(data.consignee_name);
      $('#number').val(contract_number);
      $('#contract_number').val(contract_number)
      $('#number').attr({
       disabled: true,
      });
      $('#uk_cif_price').val(data.cif_price).attr('disabled', true);
      $('#contract_date').val(data.advice_date).attr('disabled', true);
      $('#advice_date').val(data.advice_date);
      $('#shipping_period').val(data.shipping_period_name).attr('disabled', true);
      $('#season_id').val(data.season_id).attr('disabled', true).change();
      $('#crop_id').val(data.crop_id).attr('disabled', true).change();

      //$('#consignee_id').append(new Option(data.consignee_name, data.consignee_id)).attr('selected', 'selected');
      //$('#consignee_id option[value=data.consignee_id]').attr('selected','selected');
      $("#consignee_id").val(data.consignee_id).change();
      $("#base_id").val(data.base_id).change();

      $("#consignee_id").attr('disabled', true);
      $("#base_id").attr('disabled', true);

      cs = $("#consignee_id").val();
      $("#buyer_id").val(cs);

      $('#tonnage_available').html('( ' + data.tonnage_available + ' tonnes available )');
      $('#tonnage_remaining').val(data.tonnage_available);
     }
    });

   });


   $('#si_tonnage').on('input', function(event) {
    value = $(this).val();

    tr = $('#tonnage_remaining').val();
    excess = parseInt(tr);

    max_value = tr;

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

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

    }


   });

   $('#cocoa_type_id').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    cocoa_type = $('#cocoa_type_id').val();
    if (cocoa_type == 1) {
     $('.hise').hide();
     $('.sd').removeAttr('required');
    } else
     $('.hise').show();

   });


   $('#myFormId').submit(function() {
    $("#submit_form", this)
     .html("Please Wait...")
     .attr('disabled', 'disabled');
    return true;
   });
  })
 </script>
@endsection