@extends('layout.front')

@section('container')

<style type="text/css">
	.list-group-s{
	  list-style: none;
	  padding: 0;
	}

	.list-group-s li{
	display: grid;
	grid-template-columns: 50px auto;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}

	.list-group-s i{
	  width: 30px;
	}

	.list-group-s a{
	  min-width: 100%;
	}

	.list-group-s i{
	  font-size: 30px;
	  width: 50px;
	  margin: 20px 10px;
	}

	.list-group-s a{
	  text-decoration: none;
	  text-align: left;
	}
</style>


    @php
        
        $default = 450000000;
        if(isset($_GET['nominal'])){
            $default = str_replace(".", "", $_GET['nominal']);
        }
      
    
    @endphp

	<div class="container mt-5">
		<div class="row">
			<div class="col-lg-8">
				<h1>Simulasi KPR - Kalkulator Kredit Rumah</h1>
				<p>Gunakan kalkulator KPR untuk mendapatkan kemudahan pinjaman kredit rumah, perbandingan suku bunga cicilan bank di Indonesia</p>
				<div class="card mt-3">
					<div class="card-body">
						<h3 class="mb-4">Simulasi KPR </h3>
						<div class="row">
							<div class="col-lg-4">
								<div class="form-group">
									<label>Harga Properti</label>
									<div class="input-group mb-2">
								        <div class="input-group-prepend">
								          <div class="input-group-text">Rp</div>
								        </div>
								        <input id="hp" type="number" class="form-control" id="inlineFormInputGroup" placeholder="0" value="{{$default}}">
								    </div>
								</div>
								<div class="form-group">
									<label>Uang Muka / DP 20%</label>
								    <input id="um" type="number" class="form-control" id="inlineFormInputGroup" placeholder="0" >
								</div>

								<div class="form-group">
									<label>Jumlah Pinjaman</label>
									<p>Rp. <span id="cmp"></span></p>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="form-group">
									<label>Jangka Waktu ( tahun )</label>
									<select id="jk" class="form-control">
										@for($x=1; $x <= 15; $x++)
										<option>{{$x}}</option>
										@endfor
									</select>
								</div>
								<div class="form-group">
									<label>Estimasi Suku Bunga</label>
									<select id="sb" class="form-control">

									</select>
									<script type="text/javascript">

										var  sukubunga = [6, 6.5, 6.68, 7.70, 7.75,8, 9.25,9.75,9.99,10.29,10.99,11.29];

										document.getElementById('sb').innerHTML = sukubunga.map(function(xc){
											return `<option value="${xc}">${xc.toFixed(2)}%</option>`
										}).join('')

									</script>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="form-group">
									<label>Angsuran Perbulan</label>
									<p>Rp. <span id="hitung"></span></p>
								</div>
							</div>
						</div>
						<p>* Simulasi di atas hanya perhitungan dengan suku bunga fixed </p>
						</div>
					</div>
				</div>
			<div class="col-lg-4">
				<div class="card">
					<div class="card-body">
						<h5>Berita Terkini</h5>
						<div id="berita">

            </div>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>


@endsection

@section('js')

<script type="text/javascript">


	function hitungkpr(pokok, persen, tenor) {
		var pokok = pokok;
		var bunga = Number(persen)/12;
		var tenor = Number(tenor);
		var hitung = (pokok * bunga) / (1 - Math.pow((1+bunga), tenor * -1));
		return hitung;
	}


	(function getUm(){
		globalThis.getUm = getUm;
		var hp = Number(document.getElementById('hp').value) * 20/100;
		console.log(hp);
		document.getElementById('um').value = hp;
	})();


	(function jump(){
		globalThis.jump = jump;
		var hp = Number(document.getElementById('hp').value) - (Number(document.getElementById('hp').value) * 20/100);
		console.log(hp);
		document.getElementById('cmp').innerText = formatRupiah(hp);
	})();

	(function ang(){
		globalThis.ang = ang;
		var hp = Number(document.getElementById('hp').value) - (Number(document.getElementById('hp').value) * 20/100);
		var jk = Number(document.getElementById('jk').value) * 12;
		var sb = Number(document.getElementById('sb').value) / 100;

		var hitung = hitungkpr(hp, sb, jk).toFixed(0);

		document.getElementById('hitung').innerText = formatRupiah(hitung);
	})();


	document.getElementById('hp').addEventListener('keyup', function(){
		jump();
		ang();
	},false)

	document.getElementById('jk').addEventListener('change', function(){
		jump();
		ang();
	},false)

	document.getElementById('sb').addEventListener('change', function(){
		jump();
		ang();
	},false);


  (function berita(){



    domp('berita', div().id('berita-post'));

    db()
    .table('blog')
    .limit(0,10)
    .order('dibuat', 'desc')
    .select('kode, judul, slug')
    .get(function(s){

      var num = 0;

      for(const newPost of s){
        $id('berita-post').child(
          div().css({
            display : "grid",
            gridTemplateColumns: '50px auto'
          })
          .cursor('pointer')
          .click(function(){
            location.href = '/blog/'+newPost.slug
          })
          .child(
            div().margin('10px 0')
            .height('50px').background('green')
            .css('backgroundImage', 'url("/assets/upload/blog/'+newPost.kode+'.jpg")')
            .css('backgroundSize', 'cover')
            .css('backgroundPosition', 'center')
            .css('borderRadius', '4px')
          )
          .child(
            div().padding('10px').text(newPost.judul)
          )
        )
        num++;
        if (num < (s.length)) {
          $id('berita-post').child(
            el('hr')
          )
        }
      }


    })

  })();


window.scrollTo(0, 0);
</script>

@endsection