@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>
   OPERATIONS MANAGEMENT SYSTEM

  </h1>

 </section>

 <section class="content">

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

       <div class="form-group">
        <label for="date">Letter Date:</label>
        <input type="date" class="form-control" id="date" name="date" required>
       </div>

       <div class="form-group">

        <label for="allocation_status" class="control-label">Status </label>
        <select id="allocation_status" class="form-control select2" data-placeholder="Status" style="width: 100%;"
         name="allocation_status" required>
         <option value="">Status </option>
         <option value="new">NEW ALLOCATION</option>
         <option value="revise">REVISION</option>
         <option value="cancel">CANCELLATION</option>
        </select>
       </div>

       <div class="form-group">
        <label for="allocation_number">Allocation Number:</label>
        <input type="text" class="form-control" id="allocation_number" name="allocation_number" required
         pattern="[a-zA-Z0-9]+">
       </div>

       <div class="form-group sp">
        <label for="shipping_programme_id" class="control-label">Shipping Programme </label>
        <select id="shipping_programme_id" class="form-control select2 sp_prog" data-placeholder="Shipping Programme"
         style="width: 100%;" name="shipping_programme_id" required>
         <option value="">Shipping Programme </option>
         @foreach ($shipping_programmes as $shipping_programme)
          <option value="{{ $shipping_programme->id }}"> {{ $shipping_programme->sp_ref }}
          </option>
         @endforeach

        </select>
       </div>

       <div class="form-group all">
        <label for="allocation_letter_id" class="control-label">Allocation Letter </label>
        <select id="allocation_letter_id" class="form-control select2 all_let" data-placeholder="Allocation Letter"
         style="width: 100%;" name="allocation_letter_id" required>
         <option value="">Allocation Letter </option>
         @foreach ($allocation_letters as $allocation_letter)
          <option value="{{ $allocation_letter->id }}">{{ $allocation_letter->ref_number }}
          </option>
         @endforeach

        </select>
       </div>

       <div class="form-group sp">
        <label for="destinationport_id" class="control-label">Destination </label>
        <select id="destinationport_id" class="form-control select2 sp_prog" multiple="multiple"
         data-placeholder="Destinations" style="width: 100%;" name="destinationports[]" required>
         <option value=""> Select Destinations </option>
         @foreach ($destinationports as $destinationport)
          <option value="{{ $destinationport->id }}">{{ $destinationport->name }}
           ({{ $destinationport->country->name }})
          </option>
         @endforeach

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

        <label for="port_id" class="control-label">Port </label>
        <select id="port_id" class="form-control select2 port" data-placeholder="Port" style="width: 100%;"
         name="port_id" required>
         <option value="">Port </option>
         @foreach ($ports as $port)
          <option value="{{ $port->id }}">{{ $port->name }}
          </option>
         @endforeach

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

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

        </select>
       </div>

       <div class="form-group sp">

        <label for="shipping_line_id" class="control-label">Shipping line </label>
        <select id="shipping_line_id" class="form-control select2 sp_prog" data-placeholder="Shipping line"
         style="width: 100%;" name="shipping_line_id" required>
         <option value="">Shipping line </option>
         @foreach ($shipping_lines as $shipping_line)
          <option value="{{ $shipping_line->id }}">{{ $shipping_line->shipping_line }}
          </option>
         @endforeach

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

        <label for="vessel_id" class="control-label">Vessel </label>
        <select id="vessel_id" class="form-control select2 sp_prog" data-placeholder="Vessel" style="width: 100%;"
         name="vessel_id" required>
         <option value="">Vessel </option>
         @foreach ($vessels as $vessel)
          <option value="{{ $vessel->id }}">{{ $vessel->name }}
          </option>
         @endforeach

        </select>
       </div>

       <div class="form-group sp">
        <label for="date">ETA (Date From):</label>
        <input type="date" class="form-control sp_prog" id="eta_dfrom" name="eta_dfrom" required>
       </div>

       <div class="form-group sp">
        <label for="date">ETA (Date To):</label>
        <input type="date" class="form-control sp_prog" id="eta_dto" name="eta_dto">
       </div>

       <div class="form-group sp">
        <label for="remarks"> Remarks: </label>
        <textarea rows="4" cols="50" class="form-control sp_prog" name="remarks" id="remarks"
         placeholder="Enter remarks here..."></textarea>
       </div>
      </div>

     </div>
    </div>

    <!-- /.box-body -->
    <div class="box-footer">
     <button type="submit" class="btn btn-primary" id="verify_submit">Submit</button>
    </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();
   $('.sp').hide();
   $('.all').hide();
   $('.po').hide();
   $('.sp_prog').removeAttr('required');
   $('.port').removeAttr('required');
   $('.all_let').removeAttr('required');

   $('#allocation_status').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    allocation_status = $('#allocation_status').val();
    if (allocation_status == 'new') {
     $('.all').hide();
     $('.all.let').removeAttr('required');
     $('.sp').show();
     $('.po').show();

    } else if (allocation_status == 'revise') {
     $('.sp').show();
     $('.all').show();
     $('.po').show();

    } else {
     $('.all').show();
     $('.sp').hide();
     $('.sp_prog').removeAttr('required');
     $('.po').hide();
     $('.port').removeAttr('required');

    }



   });

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

  })
 </script>
@endsection