@extends('layouts.app')

@section('head-title')
    <title>Brhands Foundation Training and Careers Oportunities</title>
@endsection

@section('head-style')
@endsection

@section('content')
<div id="training">
	<section id="first-section">
		<div class="container-fluid">
			<div class="row">
				<img src="/imgs/careers/careers.jpg" alt="" class="img-responsive">
				<div class="caption-text text-center">
					<h1>WORKSHOPS AND JOB CAREERS</h1>
					<h4>START A TRAINING PROGRAMME WITH MASTER ARTISANS</h4>
				</div>
		    </div>
		</div>
	</section>
	<section id="second-section" class="marg-bottom-30">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 text-center marg-top-40 marg-bottom-20">
					<p>
						MANY COUNTRIES ARE RENOWNED FOR THE QUALITY TRADITIONAL ARTISANS AND ARTISAN PRODUCTS. THE MOST PRESTIGIOUS DESIGN BRANDS<br/> ARE OPENING A PROMINENT TRAINING PROGRAMME IN THE CRAFTSMANSHIP FIELD. A RICH TRADITION TO BE CONTINUED TO PRODUCE CRAFT AND TO<br/> GUARANTEE THE TRASITION OF SKILLS FROM MASTERS ONTO OTHERS.
					</p>
					<p>
						FIND OUT OPPORTUITIES TO LEARN IN WORK-BASED METHOD AND INTERNATIONAL ENVIRONMENT.
					</p>
				</div>
		    </div>

		    <div class="row">
				<div class="col-xs-12 text-center">
					<div id="opportunity-links" >
						<a role="button" data-toggle="collapse" href="#vocational-training" id="link-vocational-training" aria-expanded="false" aria-controls="vocational-training">
						  VOCATIONAL TRAINING
						</a> |
						<a role="button" data-toggle="collapse" href="#advanced-training" id="link-advanced-training" aria-expanded="false" aria-controls="advanced-training">
						  ADVANCED TRAINING
						</a> |
						<a role="button" data-toggle="collapse" href="#careers" id="link-careers" aria-expanded="false" aria-controls="advanced-training">
						  CAREERS
						</a>
					</div>
					<div class="collapse marg-top-30" id="vocational-training">
						@forelse ($opportunities[0]->articles as $item)
							<div class="well col-xs-12">
								@if ($loop->first)
									<ul class="col-xs-12 col-sm-4 col-sm-offset-2 text-left">
								@endif
									<li><a href="{{ route('frontend.training-careers-oportunities.opportunity', $item->slug) }}" title="">{{ $item->article_languages[0]->title }}</a></li>
								@if ($loop->last)
									@if ($loop->iteration %5 == 0 && $loop->remaining > 0)
										</ul>
										<ul class="col-xs-12 col-sm-4 col-sm-offset-2 text-left">
									@else
										</ul>
									@endif
								@endif
							</div>
						@empty
							<div class="well text-left">
								NO OPORTUNITIES TO SHOW
							</div>
						@endforelse
					</div>
					<div class="collapse marg-top-30" id="advanced-training">
						@forelse ($opportunities[1]->articles as $item)
							<div class="well col-xs-12">
								@if ($loop->first)
									<ul class="col-xs-12 col-sm-4 col-sm-offset-2 text-left">
								@endif
									<li><a href="{{ route('frontend.training-careers-oportunities.opportunity', $item->slug) }}" title="">{{ $item->article_languages[0]->title }}</a></li>
								@if ($loop->last)
									@if ($loop->iteration %5 == 0 && $loop->remaining > 0)
										</ul>
										<ul class="col-xs-12 col-sm-4 col-sm-offset-2 text-left">
									@else
										</ul>
									@endif
								@endif
							</div>
						@empty
							<div class="well text-left">
								NO OPORTUNITIES TO SHOW
							</div>
						@endforelse
					</div>
					<div class="collapse marg-top-30" id="careers">
						@forelse ($opportunities[2]->articles as $item)
								@if ($loop->first)
								<div class="well col-xs-12">
									<ul class="col-xs-12 col-sm-4 col-sm-offset-2 text-left">
								@endif
									<li><a href="{{ route('frontend.training-careers-oportunities.opportunity', $item->slug) }}" title="">{{ $item->article_languages[0]->title }}</a></li>
								@if ($loop->last)
									</ul>
								</div>
								@else
									@if ($loop->iteration %5 == 0 && $loop->remaining > 0)
										</ul>
										<ul class="col-xs-12 col-sm-4 col-sm-offset-2 text-left">
									@endif
								@endif
						@empty
							<div class="well text-left">
								NO OPORTUNITIES TO SHOW
							</div>
						@endforelse
					</div>
				</div>
		    </div>
		</div>
	</section>
</div>
@endsection

@section('foot')
    <script type="text/javascript">
    	$(document).ready(function() {
    		$('#vocational-training').on('show.bs.collapse', function () {
			  	$('#advanced-training').collapse('hide');
			  	$('#careers').collapse('hide');
			});
			$('#advanced-training').on('show.bs.collapse', function () {
			  $('#vocational-training').collapse('hide');
			  $('#careers').collapse('hide');
			});
			$('#careers').on('show.bs.collapse', function () {
			  $('#vocational-training').collapse('hide');
			  $('#advanced-training').collapse('hide');
			});
			$('#vocational-training').on('hidden.bs.collapse', function () {
				$('#link-vocational-training').removeClass('active');
			});
			$('#advanced-training').on('hidden.bs.collapse', function () {
				$('#link-advanced-training').removeClass('active');
			});
			$('#careers').on('hidden.bs.collapse', function () {
				$('#link-careers').removeClass('active');
			});
			$('#opportunity-links').on('click', 'a', function(event) {
				$('#opportunity-links').find('a.active').removeClass('active');
				$(this).addClass('active');
			});
    	});
    </script>
@endsection