@extends('back.layouts.main')
@section('title', 'الاقسام')
@section('content')
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-content overflow-auto collapse show">
					<div class="card-body card-dashboard">
						@foreach ($categories as $category)
						<a href='categories?id={{$category->id}}'
							class='btn {{(request('id')==$category->id)?'btn-info':'btn-outline-info'}} '>
							{{$category->name}}
						</a>
						@endforeach
					</div>
				</div>
			</div>
			@if(request()->has('id'))
				<div class="card">
					<div class="card-content overflow-auto collapse show">
						<div class="card-body card-dashboard">
							<!-- Vertical Wizard -->
							<section class="vertical-wizard">
								<div class="bs-stepper vertical vertical-wizard-example">
									<div class="bs-stepper-header">
										@foreach ($tabs as $tab)
											<div class="step" data-target="#{{$tab['key']}}">
												<button type="button" class="step-trigger">
													<span class="bs-stepper-box">{{$loop->iteration}}</span>
													<span class="bs-stepper-label">
														<span class="bs-stepper-title ml-1">{{$tab['name']}}</span>
													</span>
												</button>
											</div>	
										@endforeach
									</div>
									<div class="bs-stepper-content">
										@foreach ($tabs as $tab)
											@include('back.categories.tabs.'.$tab['key'])
										@endforeach
									</div>
								</div>
							</section>
							<!-- /Vertical Wizard -->
						</div>
					</div>
				</div>
			@endif
		</div>
	</div>
@stop

@section('breadcrumbs')
<li class="breadcrumb-item active">الاقسام</li>
@stop