@extends('layout.app_706')
@section('title','Dashboard')

@section('content')
    <!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    @yield('title')
                </h5>
                    @if( in_array ( trim(Auth::user()->userid) ,['10901552','10601421']) )
                        <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
                        <a href="{{ route('dashboard') }}" class="mr-3 btn btn-light-primary font-weight-bolder btn-sm">Dashboard Layanan IT</a>
                        <a href="{{ route('dashboard_cater') }}" class="btn bg-primary font-weight-bolder btn-sm">Dashboard Cater</a>
                    @endif
                <!--end::Page Title-->
            </div>
            <!--end::Info-->
        </div>
    </div>
    <!--end::Subheader-->

    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container ">
        <div class="row"> 
        
            <div class="col-md-12" style="margin-bottom: 10px;">
                <select id="tipe" class="form-control select2">
                    <!-- <option value="">- Pilih Grafik -</option> -->
                    @foreach ( $optDashboards as $key => $value )
                        <option value="{{ $value }}" {{ $value==$defaultUrl?'selected':'' }}>{{ $key }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-12 dashboardFrame" style="min-height:600px">
                <iframe
                    id="dashboardFrame"
                    src="{{ $defaultUrl }}"
                    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>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
@endsection

@section('css')
    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="{{url('assets_7.0.6/plugins/custom/fullcalendar/fullcalendar.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css" />
    <!--end::Page Vendors Styles-->
@endsection

@section('js')
    <!--begin::Page Vendors(used by this page)-->
    <script src="{{url('assets_7.0.6/plugins/custom/fullcalendar/fullcalendar.bundle.js?v=7.0.6')}}"></script>
    <!--end::Page Vendors-->
    
    <script src="{{url('assets_7.0.6/plugins/custom/iframeResizer/javascripts/iframeResizer.js?v=7.0.6_')}}"></script>
    <script>
    window.onbeforeunload = function() {
        KTApp.block('.container', {});
    };
    $(document).ready(function () {
        // KTApp.block('.container', {});
        $('.content').addClass('bg-white');
        function iframeLoad ( urlFrame ) {
            // $( "#dashboardFrame" ).remove();
            $( ".dashboardFrame" ).append( '<iframe '+
                // 'id="dashboardFrame"'+
                '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>' );
            // iFrameResize({checkOrigin:false}, $( "#dashboardFrame" ) );
        }

        // $("#tipe").select2()
        // .on('change', function (e) {
        //     // var dashboard = $("#tipe").val();
        //     // $(this).blur();
        //     iframeLoad($(this).val());
        // });

        $('#tipe')
        .select2()
        .on('change', function () {
            $(this).trigger('blur');
            KTApp.block('.container');
            iframeLoad(this.value);
        });
        // .on('select2:select', function (e) {
        //     // KTApp.block('.container', {});
        //     var data = e.params.data;
        //     iframeLoad(data.id);
        //     // console.log(data);
        // });
    });

    </script>
@endsection