@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%"> Enquiries </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">Users</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">Shippers</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">Freights</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%"> Total Amount</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">All Transactions</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%"> Shippers vs Freights </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: 'Shippers',
            data: [],
            fill: false,
            backgroundColor: '#6ab04c',
            borderColor: [
              '#6ab04c'
            ],
            borderWidth: 2
          },
          {
            label: 'Freights',
            data: [],
            fill: false,
            backgroundColor: '#e74c3c',
            borderColor: [
              '#e74c3c'
            ],
            borderWidth: 2
          }
        ]
        },
          options: {
              scales: {
                  y: {
                      beginAtZero: true
                  }
              },
              elements: {
            line: {
              tension: 0.5,
            }
          }
          }
      });

    </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: 'All',
      data: [],
      fill: false,
      backgroundColor: '#6ab04c',
      borderColor: [
        '#6ab04c'
      ],
      borderWidth: 2
    },
    {
      label: 'FCL',
      data: [],
      fill: false,
      backgroundColor: '#e74c3c',
      borderColor: [
        '#e74c3c'
      ],
      borderWidth: 2
    },
    {
      label: 'LCL',
      data: [],
      fill: false,
      backgroundColor: '#27ae60',
      borderColor: [
        '#27ae60'
      ],
      borderWidth: 2
    },
    {
      label: 'AIR',
      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')</h4>

        <form method="post" id="myform" onsubmit="return false" class="row g-3">
          <div class="col-12">
            <label for="inputState" class="form-label"> Country </label>
              <input type="text" class="form-control" placeholder="United Arab Emirates" value="United Arab Emirates" id="orgin-country" autocomplete="off"/>
              <input type="hidden" name="orgincountry" id="orgincountry" value="AE" />
          </div>

          <div class="col-12">
            <label for="inputState" class="form-label"> City </label>
              <select class="form-control cities" name="city" id="city_id" value=""><option value="52716">Dubai</option></select>
          </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" style="margin-bottom: 1rem;">
          <h4 class="pt-2" style="display:inline-block;"> Approvals </h4>
        </div>
        <div id="loadenquiries"></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: "/admin/loadcities/"+ui.item.iso2,
        type: "GET",
        success: function (res) {
          $('.cities').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) {
    var city = $('#city_id').val();
    $.ajax(
    {
        url: '/admin/approvals/list?page=' + page+'&city='+city,
        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(){
  getData(1);
}

</script>

@endsection