@extends('layouts.master')

@section('title', 'Capaian Indikator')





@section('content')
<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header" style="padding-bottom:0px;" >
                    <div class="row">
                        <div class="col-md-10  text-left" >
                            <h4>Capaian Indikator Sasaran</h4>
                        </div>
                        <div class="col-md-2"  >
                            <div class="info-box" style="min-height: 40px; ">
                                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-home"></i></span>
                                <div class="info-box-content">
                                <span class="info-box-text">Capaian IKU OPD</span>
                                <span class="info-box-number" id="capaianikuopd">memuat data...</span>
                                </div>
                            </div>
                        </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 detil(id_sasaran,id_indikator){
        $.ajax({
                url:"{{ route('cis.detil') }}",
                type:'POST',
                dataType: 'html',
                cache: false,
                data:{id_sasaran:id_sasaran,id_indikator:id_indikator,_token: "{{ csrf_token() }}"},
                    success: function(data){
                    var modal = $('#modalx');
                    modal.modal({backdrop: 'static', keyboard: false}) 
                    modal.find('.modal-title').text('Capaian Indikator') 
                    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('cis.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 () {
                            detil($(this).attr('id'),$(this).attr('id_ind'));
                        });
                       },
               });

               $.ajax({
                   url:"{{ route('cis.capaianikuopd') }}",
                   type:'get',
                   dataType: 'json',
                   cache: false,
                       success: function(data){
                        $('#capaianikuopd').text(data.capaian)
                       },
               });

           }
   </script>


@endsection