@extends('layouts.app')

@section('content')

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

.leftfreight span {
  font-weight: normal;
}

.dash {
  text-align: center;
}
.dash td {
  width: 30%;
  text-align: center;
}
.dash h4 {
  color: #2b2256;
}
.dash span {
  color: #47388d !important;
  background: transparent !important;
  font-size: 16px;
}
</style>

<div class="row mt-2">
  <div class="col-md-1"></div>
  <div class="col-md-3">
      <div class="card">
        <div class="card-header">
          <div class="top-header">
              <h5 class="m-0" style="width: 75%"> Shipments </h5>
          </div>
        </div>
        <div class="card-body">
          <div class="w-100 float-left">
            <table class="w-100 dash">
              <tr>
                <td> <h4> {{$data['total']}} </h4> <span class="badge pr-2 pl-2 pt-1 pb-1 bg-primary">Total</span> </td>
                <td style="width: 3%;border-left: 1px solid #ccc"></td>
                <td> <h4> {{$data['del']}} </h4> <span class="badge pr-2 pl-2 pt-1 pb-1 bg-primary">Delivered</span> </td>
                <td style="width: 3%;border-right: 1px solid #ccc"></td>
                <td> <h4> {{$data['pen']}} </h4> <span class="badge pr-2 pl-2 pt-1 pb-1 bg-primary">Active</span> </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="card mt-2">
        <div class="card-header">
          <div class="top-header">
              <h5 class="m-0" style="width: 75%"> Balance </h5>
          </div>
        </div>
        <div class="card-body">
          <div class="w-100 float-left">
            <table class="w-100 dash">
              <tr>
                <td> <h4> {{$data['curr']->currency}} {{number_format((float)$data['curr']->balance, 2, '.', ',')}}/- </h4> <span class="badge pr-2 pl-2 pt-1 pb-1 bg-primary">Total Receivables</span> </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  <div class="col-md-3">
    <div class="card">
      <div class="card-header">
        <div class="top-header">
            <h5 class="m-0" style="width: 75%"> Monthly Shipments </h5>
        </div>
      </div>
      <div class="card-body">
        <canvas id="del" height="225"></canvas>
        <script>
        const ctx1 = document.getElementById('del').getContext('2d');
        const myChart1 = new Chart(ctx1, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: '',
                data: [],
                backgroundColor: [
                  'rgb(255, 99, 132)',
                   'rgb(54, 162, 235)',
                   'rgb(255, 205, 86)'
                ],
                borderWidth: 1
            }]
        },
        options: {
          plugins:{
             legend: {
              display: false
            },
            tooltips: {
              mode: 'label',
              callbacks: {
              label: function(tooltipItem, data) {
                return tooltipItem.yLabel+" Shipments";
              },
             }
            }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                      // forces step size to be 50 units
                      stepSize: 1
                    }
                }
            }
        }
    });

    </script>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-header">
        <div class="top-header">
            <h5 class="m-0" style="width: 75%"> Shipments Types </h5>
        </div>
      </div>
      <div class="card-body">
        <canvas id="myChart" width="400" height="215"></canvas>
      </div>
    </div>
    <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: [],
    datasets: [{
      label: 'FCL Load',
      data: [],
      fill: false,
      backgroundColor: '#e74c3c',
      borderColor: [
        '#e74c3c'
      ],
      borderWidth: 2
    },
    {
      label: 'LCL Load',
      data: [],
      fill: false,
      backgroundColor: '#27ae60',
      borderColor: [
        '#27ae60'
      ],
      borderWidth: 2
    },
    {
      label: 'AIR Load',
      data: [],
      fill: false,
      backgroundColor: '#3498db',
      borderColor: [
        '#3498db'
      ],
      borderWidth: 2
    }
  ]
  },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        elements: {
      line: {
        tension: 0.5,
      }
    }
    }
});
</script>
  </div>
  <div class="col-md-1"></div>
</div>

<div class="row mt-2">
    <div class="col-md-1"></div>
    <div class="col-md-3">
      <div class="widgets">
        <h4 class="line"> @lang('general.filter') Orders </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"> Shipper  </label>
              <input type="text" class="form-control" placeholder="Search by Shipper" id="byshipper" autocomplete="off"/>
              <input type="hidden" name="freight_id" id="shipper_id" value="" />
          </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-7 minheight ">
      <div class="widgets">
        <div class="float-left w-100 line mb-0" style="margin-bottom: 1rem;">
          <h4 class="pt-0 m-0" style="display:inline-block;"> Active Orders </h4>
        </div>
        <div class="float-left w-100">
          <div class="inquiry mt-0" id="loadenquiries" class="m-0 p-0"></div>
        </div>
      </div>
    </div>

    <!-- <div class="col-3 ">
      <div class="widgets">
        <div class="float-left w-100 line mb-0" style="margin-bottom: 1rem;">
          <h4 class="pt-2" style="display:inline-block;"> New Enquiries </h4>
        </div>
        <div class="float-left w-100 newenquiries">
          <ul id="newenquiries" class="list-group list-group-flush pl-0 noline"></ul>
        </div>
      </div>
    </div> -->

    <div class="col-md-1"></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 );
  };;

  $( "#byshipper").autocomplete({
    source: "/datasource/shippers",
    minLength: 2,
    select: function( event, ui ) {
      $('#shipper_id').val(ui.item.id);
      $("#byshipper" ).val(ui.item.name);
      // $.ajax({
      //   url: "/datasource/shippers/"+ui.item.id,
      //   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();

function getData() {
    $.ajax(
    {
        url: '/freight/activeorders',
        type: "get",
        datatype: "html"
    }).done(function(data){
        $("#loadenquiries").empty().html(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError){
          alert('No response from server');
    });
}

// newenquiries();

function newenquiries() {
    $.ajax(
    {
        url: '/freight/newenquiries',
        type: "get",
        datatype: "html"
    }).done(function(data){
        $("#newenquiries").empty().html(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError){
          alert('No response from server');
    });
}



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

</script>

@endsection