<div class="col-xl-6 col-lg-12 order-lg-2 order-xl-1" id="dashupcoming">

    <!--begin:: Widgets/Best Sellers-->
    <div class="kt-portlet kt-portlet--height-fluid">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    Upcoming Job
                </h3>
            </div>
            <div class="kt-portlet__head-toolbar">
                <ul class="nav nav-pills nav-pills-sm nav-pills-label nav-pills-bold" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#kt_widget5_tab1_content" role="tab">
                            Latest
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#kt_widget5_tab2_content" role="tab">
                            Next Month
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#kt_widget5_tab3_content" role="tab">
                            Next 3 Month
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="kt-portlet__body">
            <div id="chartdiv4"></div>
        </div>
    </div>

    <!--end:: Widgets/Best Sellers-->
</div>


<script>
am4core.ready(function() {

 

  // Themes begin
  //am4core.useTheme(am4themes_material);
  am4core.useTheme(am4themes_dataviz);
  //am4core.useTheme(am4themes_animated);
  // Themes end

  var chart = am4core.create("chartdiv4", am4charts.PieChart3D);
  chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

  //chart.legend = new am4charts.Legend();

  chart.data = [
    
    {
      country: "Job Accepted",
      litres: 30
    },{
      country: "Job Unasigned",
      litres: 20
    }
  ];

  var series = chart.series.push(new am4charts.PieSeries3D());
  series.dataFields.value = "litres";
  series.dataFields.category = "country";
  // Set up tooltips
  series.tooltip.label.interactionsEnabled = true;
  series.tooltip.keepTargetHover = true;
  series.slices.template.tooltipHTML = '<b>{category} : {value}</b><br><a onclick="openUpcomingJobModal('+"'{category}'"+')" href="#">More info</a>';


}); // end am4core.ready()

function openUpcomingJobModal(params) {
  if(params == "Job Accepted"){
      $('#addJobAcceptedView').modal('show');
  }else{
    $('#addJobNotAcceptedView').modal('show');
  }
}
</script>