@extends('layouts.front.app')
@section('meta')
	<title>{{ $project->title }} | Air Conditioner | {{ env('APP_NAME') }}</title>
	
	<meta property="og:locale"          content="en_US" />
    <meta property="og:url"             content="https://airpro.ph/projects/{{ str_replace([' ', '/'], ['_', '`'], $project->title) }}" />
    <meta property="og:type"            content="website" />
    <meta property="og:title"           content="{{ $project->title }}" />
    <meta property="og:description"     content="Air Prosystems Inc. is a leading distributor and installer of all major air-conditioning products and equipment nationwide. Our services include Free Ocular Survey, Installation & Design Consultation, and Regular Service Maintenance Program." />
    <meta property="og:site_name"       content="airpro.ph" />
    <meta property="og:image"           content="{{ asset('uploads/projects/'.$project->display_image) }}" />

    <meta name="description" content="Air Prosystems Inc. is a leading distributor and installer of all major air-conditioning products and equipment nationwide. Our services include Free Ocular Survey, Installation & Design Consultation, and Regular Service Maintenance Program.">
    <meta name="keywords" content="{{ $project->name }}, aircon, air conditioner, cooling, best aircon, airpro.ph, air prosystems inc, basta aircon airpro">
    <meta name="author" content="Air Prosystems Inc.">
@stop

@section('content')
	<div class="breadcrumbs overlay" style="background-image:url({{ asset('images/about.jpg')  }})">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="bread-inner">
						<!-- Bread Menu -->
						<div class="bread-menu">
							<ul>
								<li><a href="{{ url('/') }}">Home</a></li>
								<li><a href="{{ url('projects') }}">Projects</a></li>
							</ul>
						</div>
						<!-- Bread Title -->
						<div class="bread-title"><h2>{{ $project->title }}</h2></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<section class="blog-layout news-default section-space">
		<div class="container">
			<div class="row ">
				@php $total = count(json_decode($project->image));  @endphp
				@php $num = 6; $act = 'active' @endphp
				<div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-12">
					<div class="section-title default text-center">
						<div class="section-top">
							<h1><span>Projects</span><b>{{ $project->title }}</b></h1>
						</div>
					</div>
				</div>
				<div class="col-lg-5 col-md-5 col-sm-12 col-12 pb-1">
					<div class="single-news ">
						<div class="news-head overlay">
							<img src="{{ asset('uploads/projects/'.$project->display_image) }}" alt="{{ $project->title }}" id="project_big{{ $project->id }}">
						</div>
					</div>
				</div>
				<div class="col-lg-7 col-md-7 col-sm-12 col-12 pb-1">
					<div class="carousel slide projectCarousel" data-ride="carousel" id="projectCarousel{{ $project->id }}">
						<div class="carousel-inner">
							@for($x=0; $x < ($total/6); $x++)
							<div class="carousel-item {{ $act }}">
								<div class="row" id="projectCarousel_row">
									@php $count = 1; $count2 = $num - 6; @endphp
									@foreach(json_decode($project->image) as $pic)
										@if($count > $count2 && $count <= $num)
										<div class="col-lg-4 col-md-4 col-sm-4 col-6">
											<div class="single-news " data-img="{{ asset('uploads/projects/'.$pic) }}" data-title="{{ $project->title }}">
												<div class="news-head overlay">
													<img src="{{ asset('uploads/projects/'.$pic) }}" alt="{{ $project->title }}" id="project_img">
													
												</div>
											</div>
										</div>
										@endif
										@php $count++ @endphp
									@endforeach
								</div>
							</div>
							@php $act=''; $num += 6; @endphp
							@endfor
						</div>
						<ol class="carousel-indicators">
							@php $act='active'; @endphp
							@for($x=0; $x < ($total/6); $x++)
						    <li data-target="#projectCarousel{{ $project->id }}" data-slide-to="{{ $x }}" class="{{ $act }}"></li>
							@php $act=''; @endphp
							@endfor
						</ol>
					</div>
				</div>
			</div>
		</div>
	</section>
@stop
@section('js')
	<script type="text/javascript">
		$('#projectCarousel{{ $project->id }}').on('click', '.single-news', function(event) {
			src = $(this).attr('data-img');
			title = $(this).attr('data-title');
			$('#project_big{{ $project->id }}').attr('src', src);
		});
	</script>
@stop