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

$(document).ready(function(){
	db()
	.table('properti')
	.select('properti.*, p.*, sales.nama as sales')
	.leftJoin([
		[`( SELECT * FROM foto GROUP BY foto.idprop ) as p`, `p.idprop`, '=', `properti.idprop `],
		['sales', 'sales.id', '=', 'properti.idsales']
	])
	.order('tgldaftar', 'DESC')
	.limit(0, 5)
	.get(function(e){
		var ids = 'properti'; 
		if (__id(ids) != undefined) {
			__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(2));

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

				var deskripsi = c.deskripsi;

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

				return `

			<div onclick="window.location.href = '/properti-detail/${c.idprop}'" style="cursor: pointer;" class="card mb-2 card-content item">
	          <div class="foto images-content" style="--h:250px;
	          --foto: url('https://masuksini.com/sistem-api/androapi/upload/foto/${c.id}.jpg');
	          ">
	            <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><i class="fab fa-whatsapp"></i> Hubungi agen</button>
	                <button><i class="fab fa-whatsapp"></i> Hitung KPR</button>
	              </div>
	            </div>
	          </div>
	        </div>

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

		setTimeout(function(){
		 	$(".owl-carousel").owlCarousel({
		      margin:30,
		      loop: true,
		      autoWidth:true,
		      items:4,
		      autoHeight:true
			})
		}, 0)

	})
})