@extends('layouts.main_page_website')
<style>
	/* .row-no-padding .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
    box-shadow: 20px 20px 50px 15px grey;
} */

	.row-no-padding {
		display: -ms-flexbox;
		/* IE10 */
		display: flex;
		-ms-flex-wrap: wrap;
		/* IE10 */
		flex-wrap: wrap;
		padding: 0 4px;
	}

	/* Create four equal columns that sits next to each other */
	.column {
		-ms-flex: 25%;
		/* IE10 */
		flex: 20%;
		max-width: 25%;
		padding: 0;
		box-shadow: 20px 20px 50px 15px grey;

	}

	.column img {}

	/* .gallery-thumb-span {
		position: absolute;
		left: -3px;
		top: 20px;
		background: #373542;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 28px;
		padding: 0 15px;
		border-radius: 3px;
		z-index: 99;
	} */

	.gallery-thumb {
	width: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
}
.gallery-thumb span {
	position: absolute;
	left: -3px;
	bottom: 20px;
	background: #ffcc33;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 28px;
	padding: 0 15px;
	border-radius: 3px;
	z-index: 99;
}
.gallery-thumb img {
	width: 100%;
	height: auto;
}
.gallery-thumb:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	content: "";
	opacity: 0;
}
.gallery-thumb a {
	position: absolute;
	left: -200px;
	right: 0;
	top: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 3px;
	margin: auto;
	text-align: center;
	line-height: 40px;
	color: #ffcc33;
	z-index: 999;
	opacity: 0;
}
.gallery-thumb:hover:after {
	opacity: 1;
}
.gallery-thumb:hover a {
	left: 0;
	opacity: 1;
}
.gallery-thumb a:hover {
	background: #ffcc33;
	color: #fff;
}


	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 800px) {
		.column {
			-ms-flex: 50%;
			flex: 50%;
			max-width: 50%;
		}
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
		.column {
			-ms-flex: 100%;
			flex: 100%;
			max-width: 100%;
		}
	}
</style>

@section('content')
<div class="tg-banner tg-haslayout">
	<div class="tg-imglayer">
		<img src="images/bg-pattran.png" alt="image desctription">
	</div>
	<div class="container">
		<div class="row">
			<div class="tg-banner-content tg-haslayout">
				<div class="tg-pagetitle animated flipInY">
					<h1>Media</h1>
				</div>
				<ol class="tg-breadcrumb">
					<!-- <li><a href="#">Home</a></li> -->
					<li class="active">Photo Gallery</li>
				</ol>
			</div>
		</div>
	</div>
</div>
<!--************************************
				Banner End
		*************************************-->
<!--************************************
				Main Start
		*************************************-->
<main id="tg-main" class="tg-main tg-haslayout d-flex justify-content-center">
	<!--************************************
					Soccer Media Start
			*************************************-->
	<section class="tg-main-section tg-soccermedia tg-haslayout">
		<div class="container ">
			

			<div class="row row-no-padding ">
				@forelse ($album as $item)
				<!--box start-->
				<div class="col-sm-3" style="margin-top: 1.5%;">
					<div class="item1">
						<div class="gallery-thumb"> 
							<span>{{ $item->name }}</span>
							<a href="{{ url('media-pg/'.$item->id.'/'.$item->name) }}"><i
									class="fa fa-image" style="margin-top:10px"></i></a>
							<img src="{{ $item->cover_image }}" alt="">
						</div>
					</div>
					<br />
				</div>

				@empty
				<div class="col-lg-12">
					<div class="news-details-wrap">
						<div class="news-large-post">
							<div class="post-txt" style="text-align: center">

								<p>
									<h6 style="color: red">Not Albums yet</h6>								
							    </p>

							</div>
						</div>
					</div>
				</div>
				@endempty
			
			</div>
		</div>
		

	</section>

	<!--************************************
					Soccer Media End
			*************************************-->


</main>
<!--************************************
				Main End
		*************************************-->


@stop