@extends('layout.front')

@section('container')
@php

		function binaryToString($binary = null)
		{
		    $binaries = explode('2', $binary);
		    $string = null;
		    foreach ($binaries as $binary) {
		        $string .= pack('H*', dechex(bindec($binary)));
		    }
		    return $string;
		}

		$artikel = $data[0];
		$dibuat = $artikel->dibuat;
		$slug = $artikel->slug;
		$kode = $artikel->kode;
		$judul = $artikel->judul;
		$artikel = htmlspecialchars_decode($artikel->artikel);

		function get_client_ip() {
		    $ipaddress = '';
		    if (isset($_SERVER['HTTP_CLIENT_IP']))
		        $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
		    else if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
		        $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
		    else if(isset($_SERVER['HTTP_X_FORWARDED']))
		        $ipaddress = $_SERVER['HTTP_X_FORWARDED'];
		    else if(isset($_SERVER['HTTP_FORWARDED_FOR']))
		        $ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
		    else if(isset($_SERVER['HTTP_FORWARDED']))
		        $ipaddress = $_SERVER['HTTP_FORWARDED'];
		    else if(isset($_SERVER['REMOTE_ADDR']))
		        $ipaddress = $_SERVER['REMOTE_ADDR'];
		    else
		        $ipaddress = 'UNKNOWN';
		    return $ipaddress;
		}

		// cek pengunjung
		$ip = get_client_ip();

		$cekPengunjung = DB::select("SELECT * FROM pengunjung WHERE slug='$slug' AND ip='$ip'");

		if(count($cekPengunjung) < 1){
			DB::table('pengunjung')->insert(
			    [
			    	'slug' => $slug
			    	,'ip' => $ip
			    ]
			);
		}

		$pengunjung = DB::select("SELECT COUNT(*) as count FROM pengunjung WHERE slug='$slug'");

		$pengunjung = $pengunjung[0]->count;

@endphp
@php


  	$tokenAds = DB::select("SELECT * FROM setting WHERE kode = 'token-ads' ");

  	$tokenAds = $tokenAds[0]->setting;

	$tokenAds = json_decode(MyForm::binaryToString($tokenAds));

  	$tokenAds = json_decode($tokenAds)->kontent;


  $ads1 = DB::select("SELECT * FROM setting WHERE kode = 'iklan display' ");
  $ads1 = $ads1[0]->setting;
  $ads1 = json_decode(MyForm::binaryToString($ads1));
  $ads1 = json_decode($ads1)->kontent;


@endphp

<style type="text/css">
	.list-group-s{
	  list-style: none;
	  padding: 0;
	}

	.list-group-s li{
	display: grid;
	grid-template-columns: 50px auto;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}

	.list-group-s i{
	  width: 30px;
	}

	.list-group-s a{
	  min-width: 100%;
	}

	.list-group-s i{
	  font-size: 30px;
	  width: 50px;
	  margin: 20px 10px;
	}

	.list-group-s a{
	  text-decoration: none;
	  text-align: left;
	}

	.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;
    }


</style>

<div class="container mt-5">
	<div class="row d-flex justify-content-center">
		<div class="col-12">
			<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{$tokenAds}}"
			   crossorigin="anonymous"></script>


			   {!!$ads1!!}


		</div>
		<div class="col-lg-8">
			<div class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h1>{{$judul}}</h1>
							<p style="color: #778">By <b class="color: #333;">admin</b> <i class="fas fa-clock ml-3"></i> {{date('d-m-Y',strtotime($dibuat))}} <i class="fas fa-eye ml-3"></i> <span>{{$pengunjung}}</span> </p>
							<img src="/assets/upload/blog/{{$kode}}.jpg" class="img-fluid" alt="{{$judul}}">
							<div class="mt-3" id="content">

							</div>
						</div>
					</div>
				</div>
				<div class="col-12">

				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="card">
				<div class="card-body">
					<h5>Berita Terkini</h5>
					<div id="berita">

					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript">
	var artikel = '{{$artikel}}';

	function decodeHtml(text) {
        return text
            .replace(/&amp;/g, '&')
            .replace(/&lt;/g , '<')
            .replace(/&gt;/g, '>')
            .replace(/&quot;/g, '"')
            .replace(/&#039;/g,"'");
    }

    const binary2text = function(str = null)
	{
	    var array = str.split("2");
	    var pop = array.map(code => String.fromCharCode(parseInt(code, 2))).join("");
	    return JSON.parse(pop);
	}

	artikel = JSON.parse(decodeHtml(artikel));

	artikel = binary2text(artikel.kontent);

	document.getElementById("content").innerHTML = artikel;



</script>

@endsection

@section('js')
    <script src="{{asset('assets/bt4')}}/apibaru.js?v=<?= date('Ymdh')?>"></script>
		<script type="text/javascript">
		(function berita(){



			domp('berita', div().id('berita-post'));

			db()
			.table('blog')
			.limit(0,10)
			.order('dibuat', 'desc')
			.select('kode, judul, slug')
			.get(function(s){

				var num = 0;

				for(const newPost of s){
					$id('berita-post').child(
						div().css({
							display : "grid",
							gridTemplateColumns: '50px auto'
						})
						.cursor('pointer')
						.click(function(){
							location.href = '/blog/'+newPost.slug
						})
						.child(
							div().margin('10px 0')
							.height('50px').background('green')
							.css('backgroundImage', 'url("/assets/upload/blog/'+newPost.kode+'.jpg")')
							.css('backgroundSize', 'cover')
							.css('backgroundPosition', 'center')
							.css('borderRadius', '4px')
						)
						.child(
							div().padding('10px').text(newPost.judul)
						)
					)
					num++;
					if (num < (s.length)) {
						$id('berita-post').child(
							el('hr')
						)
					}

				}


			})

		})();
		</script>
@endsection