@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">&times;</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