@extends('admin.layout.app')

@section('more-head')
	<link rel="stylesheet" href="{{asset('admin/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">
@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">STACK SUMMARY</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">
			  <div class="tab-pane" id="tab_2">
                <br>
                @foreach ($stacks as $stack)
                  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                      <br>
                   <!-- <div class="info-box bg-aqua">
                   <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span> -->
                   
                    <div class="info-box-content">
                        <span class="info-box-text" style="font-weight: bolder;font-size: 18px;"> {{strtoupper($stack->stack_name)}}</span> <br>

                         <span class="info-box-number" style="font-weight: bold; font-size: 20px;"> CAPACITY: {{strtoupper($stack->stack_capacity)}} Bags <br> {{strtoupper($stack->stack_capacity/16)}} in Tonnes </span> 

                        <span class="info-box-number">BAGS: <b style="color: red;"> {{$stack->waybill_stacks->sum('bags_quantity_added') - $stack->waybill_stacks->sum('bags_quantity_evacuated')}}</b></span>

                        <span class="info-box-number">CAT: 
                          <b style="color: green; font-style: italic;">
                  @foreach ($categorys as $category)
                    @if ($category->id == $stack->waybill_stacks->where('type','offloading')->pluck('category_id')->last())
                      {{strtoupper($category->name)}}
                    @endif
                  @endforeach
                          </b>
                        </span>

                        <div class="progress">
                          <div class="progress-bar progress-bar-striped active"  style="width:{{ $stack->waybill_stacks->sum('bags_quantity_added')/$stack->stack_capacity * 100}}%"></div>
                        </div>
                            <span class="progress-description">
                              {{ ($stack->waybill_stacks->sum('bags_quantity_added') - $stack->waybill_stacks->sum('bags_quantity_evacuated'))/$stack->stack_capacity * 100}}% of {{$stack->stack_capacity}}
                            </span>
              </div>
            
                  </div>
                 <!-- </div> -->
                
                @endforeach
                </div>
				
      </div>
				
			<!-- /.box-body -->
			<div class="box-footer">
				
			</div>
	
		
	</div>
	<!-- /.box -->

</section>

@endsection

@section('more-scripts')
	<script src="{{asset('admin/bower_components/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
    <script>
  $(function () {
    $('#example1').DataTable()
    $('#example2').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })
  })
</script>

@endsection