Anons79 Mini Shell
Anons79 Mini Shell
| Directory : /home/aplikasiposinfo/www/e-tepian.aplikasipos.info/resources/views/resume/ |
| Current File : /home/aplikasiposinfo/www/e-tepian.aplikasipos.info/resources/views/resume/strategis.blade.php |
@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')}}">
<style>
.sheet-bar-wrapper {
overflow-x: auto;
white-space: nowrap;
border-top: 1px solid #ddd;
background-color: #f8f9fa;
padding: 10px 0;
}
.sheet-bar {
display: inline-flex;
padding: 10px;
}
.sheet-tab {
display: inline-block;
margin-right: 5px;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
}
.sheet-tab.active {
background-color: #1b82ec;
color: #fff;
}
.sheet-content {
padding: 20px;
border: 1px solid #ddd;
margin-top: 10px;
background-color: #fff;
}
.sheet-bar-wrapper::-webkit-scrollbar {
height: 8px;
}
.sheet-bar-wrapper::-webkit-scrollbar-thumb {
background-color: #bbb;
border-radius: 4px;
}
.sheet-bar-wrapper::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
</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">Proyek Strategis</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="mx-1 w-50" style="margin-top:28px">
<select name="pd" 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')
@foreach ($opd as $item)
<option value="{{ $item->id }}" @if(Auth::user()->opd_id == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
@endforeach
@endrole
</select>
</div>
<div class="mx-1">
<label for="tanggal_awal">Tanggal Awal</label>
<input id="tanggal_awal" type="text" value="{{ ($request->tanggal_awal) ? $request->tanggal_awal : '' }}" name="tanggal_awal" class="form-control tanggal_awal_akhir" autocomplete="off">
</div>
<div class="mx-1">
<label for="tanggal_akhir">Tanggal Akhir</label>
<input id="tanggal_akhir" type="text" value="{{ ($request->tanggal_akhir) ? $request->tanggal_akhir : '' }}" name="tanggal_akhir" class="form-control tanggal_awal_akhir" autocomplete="off">
</div>
<div class="mx-1" style="margin-top:28px">
<button class="btn btn-warning">Filter</button>
</div>
<div class="mx-1" style="margin-top:28px">
<a href="{{url('/pekerjaan_mendesak')}}" class="btn btn-success">Reset</a>
</div>
<div class="mx-1" style="margin-top:28px">
<button class="btn btn-success" type="submit" name="printpdf" value="print">
<img height="20" src="{{ asset('pdf-download-icon.png') }}" alt="download-to-pdf">
</button>
</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;">
<div class="container-fluid mt-4">
<!-- Scrollable Sheet Bar -->
<div class="sheet-bar-wrapper">
<div class="sheet-bar">
@foreach ($strategis as $index => $sheet)
<div
class="sheet-tab @if($index === 0) active @endif"
data-sheet-id="sheet-{{ $index }}">
{{ $sheet['uraian'] }}
</div>
@endforeach
</div>
</div>
<!-- Sheet Content -->
@forelse ($strategis as $index => $sheet)
<div
id="sheet-{{ $index }}"
class="sheet-content @if($index !== 0) d-none @endif">
<table id="table" class="table table-flush" data-height="500" data-show-columns="true">
<thead class="thead-light">
<tr class="biasa">
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">No</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Data</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Nama Proyek</td>
<td>{{ $sheet->uraian }}</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Lokasi</td>
<td>{{ $sheet->RealisasiRincianKegiatan->lokasi ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Sumber Pendanaan</td>
<td>{{ $sheet->SumberDana->sumber_dana }}</td>
</tr>
<tr>
<td class="text-center">4</td>
<td>Pagu Anggaran</td>
<td>Rp{{ number_format($sheet->pagu , 0, ',', '.') }}</td>
</tr>
<tr>
<td class="text-center">5</td>
<td>Nilai Kontrak</td>
<td>Rp{{ number_format($sheet->RealisasiRincianKegiatan->nilai_kontrak , 0, ',', '.') }}</td>
</tr>
<tr>
<td class="text-center">6</td>
<td>Perangkat Daerah</td>
<td>{{ $sheet->Opd->nama_perangkat_daerah }}</td>
</tr>
<tr>
<td class="text-center">7</td>
<td>Metode Pelaksanaan</td>
<td>{{ $sheet->RealisasiRincianKegiatan->metode }}</td>
</tr>
<tr>
<td class="text-center">8</td>
<td>Penyedia</td>
<td>{{ $sheet->RealisasiRincianKegiatan->nama_penyedia ?? '-' }}</td>
</tr>
{{-- <tr>
<td class="text-center">9</td>
<td>Konsultan Pengawas</td>
<td>PT. Ciriajasa Cipta Mandiri KSO PT. Ciriajasa E.C</td>
</tr> --}}
<tr>
<td class="text-center">10</td>
<td>Masa Kontrak</td>
<td>{{ $sheet->RealisasiRincianKegiatan->masa_kontrak ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">11</td>
<td>Realisasi Keuangan</td>
<td>
Rp{{ $sheet->RealisasiRincianKegiatan ? number_format($sheet->RealisasiRincianKegiatan->realisasiKeuangan->sum(function ($item) {
return is_numeric($item->realisasi) ? $item->realisasi : 0;
}), 0, ',', '.') : "-" }}
</td>
</tr>
<tr>
<td class="text-center">12</td>
<td>Realisasi Fisik</td>
<td>
{{
$sheet->RealisasiRincianKegiatan
? number_format(
(
($sheet->volume != 0)
? ($sheet->RealisasiRincianKegiatan->realisasiFisik->sum('realisasi') / $sheet->volume) * 100
: 0
),2 , ',', '.'
)
: "0"
}}%
</td>
</tr>
<tr>
<td class="text-center">13</td>
<td>Masa Pemeliharaan</td>
<td>{{ $sheet->RealisasiRincianKegiatan->masa_pemeliharaan ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">14</td>
<td>Dokumentasi</td>
<td>
@forelse($sheet->RealisasiRincianKegiatan->dokumen as $doc)
<div class="file-section">
<div class="file-info">
<p>
{{ $doc->keterangan == 0 ? 'Dokumen Kontrak, SK dan lain-lain' : ($doc->keterangan == 1 ? 'Dokumentasi Kegiatan' : 'Dokumen Berita Acara Serah Terima') }}
</p>
<p>{{ $doc->file_name }}</p>
</div>
<div class="file-preview">
<img data-enlargable src="{{ asset("assets/document/$doc->file_name") }}" alt="{{ $doc->file_name }}" height="100">
</div>
<div class="file-actions">
<br>
<a href="{{route('doc.download',$doc->id)}}" class="btn btn-success"><i class="fa fa-download"></i></a>
{{-- <a link="{{route('doc.delete',$doc->id)}}" class="btn btn-danger btn-del"><i class="fa fa-times"></i></a> --}}
</div>
</div>
<hr>
@empty
<div>
Belum ada dokumentasi
</div>
@endforelse
</td>
</tr>
</tbody>
</table>
</div>
@empty
<center>
Belum ada Data
</center>
@endforelse
</div>
</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>
$('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 type="text/javascript">
$('.select-opd').select2({
width:'100%',
});
$('.tanggal_awal_akhir').datepicker({
format:'yyyy-mm-dd',
autoclose:true,
});
/*$(document).ready(function() {
navbarHeight = parseInt($('#page-topbar').css('height'));
$('#table').bootstrapTable({
// stickyHeader: true,
showFullscreen: true,
stickyHeaderOffsetY: navbarHeight,
theadClasses: "table-light",
}).on('load-fullscreen.bs.table', function () {
// Add icon when entering fullscreen mode
$('.fullscreen.btn').html('<i class="fas fa-compress"></i> Fullscreen');
}).on('unload-fullscreen.bs.table', function () {
// Remove icon when exiting fullscreen mode
$('.fullscreen.btn').html('<i class="fas fa-expand"></i> Fullscreen');
});
});*/
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.sheet-tab');
const sheets = document.querySelectorAll('.sheet-content');
tabs.forEach(tab => {
tab.addEventListener('click', function () {
// Remove active class from all tabs
tabs.forEach(t => t.classList.remove('active'));
// Hide all sheets
sheets.forEach(sheet => sheet.classList.add('d-none'));
// Add active class to the clicked tab
this.classList.add('active');
// Show the corresponding sheet
const sheetId = this.getAttribute('data-sheet-id');
document.getElementById(sheetId).classList.remove('d-none');
});
});
});
</script>
@endpush