@extends('layout.front')

@section('container')

<style>
.bintang{
  display: inline-block;
  margin: 10px;
  font-size: 16pt;
  text-shadow:  0 0 20px #333;
}
  .breadcrumb{
    background: white;
    padding: 5px 20px;
    padding-top: 9px;
    box-shadow: 0 0 5px #ddd;
  }

	.d-inline{
	  margin-bottom: 5px;
	}

	.desktop-shown{
	  display: block;
	}

	.desktop-hide{
	  display: none;
	}

	#tab-filter{
  min-height: 50px;
}

#tab-filter > span{
  display: inline-block !important;
  margin-bottom: 10px;
}

#tab-filter > span i{
  cursor: pointer;
}

#tab-filter > span span{
  margin-right: 10px;
  margin-left: 10px;
}

#tab-filter > span{
  padding: 8px 10px;
  background: #ddd;
  border-radius: 20px;
  margin: 0 5px;
}

#tab-filter{
  display: flex;
  align-items: center;
  min-height: 40px;
  white-space: nowrap;
  overflow-x: auto;
}

</style>
@php
  $pat = explode("/", $_SERVER['REQUEST_URI']);

  $path = [];
  foreach($pat as $ph){
    if($ph != ""){
      $path[] = $ph;
    }
  }

  $link = "/";
@endphp
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" aria-current="page"> <a href="/"> <i class="fas fa-home"></i> </a>  </li>
		@foreach($path as $key => $paths)
			@if($key + 1 == count($path))
        <li class="breadcrumb-item active" aria-current="page" id="pathrev"> {{str_replace("-", " ", $paths)}}  </li>
        <script>
            document.getElementById("pathrev").innerText = document.getElementById("pathrev").innerText.replace(/\&/g, " / ").replace(/\=/g, " ");
        </script>
			@else
				@php
					$link .=  $paths.'/';
				@endphp
				<li class="breadcrumb-item" aria-current="page"><a style="text-decoration:none;" href="{{url($link)}}"> {{str_replace("-", " ", $paths)}} </a>  </li>
			@endif
		@endforeach
  </ol>
</nav>
<div id="top-view" class="container mt-5">

	<div class="row mb-3">
		<!-- <div class="col-sm-12"> -->
			<!-- <div class="row"> -->
				<!-- <div id="tab-filter"></div> -->
				<!-- <div class="col-2 text-right"><i id="filter-p" class="fas fa-sliders-h icon-menu mr-2" ></i></div> -->
			<!-- </div> -->
		<!-- </div> -->
		<div class="col-12 desktop-shown" style="display: none;">
				<select id="provinc" class="form-control d-inline">

				</select>
				<select id="kota" class="form-control d-inline">

				</select>
				<select id="kpr" class="form-control d-inline">
					<option value="">All Kpr</option>
					<option value="jual">Dijual</option>
					<option value="sewa">Disewakan</option>
				</select>
		</div>
		<div class="col-12 text-right desktop-hide">
			filter
		</div>
	</div>

    <div class="row" id="properti">
    	<div class="col-12 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 text-right mb-5">
	<button class="btn btn-light"> Page: <span id="page"></span> </button>
	<button id="prev-kpr" class="btn btn-primary"><</button>
	<button id="next-kpr" class="btn btn-primary">></button>
</div>

@endsection

@section('js')
    <!-- <script src="{{asset('assets/bt4')}}/properti.js?v=<?= date('Ymdh')?>"></script> -->
    <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);
}

var urut = 1;
var um = 0;

function clearEvent(){

	var ef = {};

	Array.from(document.querySelectorAll('[clear-fill]')).forEach(function(eve){
		eve.addEventListener('click', function(){
			var v = this.getAttribute('clear-fill');

			var tr = Array.from(document.querySelectorAll('[clear-fill]')).filter(function(pop3, s){

				var h = pop3.getAttribute('clear-fill');

				if (h != v) {
					return pop3;
				}


			}).map(function(pop3){
				var h = pop3.getAttribute('clear-fill');
					return h;
			}).join("&");


			window.history.pushState({}, 'name', '/properti/'+tr);

			if (tr != '') {
				loadData(0, [tr])
			}else{
				loadData(0, [])
			}

		},false)
	})

}

var urut = 1;
var um = 0;

function loadData(x = 0, m){

	 var cond = {}

	 var query = '';

   var conds = '';




	  // document.getElementById('tab-filter').innerHTML = conds;

	  clearEvent();

	var likes = [];

    var makeCond = []

    if(makeCond.length > 0){
    	makeCond.push({
				opsi: "AND", data: ['harga', '<>', `"0"`]
			});
			makeCond.push({
				opsi: "AND", data: ['harga', 'IS NOT ', `NULL`]
			});
			makeCond.push({
				opsi: "AND", data: ['judulproperti', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['transaksi', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['province', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['kategori', '<>', `""`]
			});
    }else{
        makeCond.push({
					opsi: "", data: ['harga', '<>', `"0"`]
				});
				makeCond.push({
					opsi: "AND", data: ['harga', 'IS NOT ', `NULL`]
				});
				makeCond.push({
					opsi: "AND", data: ['judulproperti', '<>', `""`]
				});
				makeCond.push({
					opsi: "AND", data: ['transaksi', '<>', `""`]
				});
				makeCond.push({
					opsi: "AND", data: ['kategori', '<>', `""`]
				});
    }

    var bagiPath = location.pathname.split('/');

    bagiPath = bagiPath.filter(function(o){
      if(o != "" && o != "properti"){
        return o;
      }
    });

    var condBP = ['transaksi', 'province', 'city_name', 'subdistrict_name', 'kategori'];

    if(bagiPath.length > 0){
        if(bagiPath[0] != 'qr'){
            bagiPath.forEach(function(r,l){
              r = r.replace(/\-/g, ' ');
              makeCond.push({
				opsi: "AND", data: [condBP[l], '=', `"${r}"`]
			    });
            })
        }else{
            var qr = bagiPath[1].replace(/\-/g, ' ');
            if(qr.indexOf("=") == -1){
                var lik = ['judulproperti', 'transaksi', 'deskripsi'];
                lik.forEach(function(r, i){
                    if(i == 0){
                        likes.push({
        				    opsi: "", data: [r, 'LIKE', `"%${qr}%"`]
        			    });
                    }else{
                        likes.push({
        				    opsi: "OR", data: [r, 'LIKE', `"%${qr}%"`]
        			    });
                    }
                })
            }else{
                qr = qr.split("&");
                qr.forEach(function(q){
                    q = q.split("=");
                    makeCond.push({
    				    opsi: "AND", data: [q[0], '=', `"${q[1]}"`]
    			    });
                })
            }
        }
    }


	el("#page").text(urut);
	el("#top-view").go(-170)
	__id('properti').innerHTML = `

		<div class="col-12 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>
	`;
	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)
	.limit(x, 21);
	if(makeCond.length > 0){
        prop.condition(makeCond)
        globalThis.condUp = makeCond;
    }
    if(likes.length > 0){
        prop.like(likes)
        globalThis.condOr = likes;
    }
    
	prop.get(function(e, p, qr, cnt){

    globalThis.cnt = Number(cnt);

		var ids = 'properti';
		__id(ids).innerHTML =  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 != null){
  			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(' ', '-')+'/';
      }
      // if(c.share != ""){
      //     linkshare = c.share.toLocaleLowerCase().replace(' ', '-')+'/';
      // }
			return `
			<div onclick="window.location.href = '/${linktransaksi}${linkprovince}${linkcityname}${linksub}${linkkat}${linkshare}${text2Binary(c.idprop)}'" style="cursor: pointer;" class="col-sm-6 col-lg-4 mb-4">
				<div class="card mb-2 card-content 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>
        	</div>

			`;
		}).join("");
	})
}

loadData();

el('#prev-kpr').click(function(){
	if(um > 0){
		urut -=1;
		um -= 21;
		loadData(um);
	}
})

el('#next-kpr').click(function(){
	um += 21;
	urut +=1;
	if (um < globalThis.cnt) {
		loadData(um);
	}else{
		urut -=1;
		um -= 21;
	}
})
window.scrollTo(0, 0);

    </script>
@endsection