708 lines
21 KiB
PHP
708 lines
21 KiB
PHP
@extends('layout.front')
|
|
@section('container')
|
|
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
|
|
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'>
|
|
<style>
|
|
#owl-demo .item{
|
|
margin: 3px;
|
|
}
|
|
#owl-demo .item img{
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.owl-next{
|
|
position: absolute;
|
|
top: calc(50% - 25px);
|
|
right: 10px;
|
|
height: 50px;
|
|
opacity: 1 !important;
|
|
padding: 10px !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
background: rgba(255,255,255,0.8) !important;
|
|
border-radius: 20px !important;
|
|
color: #333 !important;
|
|
}
|
|
|
|
.owl-prev{
|
|
position: absolute;
|
|
top: calc(50% - 25px);
|
|
left: 10px;
|
|
height: 50px;
|
|
padding: 10px !important;
|
|
opacity: 1 !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
background: rgba(255,255,255,0.8) !important;
|
|
color: #333 !important;
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
/*****/
|
|
#owl-onpage .item{
|
|
margin: 3px;
|
|
}
|
|
#owl-onpage .item a{
|
|
opacity: 1;
|
|
}
|
|
#owl-onpage .item img{
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.owl-carousel .owl-item img {
|
|
height:auto;
|
|
width:100%;
|
|
display: block;
|
|
}
|
|
.owl-carousel .item {
|
|
margin:0px;
|
|
}
|
|
/*owl custom controls*/
|
|
.owl-theme .owl-controls .owl-buttons div {
|
|
padding: 0;
|
|
}
|
|
.owl-theme .owl-buttons i{
|
|
margin-top: 2px;
|
|
}
|
|
.owl-theme .owl-controls .owl-buttons div {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
filter: Alpha(Opacity=50);
|
|
color: #000000;
|
|
opacity: 0.5;
|
|
}
|
|
.owl-theme .owl-controls .owl-buttons div:hover {
|
|
filter: Alpha(Opacity=80);
|
|
opacity: 0.8;
|
|
}
|
|
/*To move navigation buttons outside use these settings:*/
|
|
.owl-theme .owl-controls .owl-buttons div {
|
|
position: absolute;
|
|
}
|
|
|
|
/* crop and center img */
|
|
#owl-onpage .item {
|
|
width: 100%; /* or whatever is required */
|
|
text-align: center; /* ensures the image is always in the h-middle */
|
|
overflow: hidden; /* hide the cropped portion */
|
|
padding: 0 10px;
|
|
max-height: 120px;
|
|
height: 120px;
|
|
}
|
|
#owl-onpage .item img {
|
|
position: relative; /* allows repositioning */
|
|
left: 100%; /* move the whole width of the image to the right */
|
|
margin-left: -100%; /* magic! */
|
|
}
|
|
|
|
|
|
/*****************************************************************
|
|
* LIGHTBOX
|
|
*****************************************************************/
|
|
|
|
#owl-modal .owl-item {
|
|
opacity: 1;
|
|
}
|
|
#owl-modal .item img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#GListModalGallery .close {
|
|
font-size: 40px;
|
|
/*line-height: 30px;*/
|
|
color: #fff;
|
|
filter: alpha(opacity=50);
|
|
opacity: 0.5;
|
|
width: 30px;
|
|
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
|
|
position: absolute;
|
|
right: 34px;
|
|
top: -5px;
|
|
/*margin-top: 0;*/
|
|
z-index: 9999;
|
|
}
|
|
#GListModalGallery .close:hover {
|
|
filter: alpha(opacity=80);
|
|
opacity: 0.8;
|
|
}
|
|
/*owl MODAL custom controls*/
|
|
#owl-modal .owl-controls .owl-buttons div {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
filter: Alpha(Opacity=50);
|
|
color: #FFFFFF;
|
|
opacity: 0.5;
|
|
}
|
|
#owl-modal .owl-controls .owl-buttons div {
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.modal-content {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.modal-dialog {
|
|
width: 96%;
|
|
margin: 40px auto 0;
|
|
}
|
|
}
|
|
|
|
|
|
#owl-onpage .owl-item{
|
|
height: 350px !important;
|
|
}
|
|
|
|
#owl-onpage .owl-item .item{
|
|
position: relative;
|
|
min-height: 350px;
|
|
}
|
|
|
|
#owl-onpage .owl-item .item a{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#owl-onpage .owl-item .item img{
|
|
display: block;
|
|
width: auto;
|
|
}
|
|
|
|
#owl-modal .owl-wrapper .owl-item{
|
|
margin-left: 0 !important;
|
|
display: flex !important;
|
|
height: 100vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#owl-onpage .item img{
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
#owl-onpage .item a{
|
|
background-image: var(--fot);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
|
|
.breadcrumb{
|
|
background: white;
|
|
padding: 5px 20px;
|
|
padding-top: 9px;
|
|
box-shadow: 0 0 5px #ddd;
|
|
}
|
|
|
|
|
|
#map{
|
|
position: relative;
|
|
}
|
|
|
|
#map::after{
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
background: transparent;
|
|
}
|
|
|
|
.galeri-container .owl-height{
|
|
min-height: 250px;
|
|
}
|
|
|
|
.galeri{
|
|
min-height: 250px;
|
|
}
|
|
|
|
.grider{
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.nt-grid{
|
|
display: grid;
|
|
grid-template-columns: auto 30px;
|
|
}
|
|
|
|
.nt-grid div:nth-child(2){
|
|
text-align: center;
|
|
}
|
|
|
|
.grider div{
|
|
margin-bottom: 1.5px;
|
|
}
|
|
|
|
#nama-produk{
|
|
font-size: 20pt;
|
|
font-weight: 560;
|
|
}
|
|
|
|
h4{
|
|
font-size: 14pt;
|
|
font-weight: 560;
|
|
}
|
|
|
|
@media screen and (max-width: 600px){
|
|
|
|
#nama-produk{
|
|
font-size: 16pt;
|
|
font-weight: 560;
|
|
}
|
|
|
|
h4{
|
|
font-size: 12pt;
|
|
font-weight: 560;
|
|
}
|
|
|
|
}
|
|
|
|
#load-data{
|
|
display: none;
|
|
}
|
|
|
|
.images-cicle{
|
|
width: 150px;
|
|
height: 150px;
|
|
display: inline-block;
|
|
background-color: #ddd;
|
|
border-radius: 50%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.modal{
|
|
background: #333;
|
|
}
|
|
|
|
.modal-content{
|
|
background: transparent;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
@php
|
|
|
|
function binaryToString($binary = null)
|
|
{
|
|
$binaries = explode('2', $binary);
|
|
|
|
$string = null;
|
|
foreach ($binaries as $binary) {
|
|
$string .= pack('H*', dechex(bindec($binary)));
|
|
}
|
|
|
|
return $string;
|
|
}
|
|
|
|
use Illuminate\Support\Facades\DB;
|
|
|
|
$url = $_SERVER['REQUEST_URI'];
|
|
|
|
$url = explode('/', $url);
|
|
|
|
$url = binaryToString($url[count($url) - 1]);
|
|
|
|
$properti = DB::select("SELECT * FROM properti WHERE idprop = $url");
|
|
|
|
if(count($properti) > 0) {
|
|
$properti = $properti[0];
|
|
}
|
|
|
|
$foto = DB::select("SELECT * FROM foto WHERE idprop = '$properti->idprop' AND kategori = 'foto' ");
|
|
|
|
|
|
$sales = DB::select("SELECT * FROM sales WHERE id = '$properti->idsales'");
|
|
|
|
$sales = json_encode($sales, true);
|
|
|
|
function rupiah($angka){
|
|
|
|
$hasil_rupiah = "Rp " . number_format($angka,0,',','.');
|
|
return $hasil_rupiah;
|
|
|
|
}
|
|
|
|
$foto = array_filter($foto, function($v, $k) {
|
|
if(file_exists('../../sistem-api/androapi/upload/foto/'.$v->id.'.jpg')){
|
|
return $v;
|
|
}
|
|
|
|
}, ARRAY_FILTER_USE_BOTH);
|
|
|
|
$foto = json_encode($foto, true);
|
|
|
|
|
|
$path = explode("/", $_SERVER['REQUEST_URI']);
|
|
unset($path[0]);
|
|
$link = "/";
|
|
@endphp
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item" aria-current="page"> <a href="/"> <i class="fas fa-home"></i> </a> </li>
|
|
@foreach($path as $key => $paths)
|
|
@if($key == count($path))
|
|
<li class="breadcrumb-item active" aria-current="page"> {{$properti->judulproperti}} </li>
|
|
@else
|
|
@php
|
|
$link .= $paths.'/';
|
|
@endphp
|
|
<li class="breadcrumb-item" aria-current="page"><a style="text-decoration:none;" href="{{url($link)}}"> {{str_replace("-", " ", $paths)}} </a> </li>
|
|
@endif
|
|
@endforeach
|
|
</ol>
|
|
</nav>
|
|
<div id="loader" class="mt-5 mb-5 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 class="container mt-5 mb-5" id="load-data">
|
|
|
|
|
|
|
|
<div class="container GListFullWidth">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<!-- owl-carousel -->
|
|
<div id="owl-onpage">
|
|
|
|
</div>
|
|
<!-- /owl-carousel -->
|
|
|
|
<!-- modalGallery -->
|
|
<div class="modal" id="GListModalGallery" tabindex="-1" role="dialog" aria-labelledby="GListModalGalleryLabel" aria-hidden="true">
|
|
<button type="button" class="close" style="position: fixed; top: 50px; right: 50px;" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div id="owl-modal">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /modalGallery -->
|
|
|
|
</div><!-- /col-md-12 -->
|
|
</div><!-- /row -->
|
|
</div><!-- /container -->
|
|
|
|
<div id="foto-kpr">
|
|
|
|
</div>
|
|
<div class="row mt-5">
|
|
<div class="col-12 mb-3">
|
|
<h3 id="nama-produk">{{$properti->judulproperti}}</h3>
|
|
<h4>Harga : <span id="harga">{{rupiah($properti->harga)}}</span></h4>
|
|
</div>
|
|
<div class="col-lg-8" id="detail-kpr">
|
|
<div class="grider" width="100%">
|
|
<div class="nt-grid">
|
|
<div width="200px">Kode Listing</div><div width="30px">:</div>
|
|
</div>
|
|
<div class="info-grid" id="listing-kode">{{$properti->idprop}}</div>
|
|
<div class="nt-grid">
|
|
<div width="200px">Alamat</div><div width="30px">:</div>
|
|
</div>
|
|
<div class="info-grid" id="alamat">{{$properti->alamat}}</div>
|
|
<div class="nt-grid">
|
|
<div>Lokasi</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="lokasi">{{$properti->province}}, {{$properti->city_name}}, {{$properti->subdistrict_name}}</div>
|
|
<div class="nt-grid">
|
|
<div>Tipe</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="tipe">{{$properti->kategori}}</div>
|
|
<div class="nt-grid">
|
|
<div>Transaksi</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="transaksi">{{$properti->transaksi}}</div>
|
|
<div class="nt-grid">
|
|
<div>Sertifikasi</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="sertifikasi">{{$properti->sertifikat}}</div>
|
|
<div class="nt-grid">
|
|
<div>LT/LB</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="lblt">{{$properti->lt}}m<sup>2</sup> / {{$properti->lb}}m<sup>2</sup></div>
|
|
<div class="nt-grid">
|
|
<div>Dimensi</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="dimensi">{{$properti->ltanah}}</div>
|
|
<div class="nt-grid">
|
|
<div>KT/KM</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="ktkm">{{$properti->jum_kt}}/{{$properti->jum_km}}</div>
|
|
<div class="nt-grid">
|
|
<div>Orientasi</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="orientasi">{{$properti->hadap}}</div>
|
|
<div class="nt-grid">
|
|
<div>Listrik/Air</div><div>:</div>
|
|
</div>
|
|
@php
|
|
$air = '-';
|
|
if($properti->air != ''){
|
|
$air = $properti->air;
|
|
}
|
|
@endphp
|
|
<div class="info-grid" id="listrik">{{$properti->listrik}} / {{$air}} </div>
|
|
<div class="nt-grid">
|
|
<div>Dilihat</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="dilihat">0</div>
|
|
<div class="nt-grid">
|
|
<div>Deskripsi</div><div>:</div>
|
|
</div>
|
|
<div class="info-grid" id="deskripsi">{!!htmlspecialchars_decode($properti->deskripsi)!!}</div>
|
|
<script>
|
|
var dd = document.getElementById('deskripsi').innerHTML;
|
|
console.log(dd);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-12 col-sm-6 col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<div id="foto" src="" class="images-cicle mt-3 mb-2"></div>
|
|
<h5 id="sales"></h5>
|
|
<div class="d-flex justify-content-center mt-3 mb-3" id="qr-n">
|
|
|
|
</div>
|
|
<a id="link-sales" href=""></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-lg-12">
|
|
<div id='map' style='width: 100%; height: 300px;'></div>
|
|
<a id="gmaps" target="blank" href="https://maps.google.com/?q={{str_replace(",", "",$properti->lat)}},{{str_replace(",", "",$properti->lng)}}" class="btn btn-success w-100">Open Maps <i class="fas fa-map"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
@section('js')
|
|
<script type="text/javascript" src="/assets/pwa/qrcode/qrcode.js"></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var er = '{!!$foto!!}';
|
|
|
|
er = JSON.parse(er);
|
|
|
|
var leng = er.length;
|
|
|
|
er = er.map(function(c, i){
|
|
return `
|
|
<div class="item"><a data-toggle="modal" data-id="${i}" data-target="#GListModalGallery" style="--fot : url('https://masuksini.com/sistem-api/androapi/upload/foto/${c.id}.jpg?v=${Date.now()}')" ><img src="https://masuksini.com/sistem-api/androapi/upload/foto/${c.id}.jpg?v=${Date.now()}" class="img-responsive" /></a></div>
|
|
`;
|
|
}).join('')
|
|
|
|
document.getElementById('owl-onpage').innerHTML = er;
|
|
|
|
var owl = $("#owl-onpage");
|
|
owl.owlCarousel({
|
|
itemsCustom : [
|
|
[0, 1],
|
|
[979, 3]
|
|
],
|
|
navigation : true,
|
|
pagination: false,
|
|
itemsScaleUp: true,
|
|
addClassActive: true,
|
|
autoPlay: true,
|
|
autoPlayTimeout: 0,
|
|
autoPlaySpeed: 4000,
|
|
navigationText: [
|
|
"<i class='fa fa-chevron-left'></i>",
|
|
"<i class='fa fa-chevron-right'></i>"
|
|
],
|
|
});
|
|
|
|
var owlModal = $('#owl-modal');
|
|
var s = 0;
|
|
|
|
|
|
$('#owl-onpage .item a').on('click', function() {
|
|
var theSrc = $(this).attr('data-id');
|
|
console.log(theSrc);
|
|
//owlModal.data('owlCarousel').destroy();
|
|
//var item = $('<div>', {'class' : 'item'}).appendTo(owlModal);
|
|
// $('<img>', {'src' : theSrc}).appendTo(item);
|
|
if(s == 0){
|
|
owlModal.empty();
|
|
$('#owl-onpage .item a').each(function (i,e) {
|
|
var otherSrc = $(e).find('img').attr('src');
|
|
var item = $('<div>', {'class' : 'item'}).appendTo(owlModal);
|
|
$('<img>', {'src' : otherSrc}).appendTo(item);
|
|
});
|
|
// Add others images
|
|
|
|
// Call the carousel after clicked on 'a'
|
|
owlModal.owlCarousel({
|
|
singleItem:true,
|
|
navigation : true,
|
|
pagination: false,
|
|
autoplay:true,
|
|
autoplayTimeout:4000,
|
|
autoplayHoverPause:true,
|
|
navigationText: [
|
|
"<i class='fa fa-chevron-left'></i>",
|
|
"<i class='fa fa-chevron-right'></i>"
|
|
],
|
|
});
|
|
|
|
|
|
owlModal.trigger('owl.goTo', theSrc);
|
|
|
|
jQuery(document.documentElement).keyup(function (event) {
|
|
|
|
var owl = jQuery(".owl-carousel");
|
|
|
|
// handle cursor keys
|
|
if (event.keyCode == 37) {
|
|
// go left
|
|
owlModal.trigger('owl.prev');
|
|
} else if (event.keyCode == 39) {
|
|
// go right
|
|
owlModal.trigger('owl.next');
|
|
}
|
|
|
|
});
|
|
|
|
document.onkeydown = function (evt) {
|
|
if (evt.keyCode == 27) {
|
|
// Escape key pressed
|
|
owlModal.modal('toggle').modal('toggle');
|
|
}
|
|
};
|
|
|
|
$('#GListModalGallery').unbind().on('hidden.bs.modal', function () {
|
|
console.log('okokoko')
|
|
// owlModal.data('owlCarousel').destroy();
|
|
});
|
|
s = 1;
|
|
}else{
|
|
owlModal.trigger('owl.goTo', theSrc);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const capitalize = (str, lower = false) =>
|
|
(lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
|
|
;
|
|
|
|
function __id(a){
|
|
return document.getElementById(a);
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
|
|
var a = JSON.parse('{!!$sales!!}');
|
|
|
|
if(a.length > 0){
|
|
a = a[0];
|
|
__id('sales').innerText = a.nama;
|
|
__id('foto').style.backgroundImage = 'url("/assets/upload/agen/'+a.id+'.jpg")';
|
|
|
|
console.log('a')
|
|
|
|
document.getElementById('qr-n').innerHTML = `<div id="qrcode"></div>`;
|
|
|
|
var qrcode = new QRCode("qrcode", {
|
|
text: location.host+'/properti/idsales~'+a.id,
|
|
width: 128,
|
|
height: 128,
|
|
colorDark : "#000000",
|
|
colorLight : "#ffffff",
|
|
correctLevel : QRCode.CorrectLevel.H
|
|
});
|
|
|
|
__id('link-sales').innerText = 'http://'+location.host+'/properti/idsales~'+a.id;
|
|
__id('link-sales').href = 'http://'+location.host+'/properti/idsales~'+a.id;
|
|
|
|
__id('gmaps').href = 'https://maps.google.com/?q='+'{{$properti->lat}}'.replace(',', '')+','+'{{$properti->lng}}'.replace(',', '');
|
|
|
|
document.getElementById('loader').style.display = 'none';
|
|
document.getElementById('load-data').style.display = 'block';
|
|
}else{
|
|
document.getElementById('loader').style.display = 'none';
|
|
document.getElementById('load-data').style.display = 'block';
|
|
}
|
|
|
|
|
|
mapboxgl.accessToken = 'pk.eyJ1Ijoid2Vic2h1bnRlcm5ldCIsImEiOiJja3RlM3BlaWkybHlnMnltdXoyMzN0bzVjIn0.GichTcrFpB2D-KnzpgsZbA';
|
|
const map = new mapboxgl.Map({
|
|
container: 'map', // container ID
|
|
style: 'mapbox://styles/mapbox/streets-v11', // style URL
|
|
center: ['{{$properti->lng}}'.replace(',', ''), '{{$properti->lat}}'.replace(',', '')], // starting position [lng, lat]
|
|
zoom: 14 // starting zoom
|
|
});
|
|
|
|
const marker = new mapboxgl.Marker()
|
|
.setLngLat(['{{$properti->lng}}'.replace(',', ''), '{{$properti->lat}}'.replace(',', '')])
|
|
.addTo(map);
|
|
|
|
})
|
|
window.scrollTo(0, 0);
|
|
</script>
|
|
@endsection
|