@extends('layouts.front')

@section('content')
<!-- ##### Welcome Area Start ##### -->
<section class="welcome_area bg-img background-overlay" 
	style="background-image: url({{ asset('images/bg-home.jpg') }});">
	<div class="container h-50">
		<div class="row h-50">
			<div class="col-12">
				<div class="hero-content">
					<h2></h2>
					<h2>Mam Packaging</h2>
					<h5>ร้านคุณแหม่ม จำหน่ายบรรจุภัณฑ์เครื่องสำอาง
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a class="btn essence-btn" href="{{ route('shop') }}">View Collection</a>
					</h5>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- ##### Welcome Area End ##### -->

<div class="top_catagory_area section-padding-80 clearfix">
	<div class="container">
		<div class="row justify-content-center">
			@foreach($categories as $cate)
			<div class="col-12 col-sm-6 col-md-4">
				<div class="single_catagory_area d-flex align-items-center justify-content-center bg-img" 
					style="background-image: url({{ asset('images/category/' . $cate->image) }}); margin-bottom: 15px;"
				>
					<div class="catagory-content">
						<a href="{{ route('shop', ['cate' => $cate->id]) }}" class="font-kanit" >{{ $cate->name }}</a>
					</div>
				</div>
			</div>
			@endforeach
		</div>
	</div>
</div>

<div class="cta-area">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="cta-content bg-img background-overlay" style="background-image: url(https://mampackage.com/wp-content/uploads/2018/10/85702152401.jpg);">
				</div>
			</div>
		</div>
	</div>
</div>

<!-- ##### New Arrivals Area Start ##### -->
<section class="new_arrivals_area section-padding-80 clearfix">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="section-heading text-center">
					<h2>Popular Products</h2>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			@foreach($products as $p)
			<div class="col-12 col-sm-6 col-lg-4">
				{!! view('front.partials.product', ['p' => $p])->render() !!}
			</div>
			@endforeach
		</div>
	</div>
</section>
<!-- ##### New Arrivals Area End ##### -->

<style>
	.single-brands-logo {
		margin-right: 15px;
		margin-left: 15px;
	}
	.brands-area .single-brands-logo img {
		max-width: 320px;
	}
	@media only screen and (max-width: 678px) {
		.brands-area {
			flex-direction: column !important;
		}
		.brands-area .single-brands-logo {
			flex: 0 0 100%;
			width: 100%;
			max-width: 100%;
			text-align: center;
		}
	}
</style>

<!-- ##### Brands Area Start ##### -->
<div class="brands-area d-flex align-items-center justify-content-center">
	<!-- Brand Logo -->
	<div class="single-brands-logo" >
		<img src="{{ asset('images/footer1.png') }}" alt="">
	</div>
	<div class="single-brands-logo">
		<img src="{{ asset('images/footer2.png') }}" alt="">
	</div>
</div>
<!-- ##### Brands Area End ##### -->
@endsection