@extends('layouts.app')

@section('content')

<div class="row mt-2">
    <div class="col-md-3">
      <div class="widgets">
        <h4 class="line"> @lang('general.filter') </h4>

        <form method="post" id="myform" onsubmit="return false" class="row g-3">

          <div class="col-12">
            <label for="inputState" class="form-label"> IQ# </label>
              <input type="text" class="form-control" placeholder="Search by Enquiry No." id="iq" autocomplete="off"/>
          </div>

          <div class="col-12">
            <label for="inputState" class="form-label">Status</label>
              <select id="status" class="form-select">
              <option selected disabled>All</option>
              <option value="2">Open</option>
              <option value="1">Closed</option>
            </select>
          </div>

          <div class="col-12">
            <label for="inputState" class="form-label">@lang('general.Approval Status') </label>
            <select id="approval" class="form-select">
              <option selected disabled>All</option>
              <option value="1">Approved</option>
              <option value="2">Rejected</option>
              <option value="0">Pending</option>
            </select>
          </div>


          <div class="col-12">
            <label for="inputState" class="form-label">@lang('general.Origin') </label>
              <input type="text" class="form-control" placeholder="Type Country Name" id="orgin-country" autocomplete="off"/>
              <input type="hidden" name="orgincountry" id="orgincountry" value="" />
          </div>

          <div class="col-12">
            <label for="inputState" class="form-label">@lang('general.Destination') </label>
              <input type="text" class="form-control" placeholder="Type Country Name" id="destination-country" autocomplete="off"/>
              <input type="hidden" id="destinationcountry" name="destinationcountry" value="" />
          </div>


        <div class="col-12 mt-4">
          <button type="submit" class="btn btn-primary w-100" onclick="filter()">@lang('general.filter') </button>
          <button class="mt-2 btn btn-danger w-100" onclick="location.reload()"> Reset </button>
        </div>

      </form>

      </div>
    </div>

    <div class="col-9">
      <div class="widgets minheight">
        <div class="float-left w-100 line" style="margin-bottom: 1rem;">
          <h4 class="float-left pt-2"> All Enquiries </h4>
        </div>
        <table class="table no-footer" id="table">
          <thead>
            <tr>
              <th class="fg-darkMagenta text-center" style="width: 5%">Sl</th>
              <th class="fg-darkMagenta text-center" style="width: 10%">Load</th>
              <th class="fg-darkMagenta text-right">Shipment</th>
              <th class="fg-darkMagenta text-center" style="width: 18%">Enquiry No (IQ#) </th>
              <th class="fg-darkMagenta text-center" style="width: 10%">Approval</th>
              <th class="fg-darkMagenta text-center" style="width: 15%">Date</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>

  </div>

<script>
function filter(){
  var status = $('#status').val();
  var approval = $('#approval').val();
  var origin = $('#orgincountry').val();
  var destination = $('#destinationcountry').val();
  var iq = $('#iq').val();
  $.ajax({
      type: "GET",
      url: '/shipper/filter?status='+status+'&approval='+approval+'&origin='+origin+'&destination='+destination+'&iq='+iq,
      success: function(data)
      {
        var table = $('#table').DataTable();
        table.ajax.reload();
      }
  });
}

$(function() {
    var table = $('#table').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        searching: false,
        "bLengthChange": false,
        lengthChange: false,
        dom: 'Rlfrtip',
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 0, 1, 2, 3 ] },
            { "bSearchable": false, "aTargets": [ 0, 1, 2, 3 ] }
        ],
        "rowCallback": function (nRow, aData, iDisplayIndex) {
     var oSettings = this.fnSettings ();
     $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1+".");
     return nRow;
},
 pageLength:10,
"language": {
    "info": "Showing _START_ to _END_ of _TOTAL_ enquiries  "
  },
        ajax: '/shipper/enquirylist',
        columns: [
            { data: 'count', name: 'count', className: 'text-center' },
            { data: 'quote_type', name: 'quote_type', className: 'text-center' },
            { data: 'action', name: 'action'},
            { data: 'enquiry_no', name: 'enquiry_no', className: 'text-center'},
            { data: 'status', name: 'status', className: 'text-center pr-10' },
            { data: 'postdate', name: 'postdate', className: 'text-center' },
        ]
    });
});

$(function () {
  $( "#orgin-country" ).autocomplete({
    source: "/datasource/countries",
    minLength: 2,
    select: function( event, ui ) {
      $('#orgincountry').val(ui.item.iso2);
      $("#orgin-country" ).val(ui.item.name);
      $.ajax({
        url: "/datasource/airports/"+ui.item.iso2,
        type: "GET",
        success: function (res) {
          $('#orgin-port').html(res);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log(textStatus, errorThrown);
        }
      });
      return false;
    },
  }).autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div>" + item.name + "</div>" )
      .appendTo( ul );
  };;

  $( "#destination-country" ).autocomplete({
    source: "/datasource/countries",
    minLength: 2,
    select: function( event, ui ) {
      $('#destination-country-id').val(ui.item.iso2);
      $("#destination-country" ).val(ui.item.name);
      $.ajax({
        url: "/datasource/airports/"+ui.item.iso2,
        type: "GET",
        success: function (res) {
          $('#destination-port').html(res);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log(textStatus, errorThrown);
        }
      });
      return false;
    },
  }).autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div>" + item.name + "</div>" )
      .appendTo( ul );
  };;
});

</script>

@endsection