@extends('kpi._layout')

@push('stylesheet')
@endpush

@section('header')  
@if(!empty($permit))
		
	<div class="pt-2 _bg-transparent page-header page-header-light">
		<div class="pt-1 pb-2 page-header-content header-elements-md-inline">
			<div class="pt-1 x_page-title d-flex align-items-center w-100">
				<span class="d-none _btn btn-icon btn-sm bg-transparent">
					<img src="{{ asset('global_assets/images/icon/home_96.png') }}" width="42" height="42" class="mr-2" alt="">
				</span>
				<h4 class="_mb-0 font-weight-semibold text-dark">
					<span >{{ $Title }}</span>
					<span class="d-block text-muted font-size-sm align-middle">{!! $subTitle !!}</span>
				</h4>
				@if($mb)
				<div class="ml-auto btn-group">
					<button type="button" class="btn bg-indigo-400 iframeLoad_default"><i class="{{ $default['icon_class'] }} mr-2"></i>{{ $default['text'] }}</button>
					<button type="button" class="btn bg-indigo-400 dropdown-toggle" data-toggle="dropdown"></button>
					<div class="dropdown-menu dropdown-menu-right">						
						@foreach ( $mb_data as $mb_key => $mb_value )						
							<div class="dropdown-header">{{ $mb_key }}</div>
							@foreach ( $mb_value as $key => $value )
								<a href="javascript:void(0)" data-href="{{ $value['url'] }}" class="iframeLoad dropdown-item">
									<i class="{{ $value['icon_class'] }} mr-2"></i> {{ $value['text'] }}</a>
							@endforeach
						@endforeach					
					</div>
				</div>
				@endif
			</div>
		</div>
	</div>
@endif
@endsection

@section('content') 
@if(empty($permit))
	<div class="flex-fill">
		<div class="text-center mb-3">
			<h1 class="error-title offline-title">Error Page</h1>
			<h5>Maaf, Halaman yang anda cari tidak ditemukan.. </h5>
		</div>
	</div>
@else	
	@if($mb)
	<div class="d-flex flex-column-fluid">
        <div class="container ">
        <div class="row">     
            <div class="col-md-12 dashboardFrame" style="min-height:600px">
                <iframe
                    id="dashboardFrame"
                    src="{{ $default['url'] }}"
                    frameborder="0"
                    width="100%"
                    height="600"
                    allowtransparency
                    onload="iFrameResize({checkOrigin:false}, this); KTApp.unblock('.container');"
                    style="x_min-height: 600px; overflow: hidden; x_height: 1331px;"
                    scrolling="no"
                ></iframe>
            </div>
        </div>
        </div>
    </div> 	
	@else
	<div class="flex-fill">
		<div class="text-center mb-3">
			<h1 class="error-title offline-title">Under Maintenance</h1>
			<h5 class="font-weight-semibold text-danger">
				Masih dalam Pengembangan
			</h5>
		</div>
	</div>
	@endif
@endif
@endsection

@push('scripts')
	<!-- Theme JS files -->
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/extensions/fixed_header.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/extensions/col_reorder.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/extensions/responsive.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/forms/selects/select2.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/extensions/rowlink.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>  
    	<script src="{{url('assets_7.0.6/plugins/custom/iframeResizer/javascripts/iframeResizer.js?v=7.0.6_')}}"></script>
	<!-- /theme JS files -->

	<script type="text/javascript">
	$(document).ready(function() {	
        function iframeLoad ( urlFrame ) {
            $( ".dashboardFrame" ).append( '<iframe '+
                'src="'+urlFrame+'"'+
                'frameborder="0"'+
                'style="display:none"'+
                'width="100%"'+
                'x_height="600"'+
                'allowtransparency '+
                'onload="'+
                    'iFrameResize({checkOrigin:false}, this); '+
                    '$(\'iframe:first\').fadeOut(\'slow\').remove(); '+
                    '$(this).fadeIn(\'slow\').show(); '+
                    'KTApp.unblock(\'.container\'); '+
                '" '+
                'style="x_min-height: 600px; overflow: hidden; x_height: 1331px;"'+
                'scrolling="no"'+
                '></iframe>' );
        }
		{{-- 
		$('#tipe')
        .select2()
        .on('change', function () {
            $(this).trigger('blur');
            iframeLoad(this.value);
        });
		--}}
		
		$('.iframeLoad')
        .on('click', function (e) {
            // e.preventDefault();
            $(this).trigger('blur');
            iframeLoad($(this).data('href'));            
            // e.stopPropagation();
            // return false;
			// var textLoad = $(this).text();
			$('.iframeLoad_default').html($(this).html()); 
        });

		$('.content').addClass('bg-white mt-1 pt-0');
	});
	</script>
@endpush