@extends('layouts.master')

@section('title', 'Riwayat Penilaian')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">Sinkronisasi Data DPA Sirenbangda</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active"> DPA Sirenbangda</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <a  class="btn btn-xxl btn-primary sinkron" is_prog_keg='1' >
                            <i class="fa fa-refresh"></i> Sinkron Program
                        </a>
                        <a  class="btn btn-xxl btn-info sinkron"  is_prog_keg='2'>
                            <i class="fa fa-refresh"></i> Sinkron Kegiatan
                        </a>
                        <a  class="btn btn-xxl btn-secondary sinkron" is_prog_keg='3' >
                            <i class="fa fa-refresh"></i> Sinkron Subkegiatan
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="container-fluid" id="rowTabel" >
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header text-left">
                        <h5>Data Program</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <table id="tableProg" class="table table-bordered table-hover dataTable dtr-inline" role="grid"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th width="5%"></th>
                                            <th width="10%">No</th>
                                            <th style="display: none;">id</th>
                                            <th>Program</th>
                                            <th>Indikator</th>
                                            <th>Anggaran</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
<script>
    

     $(document).on('click', '.sinkron', function() {
        var url;
        var nama;
        var is_prog_keg = $(this).attr('is_prog_keg');
        if(is_prog_keg==1){
             url = "{{ route('sinkronsiren.sinkronSirenProg') }}"
             nama='Program';
        }else if(is_prog_keg==2){
            url = "{{ route('sinkronsiren.sinkronSirenKeg') }}"
            nama='Kegiatan';
        }else{
            url = "{{ route('sinkronsiren.sinkronSirenKeg') }}"
            nama='Subkegiatan';
        }
            swalWithBootstrapButtons.fire({
                title: 'Sinkronisasi data '+nama+ ' dari sirenbangda?',
                icon: 'info',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                confirmButtonText: 'Sinkron',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.LoadingOverlay("show");
                    $.ajax({
                        url:url,
                        type: 'POST',
                        cache: false,
                        data: {is_prog_keg:is_prog_keg, _token: "{{ csrf_token() }}"},
                        success: function(data) {
                            $.LoadingOverlay("hide");
                            if (data['status']==1) {
                                    getDatas();
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil',
                                        text: data['pesan'],
                                    });
                                }else{
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Oops...',
                                        text: data['pesan'],
                                    });
                                }
                        }
                    });
                }
            })
        });
</script>
<script>
     var tableProg;
     var trDetil;
     $(document).ready(function() {
        getDatas();
    });

       function getDatas() {
            tableProg= $('#tableProg').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                paging:false,
                info:false,
                destroy: true,
                ajax: {
                    url: '{{ route('sinkronsiren.dataDpa') }}',
                    type: 'POST',
                    data: {is_progkeg:'1',_token: "{{ csrf_token() }}"},
                },
                columns: [
                    {
                className: 'details-control',
                orderable: false,
                data: null,
                defaultContent: ''
                , searchable: false},
                    {
                        data: null,
                        name: 'no',
                        searchable: false,
                        orderable: false,
                    },
                    {
                        data: 'id',
                        name: 'id',
                        visible: false,
                    },
                    {
                        data: 'nama_prog_or_keg',
                        name: 'nama_prog_or_keg',
                    },
                    {
                        data: 'dataindikator',
                        name: 'dataindikator',
                    },
                    {
                        data: 'anggaran',
                        name: 'anggaran',
                    },
                    {
                        data: 'action',
                        name: 'action',
                    },
                ],
                order: [
                    [1, 'asc']
                ],
                oLanguage: {
                    sProcessing: "Memuat Data.."
                },
                fnCreatedRow: function(row, data, index) {
                    $('td', row).eq(1).html(index + 1);
                },
            });
        }

        $(document).on('click', 'td.details-control', function(){ 
        trDetil=$(this).closest('tr');
        var periode_id = $('#periode_id').val();
        var tr = $(this).closest('tr');
        var row = tableProg.row(tr);
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
            tr.removeClass( 'details' );
        } else {
        $.ajax({
            url: '{{ route('sinkronsiren.kegiatan') }}',
          type:'POST',
          dataType: 'html',
          cache: false,
          data:{id_parent:row.data().id,_token: "{{ csrf_token() }}"},
		    success: function(html){
                row.child(html).show();
                tr.addClass('shown');
                tr.addClass( 'details' );

                    }
		   });  
        }
    });

   
</script>

@endsection