@php

  use Illuminate\Support\Facades\DB;

  $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;

  $playlnk = DB::select("SELECT * FROM setting WHERE kode = 'play store link' ");
  $playlnk = $playlnk[0]->setting;
  $playlnk = json_decode(MyForm::binaryToString($playlnk));
  $playlnk = json_decode($playlnk)->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;
  $kategoriblog = DB::select("SELECT * FROM kategori_blog ");
  $kategoriblog = json_encode($kategoriblog);

@endphp
@extends('layout.front')

@section('container')
<script>

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

	kBlog = {}

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

</script>
  <div id="header" class="foto" style="--foto:url('{{asset('assets/bt4')}}/bg.jpg')">
    <div class="row">
      <div class="col-12 text-center mt-5">
        <h1 class="title-header">Properti Impian?</h1>
        <h3 class="head-info">Temukan 300.000+ pilihan properti bersama agen profesional kami!</h3>

        <div class="mt-5">
          <button onclick="location.href='/properti'" class="btn-header" style="cursor: pointer;">Cari Properti</button>
          <button onclick="location.href='/contact-us'" class="btn-header orange" style="cursor: pointer;">Jual Properti</button>
        </div>

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

  <style type="text/css">
  .bintang{
      display: inline-block;
      margin: 10px;
      font-size: 16pt;
      text-shadow:  0 0 20px #333;
    }
    .owl-next{
    position: absolute;
    top: calc(50% - 25px);
    right: 40px;
    height: 50px;
    opacity: 1 !important;
    padding: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 20px !important;
    color: #333 !important;
}

.owl-prev span, .owl-next span{
  position: absolute;
  display: block;
  text-decoration: none;
  padding: 10px !important;
  font-size: 25pt;
  font-weight: bold;
  border-radius: 20px;
  background: rgba(255,255,255,0.4);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.owl-prev{
    position: absolute;
    top: calc(50% - 25px);
    left: 40px;
    height: 50px;
    padding: 10px !important;
    opacity: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(255,255,255,0.8) !important;
    color: #333 !important;
    border-radius: 20px !important;
}
  
    .font-dashboard{
      margin-top: 20px;
      font-size: 50px;
      margin-bottom: 20px;
      color: #99f
    }


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

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

    .favorite{
      position: absolute;
      right: 10px;
      top: 10px;
      display: inline-block;
      cursor: pointer;
    }

    .favorite i{
      font-size: 35px;
      text-shadow: 0 0 10px #999;
    }

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

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

    .content-panel-berita{
      color: #999;
    }

  </style>
  <div class="container mt-5 mb-5">
    <h2 class="text-center">Mengapa MasukSini? </h2>
    <p class="text-center">MasukSini merupakan portal jual beli properti yang mempertemukan penjual dan pembeli.
    </p>
    <div class="row text-center">
      <div class="col-lg-4">
        <i class="fas fa-people-carry font-dashboard"></i>
        <h3>Buyer</h3>
        <p>
          Listing pilihan disuguhkan sesuai dengan kebutuhan.
        </p>
      </div>
      <div class="col-lg-4">
        <i class="fas fa-comments-dollar font-dashboard"></i>
        <h3>Agen</h3>
        <p>
          Listing muncul di halaman pencarian yang berdampak pada peningkatan incoming call buyer.
        </p>
      </div>
      <div class="col-lg-4">
        <i class="fas fa-user-friends font-dashboard"></i>
        <h3>Vendor</h3>
        <p>
          Pemilik dapat menjual sewakan propertinya secara langsung.
        </p>
      </div>
    </div>
  </div>

  {!!$ads1!!}


  <!--<div class="container mt-5">-->
  <!--    <div id='map' style='width: 100%; height: 350px;'></div>-->
  <!--</div>-->

  <div class="container mt-5">
    <div class="row mb-3">
      <div class="col-12 text-center">
        <h2>Proyek Baru</h2>
      </div>
    </div>
    <div id="properti">
      <div class="text-center">
        <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>

  <div class="container mt-5">
    <div class="row mb-3">
      <div class="col-12 text-center">
        <h2>Properti Favorit</h2>
      </div>
    </div>
    <div id="favorit" class="">
      <div class="text-center">
        <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>

    {!!$ads1!!}
<div class="container mt-5">
    <div class="row mb-3">
      <div class="col-12 text-center">
        <h2>Berita Terbaru</h2>
      </div>
    </div>
</div>
  <div class="container" id="blog-menus">

  </div>
  <section>
    <div class="container mb-5">
      <div class="row d-flex align-items-center justify-content-center">
        <div class="col-lg-4 text-center">
          <img width="350px" src="{{asset('assets/bt4')}}/app.png" alt="">
        </div>
        <div class="col-lg-6">
          <h3>Download Aplikasi Masuk Sini </h3>
          <p>Cari properti tepat dengan mudah dan cepat pakai Masuk Sini Apps! Tinggal klik, ribuan properti tersedia untuk Anda. </p>
          <img onclick="window.open('{{$playlnk}}', '_blank')" style="cursor: pointer;" src="{{asset('assets/bt4')}}/google-play.webp" height="40px" alt="google-play">
        </div>
      </div>
    </div>
  </section>
  @endsection
  @section('js')
    <script type="text/javascript">


var text2Binary = function( string) {
    string = JSON.stringify(string);
    return string.split('').map(function (char) {
        return char.charCodeAt(0).toString(2);
    }).join('2');
}


function __id(a){
  return document.getElementById(a);
}

$(document).ready(function(){
    
    var makeCond = [];
    
    makeCond.push({
		opsi: "", data: ['harga', '<>', `"0"`]
	});
	makeCond.push({
		opsi: "AND", data: ['harga', 'IS NOT ', `NULL`]
	});
	makeCond.push({
		opsi: "AND", data: ['deskripsi', 'IS NOT ', `NULL`]
	});
	makeCond.push({
		opsi: "AND", data: ['deskripsi', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['judulproperti', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['transaksi', '=', `"PROYEK BARU"`]
	});
	makeCond.push({
		opsi: "AND", data: ['province', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['city_name', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['subdistrict_name', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['kategori', '<>', `""`]
	});
    
    
    
  var prop = db()
	.table('properti')
	.select('properti.*, p.id, sales.nama as sales, sales.hp as nohp')
	.leftJoin([
		[`( SELECT * FROM foto WHERE kategori = 'foto' GROUP BY foto.idprop ORDER BY id ASC ) as p`, `p.idprop`, '=', `properti.idprop `],
		['sales', 'sales.id', '=', 'properti.idsales']
	])
	.order('properti.idprop', 'DESC')
	.master(false)
	if(makeCond.length > 0){
        prop.condition(makeCond)
    }
  prop.limit(0, 10)
  prop.get(function(e){
    var ids = 'properti';
		__id(ids).innerHTML =  `
			<div class="owl-carousel owl-theme grabbable">
		`+e.map(function(c){

			var judul = c.judulproperti;

			var harga = formatRupiah(Number(c.harga).toFixed(0));

			if (judul.length > 30) {
				judul = judul.substring(0, 30)+'...';
			}

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

			if (deskripsi.length > 45) {
				deskripsi = deskripsi.substring(0, 45)+'...';
			}

			var linktransaksi = "";
              var linkprovince = "";
              var linkcityname = "";
              var linksub = "";
              var linkkat = "";
              var linkshare = "";
              if(c.transaksi != ""){
                  linktransaksi = c.transaksi.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.city_name != ""){
                  linkprovince = c.province.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.city_name != ""){
                  linkcityname = c.city_name.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.subdistrict_name != ""){
                  linksub = c.subdistrict_name.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.kategori != ""){
                  linkkat = c.kategori.toLocaleLowerCase().replace(' ', '-')+'/';
              }

			return `

				<div onclick="window.location.href = '/${linktransaksi}${linkprovince}${linkcityname}${linksub}${linkkat}${linkshare}${text2Binary(c.idprop)}'" style="cursor: pointer; width: 355px;" class="card mb-2 card-content item  h-100">
		          <div class="foto images-content" style="--h:250px;
		          --foto: url('/assets/upload/cover/${c.idprop}.jpg?v=${Date.now()}');
		          ">
		          <div class="bintang"> <i class="fas fa-star"></i> ${c.bintang}</div>
		            <div class="harga">Rp ${harga}</div>
		            <div class="status">${c.transaksi}</div>
		          </div>
		          <div class="card-body">
		            <h4 style="font-size: 14pt;">${judul}</h4>
		            <p>${deskripsi}</p>
		            <span>
		              <i class="fas fa-building"></i> <span>${c.lb}<sup>m2</sup></span>&nbsp;&nbsp;
		            </span>
		            <span>
		              <i class="fas fa-arrows-alt"></i> <span>${c.lt}<sup>m2</sup></span>&nbsp;&nbsp;
		            </span>
		            <span>
		              <i class="fas fa-bed"></i> <span>${c.jum_kt}</span>&nbsp;&nbsp;
		            </span>
		            <span>
		              <i class="fas fa-bath"></i> <span>${c.jum_km}</span>
		            </span>
		            <div class="row mt-3 agen-info">
		              <div class="col-7">
		                <div class="agen">
		                  <div class="foto" style="--foto: url('/assets/upload/agen/${c.idsales}.jpg')" class="foto-agen"></div>
		                  <div>
		                    <h4>${c.sales}</h4>
		                  </div>
		                </div>
		              </div>
		              <div class="col-5">
		                <button  style="cursor:pointer;"  onclick="event.stopPropagation(); window.open('https://api.whatsapp.com/send?phone=${c.nohp}', '_blank')"><i class="fab fa-whatsapp"></i> Hubungi agen</button>
		                <button style="cursor:pointer;"  onclick="event.stopPropagation(); location.href = '/kpr?nominal=${harga}'" ><i class="fab fa-whatsapp"></i> Hitung KPR</button>
		              </div>
		            </div>
		          </div>
		        </div>

			`;
		}).join("")+`
			</div>
		`;

		setTimeout(function(){
		 	$(".owl-carousel").owlCarousel({
		      margin:20,
		      loop: true,
		      autoWidth:true,
		      items:4,
		      autoHeight:true,
		       dots: false,
		       autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true,
                nav:true,
                navigationText: [
                    "<i class='fa fa-chevron-left'></i>",
                    "<i class='fa fa-chevron-right'></i>"
                ]
			})
		}, 0)


  })



var makeCond = [];
    
    makeCond.push({
		opsi: "", data: ['harga', '<>', `"0"`]
	});
	makeCond.push({
		opsi: "AND", data: ['harga', 'IS NOT ', `NULL`]
	});
	makeCond.push({
		opsi: "AND", data: ['deskripsi', 'IS NOT ', `NULL`]
	});
	makeCond.push({
		opsi: "AND", data: ['deskripsi', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['judulproperti', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['transaksi', '<>', `"PROYEK BARU"`]
	});
	makeCond.push({
		opsi: "AND", data: ['province', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['city_name', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['subdistrict_name', '<>', `""`]
	});
	makeCond.push({
		opsi: "AND", data: ['kategori', '<>', `""`]
	});


  var prop = db()
	.table('properti')
	.select('properti.*, p.id, sales.nama as sales, sales.hp as nohp')
	.leftJoin([
		[`( SELECT * FROM foto WHERE kategori = 'foto' GROUP BY foto.idprop ORDER BY id ASC ) as p`, `p.idprop`, '=', `properti.idprop `],
		['sales', 'sales.id', '=', 'properti.idsales']
	])
	.order('properti.idprop', 'DESC')
	.master(false)
	if(makeCond.length > 0){
        prop.condition(makeCond)
    }
  prop.limit(0, 10)
  prop.get(function(e){
    var ids = 'favorit';
   __id(ids).innerHTML =  `
			<div class="owl-carousel owl-theme grabbable">
		`+e.map(function(c){

			var judul = c.judulproperti;

			var harga = formatRupiah(Number(c.harga).toFixed(0));

			if (judul.length > 30) {
				judul = judul.substring(0, 30)+'...';
			}

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

			if (deskripsi.length > 45) {
				deskripsi = deskripsi.substring(0, 45)+'...';
			}

            var linktransaksi = "";
              var linkprovince = "";
              var linkcityname = "";
              var linksub = "";
              var linkkat = "";
              var linkshare = "";
              if(c.transaksi != ""){
                  linktransaksi = c.transaksi.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.city_name != ""){
                  linkprovince = c.province.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.city_name != ""){
                  linkcityname = c.city_name.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.subdistrict_name != ""){
                  linksub = c.subdistrict_name.toLocaleLowerCase().replace(' ', '-')+'/';
              }
              if(c.kategori != ""){
                  linkkat = c.kategori.toLocaleLowerCase().replace(' ', '-')+'/';
              }

			return `

				<div onclick="window.location.href = '/${linktransaksi}${linkprovince}${linkcityname}${linksub}${linkkat}${linkshare}${text2Binary(c.idprop)}'" style="cursor: pointer; width: 355px;" class="card mb-2 card-content item h-100">
		          <div class="foto images-content" style="--h:250px;
		          --foto: url('/assets/upload/cover/${c.idprop}.jpg?v=${Date.now()}');
		          ">
		          <div class="bintang"> <i class="fas fa-star"></i> ${c.bintang}</div>
		            <div class="harga">Rp ${harga}</div>
		            <div class="status">${c.transaksi}</div>
		          </div>
		          <div class="card-body">
		            <h4 style="font-size: 14pt;">${judul}</h4>
		            <p>${deskripsi}</p>
		            <span>
		              <i class="fas fa-building"></i> <span>${c.lb}<sup>m2</sup></span>&nbsp;&nbsp;
		            </span>
		            <span>
		              <i class="fas fa-arrows-alt"></i> <span>${c.lt}<sup>m2</sup></span>&nbsp;&nbsp;
		            </span>
		            <span>
		              <i class="fas fa-bed"></i> <span>${c.jum_kt}</span>&nbsp;&nbsp;
		            </span>
		            <span>
		              <i class="fas fa-bath"></i> <span>${c.jum_km}</span>
		            </span>
		            <div class="row mt-3 agen-info">
		              <div class="col-7">
		                <div class="agen">
		                  <div class="foto" style="--foto: url('/assets/upload/agen/${c.idsales}.jpg')" class="foto-agen"></div>
		                  <div>
		                    <h4>${c.sales}</h4>
		                  </div>
		                </div>
		              </div>
		              <div class="col-5">
		                <button  style="cursor:pointer;"  onclick="event.stopPropagation(); window.open('https://api.whatsapp.com/send?phone=${c.nohp}', '_blank')"><i class="fab fa-whatsapp"></i> Hubungi agen</button>
		                <button  style="cursor:pointer;"  onclick="event.stopPropagation(); location.href = '/kpr?nominal=${harga}'" ><i class="fab fa-whatsapp"></i> Hitung KPR</button>
		              </div>
		            </div>
		          </div>
		        </div>

			`;
		}).join("")+`
			</div>
		`;

		setTimeout(function(){
		 	$(".owl-carousel").owlCarousel({
		      margin:20,
		      loop: true,
		      autoWidth:true,
		      items:4,
		      autoHeight:true,
		      navigation : true,
		      autoplay:true,
                autoplayTimeout:10000,
                autoplayHoverPause:true,
                dots: false,
                nav:true,
                navigationText: [
                    "<i class='fa fa-chevron-left'></i>",
                    "<i class='fa fa-chevron-right'></i>"
                ],
			})
		}, 0)


  })


})


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


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


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

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

	db().table('blog')
	.limit(0,6)
	.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)
					)
				)
			)
		)
	}

	})

	domp('blog-menus', blogMenus);


    //  mapboxgl.accessToken = 'pk.eyJ1Ijoid2Vic2h1bnRlcm5ldCIsImEiOiJja3RlM3BlaWkybHlnMnltdXoyMzN0bzVjIn0.GichTcrFpB2D-KnzpgsZbA';
    // const map = new mapboxgl.Map({
    //     container: 'map', // container ID
    //     style: 'mapbox://styles/mapbox/streets-v11', // style URL
    //     center: [110.6625709,-7.3171666],
    //     zoom: 6 // starting zoom
    // });

    // var aw = new db;
    // aw.table('properti')
    // .select(' lat, lng')
    // .condition([
    //     {opsi: '', data: ['lat', '<>', '0']},
    //     {opsi: 'AND', data: ['lng', '<>', '0']},
    // ])
    // .get(function(c){

    //     for(const d of c){
    //         const marker = new mapboxgl.Marker()
    //         marker.setLngLat([d.lng, d.lat])
    //         marker.addTo(map);
    //     }

    // })
window.scrollTo(0, 0);
    </script>
  @endsection