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'; 
		__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 = '/kpr-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)

		loadImages()
	
	})



	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(5, 5)
	.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(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 = '/kpr-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)

		loadImages()
	
	})


})