@extends('layouts.master')

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





@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-5  text-left" >
                            <h4>Indikator Kinerja Utama Daerah</h4>
                        </div>
                        <div class="col-md-7  text-right">
                            <a id="addIku" class="btn btn-success">
                                <i class="fa fa-plus-circle"></i> IKU Daerah
                            </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>


<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;
    }

  </style>
@endsection

@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('iku.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");
                        $('.cross_kirim').on('click', function () {
                            sasaranKirim($(this).attr('id'),$(this).attr('is_iku'),'0');
                        });
                        $('.iku_add').on('click', function () {
                            sasaranAdd($(this).attr('id'),$(this).attr('is_iku'),'0');
                        });
                        $('.iku_edit').on('click', function () {
                            sasaranEdit($(this).attr('id'),'0','0');
                        });
                        $('.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>


<script>
    function sasaranDetil(id_sasaran,is_iku){
        $.ajax({
                url:"{{ route('pohonkinerja.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');
                },
            });
    }
    $(document).ready(function() {
        $(".modal").on("hidden.bs.modal", function() {
            $("#formSasaranDetil").remove();
        });
    });
</script>

<script>
     function sasaranAdd(id_parent,is_iku,is_induk){
        $.ajax({
                url:"{{ route('iku.sasaranAdd') }}",
                type:'POST',
                dataType: 'html',
                cache: false,
                data:{id_parent:id_parent,_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');
                },
            });
    }
    $(document).ready(function() {
        $(".modal").on("hidden.bs.modal", function() {
            $("#formSasaranDetil").remove();
        });
    });
</script>

<script>
    function sasaranEdit(id,is_iku,is_induk){
       $.ajax({
               url:"{{ route('iku.sasaranEdit') }}",
               type:'POST',
               dataType: 'html',
               cache: false,
               data:{id:id,_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');
               },
           });
   }
   $(document).ready(function() {
       $(".modal").on("hidden.bs.modal", function() {
           $("#formSasaranDetil").remove();
       });
   });
</script>


<script>
    $(document).on('click', '#addIku', function(){
       $.ajax({
               url:"{{ route('iku.sasaranAdd') }}",
               type:'POST',
               dataType: 'html',
               cache: false,
               data:{id_parent:'-',_token:"{{ csrf_token() }}"},
                   success: function(data){
                   var modal = $('#modalx');
                   modal.modal({backdrop: 'static', keyboard: false}) 
                   modal.find('.modal-title').text('Tambah IKU Daerah') 
                   modal.find('.modal-body').html(data);
                   modal.modal('show');
               },
           });
   });
</script>

<script>
    function sasaranKirim(id_sasaran,is_iku,is_cc){
       $.ajax({
               url:"{{ route('pohonkinerja.sasaranKirim') }}",
               type:'POST',
               dataType: 'html',
               cache: false,
               data:{id_sasaran:id_sasaran,is_iku:is_iku,is_cc:is_cc,_token: "{{ csrf_token() }}"},
                   success: function(data){
                   var modal = $('#modalx');
                   modal.modal({backdrop: 'static', keyboard: false}) 
                   modal.find('.modal-title').text('Kirim Cross Cutting') 
                   modal.find('.modal-body').html(data);
                   modal.modal('show');
               },
           });
   }
   $(document).ready(function() {
       $(".modal").on("hidden.bs.modal", function() {
           $("#formSasaranDetil").remove();
       });
   });
</script>



<script>
    $(document).on('click', '.hapus_iku', function(){ 
       var id= $(this).attr('id');
       var index = $(this).attr('index');
        swalWithBootstrapButtons.fire({
            title: 'Anda yakin menghapus data IKU?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonText: 'Batal',
            confirmButtonText: 'Hapus',
            reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url:"{{ route('pohonkinerja.ikuDelete') }}",
                        type:'POST',
                        dataType: 'json',
                        cache: false,
                        data:{id:id,_token: "{{ csrf_token() }}"},
                            success: function(data){
                                if (data['status']==1) {
                                    reload(0,'-');
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil',
                                        text: 'Data Berhasil Dihapus..'
                                    });
                                }else{
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Oops...',
                                        text: 'Terjadi kesalahan'
                                    });
                                }
                                
                            },
                    });
                }
        }) 
     });
</script>
<script>
     $(document).on('click', '.hapusInd', function(){ 
       var id_indikator= $(this).attr('id_indikator');
       var index = $(this).attr('index');
        swalWithBootstrapButtons.fire({
            title: 'Anda yakin menghapus data?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonText: 'Batal',
            confirmButtonText: 'Hapus',
            reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url:"{{ route('pohonkinerja.indikatorDelete') }}",
                        type:'POST',
                        dataType: 'json',
                        cache: false,
                        data:{id_indikator:id_indikator,index:index,_token: "{{ csrf_token() }}"},
                            success: function(data){
                                if (data['status']==1) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil',
                                        text: 'Data Berhasil Dihapus..'
                                    });
                                    $('#elementInd'+index).remove();
                                }else{
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Oops...',
                                        text: 'Terjadi kesalahan'
                                    });
                                }
                                
                            },
                    });
                }
        }) 
     });
</script>

@endsection