@extends('layouts.app')

@section('content')

<style>
.leftfreight li {
  font-weight: 600;
  color: #1d1646;
}

.leftfreight span {
  font-weight: normal;
}
</style>

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

        <form method="post" id="myform" onsubmit="return false" class="row g-3">
          <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 minheight ">
      <div class="widgets">
        <div class="float-left w-100 line" style="margin-bottom: 1rem;">
          <h4 class="pt-2" style="display:inline-block;"> Explore Enquiries </h4>
        </div>
        <div id="loadenquiries"></div>
      </div>
    </div>


  </div>




<input type="hidden" id="step" value="step1" />
<input type="hidden" id="loadtype" value="fcl" />
<script>
// ------------step-wizard-------------
$(document).ready(function () {
  $('.nav-tabs > li a[title]').tooltip();

  //Wizard
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    var target = $(e.target);
    var url = e.target;
    var hash = url.toString().split('#')[1];
    $('#step').val(hash);
    if (target.parent().hasClass('disabled')) {
      return false;
    }
  });

  $(".next-step").click(function (e) {

    var active = $('.wizard .nav-tabs li.active');
    active.next().removeClass('disabled');
    nextTab(active);

  });
  $(".prev-step").click(function (e) {

    var active = $('.wizard .nav-tabs li.active');
    prevTab(active);

  });
});

function nextTab(elem) {
  $(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
  $(elem).prev().find('a[data-toggle="tab"]').click();
}


$('.nav-tabs').on('click', 'li', function () {
  $('.nav-tabs li.active').removeClass('active');
  $(this).addClass('active');
});

$(function () {

  var activeIndex = $('.active-tab').index(),
  $contentlis = $('.tabs-content li'),
  $tabslis = $('.tabs li');

  // Show content of active tab on loads
  $contentlis.eq(activeIndex).show();

  $('.tabs').on('click', 'li', function (e) {
    var $current = $(e.currentTarget),
    index = $current.index();
    var tabid = $current.attr('id');
    $tabslis.removeClass('active-tab');
    $current.addClass('active-tab');
    $contentlis.hide().eq(index).show();
    $('#loadtype').val(tabid);
    $('.form').attr('id', tabid);
  });



});

$(window).on('load', function() {
    $( ".form input" ).attr('autocomplete', 'new-password');
});


$(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/ports/"+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 ) {
      $('#destinationcountry').val(ui.item.iso2);
      $("#destination-country" ).val(ui.item.name);
      $.ajax({
        url: "/datasource/ports/"+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 );
  };;
});


$(document).ready(function() {
    $('.select2').select2({
      dropdownParent: $("#staticBackdrop")
    });
    $('.select3').select2({
      dropdownParent: $("#staticBackdrop")
    });
    $('.select4').select2({
      dropdownParent: $("#staticBackdrop")
    });
    $('.select5').select2({
      dropdownParent: $("#staticBackdrop")
    });
    $('.select6').select2({
      dropdownParent: $("#staticBackdrop")
    });
    $('.select7').select2({
      dropdownParent: $("#staticBackdrop")
    });
    $('.select8').select2({
      dropdownParent: $("#staticBackdrop")
    });


$('#cargo-type').change(function(){
    var id = $(this).val();
    if(id == 2) {
      $('#haz-class').removeAttr('disabled');
      $('#haz-des').removeAttr('disabled');
    } else {
      $('#haz-class').attr('disabled', 'disabled');
      $('#haz-des').attr('disabled', 'disabled');
    }
})


});


getData(1);

function getData(page) {
    $.ajax(
    {
        url: '/freight/load/enquirieslist?page=' + page,
        type: "get",
        datatype: "html"
    }).done(function(data){
        $("#loadenquiries").empty().html(data);
        location.hash = page;
    }).fail(function(jqXHR, ajaxOptions, thrownError){
          alert('No response from server');
    });
}

function filter(){
  var origin = $('#orgincountry').val();
  var destination = $('#destinationcountry').val();
  $.ajax({
      type: "GET",
      url: '/freight/filter?origin='+origin+'&destination='+destination,
      success: function(data)
      {
        getData(1);
      }
  });
}

</script>

@endsection