@extends('layouts.master')

@section('title', 'Cascading')





@section('content')
<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header" >
                    <div class="row">
                        <div class="col-md-6  text-left" >
                            <h4>Cascading</h4>
                        </div>
                        <div class="col-md-6  text-right" >
                        <a href="{{route('cascading.cetakCascading')}}" target="_blank"   class="btn btn-danger">
                            <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" style="overflow-y: hidden;"></div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>


<div class="modal fade" id="modalx">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        </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;
    }
    #tabelCascading {
      font-size: 13px;
    }
    
  </style>

@endsection
<script>
    function sasaranDetil(id_sasaran,is_iku){
        $.ajax({
                url:"{{ route('cascading.sasaranDetil') }}",
                type:'POST',
                dataType: 'html',
                cache: false,
                data:{id_sasaran:id_sasaran,is_iku:is_iku,_token: "{{ csrf_token() }}"},
                    success: function(data){
                    var modal = $('#modalx');
                    modal.modal({backdrop: 'static', keyboard: false}) 
                    modal.find('.modal-title').text('Detail Sasaran') 
                    modal.find('.modal-body').html(data);
                    modal.modal('show');
                },
            });
    }
</script>

@section('js')


<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.dataTabel') }}",
                   type:'get',
                   dataType: 'html',
                   cache: false,
                       success: function(data){
                        if (is_reload==0) {
                            $('#chart-container').html(data)
                        }else{
                            $('#chart-container').html(data)
                            document.getElementById(id_sasaran).scrollIntoView({behavior: 'smooth'});
                            $('#'+id_sasaran).addClass('focused');
                        }
                        $('#rowPohon').LoadingOverlay("hide");
                        $('.sasaran_detil').on('click', function () {
                            sasaranDetil($(this).attr('id'),$(this).attr('is_iku'));
                        });
                       },
                       error: function(xhr, status, error) {
                        $('#rowPohon').LoadingOverlay("hide");
                        notifikasi({
                                icon: 'error',
                                type: 'error',
                                title: 'Terjadi Kesalahan /  Data Belum Diinputkan'
                            });
                        }
               });
           }
   </script>


@endsection