@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>
   Factory: {{ App\Model\consignee::find($consignee_id)->name }}
  </h1>

 </section>

 <section class="content">

  <!-- Default box -->
  <div class="box">
   <div class="box-header with-border">
    <h3 class="box-title">IMPORT</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('import_detail.update', $import_detail) }}"
    enctype="multipart/form-data" id="myFormId">
    {{ csrf_field() }} {{ method_field('PUT') }}
    <div class="box-body">
     <div class="col-md-offset-0 col-md-6">
      <div class="col-md-8">

       <div class="form-group">

        <label for="ref_no"> Import Ref: </label>
        <select id="ref_no" class="form-control select2 required" data-placeholder="Select Import Ref"
         style="width: 100%;" name="ref_no" id="ref_no" required>
         <option value="" selected>Select Factory.</option>
         @foreach ($imports as $import)
          <option value="{{ $import->id }}" @if ($import_detail->import_id == $import->id) selected @endif>{{ $import->import_ref }}
          </option>
         @endforeach
        </select>

       </div>

       <div class="form-group">
        <label for="date"> Date: </label>
        <input type="date" class="form-control" id="date" name="date" placeholder="Name of Warehouse"
         value="{{ $import_detail->time_of_arrival }}" required>
       </div>

       <div class="form-group">
        <label for="country"> Country: </label>
        <input type="text" class="form-control" id="country" name="country" placeholder="country"
         value="{{ $import_detail->country }}" required>
       </div>

       <div class="form-group">

        <label for="vessel"> Vessel: </label>
        <input type="text" class="form-control" id="vessel" name="vessel" placeholder="vessel"
         value="{{ $import_detail->vessel }}" required>

       </div>

       <div class="form-group">
        <label for="eta"> ETA: </label>
        <input type="date" class="form-control" id="eta" name="eta" placeholder="eta"
         value="{{ $import_detail->date_of_arrival }}" required>
       </div>

       <div class="form-group">

        <label for="voyage_number"> Voyage Number: </label>
        <input type="text" class="form-control" id="voyage_number" name="voyage_number" placeholder="voyage number"
         value="{{ $import_detail->voyage_number }}" required>

       </div>
       <div class="form-group">

        <label for="crop_id"> Type of Beans: </label>
        <select id="crop_id" class="form-control select2 required" data-placeholder="Select Type of beans"
         style="width: 100%;" name="crop_id" required>
         <option value="" selected>Select Type of beans.</option>
         @foreach ($crops as $crop)
          <option value="{{ $crop->id }}" @if ($import_detail->crop_id == $crop->id) selected @endif>
           {{ ltrim($crop->name, 'Ghana') }}</option>
         @endforeach
        </select>

       </div>

       <div class="form-group">
        <label for="tonnage"> tonnage: <span id="tonnage_available" style="color: red;"></span></label>
        <input type="text" class="form-control" id="tonnage" name="tonnage" step="0.0001" min="0"
         placeholder="tonnage" value="{{ $import_detail->tonnage }}" required>
        <input type="hidden" name="tonnage_remaining" id="tonnage_remaining">
        <input type="hidden" name="previous_tonnage" id="previous_tonnage">
        <input type="hidden" name="expiry_date" id="expiry_date" value="">
       </div>

       {{-- <div class="form-group">
								<label for="net_weight"> Net Weight: </label>
								<input type="number" class="form-control" id="net_weight" step="1" name="net_weight"
									placeholder="net weight" value="{{ $import_detail-> }}" required>
							</div> --}}

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

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

 </section>
@endsection

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

   $('.select2').select2();

   $.ajaxSetup({

    headers: {

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

    }

   });


   $('#ref_no').bind('change', function(event) {
    //event.preventDefault();
    var im_id = parseInt($(this).val());
    var token = $('input[name="_token"]').val();
    //alert(sa_id);
    $.ajax({
     url: '{{ url('get_import_details') }}',
     type: 'post',
     data: {
      token: token,
      im_id: im_id,
     },
     success: function(data) {
      console.log(data);
      data = JSON.parse(data)

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

   }).change();


   $('#tonnage').on('input', function(event) {
    var c = this.selectionStart,
     r = /[^0-9\.]+/,
     v = $(this).val();
    if (r.test(v)) {
     $(this).val(v.replace(r, ''));
     c--;
    }
    this.setSelectionRange(c, c);
    value = $(this).val();

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

    max_value = tr;

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

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

    }

   });



   $('#myFormId').submit(function() {
    expiry_date = $('#expiry_date').val();
    today = new Date().toJSON().slice(0, 10);
    if (expiry_date > today) {
     $("#submit_form", this)
      .html("Please Wait...")
      .attr('disabled', 'disabled');
     return true;

    } else {
     alert('Your import reference has expired')
     return false;
    }
   });

  })
 </script>
@endsection