@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">ADD FACTORY EVACUATION</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('factory_evacuation.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"> Date: </label>
        <input type="date" class="form-control" id="date" name="date" placeholder="" required>
       </div>

       <div class="form-group">

        <label for="type_of_product_id"> Type of Product: </label>
        <select id="type_of_product_id" class="form-control select2" data-placeholder="Select Type of Product"
         style="width: 100%;" name="type_of_product_id" required>
         <option value="" selected>Select Type of Product.</option>
         @foreach ($type_of_products as $type_of_product)
          <option value="{{ $type_of_product->id }}">{{ $type_of_product->type_of_product }}</option>
         @endforeach
        </select>

       </div>

       <div class="form-group">
        <label for="quantity"> Quantity (Tonnes): </label>
        <input type="number" class="form-control" id="quantity" step="0.0001" name="quantity" placeholder="Tonnage"
         required>
       </div>

       <div class="form-group">

        <label for="mode_of_evacuation"> Type Of Ownership: </label>
        <select id="mode_of_evacuation" class="form-control select2 required" data-placeholder="Type of Ownership"
         style="width: 100%;" name="mode_of_evacuation" required>
         <option value="" selected>Select Type Of Ownership</option>
         <option value="Self">Self</option>
         <option value="Tolling">Tolling</option>
        </select>

       </div>

       <div class="form-group toll">

        <label for="toll_consignee_id">Tolling Factory </label>
        <select id="toll_consignee_id" class="form-control select2 toll_fc" data-placeholder="Select Factory"
         style="width: 100%;" name="toll_consignee_id" required>
         <option value="" selected>Select Tolling Factory</option>
         @foreach ($consignees as $consignee)
          <option value="{{ $consignee->id }}">{{ $consignee->name }}</option>
         @endforeach
        </select>

       </div>

       <div class="form-group">
        <label for="type_of_shipment"> Type Of Shipment: </label>
        <select id="type_of_shipment" class="form-control select2" data-placeholder="Type of Shipment"
         style="width: 100%;" name="type_of_shipment" required>
         <option value="" selected>Select type_of_shipment</option>
         <option value="local">local</option>
         <option value="foreign">foreign</option>
        </select>
       </div>

       <div class="form-group local">
        <label for="type_of_buyer"> Type Of Buyer: </label>
        <select id="type_of_buyer" class="form-control select2 lc" data-placeholder="Type of Buyer" style="width: 100%;"
         name="type_of_buyer" required>
         <option value="" selected>Select type of Buyer</option>
         <option value="factory">Factory</option>
         <option value="artisanal">Artisanal</option>
         <option value="other">Others</option>
        </select>
       </div>

       <div class="form-group factory">

        <label for="consignee_id"> Factory </label>
        <select id="consignee_id" class="form-control select2 fc" data-placeholder="Select factory" style="width: 100%;"
         name="consignee_id" required>
         <option value="" selected>Select Factory</option>
         @foreach ($consignees as $consignee)
          <option value="{{ $consignee->id }}">{{ $consignee->name }}</option>
         @endforeach
        </select>

       </div>

       <div class="form-group artisanal">
        <label for="artisanal_id "> Artisanal </label>
        <select id="artisanal_id" class="form-control select2 at" data-placeholder="Select Artisanal"
         style="width: 100%;" name="artisanal_id" required>
         <option value="" selected>Select Artisanal</option>
         @foreach ($artisanals as $artisanal)
          <option value="{{ $artisanal->id }}">{{ $artisanal->name }}</option>
         @endforeach
        </select>

       </div>

       <div class="form-group other">
        <label for="others"> Others: </label>
        <input type="text" class="form-control ot" id="others" name="others" placeholder="others" required>
       </div>

       <div class="form-group">

        <label for="warehouse_id"> Warehouse </label>
        <select id="warehouse_id" class="form-control select2" data-placeholder="Select Warehouse"
         style="width: 100%;" name="warehouse_id" required>
         <option value="" selected>Select Warehouse</option>
         @foreach ($warehouses as $warehouse)
          <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
         @endforeach
        </select>

       </div>

       {{-- <div class="form-group foreign">
								<label for="container_number"> Container Number: </label>
								<input type="text" class="form-control fn" id="container_number" name="container_number"
									placeholder="container_number" required>
							</div> --}}

       <div class="form-group foreign">

        <label for="port_of_exit"> Port of Loading: </label>
        <select id="port_of_exit" class="form-control select2 fn" data-placeholder="Port of Loading"
         style="width: 100%;" name="port_of_exit" required>
         <option value="" selected>Select Port of Loading</option>
         <option value="tema">Tema</option>
         <option value="takoradi">Takoradi</option>
        </select>

       </div>

       {{-- <div class="form-group foreign">
								<label for="vessel"> Vessel: </label>
								<input type="text" class="form-control fn" id="vessel" name="vessel" placeholder="vessel" required>
							</div> --}}

       <div class="form-group local">
        <label for="truck_no"> Truck: </label>
        <input type="text" class="form-control lc" id="truck_no" name="truck_no" placeholder="Truck Number"
         required>
       </div>

       <div class="form-group foreign">
        <label for="destination"> Destination Port: </label>
        <input type="text" class="form-control fn" id="destination" name="destination" placeholder="destination"
         required>
       </div>

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

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

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

   $('.factory').hide();
   $('.artisanal').hide();
   $('.other').hide();
   $('.at').removeAttr('required');
   $('.ot').removeAttr('required');
   $('.fc').removeAttr('required');
   $('.local').hide();
   $('.lc').removeAttr('required');
   $('.toll').hide();
   $('.toll_fc').removeAttr('required');

   $('#mode_of_evacuation').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    type_of_ownership = $('#mode_of_evacuation').val();
    if (type_of_ownership == 'Self') {
     $('.toll').hide();
     $('.toll_fc').removeAttr('required');

    } else {
     $('.toll').show();
     $('.toll_fc').prop('required', true);

    }



   });

   $('#type_of_shipment').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    type_of_shipment = $('#type_of_shipment').val();
    if (type_of_shipment == 'local') {
     $('.local').show();
     $('.lc').prop('required', true);
     $('.foreign').hide();
     $('.fn').removeAttr('required');
    } else {
     $('.foreign').show();
     $('.local').hide();
     $('.lc').removeAttr('required');
    }

   });

   $('#type_of_buyer').on('change', function(event) {
    event.preventDefault();
    /* Act on the event */
    type_of_buyer = $('#type_of_buyer').val();
    if (type_of_buyer == 'factory') {
     $('.factory').show();
     $('.fc').prop('required', true);
     $('.artisanal').hide();
     $('.other').hide();
     $('.at').removeAttr('required');
     $('.ot').removeAttr('required');
    }
    if (type_of_buyer == 'artisanal') {
     $('.artisanal').show();
     $('.at').prop('required', true);
     $('.factory').hide();
     $('.other').hide();
     $('.fc').removeAttr('required');
     $('.ot').removeAttr('required');
    }
    if (type_of_buyer == 'other') {
     $('.other').show();
     $('.ot').prop('required', true);
     $('.artisanal').hide();
     $('.factory').hide();
     $('.at').removeAttr('required');
     $('.fc').removeAttr('required');
    }

   });

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