@extends('layout.front')

@section('container')

<style>
	.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>

<div id="top-view" class="container mt-5">

	<div class="row mb-5">
		<div class="col-sm-12">
			<div class="row">
				<div class="col-10" 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;

el('#filter-p').click(function(){
	menu.css('height', '350px')
	domp("content-menu", fill)
})
.cssFocus({
	color: "blue"
})


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)
	})

}


function loadData(x = 0, m){

	var cond = {}

	var query = '';

	var conds = '';
	if (m.length > 0) {
		m[0].split('&').forEach( function(w, x) {

			var l = w.split('~');
			var v = l[1].replaceAll("-", " ");
			if (l[0] != 'qr') {
				cond[l[0]] = v;
				conds += `<span class="tabs"  style="display: inline-block;"><span>${v}</span><i class="fas fa-times" clear-fill="${l[0]}~${v}"></i></span>`;
			}else{
				query = v;
				conds += `<span class="tabs"  style="display: inline-block;"><span>query: ${v}</span><i class="fas fa-times" clear-fill="${l[0]}~${v}"></i></span>`;
			}

		});

	}else{
		conds += `<span class="tabs" style="display: inline-block;" ><span>All Properti</span></span>`;
	}

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

	clearEvent();


	var likes = [];

	if (query != '') {
		var qr = ['properti.deskripsi', 'properti.transaksi', 'properti.judulproperti', 'properti.province', 'properti.city_name', 'properti.alamat', 'sales.nama'];
		var i = 0;
		for(qrw of qr){
			if (i == 0) {
				likes.push({
					opsi: '', data: [qrw, 'LIKE', `"%${query}%"`]
				})
			}else{
				likes.push({
					opsi: 'OR', data: [qrw, 'LIKE', `"%${query}%"`]
				})
			}
			i++;
		}
	}

	makeCond = []
	Object.keys(cond).forEach(function(s, i){
		if(i == 0){
			makeCond.push({
				opsi: "", data: [s, '=', `"${cond[s]}"`]
			});
		}else{
			makeCond.push({
				opsi: "AND", data: [s, '=', `"${cond[s]}"`]
			});
		}
	})

    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: ['deskripsi', 'IS NOT ', `NULL`]
			});
			makeCond.push({
				opsi: "AND", data: ['deskripsi', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['judulproperti', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['transaksi', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['city_name', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['subdistrict_name', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['kategori', '<>', `""`]
			});
			makeCond.push({
				opsi: "AND", data: ['idsales', '<>', `""`]
			});
    }else{
        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', '<>', `""`]
				});
				makeCond.push({
					opsi: "AND", data: ['city_name', '<>', `""`]
				});
				makeCond.push({
					opsi: "AND", data: ['subdistrict_name', '<>', `""`]
				});
				makeCond.push({
					opsi: "AND", data: ['kategori', '<>', `""`]
				});
				makeCond.push({
					opsi: "AND", data: ['idsales', '<>', `""`]
				});
    }

	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')
	.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.condLike = likes;
	}
	prop.get(function(e, p, qr){
		console.log(qr);
		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)+'...';
			}

			var deskripsi = c.deskripsi;

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

			console.log(c)

            var linktransaksi = "";
            var linkcityname = "";
            var linksub = "";
            var linkkat = "";
            var linkshare = "";
            if(c.transaksi != ""){
                linktransaksi = c.transaksi.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}${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('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>
        	</div>

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

$(document).ready(function(){

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


	var getUrl = location.pathname.replaceAll('/properti', '').split('/')
	.filter(function(x){
		if(x != ""){
			return x;
		}
	})
	loadData(0, getUrl);

	var m = getUrl;

	var cond = {}
	if (m[0] != undefined) {

		m[0].split('&').forEach( function(w, x) {
			var l = w.split('~');
			var v = l[1].replaceAll("-", " ");
			cond[l[0]] = v;
		});

	}

	if (cond.transaksi != undefined) {
		__id('kpr').value = cond.transaksi;
	}


	db()
	.master(true)
	.table('properti')
	.select(' DISTINCT(province) as prov ')
	.condition([
		{opsi: "", data: ["province", "<>", "''"]}
	])
	.get(function(b){
		__id('provinc').innerHTML = `<option value="">Pilih Provinsi</option>`+b.map(function(s,i){
			return `<option value="${s.prov.toLowerCase()}">${s.prov}</option>`
		})

		if (cond.province != undefined) {
			__id('provinc').value = cond.province;
		}
	})

	var condKota = [
		{opsi: "", data: ["city_name", "<>", "''"]}
	];

	if (cond.province != undefined) {
		condKota.push({
			opsi: 'AND', data: ['province', '=', '"'+cond.province+'"']
		})
	}


	db()
	.table('properti')
	.master(true)
	.select(' DISTINCT(city_name) as prov ')
	.condition(condKota)
	.get(function(b){
		__id('kota').innerHTML = `<option value="">Pilih kota</option>`+b.map(function(s,i){
			return `<option value="${s.prov.toLowerCase()}">${s.prov}</option>`
		})

		if (cond.city_name != undefined) {
			__id('kota').value = cond.city_name;
		}
	})

})


$("#provinc").change(function(){
	var getUrl = location.pathname.replaceAll('/properti', '').split('/')
	.filter(function(p, i){
		if(p != ""){
			return p;
		}
	});
	//search if defined filter not to shown
	var search = $(this).val().replaceAll(" ", "-");
	if (getUrl[0] != undefined) {
		getUrl = getUrl[0].split("&").filter(function(k,i){
			if (k.indexOf("province") == -1 && k.indexOf("city_name") == -1) {
				return k;
			}
		})
	}
	var condKota = [
		{opsi: "", data: ["city_name", "<>", "''"]}
	];
	if ($(this).val() != "") {
		condKota.push({
			opsi: 'AND', data: ['province', '=', '"'+$(this).val()+'"']
		})
	}
	db()
	.master(true)
	.table('properti')
	.select(' DISTINCT(city_name) as prov ')
	.condition(condKota)
	.get(function(b){
		__id('kota').innerHTML = `<option value="">Pilih kota</option>`+b.map(function(s,i){
			return `<option value="${s.prov.toLowerCase()}">${s.prov}</option>`
		})
		document.getElementById("kota").value = "";
	})
	if (search != "") {
		getUrl.push("province~"+search);
	}
	window.history.pushState({}, 'name', '/properti/'+getUrl.join("&"));
	var dr = [getUrl.join("&")];
	loadData(0, dr);
})
$("#kpr").change(function(){
	var getUrl = location.pathname.replaceAll('/properti', '').split('/')
	.filter(function(p, i){
		if(p != ""){
			return p;
		}
	});
	//search if defined filter not to shown
	var search = $(this).val().replaceAll(" ", "-");
	if (getUrl[0] != undefined) {
		getUrl = getUrl[0].split("&").filter(function(k,i){
			if (k.indexOf("transaksi") == -1) {
				return k;
			}
		})
	}
	if (search != "") {
		getUrl.push("transaksi~"+search);
	}
	window.history.pushState({}, 'name', '/properti/'+getUrl.join("&"));
	var dr = [getUrl.join("&")];
	loadData(0, dr);
})
$("#kota").change(function(){
	var getUrl = location.pathname.replaceAll('/properti', '').split('/')
	.filter(function(p, i){
		if(p != ""){
			return p;
		}
	});
	//search if defined filter not to shown
	var search = $(this).val().replaceAll(" ", "-");
	if (getUrl[0] != undefined) {
		getUrl = getUrl[0].split("&").filter(function(k,i){
			if (k.indexOf("city_name") == -1) {
				return k;
			}
		})
	}
	if (search != "") {
		getUrl.push("city_name~"+search);
	}
	window.history.pushState({}, 'name', '/properti/'+getUrl.join("&"));
	var dr = [getUrl.join("&")];
	loadData(0, dr);
})

    </script>
@endsection