@extends('layouts.index')
@push('css')
{{-- bootstrapt tabel plugins --}}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://unpkg.com/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<style>
/* Customize search input styling */
.dataTables_filter input {
width: 600px;
}
/* Customize placeholder text */
.dataTables_filter input::placeholder {
color: #999;
font-style: italic;
}
</style>
@endpush
@section('content')
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-flex align-items-center justify-content-between">
<div class="page-title">
<h4 class="mb-0 font-size-18">Pencarian Pekerjaan</h4>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }}</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="page-content-wrapper">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between w-100 align-items-center mt-5 table-responsive">
@role('admin|admin-opd|monev')
<form action="" class="d-flex w-100 mx-4">
<div class="row w-100">
<div class="col-12">
<div class="mx-1 w-90" style="margin-top:28px">
<h6>OPD :</h6>
<select name="pd" id="opd_id" class="form-control select-opd">
@role('admin')
<option value="">Pilih Perangkat Daerah</option>
@foreach ($opd as $item)
<option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
@endforeach
@endrole
@role('admin-opd|monev')
@if (Auth::user()->opd_id == null)
<option value="">Pilih Perangkat Daerah</option>
@foreach ($opd as $item)
<option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
@endforeach
@else
@foreach ($opd as $item)
<option value="{{ $item->id }}" @if(Auth::user()->opd_id == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
@endforeach
@endif
@endrole
</select>
</div>
<div class="mx-1 w-90" style="margin-top:28px">
<h6>Kegiatan :</h6>
<select name="nama_kegiatan" id="nama_kegiatan" class="form-control select-opd">
<option value="" >Pilih Program Terlebih dahulu</option>
@if ($request->nama_kegiatan)
<option value="{{ $request->nama_kegiatan }}" selected>{{ $request->nama_kegiatan }}</option>
@endif
</select>
</div>
</div>
</div>
<div class="row w-100">
<div class="col-12">
<div class="mx-1 w-90" style="margin-top:28px">
<h6>Program :</h6>
<select name="nama_program" id="nama_program" class="form-control select-opd">
<option value="" >Pilih Perangkat Daerah Terlebih dahulu</option>
@if ($request->nama_program)
<option value="{{ $request->nama_program }}" selected>{{ $request->nama_program }}</option>
@endif
</select>
</div>
<div class="mx-1 w-90" style="margin-top:28px">
<h6>Sub Kegiatan :</h6>
<select name="nama_sub_kegiatan" id="nama_sub_kegiatan" class="form-control select-opd">
<option value="" >Pilih Kegiatan Terlebih Dahulu</option>
@if ($request->nama_sub_kegiatan)
<option value="{{ $request->nama_sub_kegiatan }}" selected>{{ $request->nama_sub_kegiatan }}</option>
@endif
</select>
</div>
<div class="mx-1 text-end" style="margin-top:28px">
<button type="submit" class="btn btn-warning">Filter</button>
<a href="{{url('/pencarian_rincian')}}" class="btn btn-success">Reset</a>
</div>
{{-- <div class="mx-1" style="margin-top:28px">
<a href="{{url('/program_unggulan')}}" class="btn btn-success">Reset</a>
</div> --}}
</div>
</div>
</form>
@endrole
<div>
</div>
</div>
<div class="d-flex flex-column justify-content-center w-100 align-items-around"
style="display: block">
<div class="table-responsive py-4" style="padding: 25px;">
<table id="rincian-table" class="table table-flush" data-height="500" data-show-columns="true">
<thead class="thead-light">
<tr class="table-primary">
<th rowspan="2">Kode Rekening</th>
<th rowspan="2" class="text-nowrap">SKPD Pelaksana</th>
<th rowspan="2" class="text-nowrap">Program</th>
<th rowspan="2" class="text-nowrap">Kegiatan</th>
<th rowspan="2" class="text-nowrap">Sub Kegiatan</th>
<th rowspan="2" class="text-nowrap">Paket Pekerjaan</th>
<th rowspan="2" class="text-center text-nowrap">Pagu</th>
<th rowspan="2" class="text-center text-nowrap">Nilai Kontrak</th>
<th rowspan="2" class="text-center text-nowrap">Sisa Pagu</th>
<th rowspan="2" class="text-center text-nowrap">Realisasi Fisik</th>
<th colspan="3" class="text-center text-nowrap">Realisasi Keuangan</th>
<th rowspan="2" class="text-center text-nowrap">Penyedia</th>
<th rowspan="2" class="text-center text-nowrap">Permasalahan</th>
<th rowspan="2" class="text-center text-nowrap">Tindak Lanjut</th>
<th rowspan="2" class="text-center text-nowrap">Dokumentasi</th>
</tr>
<tr class="table-primary">
{{-- <th class="text-center">
%
</th> --}}
<th class="text-center">
Rp
</th>
<th class="text-center text-nowrap">
Pembayaran (%)
</th>
<th class="text-center text-nowrap">
Penyerapan (%)
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('js')
{{-- bootrapt tabel --}}
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
{{-- <script>
$('img[data-enlargable]').addClass('img-enlargable').click(function(){
var src = $(this).attr('src');
var encodedSrc = encodeURIComponent(src); // Encode the URL
// Create a container to display the enlarged image
var $container = $('<div>').css({
background: 'RGBA(0,0,0,.5)',
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '10000',
top: '0',
left: '0',
cursor: 'zoom-out',
}).appendTo('body');
// Create an image element inside the container
$('<img>').attr('src', src).css({
maxWidth: '100%',
maxHeight: '100%',
margin: 'auto',
display: 'block',
}).appendTo($container);
// Click anywhere on the container to close it
$container.click(function(){
$(this).remove();
});
});
</script> --}}
<script>
$(document).ready(function() {
$('#opd_id').change(function() {
var ini = $(this);
$.ajax({
url:'{{ route('api.get.prokerprogram') }}',
method: 'POST',
dataType: 'json',
data:{opd_id: ini.val(),_token: '{{ csrf_token() }}'},
}).done(function(res){
var el = '';
el += '<option value="">Pilih Program</option>';
$.each(res,function(index,value){
el += "<option value='" + value.program.nama_program + "' data-id='" + value.id + "'>" + value.program.nama_program + "</option>";
});
$('#nama_program').select2({
// width: '100%',
// placeholder: 'Pilih Program',
});
$('#nama_program').html(el);
}).fail(function(err){
console.log('terjadi kegagalan!');
});
});
$('#nama_program').change(function() {
var ini = $(this);
var programId = ini.find('option:selected').data('id');
$.ajax({
url:'{{ route('api.get.prokerkegiatan') }}',
method: 'POST',
dataType: 'json',
data:{proker_program_id: programId,_token: '{{ csrf_token() }}'},
}).done(function(res){
var el = '';
el += '<option value="">Pilih Kegiatan</option>';
$.each(res,function(index,value){
el += '<option value="' + value.kegiatan.nama_kegiatan + '" data-id="' + value.id + '">' + value.kegiatan.nama_kegiatan + '</option>';
});
$('#nama_kegiatan').select2({
// width: '100%',
// placeholder: 'Pilih Kegiatan',
});
$('#nama_kegiatan').html(el);
}).fail(function(err){
console.log('terjadi kegagalan!');
});
});
$('#nama_kegiatan').change(function() {
var ini = $(this);
var subKegiatanId = ini.find('option:selected').data('id');
$.ajax({
url:'{{ route('api.get.prokersubkegiatan') }}',
method: 'POST',
dataType: 'json',
data:{proker_kegiatan_id: subKegiatanId,_token: '{{ csrf_token() }}'},
}).done(function(res){
var el = '';
el += '<option value="">Pilih Sub Kegiatan</option>';
$.each(res,function(index,value){
el += '<option value="' + value.sub_kegiatan.nama_sub_kegiatan + '" data-id="' + value.id + '">' + value.sub_kegiatan.nama_sub_kegiatan + '</option>';
});
$('#nama_sub_kegiatan').select2({
// width: '100%',
// placeholder: 'Pilih Sub Kegiatan',
});
$('#nama_sub_kegiatan').html(el);
}).fail(function(err){
console.log('terjadi kegagalan!');
});
});
});
</script>
<script>
$(document).ready(function() {
var table = $('#rincian-table').DataTable({
processing: true,
serverSide: true,
language: {
searchPlaceholder: 'Ketik disini untuk mencari data...',
search: ''
},
ajax: {
url: "{{ route('getRincian') }}",
data: function(d) {
d.pd = $('#opd_id').val();
d.nama_program = $('#nama_program').val();
d.nama_kegiatan = $('#nama_kegiatan').val();
d.nama_sub_kegiatan = $('#nama_sub_kegiatan').val();
d.pengadaan = "{{ $pengadaan ?? '' }}"
d.metode = "{{ $metode ?? '' }}"
d.status = "{{ $status ?? '' }}"
d.kode_rekening = "{{ $kode_rekening ?? '' }}"
}
},
columns: [
{ data: 'kode_rekening', name: 'kode_rekening' },
{ data: 'opd_nama_perangkat_daerah', name: 'opd_nama_perangkat_daerah' },
{ data: 'nama_program', name: 'nama_program' },
{ data: 'nama_kegiatan', name: 'nama_kegiatan' },
{ data: 'nama_sub_kegiatan', name: 'nama_sub_kegiatan' },
{ data: 'uraian', name: 'uraian' },
{ data: 'pagu',
name: 'pagu',
render: function(data, type, row, meta) {
if (type === 'display') {
return 'Rp' + data;
}
return data;
}
},
{ data: 'nilai_kontrak',
name: 'nilai_kontrak',
render: function(data, type, row, meta) {
if (type === 'display') {
return 'Rp' + data;
}
return data;
}
},
{ data: 'sisa_pagu',
name: 'sisa_pagu',
render: function(data, type, row, meta) {
if (type === 'display') {
return 'Rp' + data;
}
return data;
}
},
{ data: 'realisasi_fisik', name: 'realisasi_fisik' },
{ data: 'realisasi_keuangan',
name: 'realisasi_keuangan',
render: function(data, type, row, meta) {
if (type === 'display') {
return 'Rp' + data;
}
return data;
}
},
{ data: 'realisasi_keuangan_pembayaran', name: 'realisasi_keuangan_pembayaran' },
{ data: 'realisasi_keuangan_penyerapan', name: 'realisasi_keuangan_penyerapan' },
{ data: 'penyedia', name: 'penyedia' },
{ data: 'permasalahan', name: 'permasalahan' },
{ data: 'tindak_lanjut', name: 'tindak_lanjut' },
{ data: 'dokumentasi', name: 'dokumentasi', orderable: false, searchable: false }
],
createdRow: function(row, data, dataIndex) {
// Remove non-numeric characters and convert to float for sorting
var pagu = parseFloat(data.pagu.replace(/[^\d.-]/g, ''));
var realisasi_fisik = parseFloat(data.realisasi_fisik.replace(/[^\d.-]/g, ''));
var realisasi_keuangan = parseFloat(data.realisasi_keuangan.replace(/[^\d.-]/g, ''));
var realisasi_keuangan_pembayaran = parseFloat(data.realisasi_keuangan_pembayaran.replace(/[^\d.-]/g, ''));
var realisasi_keuangan_penyerapan = parseFloat(data.realisasi_keuangan_penyerapan.replace(/[^\d.-]/g, ''));
// Set data-sort attribute with the processed numeric values
$('td', row).eq(5).addClass('text-end text-nowrap').attr('data-sort', pagu);
$('td', row).eq(6).addClass('text-center').attr('data-sort', realisasi_fisik);
$('td', row).eq(7).addClass('text-end text-nowrap').attr('data-sort', realisasi_keuangan);
$('td', row).eq(8).addClass('text-center').attr('data-sort', realisasi_keuangan_pembayaran);
$('td', row).eq(9).addClass('text-center').attr('data-sort', realisasi_keuangan_penyerapan);
},
dom: 'lBfrtip',
buttons: [
'excel', 'csv'
],
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
});
});
</script>
<script type="text/javascript">
$('.select-opd').select2({
// width:'100%',
});
$('.tanggal_awal_akhir').datepicker({
format:'yyyy-mm-dd',
autoclose:true,
});
</script>
@endpush
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell