525 lines
26 KiB
PHP
525 lines
26 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Program')
|
|
|
|
@push('style')
|
|
<style>
|
|
#edit .modal-dialog{
|
|
max-width: 800px!important;
|
|
}
|
|
|
|
.wrap-image {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
width: 200px;
|
|
height: 200px;
|
|
box-sizing: border-box;
|
|
border: solid 1px #E5E5E5;
|
|
border-radius: 8px;
|
|
background-color: #EEE;
|
|
font-size: 46px;
|
|
color: #00000030;
|
|
}
|
|
|
|
.wrap-image img {
|
|
width: 200px;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.wrap-image .btn {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
background-color: #f3f6f9CC;
|
|
border-color: #f3f6f9CC;
|
|
border-radius: 13px;
|
|
padding: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('main')
|
|
{{-- delete --}}
|
|
<div class="modal fade" id="Delete" tabindex="-1" role="dialog"
|
|
aria-labelledby="deleteUserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteUserModalLabel"><i class="fa-solid fa-bolt p-1 bg-danger text-white" style="border-radius: 4px;"></i> Peringatan Hapus Data</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Apakah anda yakin ingin menghapus level ini?</p>
|
|
<form id="FormDelete" method="POST" action="/admin/program-delete/">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="id" value="" id="delete_id">
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn btn-secondary text-dark mr-2" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-danger delete-btn"><i class='bx bx-loader bx-spin d-none'></i> Hapus</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Create --}}
|
|
<div class="modal fade" id="Create" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content modal-md">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editUserModalLabel">Tambah Program</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true" class="font-weight-normal">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="FormCreate" method="POST" action="/admin/program" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('POST')
|
|
<div class="form-group">
|
|
<label for="gambar-thumb">Gambar Utama</label>
|
|
<div class="wrap-image gambar" style="width: 100%!important;">
|
|
<i class="fa-solid fa-magnifying-glass bx-lg icon"></i>
|
|
<img class="d-none" src="" alt="" style="width: 100%">
|
|
<input type="file" class="d-none gambar-thumb" id="gambar-thumb" name="gambar" accept="image/*">
|
|
</div>
|
|
@error('gambar')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-level" class="form-label">Level</label>
|
|
<input type="text" class="form-control @error('level') is-invalid @enderror" id="level" placeholder="masukkan level" name="level" value="{{ old('level') }}">
|
|
@error('level')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="level_number" class="form-label">Level Number</label>
|
|
<select class="form-control @error('level_number') is-invalid @enderror" id="level_number" name="level_number">
|
|
<option value="">-- Pilih Level Number --</option>
|
|
<option value="1" {{ old('level_number') == 1 ? 'selected' : '' }}>1 = Beginner</option>
|
|
<option value="2" {{ old('level_number') == 2 ? 'selected' : '' }}>2 = Basic</option>
|
|
<option value="3" {{ old('level_number') == 3 ? 'selected' : '' }}>3 = Intermediate</option>
|
|
<option value="4" {{ old('level_number') == 4 ? 'selected' : '' }}>4 = Advance</option>
|
|
</select>
|
|
@error('level_number')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-kelas">Kelas</label>
|
|
<input type="text" class="form-control @error('kelas') is-invalid @enderror" id="kelas" placeholder="masukkan kelas" name="kelas" value="{{ old('kelas') }}">
|
|
@error('kelas')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-penjelasan">Penejelasan</label>
|
|
<textarea class="form-control @error('penjelasan') is-invalid @enderror" id="penjelasan" name="penjelasan" rows="6"
|
|
placeholder="masukkan penjelasan tentang program" style="height: 200px"></textarea>
|
|
@error('penjelasan')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-goal">Goal</label>
|
|
<textarea class="form-control @error('goal') is-invalid @enderror" id="goal" name="goal" rows="3"
|
|
placeholder="masukkan goal tentang program" style="height: 200px"></textarea>
|
|
@error('goal')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-capaian">Capaian</label>
|
|
<textarea class="form-control @error('capaian') is-invalid @enderror" id="capaian" name="capaian" rows="3"
|
|
placeholder="masukkan capaian bagi peserta program"></textarea>
|
|
@error('capaian')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary" form="FormCreate">Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit -->
|
|
<div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editUserModalLabel">Edit Program</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true" class="font-weight-normal">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="FormEdit" method="POST" action="" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="form-group">
|
|
<label for="gambaredit-thumb">Gambar Utama</label>
|
|
<div class="wrap-image gambaredit" style="width: 100%!important;">
|
|
<i class="fa-solid fa-magnifying-glass bx-lg icon"></i>
|
|
<img class="d-none" src="" alt="" style="width: 100%">
|
|
<input type="file" class="d-none gambaredit-thumb" id="gambaredit-thumb" name="gambar" accept="image/*">
|
|
</div>
|
|
@error('gambar')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-level" class="form-label">Level</label>
|
|
<input type="text" class="form-control @error('level') is-invalid @enderror" id="edit-level" placeholder="masukkan level" name="level" value="{{ old('level') }}">
|
|
@error('level')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-level_number" class="form-label">Level Number</label>
|
|
<select class="form-control @error('level_number') is-invalid @enderror" id="edit-level_number" name="level_number">
|
|
<option value="">-- Pilih Level Number --</option>
|
|
<option value="1">1 = Beginner</option>
|
|
<option value="2">2 = Basic</option>
|
|
<option value="3">3 = Intermediate</option>
|
|
<option value="4">4 = Advance</option>
|
|
</select>
|
|
@error('level_number')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-kelas">Kelas</label>
|
|
<input type="text" class="form-control @error('kelas') is-invalid @enderror" id="edit-kelas" placeholder="masukkan kelas" name="kelas" value="{{ old('kelas') }}">
|
|
@error('kelas')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-penjelasan">Penejelasan</label>
|
|
<textarea class="form-control @error('penjelasan') is-invalid @enderror" id="edit-penjelasan" name="penjelasan" rows="6"
|
|
placeholder="masukkan penjelasan tentang program" style="height: 200px"></textarea>
|
|
@error('penjelasan')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-goal">Goal</label>
|
|
<textarea class="form-control @error('goal') is-invalid @enderror" id="edit-goal" name="goal" rows="3"
|
|
placeholder="masukkan goal tentang program" style="height: 200px"></textarea>
|
|
@error('goal')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-capaian">Capaian</label>
|
|
<textarea class="form-control @error('capaian') is-invalid @enderror" id="edit-capaian" name="capaian" rows="3"
|
|
placeholder="masukkan capaian bagi peserta program"></textarea>
|
|
@error('capaian')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary" form="FormEdit">Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{-- create user --}}
|
|
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header" style="display: flex; justify-content: space-between; align-items: center">
|
|
<h1>Level</h1>
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Create">Level Baru</button>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card" id="id-table">
|
|
<div class="card-header">
|
|
<h4></h4>
|
|
<div class="card-header-form">
|
|
<form>
|
|
<div class="input-group">
|
|
<input type="search" class="search form-control" placeholder="Search">
|
|
<div class="input-group-btn">
|
|
<span class="btn bg-primary text-white" style="cursor: text"><i class="fas fa-search"></i></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive table-hover">
|
|
<table class="table-striped table-md table" id="pegawaiTable">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" width="5%" class="sort asc" data-sort="no">#</th>
|
|
<th scope="col" width="15%" class="sort" data-sort="nama">Nama Program</th>
|
|
<th scope="col" width="12%" class="sort" data-sort="level_number">Level Number</th>
|
|
<th scope="col" width="20%" class="hidden-sm sort" data-sort="goal">Goal</th>
|
|
<th scope="col" width="23%" class="hidden-sm sort" data-sort="penjelasan">Penjelasan</th>
|
|
<th scope="col" width="20%" class="hidden-sm sort" data-sort="capaian">Capaian</th>
|
|
<th scope="col" width="15%" style="text-align: center">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list">
|
|
@php
|
|
$levelNumMap = [
|
|
1 => '1 - Beginner',
|
|
2 => '2 - Basic',
|
|
3 => '3 - Intermediate',
|
|
4 => '4 - Advance',
|
|
];
|
|
@endphp
|
|
@foreach($data as $item)
|
|
<tr>
|
|
<td valign="middle" scope="row" class="no">{{ $loop->iteration }}</td>
|
|
<td valign="middle" scope="row" class="nama">Level {{ $item->level }} ({{ $item->kelas }})</td>
|
|
<td valign="middle" scope="row" class="level_number">
|
|
@if($item->level_number && isset($levelNumMap[$item->level_number]))
|
|
<span class="badge badge-info">{{ $levelNumMap[$item->level_number] }}</span>
|
|
@else
|
|
<span class="text-muted">-</span>
|
|
@endif
|
|
</td>
|
|
<td valign="middle" class="hidden-sm goal" scope="row">{{ $item->goal }}</td>
|
|
<td valign="middle" class="hidden-sm penjelasan" scope="row">{{ $item->penjelasan ?? '-' }}</td>
|
|
<td valign="middle" class="hidden-sm capaian" scope="row"> {!! $item->capaian ?? '-' !!}</td>
|
|
<td valign="middle" scope="row">
|
|
<div class="action d-flex justify-content-center align-items-center gap-1">
|
|
<button type="button" class="btn edit-data" data-id="{{ $item->id }}" data-toggle="modal"
|
|
data-target="#Edit">
|
|
<i class="fa-regular fa-eye"></i>
|
|
</button>
|
|
<button type="button" class="btn delete-data" data-id="{{ $item->id }}" data-toggle="modal"
|
|
data-target="#Delete">
|
|
<i class="fa-regular fa-trash-can"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<ul class="pagination"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript" src="{{ asset('library/tinymce/tinymce.min.js') }}"></script>
|
|
<script>
|
|
$('.wrap-image.gambar').on('click', function () {
|
|
$('.gambar-thumb')[0].click()
|
|
})
|
|
|
|
$('.gambar-thumb').change(function(){
|
|
readURL(this, '.gambar')
|
|
})
|
|
|
|
$('.wrap-image.gambarplaadd').on('click', function () {
|
|
$('.gambarplaadd-thumb')[0].click()
|
|
})
|
|
|
|
$('.gambarplaadd-thumb').change(function(){
|
|
readURL(this, '.gambarplaadd')
|
|
})
|
|
|
|
// Edit
|
|
$('.wrap-image.gambaredit').on('click', function () {
|
|
$('.gambaredit-thumb')[0].click()
|
|
})
|
|
|
|
$('.gambaredit-thumb').change(function(){
|
|
readURL(this, '.gambaredit')
|
|
})
|
|
|
|
$('.wrap-image.gambarplaedit').on('click', function () {
|
|
$('.gambarplaedit-thumb')[0].click()
|
|
})
|
|
|
|
$('.gambarplaedit-thumb').change(function(){
|
|
readURL(this, '.gambarplaedit')
|
|
})
|
|
|
|
function readURL(input, type) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader()
|
|
|
|
let image = `.wrap-image${type} img`
|
|
let icon = `.wrap-image${type} .icon`
|
|
reader.onload = function (e) {
|
|
$(image).removeClass('d-none').addClass('d-inline').attr('src', e.target.result)
|
|
$(icon).addClass('d-none')
|
|
};
|
|
reader.readAsDataURL(input.files[0])
|
|
}
|
|
}
|
|
|
|
function tiny(){
|
|
tinymce.init({
|
|
selector: 'textarea#edit-capaian',
|
|
height: 300,
|
|
menubar: false,
|
|
plugins: [
|
|
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
'insertdatetime', 'media', 'table', 'wordcount', 'quickbars'
|
|
],
|
|
toolbar: 'undo redo | styles | bold italic underline forecolor | align bullist numlist | table lineheight outdent indent',
|
|
quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote',
|
|
content_style: 'body { font-family:"Inter", sans-serif; font-size:14px; }'
|
|
})
|
|
|
|
tinymce.init({
|
|
selector: 'textarea#capaian',
|
|
height: 300,
|
|
menubar: false,
|
|
plugins: [
|
|
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
'insertdatetime', 'media', 'table', 'wordcount', 'quickbars'
|
|
],
|
|
toolbar: 'undo redo | styles | bold italic underline forecolor | align bullist numlist | table lineheight outdent indent',
|
|
quickbars_selection_toolbar: 'bold italic | blocks | quicklink blockquote',
|
|
content_style: 'body { font-family:"Inter", sans-serif; font-size:14px; }'
|
|
})
|
|
|
|
$('#capaian').val(`
|
|
<ul>
|
|
<li>Salin capaian program disini 1.</li>
|
|
<li>Salin capaian program disini 2</li>
|
|
<li>Salin capaian program disini 3.</li>
|
|
</ul>
|
|
`)
|
|
}
|
|
|
|
tiny();
|
|
|
|
const options = {
|
|
valueNames: ['no', 'nama', 'goal', 'penjelasan'],
|
|
page: 10,
|
|
pagination: true
|
|
};
|
|
|
|
const tableList = new List('id-table', options);
|
|
|
|
function viewData(data){
|
|
const assetBaseUrl = "{{ asset('storage') }}/";
|
|
|
|
$('#edit-level').val(data.level);
|
|
$('#edit-level_number').val(data.level_number || '');
|
|
$('#edit-kelas').val(data.kelas);
|
|
$('#edit-penjelasan').val(data.penjelasan);
|
|
$('#edit-goal').val(data.goal);
|
|
if (tinymce.get('edit-capaian')) {
|
|
tinymce.get('edit-capaian').setContent(data.capaian || '');
|
|
} else {
|
|
$('#edit-capaian').val(data.capaian || '');
|
|
}
|
|
|
|
const gambarUrl = assetBaseUrl + data.gambar;
|
|
const gambarLoadUrl = assetBaseUrl + data.gambar_load;
|
|
|
|
if (gambarUrl){
|
|
$(".wrap-image.gambaredit img").attr('src', gambarUrl).removeClass('d-none').addClass('d-inline');
|
|
$(".wrap-image.gambaredit .icon").addClass('d-none');
|
|
}else{
|
|
$(".wrap-image.gambaredit img").addClass('d-none');
|
|
$(".wrap-image.gambaredit .icon").removeClass('d-none');
|
|
}
|
|
|
|
if (gambarLoadUrl){
|
|
$(".wrap-image.gambarplaedit img").attr('src', gambarLoadUrl).removeClass('d-none').addClass('d-inline');
|
|
$(".wrap-image.gambarplaedit .icon").addClass('d-none');
|
|
}else{
|
|
$(".wrap-image.gambarplaedit img").addClass('d-none');
|
|
$(".wrap-image.gambarplaedit .icon").removeClass('d-none');
|
|
}
|
|
|
|
}
|
|
|
|
$(document).on('click', '.edit-data', function(e) {
|
|
e.preventDefault();
|
|
let id = $(this).data('id');
|
|
|
|
$.ajax({
|
|
url: `/admin/program-data/${id}`,
|
|
method: 'GET',
|
|
success: function (response) {
|
|
viewData(response)
|
|
},
|
|
error: function () {
|
|
alert('Gagal mengambil data.');
|
|
}
|
|
})
|
|
|
|
$("#FormEdit").attr('action', `/admin/program/${id}`);
|
|
});
|
|
|
|
$(document).on('click', '.delete-data', function(e) {
|
|
let id = $(this).data('id');
|
|
$('#delete_id').val(id);
|
|
$("#FormDelete").attr('action',
|
|
`/admin/program/${id}`);
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Page Specific JS File -->
|
|
@endpush
|