@extends('layouts.minimal')

@section('title', 'Pohon Kinerja')





@section('content')
<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col-sm-1">
            <div class="card">
                <div class="card-header" >
                    <div class="row">
                        <div class="col-md-2 text-right">
                            <a   class="btn btn-lg btn-danger" onclick="clickExportButton()">
                                <i class="fa fa-file-pdf"></i> Export
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body" id="rowPohon">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="chart-container">
                                <h1>{{Auth::user()->opd->nama_skpd}}</h1>
                            </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection

@section('css')
@include('layouts.shared.pohonKinerja_css')
<style>
    .sticky-top {
      position: -webkit-sticky;
      position: sticky;
      top: 48px;
      z-index: 1020;
    }
    .oc-export-btn {
       display: none;
    }
    .sasaran_add {
       display: none;
    }
    .sasaran_detil {
       display: none;
    }
    .cross_kirim {
       display: none;
    }

  </style>
@endsection

@section('js')

<script>
function clickExportButton() {
    $(".oc-export-btn").click();
}
</script>



<script>
 var chart;
    $(document).on('click', '#reload', function(){
        reload(1,'-');
    });
    $(document).ready(function() {
        reload(0,'-');
    });

        function reload(is_reload,id_sasaran){
            $('#rowPohon').LoadingOverlay("show",{size:10})
            $.ajax({
                url:"{{ route('cascading.data') }}",
                type:'get',
                dataType: 'json',
                cache: false,
                    success: function(data){
                        chart= $('#chart-container').orgchart({
                        'data' : data[0],
                        'nodeContent': 'title',
                        'pan':true,
                        'zoom': false,
                         'visibleLevel': 50,
                        'toggleSiblingsResp': true,
                        'exportButton': true,
                        'exportFileextension': 'pdf',
                        'exportFilename': '{{"Cascading"." ".Auth::user()->opd->nama_skpd}}'
                         });
                         $('#rowPohon').LoadingOverlay("hide",{size:10})
                         $(window).resize(function() {
                        var width = $(window).width();
                        if(width > 576) {
                            chart.init({'verticalLevel': 4});
                        } else {
                            chart.init({'verticalLevel': 2});
                        }
                     });
                    },
                    
            });
        }
</script>


@endsection