@extends('layouts.app')
@section('content')
<style>
i{
color: white !important;
}
</style>
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0">Sub Kegiatan</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Data Master</a></li>
<li class="breadcrumb-item active">Sub Kegiatan</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{{-- <h4 class="card-title">Pengguna</h4> --}}
{{-- <p class="card-title-desc">DataTables has most features enabled by
default, so all you need to do to use it with your own tables is to call
the construction function: <code>$().DataTable();</code>.
</p> --}}
<div class="row justify-content-end mb-2">
<div class="col-md-12 d-flex justify-content-start">
{!! Form::select('induk_opd_id',$induk_opd_arr,"",['class'=>'form-control daerah', 'form'=>'storeForm','required'=>'required','placeholder'=>'Pilih SKPD', 'id'=>'induk_opd']) !!}
</div>
</div>
<table id="table" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr style="background:#f5f2c4">
<th colspan="7"><div class="d-flex justify-content-between align-items-center">Sasaran: Sasaran 1</div></th>
</tr>
</thead>
<tbody>
</tbody>
{{-- @if(count($visi) > 0)
@foreach ($visi as $v)
<thead class="text-center">
<tr style="background:#d6dad5">
<th colspan="2">{{$v->tahun_awal}} - {{$v->tahun_akhir}}</th>
</tr>
<tr style="background:#f5c4c4">
<th><span style="text-align: left">Visi: {{$v->nama}}</span></th>
<th><button class="btn col-md-3 btn-mod" id="{{$v->id}}" style="background: #42d408"><i class="mdi mdi-plus"></i></button></th>
</tr>
</thead>
<tbody>
<tr align="center">
<th>Misi:</th>
<td></td>
</tr>
@foreach ($v->Misi as $M)
<tr>
<td>{{$M->nama}}</td>
<td><form action="{{ route($route.'.destroy',$M->id) }}" method="POST" class="delete-data">
@csrf
<div class="btn-group" role="group" aria-label="Action Button">
<input type="hidden" name="_method" value="DELETE">
<a type="button" class="btn btn-sm btn-warning m-2 btn-mod2" id="{{$M->id}}"><i class="fa fa-edit"></i> Edit</a>
<button type="submit" class="m-2 btn btn-sm btn-danger text-white delete-data"><i class="fa fa-trash"></i>Hapus</button>
</div>
</form>
</td>
</tr>
@endforeach
</tbody>
@endforeach
@else
<thead class="text-center">
<tr>
<th colspan="2">Tidak ada data</th>
</tr>
</thead>
<tbody>
</tbody>
@endif --}}
</table>
<div class="pagination" id="paginationControls"></div>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div>
<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="title">Tambah Misi</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="submit" value="Submit" class="btn" style="background: #f7ac42" id="submitButton" form="storeForm">
</div>
{!! Form::close() !!}
</div>
</div>
</div>
@push('scripts')
<!-- Required datatable js -->
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<!-- Buttons examples -->
<script src="{{asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('assets/libs/jszip/jszip.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/pdfmake.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/vfs_fonts.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>
<!-- Responsive examples -->
<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>
@endpush
@push('scripts')
<script>
$('#table').on('click', '.btn-mod-edit-target-pemerintah', function(){
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/pagu_anggaran')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let textNama = `<input type="text" name="pagu_indikatif" id="nama" class="form-control" value="${res.data.pagu_indikatif}">`
let template = `
{!! Form::open(['route'=>$route.'.store','method'=>'POST', 'id'=>'EditForm']) !!}
<input name="_method" type="hidden" value="PUT">
<input name="indikator_pemerintah_id" type="hidden" value="${res.data.id}">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Pagu Anggaran</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textNama)
$('#EditForm').attr('action', `/pagu_anggaran/${id}`)
$('#submitButton').attr('form', 'EditForm')
$('#title').html('Ubah data Target Kerja');
$('.modal').modal('toggle');
alert(res.data.nama);
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
$('#table').on('click', '.btn-mod2', function(){
let induk_opd_id = $(this).attr('induk_opd_id');
let induk_jabatan_id = $(this).attr('induk_jabatan_id');
let jenis_jabatan_id = $(this).attr('jenis_jabatan_id');
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/misi_rpjmd')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let textNama = `<input type="text" name="nama" id="nama" class="form-control" value="${res.data.nama}">`
let template = `
{!! Form::open(['route'=>$route.'.store','method'=>'POST', 'id'=>'EditForm']) !!}
<input name="_method" type="hidden" value="PUT">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Visi</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textNama)
$('#EditForm').attr('action', `/misi_rpjmd/${id}`)
$('#submitButton').attr('form', 'EditForm')
$('#title').html('Ubah data jabatan');
$('.modal').modal('toggle');
alert(res.data.nama);
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
const rowsPerPage = 1; // Show only one program per page
let currentPage = 1;
let allDataPrograms = []; // Store all data_programs here
function displayTable(dataPrograms, page) {
let td2 = `<table id="table" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;"><tbody>`;
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
const paginatedDataPrograms = dataPrograms.slice(start, end);
let sasaranSubKegiatan = {!! json_encode($sasaranSubKegiatan) !!}
let indikatorSubKegiatan = {!! json_encode($indikatorSubKegiatan) !!}
paginatedDataPrograms.forEach(elementProgram => {
td2 += `
<tr>
<td colspan="7">
<div class="d-flex flex-column" style="padding-left: 28px">
<span>Kode: ${elementProgram.full_kode}</span>
<span>Program: ${elementProgram.nama_program}</span>
</div>
</td>
</tr>`;
elementProgram.data_kegiatan.forEach(elementKegiatan => {
td2 += `
<tr style="background: #b6f961">
<td colspan="7">
<div class="d-flex flex-column" style="padding-left: 56px;">
<span>Kode: ${elementKegiatan.full_kode}</span>
<span>Kegiatan: ${elementKegiatan.nama_kegiatan}</span>
</div>
</td>
</tr>`;
elementKegiatan.data_sub_kegiatan.forEach(elementSubKegiatan => {
td2 += `
<tr style="background: #f9af61">
<td colspan="7">
<div class="d-flex flex-column" style="padding-left: 72px;">
<span>Kode: ${elementSubKegiatan.full_kode}</span>
<span>Kegiatan: ${elementSubKegiatan.nama_sub_kegiatan}</span>
</div>
<a type="button" class="btn btn-sm m-2 btn-tambah-sasaran" style="background: #f7ac42" id="${elementSubKegiatan.id}"><i class="fa fa-plus"></i> Tambah Indikator</a></td>
</td>
</tr>
<tr>
<td>
<ul>
`;
sasaranSubKegiatan.forEach(sasaranSubKeg => {
console.log(elementSubKegiatan.id, sasaranSubKeg.sub_kegiatan_id);
if(sasaranSubKeg.sub_kegiatan_id == elementSubKegiatan.id){
let id = sasaranSubKeg.id;
let destroyUrl = `{{ route('sasaran_sub_kegiatan.destroy', ['sasaran_sub_kegiatan' => ':id']) }}`
destroyUrl = destroyUrl.replace(':id', id);
td2 += `
<li><span>Sasaran: ${sasaranSubKeg.nama} </span>
<form action="${destroyUrl}" method="POST" class="delete-data">
@csrf
<div class="btn-group" role="group" aria-label="Action Button">
<input type="hidden" name="_method" value="DELETE">
<a type="button" class="btn btn-sm btn-warning m-2 btn-edit-sasaran" id="${sasaranSubKeg.id}"><i class="fa fa-edit"></i> Edit</a>
<a type="button" class="btn btn-sm m-2 btn-tambah-indikator" style="background: #f7ac42" id="${sasaranSubKeg.id}"><i class="fa fa-plus"></i> Tambah</a>
<button type="submit" class="m-2 btn btn-sm btn-danger text-white delete-data"><i class="fa fa-trash"></i>Hapus</button>
</div>
</form>
</li>`
}
})
td2 += `
</ul>
</td>
<td>
`;
sasaranSubKegiatan.forEach(sasaranSubKeg => {
if(sasaranSubKeg.sub_kegiatan_id == elementSubKegiatan.id){
td2 += `<span>${sasaranSubKeg.nama}</span>
<ul>
`
indikatorSubKegiatan.forEach(indikatorSubKeg => {
if(indikatorSubKeg.sasaran_sub_kegiatan_id == sasaranSubKeg.id){
let id = indikatorSubKeg.id;
let destroyUrl = `{{ route('indikator_sub_kegiatan.destroy', ['indikator_sub_kegiatan' => ':id']) }}`
destroyUrl = destroyUrl.replace(':id', id);
td2 += `<li><span>${indikatorSubKeg.nama}</span>
<form action="${destroyUrl}" method="POST" class="delete-data">
@csrf
<div class="btn-group" role="group" aria-label="Action Button">
<input type="hidden" name="_method" value="DELETE">
<a type="button" class="btn btn-sm btn-warning m-2 btn-edit-indikator" id="${id}"><i class="fa fa-edit"></i> Edit</a>
<button type="submit" class="m-2 btn btn-sm btn-danger text-white delete-data"><i class="fa fa-trash"></i>Hapus</button>
</div>
</form>
</li>`
}
})
td2 += `</ul>`;
}
})
td2 += `</td></tr>`;
})
});
});
td2 += `</tbody></table>`;
$('#table').html(td2);
$('#table2').html(td2);
}
function displayPaginationControls(totalRows, rowsPerPage) {
const totalPages = Math.ceil(totalRows / rowsPerPage);
const $paginationControls = $('#paginationControls');
$paginationControls.empty();
for (let i = 1; i <= totalPages; i++) {
const $button = $('<button>').text(i).addClass('page-button');
if (i === currentPage) {
$button.addClass('active');
}
$button.on('click', function () {
currentPage = i;
displayTable(allDataPrograms, currentPage); // Use allDataPrograms to maintain pagination
updateActiveButton();
});
$paginationControls.append($button);
}
}
function updateActiveButton() {
$('.page-button').removeClass('active');
$('.page-button').eq(currentPage - 1).addClass('active');
}
function merujuk_rpjmd(data) {
// Extract all data_programs from the response data
allDataPrograms = data.flatMap(elementData => elementData.data_program);
// Display the table and pagination controls
displayTable(allDataPrograms, currentPage);
displayPaginationControls(allDataPrograms.length, rowsPerPage);
}
$('#induk_opd').change(function () {
let id = $(this).val();
if (id != "") {
$.ajax({
type: "get",
url: `https://dalev.bapperida.samarindakota.go.id/monev/public/api/program-apbd-by-opd/${id}/2024/yqAHitGWZnS53QzS`,
success: (res) => {
if (res.status == "success" && res.data) {
merujuk_rpjmd(res.data);
}
}
});
}
});
$('#table').on('click', '.btn-tambah-sasaran', function(){
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/sub_kegiatan')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let textUraian = `<input type="text" name="nama" id="nama" class="form-control">`
let template = `
{!! Form::open(['route'=>'sasaran_sub_kegiatan.store','method'=>'POST', 'id'=>'storeForm']) !!}
<input type="hidden" name="sub_kegiatan_id" value="${id}">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Nama</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textUraian)
$('#submitButton').attr('form', 'storeForm')
$('#title').html('Tambah Data Sasaran');
$('.modal').modal('toggle');
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
$('#table').on('click', '.btn-edit-sasaran', function(){
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/sasaran_sub_kegiatan')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let textNama = `<input type="text" name="nama" id="nama" class="form-control" value="${res.data.nama}">`
let template = `
{!! Form::open(['route'=>'sasaran_sub_kegiatan.store','method'=>'POST', 'id'=>'EditForm']) !!}
<input name="_method" type="hidden" value="PUT">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Uraian</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textNama)
$('#EditForm').attr('action', `/sasaran_sub_kegiatan/${id}`)
$('#submitButton').attr('form', 'EditForm')
$('#title').html('Ubah data Sasaran Program');
$('.modal').modal('toggle');
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
$('#table').on('click', '.btn-tambah-indikator', function(){
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/sasaran_sub_kegiatan')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let textNama = `<input type="text" name="nama" id="nama" class="form-control">`
let template = `
{!! Form::open(['route'=>'indikator_sub_kegiatan.store','method'=>'POST', 'id'=>'storeForm']) !!}
<input type="hidden" name="sasaran_sub_kegiatan_id" value="${id}">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Nama</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textNama)
$('#title').html('Tambah Data Indikator');
$('#submitButton').attr('form', 'storeForm')
$('.modal').modal('toggle');
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
$('#table').on('click', '.btn-edit-indikator', function(){
let id = $(this).attr('id');
$.ajax({
type: "get",
url: `{{url('apiEdit/indikator_sub_kegiatan')}}/${id}`,
success: (res) => {
if(res.status == "success"){
let textNama = `<input type="text" name="nama" id="nama" class="form-control" value="${res.data.nama}">`
let template = `
{!! Form::open(['route'=>'indikator_sub_kegiatan.store','method'=>'POST', 'id'=>'EditForm']) !!}
<input name="_method" type="hidden" value="PUT">
<div class="mb-3 row">
<label for="name" class="col-md-2 col-form-label">Uraian</label>
</div>
<div class="mb-3 row">
<div class="col-md-10" id="nama_field">
</div>
</div>
`
$('.modal-body').html(template)
$('#nama_field').html(textNama)
$('#EditForm').attr('action', `/indikator_sub_kegiatan/${id}`)
$('#submitButton').attr('form', 'EditForm')
$('#title').html('Ubah data Indikator Sub Kegiatan');
$('.modal').modal('toggle');
} else {
alert("Ada Yang salah saat pengambilan data");
}
}
})
})
</script>
@endpush
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell