@extends('template.index')
@section('title', 'Samarinda Dalam Angka SI PeSSUT KOTA SAMARINDA')
@section('datastatistik', 'active')
@section('konten')

<section id="home" class="slider-area bg-shape" style="background-image:url({{asset('asset/img/shape/002.png')}}); height: 100vh ;">
    <div class="slider-active" id="fullscreen">
        <div class="single-slider">
                
                        
                
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-12 col-lg-12 pt-90" >
                        <div class="widget-title" data-animation="bounceInLeft">
                                
                            <h5>Samarinda Dalam Angka</h5>
                        </div>
                        <p class="text-lg-left wow fadeInRight animated" data-wow-delay="0.2s"
                            style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInRight;"
                            data-animation="fadeInRight" data-delay="0.2s" style="margin-bottom: 10px;">
                            {{ $kegiatan->nama_kegiatan ?? 'Tidak ada kegiatan terpilih' }}. <b>Sumber data</b>: {{ $kegiatan->opd->nama_opd ?? 'Tidak ada sumber data terpilih' }}
                        </p>
                        <div class="limiter" data-animation="fadeInDownBig" data-delay="0.7s">
                            <div class="container-table100">
                                <div class="wrap-table100">
                                    <div class="table100 ver1 ">
                                        <div class="main-scroll">
                                            <table data-vertable="ver1">
                                                {{ \App\Helpers\SamarindaDalamAngka::data($dalamAngka, $dataNote) }}
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nav-icon">
                                <div  class="btn btn-default" style="padding: 8px 10px;">Konsep Definisi Table</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="container-fluid">
        <div class="row">
            <footer class="second-footer">
                <div class="copyright-text text-center">
                    <p>&copy; 2017 Dinas Komunikasi dan Informatika Pemerintah Kota Samarinda.</p>
                </div>
            </footer>
        </div>
    </div>
</section>

<div class="full-menu">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-10 d-flex justify-content-center">
                <div class="table-wrapper-scroll-y my-custom-scrollbar">
                    <table class="table table-striped text-center scroll" style="background: #fff;">
                
                        <thead>
                            <tr>
                                <th width="50%" scope="col"><strong>Konsep</strong></th>
                                <th width="50%" scope="col"><strong>Definisi</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($lamangKonsep as $konsep)
                                
                            <tr>
                                <td>{{ $konsep->konsep }}</td>
                                <td>{{ $konsep->definisi_konsep ?? '-' }}</td>
                            </tr>
                            @empty
                            @endforelse
                            
                        </tbody>
                        
                    </table>
                </div>
            </div>                                   
        </div>
    </div>
    <a href="#" class="modal-close" style="background:rgba(0, 0, 0, 0.3) url({{asset('asset/img/ink/cd-icon-close.svg')}}) no-repeat center center; margin:70px;"></a>
</div>
<div class="cd-transition-layer"> 
    <div class="bg-layer" style="background: url({{asset('asset/img/ink/green.png')}}) no-repeat 0 0;"></div>
</div><!-- Ink Transition -->

<script src="{{asset('asset/img/ink/jquery-2.1.4.min.js')}} "></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.toggle').click(function () {               
            $('.hide').toggleClass('active')
        }),

            $('.feature').click(function () {                   
                $('.hide').toggleClass('active')
            })
    })
</script>


<script>
    'use strict'; 
   
   $(document).ready( function() {
    
       
   
       var width = 100,
           perfData = window.performance.timing, 
           EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
           time = ((EstimatedTime/1000)%50) * 100
   
   
       // Persen animasinya
       var PercentageID = $(".percentage"),
               start = 0,
               end = 100,
               durataion = time;
               animateValue(PercentageID, start, end, durataion);
   
       function animateValue(id, start, end, duration) {
   
           var range = end - start,
             current = start,
             increment = end > start? 1 : -1,
             stepTime = Math.abs(Math.floor(duration / range)),
             obj = $(id);
   
   
           var timer = setInterval(function() {
               current += increment;
               $(obj).text(current);
             //obj.innerHTML = current;
               if (current == end) {
                   clearInterval(timer);
               }
           }, stepTime);
       }
       
   
       
       setTimeout(function(){
           $('.preloader').fadeOut();
           
           $('.cd-transition-layer').addClass('closing').delay(1000).queue(function(){
               $(this).removeClass("visible closing opening").dequeue();
           });
           
       }, time);
           
       
   
   
      // FADE OUT EFFECT WHEN CLICK A LINK :V
       $(document).on("click", "a:not(.lightbox)", function () {
           var newUrl = $(this).attr("href");
           if (!newUrl || newUrl[0] === "#") {
               location.hash = newUrl;
               return;
           }
           $("html").fadeOut(function () {
               location = newUrl;
           });
           return false;
       });
       
   
       var paget = $(".page-title .title").text();
   
       $( ".page-title").append("<span></span>");
       $( ".page-title span").append(paget);
   
   
       
       //posts page hover 
       $('.blog-post .blog-link').hover(function(){
           $(this).parent('.content-outter').parent('.blog-post').toggleClass('mousef');
           $(this).parent('.blog-post').toggleClass('mousef');
       });
    
   });  
   
   
   
   
   $(window).load( function() {
    
   
   function smokeeffect () { 
       var modalTrigger = $('.nav-icon'),
           transitionLayer = $('.cd-transition-layer'),
           transitionBackground = transitionLayer.children(),
           modalWindow = $('.full-menu');
   
       var frameProportion = 1.78, //png frame aspect ratio
           frames = 25, //number of png frames
           resize = false;
   
       //set transitionBackground dimentions
       setLayerDimensions();
       $(window).on('resize', function(){
           if( !resize ) {
               resize = true;
               (!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300) : window.requestAnimationFrame(setLayerDimensions);
           }
       });
   
       //open modal window
       modalTrigger.on('click', function(event){   
           event.preventDefault();
           transitionLayer.addClass('visible opening');
           var delay = ( $('.no-cssanimations').length > 0 ) ? 0 : 600;
           setTimeout(function(){
               modalWindow.addClass('visible');
           }, delay);
       });
   
       //close modal window
       modalWindow.on('click', '.modal-close', function(event){
           event.preventDefault();
           transitionLayer.addClass('closing');
           modalWindow.removeClass('visible');
           transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
               transitionLayer.removeClass('closing opening visible');
               transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
           });
       });
   
       function setLayerDimensions() {
           var windowWidth = $(window).width(),
               windowHeight = $(window).height(),
               layerHeight, layerWidth;
   
           if( windowWidth/windowHeight > frameProportion ) {
               layerWidth = windowWidth;
               layerHeight = layerWidth/frameProportion;
           } else {
               layerHeight = windowHeight*1.2;
               layerWidth = layerHeight*frameProportion;
           }
   
           transitionBackground.css({
               'width': layerWidth*frames+'px',
               'height': layerHeight+'px',
           });
   
           resize = false;
       }
   
   }
   smokeeffect()
   
    
       
   /*--------------------------------------------------
    Hero Section Height
   ---------------------------------------------------*/	
        function homeh() {
           var hometext = $('.main')
   
           hometext.css({
               "height": $(window).height() + "px"
           });
       }
       homeh();
       $(window).resize(homeh);
   
   
       $( ".page-menu li:not(.social) a, .portfolio_filter ul li a").append( "<span></span>" );
   
       $('.nav-icon').on("click", function(){
               $(this).toggleClass('modal-close');
       });
    
    
        
   }); // document load end 
     
   </script>

@endsection