<table class='tabel table-borderless w-100 my-3'>
	<!-- thsi is another tab show order page -->
	<tr>
		<td>
			<nav class="nav border bg-light rounded align-items-center">
				<ul class="nav " id="myTab3">
					<li class="nav-item clear_item_category" data-id= "0"> <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill3' aria-current="page" href="#al">All ({{count($items)}})</a> </li>
					{{-- <li class="nav-item"> <a class="nav-link text-muted" data-toggle='pill3' href="#pizza">Pizza (20)</a> </li>
					<li class="nav-item"> <a class="nav-link text-muted" data-toggle='pill3' href="#burgers">Burgers (25)</a> </li>
					<li class="nav-item"> <a class="nav-link text-muted" data-toggle='pill3' href="#soft">Soft Drinks (30)</a> </li>
					<li class="nav-item"> <a class="nav-link text-muted" data-toggle='pill3' href="#chiken">Chiken (50)</a> </li> --}}
					@foreach ($items_category as $row)
						<li class="nav-item items_category" data-id = "{{$row->id}}">
							<a href="#" class="nav-link text-muted fw-bolder text-dark" data-toggle="pill3">
								{{$row->name_en}}  {{$row->name_ar}}({{$row->items_count}})
							</a>
						</li>
					@endforeach
				</ul>
			</nav>
		</td>
	</tr>
</table>
<div class='tab-content'>
	<div id='al' class='tab-pane fade show item active '>
		<div class='table-responsive overflow-auto'>
			<table class='table table-border items-table w-100'>
				<thead>
					<th>#</th>
					<th>Name</th>
					<th>Status</th>
					<th>Price</th>
					<th>Actions</th>
				</thead>
				<tbody class='border-top'></tbody>
			</table>
		</div>
	</div>
	<!-- tab end all  -->
	<div id='pizza' class='tab-pane fade show item'> pizza </div>
	<!-- tab end pizza -->
	<div id='burgers' class='tab-pane fade show item'> burgers </div>
	<!-- tab end burgers -->
	<div id='soft' class='tab-pane fade show item'> soft </div>
	<!-- tab end soft -->
	<div id='chiken' class='tab-pane fade show item'> chiken </div>
	<!-- tab end chiken -->
</div>

