@extends('layouts.dashboard')

@section('title', $reportName)

@section('content')


<section class="pd">
	<div class="container-fluid">
		<div class="row">
			<h3 class="text-center">{{ ucwords($reportName) }}</h3>
			<div class="col-lg-12 col-md-12 col-sm-12">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">{{ $reportCategory }} > {{ ucwords($reportName) }}</div>
					<div class="panel-body">
						@foreach($apiData as $k=>$v)
							@php $headers = array_keys($v); @endphp
						@endforeach

						<table class="table table-striped" id="myDatatable">
							<thead>
								<tr>
									<th>Product ID</th>
									@foreach($headers as $header)
										<th>{{ $header }}</th>
									@endforeach
								</tr>
							</thead>
							<tbody>
								@foreach($apiData as $k=>$v)
								<tr>
									<td>{{ $k }}</td>
									@foreach($v as $attName=>$attVal)
										<td>{{ $attVal}}</td>
									@endforeach
								</tr>
								@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
	$('#myDatatable').DataTable();
</script>

@endsection