@extends('layouts.main')

@section('title','Advanced - Available Categories')

@section('body')

<div style="background: #e9f9eb" class="banner_bottom">
	<div class="container">
		<h3 class="text-center" style="color:#FF931E;font-size: 1.3em;">Available Categories</h3>
		<p class="text-center">We can proudly say that we have hired the best people in the industry.</p>
		<div class="inner_sec_info_w3ls_agile">
			@foreach($categories->chunk(4) as $chunkedCategories)
			<div class="row">
				@foreach($chunkedCategories as $category)
				<div class="col-md-3">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4>{{ $category->name }}</h4>
						</div>
						<div class="panel-body">
							<img src="{{ asset('images/'.$category->image) }}" class="img-responsive" alt="{{ $category->name }}">
							<br>
							<p>{{ $category->shortDescription() }}</p>
							<div class="text-center">
								<a href="{{ url($category->url()) }}" class="btn btn-info">Read More</a>
							</div>
						</div>
					</div>
				</div>
				@endforeach
			</div>
			@endforeach
		</div>
	</div>
</div>

@endsection