//menu apps android

var pHead = document.getElementById("head-nav");
pHead.style.width = '100%';
pHead.style.top = '0';
pHead.style.background = 'white';
pHead.style.zIndex = '999';
pHead.style.position = 'fixed';

document.body.style.paddingTop = pHead.clientHeight+'px';

globalThis.orange = "#fed201";

globalThis.menu = div()
.class('iron-up')
.css('position','fixed')
.css('z-index','999')
.css('overflow', 'hidden')
.css('transition','0.3s')
.css('box-shadow','0 0 30px rgba(125,125,125,0.7)')
.height('0')
.width('100%')
.bottom(0)
.background(orange)

menu.child(
	div().id('up-action')
)
// menu

el("#cari-kpr-anda").enter(function(){
	var sp = el("#cari-kpr-anda").getVal().replaceAll(" ", "-")
	window.location.href = "/qr/"+sp;
})

el("#cari-kpr-anda-btn").click(function(){
	var sp = el("#cari-kpr-anda").getVal().replaceAll(" ", "-")
	window.location.href = "/qr/"+sp;
})



$id('up-action').child(
	i().id('close-up').class('fas fa-times').css({
		position: 'absolute',
		top: '10px',
		right: '10px',
		fontSize: '16pt',
		cursor: 'pointer',
	})
)

$id('up-action').child(
	div().id('content-menu')
)


$id('close-up').el.click(function(){
	menu.css('height', '0')
})

// android area -----------------------------//

var and = div()
.child(
	div()
	.id('content-and')
	.height("310px")
	.css('margin-top', '40px')
	.css('overflow-x', 'hidden')
	.css('overflow-y', 'auto')
	.background('white')
)

$id('content-and').child(
	div()
	.class('container text-center mt-5')
	.child(
		h2().text("Download Aplikasi Masuk Sini ")
	)
	.child(
		p().text("Cari properti tepat dengan mudah dan cepat pakai Masuk Sini Apps! Tinggal klik, ribuan properti tersedia untuk Anda.")
	)
	.child(
		img().cursor('pointer').id("play").class('mt-3').height('50px').src("/assets/bt4/google-play.webp").click(function(){
			window.open(globalThis.linkApp, '_blank');
		})
	)
)

document.getElementById('masuksini').style.cursor = 'pointer';
document.getElementById('masuksini').addEventListener('click', function(){
	window.location.href = '/';
}, false)

el('#android').click(function(){
	menu.css('height', '350px')
	domp("content-menu", and)
})


// filter ------------------------//
var fill = div()
.child(
	div()
	.id('content-filter')
	.height("310px")
	.css('margin-top', '40px')
	.css('overflow-x', 'hidden')
	.css('overflow-y', 'auto')
	.background('white')
)


$id('content-filter').child(
	div().class('container')
	.child(
		div().id("row-filter").load(loadFillData)
	)
)

// filter data

function loadFillData(){


	var spo = kategori_properti.map(function(f){
		return '<option>'+f.kategori_nama+'</option>';
	})


	var prop = prov.map(function(f){
		return '<option>'+f.prov+'</option>';
	})

	var citi = city.map(function(f){
		return '<option>'+f.city+'</option>';
	})


	$id("row-filter").el.class('mt-3')

	$id("row-filter")
	.child(
		div().class('row')
		.child(
			div().class('col-lg-6 mb-3')
			.child(
				el('select').data('id', 'transaksi').class('form-control').id('fill-transaksi').html(`
					<option value="">All Properti</option>
					<option value="jual">Jual</option>
					<option value="sewa">Sewa</option>
				`)
				.load(function(a){
					if (location.pathname.split('/')[2] != undefined) {
						var path = location.pathname.split('/')[2];
						path = path.split('&');
						var obj = {}
						for(path of path){
							var p = path.split('=');
							obj[p[0]] = p[1];
						}
						if (obj.transaksi != undefined) {
							a.el.value = obj.transaksi.replace(/\-/g, ' ');
						}

					}
				})
			)
			.child(
				el('select').data('id', 'kategori').class('form-control mt-3').id('fill-kategori').html(
					'<option value="">Pilih Kategori</option>'+
					spo
				)
				.load(function(a){
					if (location.pathname.split('/')[2] != undefined) {
						var path = location.pathname.split('/')[2];
						path = path.split('&');
						var obj = {}
						for(path of path){
							var p = path.split('=');
							obj[p[0]] = p[1];
						}
						if (obj.kategori != undefined) {
							a.el.value = obj.kategori.replace(/\-/g, ' ');						}
					}
				})
			)
		)
		.child(
			div().class('col-lg-6')
			.child(
				el('select').data('id', 'province').class('form-control').id('fill-provinsi').html(
					'<option value="">Pilih Provinsi</option>'+
					prop
				)
				.load(function(a){
					if (location.pathname.split('/')[2] != undefined) {
						var path = location.pathname.split('/')[2];
						path = path.split('&');
						var obj = {}
						for(path of path){
							var p = path.split('=');
							obj[p[0]] = p[1];
						}
						if (obj.province != undefined) {
							a.el.value = obj.province.replace(/\-/g, ' ');
						}
					}
				})
			)
			.child(
				el('select').data('id', 'city_name').class('form-control mt-3').id('fill-kota').html(
					'<option value="">Pilih kota</option>'+
					citi
				)
				.load(function(a){
					if (location.pathname.split('/')[2] != undefined) {
						var path = location.pathname.split('/')[2];
						path = path.split('&');
						var obj = {}
						for(path of path){
							var p = path.split('=');
							obj[p[0]] = p[1];
						}
						if (obj.city_name != undefined) {
							a.el.value = obj.city_name.replace(/\-/g, ' ');
						}
					}
				})
			)
		)
		.child(
			div().class('col-lg-12')
			.child(
				el('button').class('w-100 btn btn-success mt-3').html('Cari Properti')
				.load(function(a){

					if (location.pathname.split('/')[2] != undefined) {

						var path = location.pathname.split('/')[2];

						path = path.split('&');

						var obj = {}

						for(path of path){
							var p = path.split('~');
							obj[p[0]] = p[1];
						}
					}
				})
				.click(function(){

					var sVal = []

					var transaksi = $id('fill-transaksi').element.value.replace(/ /g, '-');
					if (transaksi!= '') {
						sVal.push('transaksi='+transaksi);
					}
					var kategori = $id('fill-kategori').element.value.replace(/ /g, '-');
					if (kategori!= '') {
						sVal.push('kategori='+kategori);
					}
					var province = $id('fill-provinsi').element.value.replace(/ /g, '-');
					if (province!= '') {
						sVal.push('province='+province);
					}
					var city_name = $id('fill-kota').element.value.replace(/ /g, '-');
					if (city_name!= '') {
						sVal.push('city_name='+city_name);
					}

					location.href = '/qr/'+sVal.join('&')

				})
			)
		)
	)
}

// fill properti --------------------------------------------------------//

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

// kategorimenu ------------------------//
var katm = div()
.child(
	div()
	.id('content-kategori')
	.height("310px")
	.css('margin-top', '40px')
	.css('overflow-x', 'hidden')
	.css('overflow-y', 'auto')
	.background('white')
)

$id('content-kategori').child(
	div().class('container mt-3')
	.child(
		div().class('grid-col-2')
		.child(
			div().child(
				div()
				.id('province')
			)
		)
		.child(
			div()
			.child(
				div()
				.id('kota')
			)
		)
	)
)

function kota(x, i){
	var prov = null;
	$id('list-menu'+i).el.css('background', 'var(--orange)')
	Array.from(listMenu.children).forEach(function(x,p){
		if(p == i){
			el(x).css('background', 'var(--orange)')
			prov = el(x).getText();
		}else{
			el(x).css('background', '#fff')
		}
	})
	db()
	.master(true)
	.table('properti')
	.select('DISTINCT(city_name) as prov')
	.condition([
		{opsi: "", data:["province", "=", `"${x}"`]}
	])
	.get(function(c){
		var o = div().class('lokasi lighten').margin('0 20px')
		for(const e of c){
			o.child(
				a().color('#333').text(e.prov)
				.align('center')
				.border('1px solid #ddd')
				.margin('8px')
				.radius('20px')
				.href('/properti/province~'+prov.replaceAll(' ', '-').toLowerCase()+'&city_name~'+e.prov.replaceAll(' ', '-').toLowerCase())
			)
		}
		$id('kota').el.html('')
		$id('kota').child(o)
	})
}

$id('province').el.load(function(){
	db()
	.master(true)
	.table('properti')
	.select('DISTINCT(province) as prov')
	.condition([
		{opsi: "", data:["province", "<>", `""`]}
	])
	.get(function(c){
		var o = div().class('list-menu')
		var i = 0;
		for(const e of c){
			o.child(
				span()
				.data('i', i)
				.id('list-menu'+i).text(e.prov)
				.css({
					border: "1px solid #ddd",
					padding: "8px 10px"
				})
				.click(function(){
					kota(this.innerText, this.getAttribute("data-i"));
				})
			)
			i++;
		}

		globalThis.listMenu = o.get();

		$id('province').child(o)

		kota(c[0].prov, 0)

	})
})


// end filter properti ----------------------------------------------------------------/


// loginm ------------------------//
var loginm = div()
.child(
	div()
	.id('content-login')
	.height("310px")
	.css('margin-top', '40px')
	.css('overflow-x', 'hidden')
	.css('overflow-y', 'auto')
	.background('white')
)

$id('content-login').child(
	div().class('container')
	.child(
		div().class('row')
		.child(
			div().class('col-12 text-center mt-3 mb-4')
			.child(
				img().src('/assets/bt4/masuksini.png').height('160px')
			)
		)
		.child(
			div().class('col-12 text-center')
			.child(
				btn().class('btn btn-lg btn-primary').text('Login').id('form-login').click(loadFormLogin)
			)
			.child(
				span().html('&nbsp;&nbsp;&nbsp;')
			)
			.child(
				btn().class('btn btn-lg  btn-primary').text('Register').id('register')
			)
		)
	)
)


// register

var notifRegis = div();

notifRegis.child(
	div().margin('40px 20px')
	.css('display', 'flex')
	.css('justify-content', 'center')
	.child(
		div()
		.width('350px')
		.background('white').id('form-register').padding('10px')
		.child(
			div().class('text-center')
			.child(
				h3().text('Permintaan ada sedang kami proses silahkan menunggu pesan dari kami !')
			)
		)
	)
)


var regis = div();

regis.child(
	div().margin('40px 20px')
	.css('display', 'flex')
	.css('justify-content', 'center')
	.child(
		div()
		.width('350px')
		.background('white').id('form-register').padding('10px')
	)
)

// nama lengkap
$id('form-register').child(
	div().class('form-group text-center')
	.child(
		h1().text('Daftar')
	)
)

// nama lengkap
$id('form-register').child(
	div().class('form-group')
	.child(
		el('input').class('form-control').type('text').hold('Nama lengkap').id('nama_lengkap')
	)
)

// no telp
$id('form-register').child(
	div().class('form-group')
	.child(
		div().class('row')
		.child(
			div().class('col-4')
			.child(
				el('select').id('koden').class('form-control')
			)
		)
		.child(
			div().class('col-8')
			.child(
				el('input').class('form-control').type('telp').hold('No Telp').id('no_telp')
				.keyup(function(){
					this.value = this.value.replace(/[^0-9\.]/g,'');
				})
			)
		)
	)
)

db().table('kode_telp').get(function(kodeTelp){

	for(const kodeTelpon of  kodeTelp){

		$id('koden').child(
			el('option').val(kodeTelpon.kode).text(kodeTelpon.kode+' - '+kodeTelpon.nama_negara)
		)

	}

	$id('koden').element.value = '+62';

})



// username
$id('form-register').child(
	div().class('form-group')
	.child(
		el('input').class('form-control').type('username').hold('Username').id('username')
		.keyup(function(){

			var val = this.value;
			var thisElement = this;

			$.ajax({
				url: '/get-username/'+val,
				success: function(e){
					if(e == 1){
						thisElement.value = '';
						alert('sorry the username '+val+' is used')
					}
				}
			})


		})
	)
)

// password
$id('form-register').child(
	div().class('form-group')
	.child(
		el('input').class('form-control').type('password').hold('Password').id('password')
	)
)

// ulangi password
$id('form-register').child(
	div().class('form-group')
	.child(
		el('input').class('form-control').type('password').hold('Ulangi Password').id('password_replay')
	)
)

$id('form-register').child(
	div().class('form-group')
	.child(
		el('button').class('w-100 btn btn-primary ').type('button').id('button-register').text('Register')
	)
)

$id('button-register').el.click(function(){

	var pass1 =  __id('password').value;
	var pass2 =  __id('password_replay').value;

	if(pass1 == pass2){

		// cek form kosong
		var data = {
			nama_lengkap: __id('nama_lengkap').value,
			koden: __id('koden').value,
			no_telp: __id('no_telp').value,
			username: __id('username').value,
			password: __id('password').value
		}

		// cek form kosong
		var dataKosong = 0;
		var nameKosong = '';
		for(const eld  of  Object.keys(data)){

			if(dataKosong == 0){
				if (data[eld] == "") {
					dataKosong = 1;
					nameKosong = eld;
				}
			}

		}

		if (dataKosong == 0) {

			$.ajax({
				url: '/user/register',
				method: 'POST',
				dataType: 'text',
				data: {
					_token: $('meta[name=csrf-token]').attr('content'),
					data: data
				},
				success: function(response){
					if (response == 'token dikirim') {
						domp("content-menu", notifRegis);
						document.getElementsByClassName('iron-up')[0].style.height = '100%';
						document.getElementsByClassName('iron-up')[0].style.zIndex = '9999999';
					}
				}
			})

		}else{
			__id(nameKosong).focus();
			alert('maaf data tidak boleh kosong')
		}

	}else{

		alert('maaf password anda tidak sama')

	}

})

$id('register').el.click(function(){


	domp("content-menu", regis);
	document.getElementsByClassName('iron-up')[0].style.height = '100%';
	document.getElementsByClassName('iron-up')[0].style.zIndex = '9999999';
	$id('nama_lengkap').element.focus();

})


function loadFormLogin(){
	location.href = '/login-admin';
}


el('#login').click(function(){
	menu.css('height', '350px')
	domp("content-menu", loginm)
})

domp('menu-popup', menu)