@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>
		PARKING MANAGEMENT SYSTEM
		
	</h1>

</section>

<section class="content">

	<!-- Default box -->
	<div class="box">
		<div class="box-header with-border">
			
            <div style="color:indigo; font-size: 26px; text-align: center;">DASHBOARD OF ALL WAREHOUSE CAR PARKS</div>
			<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="box-body table-responsive">
			  <table  class="table table-bordered">
                <thead>
                <tr>
                	<th style="color:red;"> WAREHOUSE</th>
                	<th style="color: red;">PARK</th>
                	
				</tr>
            </thead>
            <tbody>
					@foreach ($warehouses as $warehouse)
						<tr>
							<td><b>{{strtoupper($warehouse->name)}}</b></td>
							<td>
								<table class="table table-striped">
									<thead>
						                <tr>
						                	<th>PARK CODE</th>
						                	<th>CAPACITY</th>
						                	<th>PARK ASSIGNED</th>
						                	<th>SLOTS AVAILABLE</th>
						                	
										</tr>
						            </thead>
									@foreach ($parks_arr as $park_av)
									 @if ($warehouse->name == $park_av['warehouse'])
										<tr>
						            			<td>{{$park_av['code']}}</td>
						            			<td style="font-weight: bold; font-size: 20px; color:blue;">{{$park_av['capacity']}}</td>
						            			<td style="font-weight: bold; font-size: 20px; color:red;">{{$park_av['assigned']}}</td>
						      					<td style="font-weight: bold; font-size: 20px; color:green;">{{$park_av['available']}}</td>
						            	</tr>
									 @endif
      								@endforeach
								</table>
							</td>
						</tr>
					@endforeach

            </tbody>
			</table>	
      		</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()
    
  })
</script>

@endsection