@extends('layouts.front.app')
@section('meta')
	<title>Products | {{ env('APP_NAME') }}</title>
	
	<meta property="og:locale"          content="en_US" />
    <meta property="og:url"             content="https://airpro.ph/" />
    <meta property="og:type"            content="website" />
    <meta property="og:title"           content="Air Prosystems Inc Air Conditioner" />
    <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="https://airpro.ph/images/thumbnail.jpg" />

    <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="@foreach(App\Models\Product::get() as $c_seo) {{ $c_seo->title }}, @endforeach @foreach(App\Models\Brand::get() as $c_seo) {{ $c_seo->title }} aircon, @endforeach inverter aircon, aircon price, aircon sale, aircon promo, air conditioning, aircon, aircon philippines, aircon installation, aircon repair, aircon cleaning, ac, cooling aircon, kinds of aircon, air, cold air, airpro, air prosystems inc">
    <meta name="author" content="Air Prosystems Inc">
@stop
@section('content')
	<div class="breadcrumbs overlay" style="background-image:url({{ asset('images/product.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('about-us') }}">Products</a></li>
							</ul>
						</div>
						<!-- Bread Title -->
						<div class="bread-title"><h2>What we offer</h2></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<section class="portfolio section-space">
		<div class="container">
			<div class="row">
				<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>Products</span><b>What we offer</b></h1>
						</div>
						<div class="section-bottom">
							<div class="text">
								<p>Air conditioning solutions for residential and commercial space.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<div class="portfolio-menu">
						<ul id="portfolio-nav" class="portfolio-nav tr-list list-inline cbp-l-filters-work">
							<li data-filter="all" class="cbp-filter-item active">All</li>
							@foreach($brands as $brand)
							<li data-filter="{{ str_replace(' ', '_', $brand->title) }}" class="cbp-filter-item">
								{{ ucfirst($brand->title) }}
							</li>
							@endforeach
							{{-- <li data-filter="branding" class="cbp-filter-item">Condura</li>
							<li data-filter="business" class="cbp-filter-item">Daikin</li>
							<li data-filter="consulting" class="cbp-filter-item">Koppel</li>
							<li data-filter="marketing" class="cbp-filter-item">LG</li>
							<li data-filter="seo" class="cbp-filter-item">General Royal</li>
							<li data-filter="seo" class="cbp-filter-item">Gree</li>
							<li data-filter="seo" class="cbp-filter-item">Kolin</li>
							<li data-filter="seo" class="cbp-filter-item">Mitsubishi</li>
							<li data-filter="seo" class="cbp-filter-item">Panasonic</li>
							<li data-filter="seo" class="cbp-filter-item">Samsung</li>
							<li data-filter="seo" class="cbp-filter-item">TLC</li>
							<li data-filter="seo" class="cbp-filter-item">Toshiba</li> --}}
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				@foreach($products as $product)
				<div class="col-lg-4 col-md-6 col-sm-6 col-12 filter {{ str_replace(' ', '_', $product->brand->title) }}">
					<div class="single-portfolio">
						<div class="portfolio-head overlay">
							<img src="{{ asset('uploads/products/'.$product->image) }}" alt="#">
						</div>
						<div class="portfolio-content">
							<h4>
							    <a href="{{ url('products/'.str_replace(['/', ' '], ['`', '_'], $product->title)) }}">{{ $product->title }}</a>
							</h4>
							<p>{{ $product->brand->title }}</p>
						</div>
					</div>
				</div>
				@endforeach
			</div>
		</div>
	</section>

@stop
@section('js')
	<script type="text/javascript">
		$(document).ready(function() {
			$(".cbp-filter-item").click(function(){
				$('#portfolio-nav').find('.active').removeClass('active');
				$(this).addClass('active');
		        var value = $(this).attr('data-filter');
		        
		        if(value == "all")
		        {
		            //$('.filter').removeClass('hidden');
		            $('.filter').show('3000');
		        }
		        else
		        {
		//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
		//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
		            $(".filter").not('.'+value).hide('5000');
		            $('.filter').filter('.'+value).show('5000');
		            
		        }
		    });
		    
		});
	</script>
@stop