@extends('admin.layout.app')

@section('more-head')
  <link rel="stylesheet" href="{{asset('admin/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<style>
    #chartLegend ul {
  list-style: none;
}
#chartLegend li {
  float: left;
  margin-right: 10px;
  min-height: 35px;
}
#chartLegend li > span {
    padding: 5px;
}
</style>

@endsection

@section('main-content')
<section class="content-header">
	<h1>
		OPERATIONS MANAGEMENT SYSTEM
		
	</h1>

</section>

<section class="content">

	<!-- Default box -->
	<div class="box">
		<div class="box-header with-border">
			<h3 class="box-title">TONNAGES RECEIVED PER TOC FOR <span style="color:red;">{{strtoupper($season_name)}} </span></h3>
           
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
				title="Collapse">
				<i class="fa fa-minus"></i></button>

			</div>
		</div>
		
			<div class="box-body table-responsive">
			   <table class="table table-bordered" id="example2">
          <thead>
             <tr>
               <th> TAKE OVER CENTER </th>
               <th style="text-transform: uppercase;">EXPECTED TONNAGE RECEIVED</th>
               <th style="text-transform: uppercase;">ACTUAL TONNAGE RECEIVED</th>

             </tr>
            
          </thead>
         
        <tbody>
            @foreach ($tpts as $tpt)
            <tr>
               <td style="text-transform: uppercase;">{{$tpt['port_name']}}</td>
               <td style="text-transform: uppercase;">{{number_format($tpt['expected_tonnage'],4)}}</td>
               <td style="text-transform: uppercase;">{{number_format($tpt['actual_tonnage'],4)}}</td>
               
                
            </tr>
            @endforeach
        </tbody>
            <tfoot>
                <tr>
                    <td style="text-transform: uppercase; color: green; font-weight: bolder; ">
                     TOTAL
                    </td>
                    <th>
                        {{number_format(($expected_tonnages)->sum(),4)}}
                    </th>
                    <th>
                        {{number_format(($actual_tonnages)->sum(),4)}}
                    </th>
                    
                </tr>
            </tfoot>


           
         </table>
            <hr><hr>

            <div style="width: 50%">
                <canvas id="canvas" height="450" width="600"></canvas>
            <div id="chartLegend"></div>
            </div>

         
        
      

       </div>
				
			<!-- /.box-body -->
			<div class="box-footer">
				
			</div>
	
		
	</div>
	<!-- /.box -->

</section>

@endsection

@section('more-scripts')
  <script src="{{asset('admin/bower_components/chart.js/Chart.js')}}"></script>
  
 <script src="{{--asset('admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js')--}}"></script>

 <script src="https://code.jquery.com/jquery-3.3.1.js">
   
 </script>

 <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
   
 </script>

 <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js">
   
 </script>

 <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js">
   
 </script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js">
   
 </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js">
   
 </script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js">
   
 </script>

 <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js">
   
 </script>

<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js">
   
 </script>



    <script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

    var barChartData = {
        labels : {!! $label !!},
        datasets : [
            {
                label: "EXPECTED TONNAGE",
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data : {!! $expected_tonnages !!}
            },
            {
                label: "ACTUAL TONNAGE",
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,0.8)",
                highlightFill : "rgba(151,187,205,0.75)",
                highlightStroke : "rgba(151,187,205,1)",
                data : {!! $actual_tonnages !!}
            }
        ]

    }

    var tmp1 = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>";

    var options = {
    bezierCurve:false,
    legendTemplate: tmp1
    };

    /*
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive : true
        });
    }
    */
    function getChart() {
        var ctx = $("#canvas")[0].getContext("2d");
     return  new Chart(ctx);
    }

    var ctx = getChart().Bar(barChartData, options);
    $("#chartLegend").html(ctx.generateLegend());
   

    </script>

    <script>
  $(function () {
    /*$('#example1').DataTable({

      'paging': true, 
       'searching'   : true,
       dom: 'Bfrtip',
       

  })

    $('#example2').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })*/

    $('#example1').DataTable( {
        'searching'   : true,
        'paging'      : true,
        'ordering'    : false,
        "pageLength": 50,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );

    $('#example2').DataTable( {
        'searching'   : true,
        'paging'      : true,
        'ordering'    : true,
        "pageLength": 50,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );

    $('#example3').DataTable( {
        'searching'   : true,
        'paging'      : true,
        'ordering'    : false,
        "pageLength": 50,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );

    $('#example4').DataTable( {
        'searching'   : true,
        'paging'      : true,
        'ordering'    : false,
        "pageLength": 50,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );




  })
</script>

@endsection