@extends('layout.front')

@section('container')

<style type="text/css">
	.berita-panel{
	  	height: 350px;
 	 	background: var(--bg-news);
	  	background-size: cover;
		box-shadow: inset 0 20px 50px #333;
	    border-radius: 10px;
	    padding: 10px;
	}

	.berita-panel a{
		text-decoration: none;
	}

	.berita-panel a h3{
		text-decoration: none;
	  	color: white;
		text-shadow: 0 0 10px #333;
	}

	.container-f{
	    position: relative;
	    width: 100%;
	    height: 200px;
	    padding-bottom: 56.25%;
	}

	.video {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 200px;
	}

	.berita-panel-2{
	  	height: 200px;
 	 	background: var(--bg-news);
	  	background-size: cover;
	  	background-repeat: no-repeat;
	  	background-position: center;
	    border-radius: 10px;
		box-shadow: inset 0 20px 50px #333;
	}

	.berita-panel-2 a h3{
	  	font-size: 12px;
	  	text-align: left;
	  	padding: 10px;
	  	color: #fff;
	}

	a.content-panel-berita{
	  text-decoration: none;
	}

	.content-panel-berita h3{
	  text-decoration: none;
	  font-size: 16px;
	  text-align: left;
	  color: #333;
	  font-weight: 560;
	}

	@media screen and (max-width: 575px){
	  .mobile-h{
	    height: 300px;
	  }
	}

	.adsbygoogle::before{
      content: "Ads";
      position: absolute;
      display: flex;
      width: 60%;
      height: 60%;
      text-align: center;
      align-items: center;
      justify-content: center;
      font-size: 50px;
      color: #ccc;
      border-radius: 10px;
      left: 20%;
      top: 20%;
      background: linear-gradient(270deg, #98b0aa, #e1eae8, #94a8a4);
      background-size: 600% 600%;
      -webkit-animation: adsbanner 4s ease infinite;
      -moz-animation: adsbanner 4s ease infinite;
      animation: adsbanner 4s ease infinite;
    }

     @-webkit-keyframes adsbanner {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @-moz-keyframes adsbanner {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @keyframes adsbanner {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }

    .adsbygoogle{
      position: relative;
      height: 200px;
    }

	.label-kategori::after{
		content: "";
		position: absolute;
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #99d;
		left: 10px;
		bottom: 10px;
	}

	.label-kategori{
		position: relative;
		display: inline-block;
		padding: 3px 15px;
		background: white;
		border-radius: 20px;
		border: 2px solid #99d;
		padding-left: 25px;
	}

	.title-news::before{
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  background: #99d;
  left: -20px;
  top:10px;
  border-radius: 50%;
}

.title-news::after{
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
  left: -16.5px;
  top:13.491667px;
  border-radius: 50%;
}

.title-news{
  position: relative;
  font-size: 20px;
  display: block;
  margin: 10px 0;
  margin-left: 20px;
  margin-bottom: 20px;
}


</style>

@php
  use Illuminate\Support\Facades\DB;
  $kategoriblog = DB::select("SELECT * FROM kategori_blog ");
  $kategoriblog = json_encode($kategoriblog);
@endphp

<script>

	var kategoriblog = '{!!$kategoriblog!!}';
	kategoriblog = JSON.parse(kategoriblog);

	kBlog = {}

	kategoriblog.forEach(function(el){
		kBlog[el.kode] = el.nama
	})

</script>

<div id="blog-dashboard">
	<div  class="text-center mt-5">
		<div class="loadingio-spinner-spinner-2lqweg6m29r"><div class="ldio-6xpymcz56">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			</div></div>
	</div>
</div>

<div id="blog-menus">

</div>

@endsection

@section('js')

<script type="text/javascript">

	var blogDasboard = div().class('container mt-5')
	var blogMenus = div().class('container mt-5')

	// top list row 1
	blogDasboard.child(
		div().class('row').id('row1')
	)

	// big slide
	$id('row1')
	.child(
		div()
		.class('col-lg-7').id('big-slide')
	)

	var imageView = {
		minHeight: "425px",
		backgroundRepeat: 'no-repeat',
		backgroundPosition: 'center',
		backgroundSize: 'cover',
		cursor: 'pointer'
	}

	var imageView2 = {
		height: "200px",
		backgroundRepeat: 'no-repeat',
		backgroundPosition: 'center',
		backgroundSize: 'cover',
		cursor: 'pointer'
	}

	function loadDataNews(a){
		db().table('blog')
		.limit(0,1)
		.order('dibuat', 'desc')
		.get(function(b){
			var newd = b[0];
			a.el.style.backgroundImage = 'url("/assets/upload/blog/'+newd.kode+'.jpg")';
			a.el.addEventListener('click', function(){
				location.href = '/blog/'+newd.slug
			}, false)

			// inner content
			var d = div()
			.child(
				h3().text(newd.judul).color('white')
			);
			a.el.appendChild(d.get())
		})
	}

	// big slide action
	$id('big-slide').child(
		div()
		.class('card')
		.child(
			div()
			.class('card-body')
			.css(imageView)
			.load(loadDataNews)
		)
	)

	// side side content row 1
	$id('row1').child(
		div()
		.class('col-lg-5')
		.child(
			div().class('row').id('side-content')
		)
	)

	// youtube content
	$id('side-content').child(
		div().class('col-lg-12')
		.child(
			div().class('card')
			.child(
				div().class('card-body').height('200px')
				.html(`
					<iframe src="//www.youtube.com/embed/trr5wFce0Ak" frameborder="0" allowfullscreen class="video"></iframe>
				`)
			)
		)
	)

	function loadImagesNews2(el){
		var images = el.el.getAttribute('data-images');
		el.el.style.backgroundImage = images;
	}


	db().table('blog')
	.limit(1,2)
	.order('dibuat', 'desc')
	.get(function(b){
		var news2 = b;
		for(news2 of news2){
			$id('side-content').child(
				div().class('col-lg-6 col-6').child(
					div()
					.class('card')
					.child(
						div().class('card-body')
						.css(imageView2)
						.data('images', 'url("/assets/upload/blog/'+news2.kode+'.jpg")')
						.load(loadImagesNews2)
						.click(function(){
							location.href = '/blog/'+news2.slug
						})
						.child(
							h6().text(news2.judul).color('white')
							.css('text-shadow', '0 0 5px #000')
						)
					)
				)
			)
		}
	})



	// --------------------------------//

	// list blog
	blogMenus.child(
		span().text('terkini').class('title-news')
	)

	blogMenus.child(
		div().class('row').id('row2')
	)

	domp('blog-dashboard', blogDasboard);

	function loadImagesNews3(el){
		var images = el.el.getAttribute('data-images');
		el.el.style.backgroundImage = images;
	}

	db().table('blog')
	.limit(2,12)
	.order('dibuat', 'desc')
	.get(function(b){

		var news3 = b;

	for(news3 of news3){

		$id('row2').child(
			div().class('col-lg-4 col-12 mb-4').child(
				div()
				.class('card h-100')
				.cursor('pointer')
				.click(function(){
					location.href = '/blog/'+news3.slug
				})
				.child(
					div().class('card-body')
					.css(imageView2)
					.data('images', 'url("/assets/upload/blog/'+news3.kode+'.jpg")')
					.load(loadImagesNews3)
					.child(
						span().class('label-kategori').html(kBlog[news3.kategori])
					)
				)
				.child(
					div().class('card-body')
					.child(
						h6().text(news3.judul)
					)
					.child(
						div()
						.class('row')
						.child(
							div().class('col-6 text-center').css('border-right','1px solid #ddd').text('admin')
						)
						.child(
							div().class('col-6 text-center').text(tanggal(news3.dibuat).sekarang).color('#99d')
						)
					)
				)
			)
		)
	}

	})

	domp('blog-menus', blogMenus);
window.scrollTo(0, 0);
</script>

@endsection