@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="{{asset('admin/bower_components/datatables.net-bs/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" href="{{asset('admin/bower_components/datatables.net-bs/css/buttons.dataTables.min.css')}}">
@endsection

@section('main-content')

<section class="content-header">
  <h1>
    OPERATIONS MANAGEMENT SYSTEM
  </h1>

</section>


<section class="content">



  <div class="box">
    <div class="box-header with-border hiide">
      <h3 class="box-title">Summary LBC Situation</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">



      <div class="col-md-12 table-responsive">


        <table id="example2" class="table table-bordered table-striped">
          <thead>

            <tr>
              <th>No.</th>
              <th>LBC</th>
              <th>Quantity Offloaded</th>
            </tr>
          </thead>
          <tbody>

            @foreach ($results as $result)

            <tr>

              <td>{{$loop->index + 1}}.</td>
              <td>{{$result->LBC}}</td>
              <td>{{number_format($result->Offloaded_Quantity)}}</td>
            </tr>
            @endforeach
          </tbody>

        </table>

      </div>

      <div class="col-md-12">


      </div>


    </div>

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

    </div>
    <!-- /.box-footer-->
  </div>
  <!-- /.box -->

</section>

@endsection

@section('more-scripts')
<script src="{{asset('admin/bower_components/datatables.net/js/jquery-3.5.1.js')}}"></script>
<script src="{{asset('admin/bower_components/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('admin/bower_components/datatables.net/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('admin/bower_components/datatables.net/js/jszip.min.js')}}"></script>
<script src="{{asset('admin/bower_components/datatables.net/js/pdfmake.min.js')}}"></script>
<script src="{{asset('admin/bower_components/datatables.net/js/vfs_fonts.js')}}"></script>
<script src="{{asset('admin/bower_components/datatables.net/js/buttons.html5.min.js')}}"></script>
<script src= "{{asset('admin/bower_components/datatables.net/js/buttons.print.js')}}"></script>
<script>
  $(function () {
   $('#example1').DataTable()
   $('#example2').DataTable( {
    'searching'   : true,
    'paging'      : true,
    'ordering'    : true,
    'autoWidth'   : true,
    'lengthChange': true,
    'info'        : true,
    "pageLength": 50,
    dom: 'Bfrtip',
    buttons: [
    {
      extend: 'excelHtml5',
      title: 'Summary LBC Situation Report',
      customize: function( xlsx ) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];

        $('row c', sheet).attr( 's', '50' );
      }
    },
    {
      extend: 'pdfHtml5',
      title: 'Summary LBC Situation Report'
    },
    {
      extend: 'print',
      title: '<h2 style="position:absolute; top:20; left:120;">Summary LBC Situation Report</h2>',
      messageTop: '<img src="{{asset('admin/dist/img/cmclogo.png')}}" style="position:relative; top:0; left:0;" />'
    }
    ]
  } );
 })

</script>
@endsection