260 lines
9.4 KiB
PHP
260 lines
9.4 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Perangkat')
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
|
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.soft-card {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
|
}
|
|
|
|
.table-hlines {
|
|
--line: #e9edf4;
|
|
}
|
|
|
|
.table-hlines> :not(caption)>*>* {
|
|
border-top: 0;
|
|
border-right: 0 !important;
|
|
border-left: 0 !important;
|
|
border-bottom: 1px solid var(--line);
|
|
background: transparent;
|
|
}
|
|
|
|
.table-hlines thead th {
|
|
border-bottom: 2px solid var(--line) !important;
|
|
}
|
|
|
|
.table-hlines.table-hover tbody tr:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
table.dataTable.hover>tbody>tr:hover>*,
|
|
table.dataTable.display>tbody>tr:hover>* {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.table-sticky thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: #fff;
|
|
z-index: 1
|
|
}
|
|
|
|
div.dataTables_filter,
|
|
div.dataTables_length {
|
|
display: none
|
|
}
|
|
|
|
.btn-icon-sm {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
padding: 0
|
|
}
|
|
|
|
.btn-edit {
|
|
background: #0f766e;
|
|
color: #fff
|
|
}
|
|
|
|
.btn-delete {
|
|
background: #dc2626;
|
|
color: #fff
|
|
}
|
|
|
|
.btn-edit:hover {
|
|
opacity: .9
|
|
}
|
|
|
|
.btn-delete:hover {
|
|
opacity: .9
|
|
}
|
|
|
|
.avatar-sq {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #f3f4f6
|
|
}
|
|
|
|
.avatar-sq img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block
|
|
}
|
|
|
|
.btn-tambah {
|
|
background: #0f766e;
|
|
color: #fff
|
|
}
|
|
|
|
.btn-tambah:hover {
|
|
background: #0f766e;
|
|
color: #fff;
|
|
opacity: .9;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="card soft-card">
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
|
|
<div>
|
|
<h4 class="mb-0">Kelola Perangakat Desa</h4>
|
|
<small style="color: #0f766e">Anggota aktif</small>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="fw-semibold">Anggota</span>
|
|
<a href="{{ route('admin.perangkat.add') }}"
|
|
class="btn btn-sm btn-tambah d-inline-flex align-items-center gap-1">
|
|
<i class="ti ti-plus"></i> Tambah
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="perangkatTable" class="table align-middle w-100 table-sticky table-hlines table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th class="d-none d-md-table-cell">Profil</th>
|
|
<th>Nama</th>
|
|
<th class="d-none d-md-table-cell">Alamat</th>
|
|
<th class="d-none d-md-table-cell">TTL</th>
|
|
<th class="d-none d-md-table-cell">Status</th>
|
|
<th class="d-none d-md-table-cell">Jabatan</th>
|
|
<th>Aksi</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($data as $r)
|
|
@php
|
|
$r = $r->only([
|
|
'name',
|
|
'id',
|
|
'status',
|
|
'role',
|
|
'jabatan',
|
|
'address',
|
|
'tempat_lahir',
|
|
'tanggal_lahir',
|
|
'email',
|
|
'employee_id',
|
|
'url_photo',
|
|
]);
|
|
@endphp
|
|
<tr>
|
|
{{-- PROFIL --}}
|
|
<td class="text-nowrap d-none d-md-table-cell">
|
|
@if (!empty($r['url_photo']))
|
|
<div class="avatar-sq">
|
|
<img src="{{ asset('storage/' . $r['url_photo']) }}" alt="Foto {{ $r['name'] }}">
|
|
</div>
|
|
@else
|
|
<div class="avatar-sq">
|
|
<i class="ti ti-user text-muted fs-5"></i>
|
|
</div>
|
|
@endif
|
|
</td>
|
|
<td class="text-nowrap">
|
|
<div>
|
|
<h6 class="mb-0">{{ $r['name'] }}</h6>
|
|
<small class="text-muted">{{ $r['email'] }}</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-nowrap d-none d-md-table-cell">{{ $r['address'] }}</td>
|
|
<td class="text-nowrap d-none d-md-table-cell">
|
|
<div>
|
|
<h6 class="mb-0">{{ $r['tempat_lahir'] }}</h6>
|
|
<small class="text-muted">{{ $r['tanggal_lahir'] }}</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-nowrap d-none d-md-table-cell">
|
|
<div>
|
|
<h6 class="mb-0">{{ $r['status'] }}</h6>
|
|
<small class="text-muted">{{ $r['employee_id'] }}</small>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="text-nowrap d-none d-md-table-cell">{{ $r['jabatan'] }}</td>
|
|
<td class="text-nowrap">
|
|
<a href="{{ route('admin.perangkat.edit', ['id' => $r['id']]) }}"
|
|
class="btn btn-icon-sm btn-edit" title="Edit"><i class="ti ti-pencil"></i></a>
|
|
<button class="btn btn-icon-sm btn-delete" title="Hapus"><i
|
|
class="ti ti-trash"></i></button>
|
|
</td>
|
|
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
|
|
|
|
<script>
|
|
$(function() {
|
|
var hasData = $('#perangkatTable tbody tr').length > 0 && !$('#perangkatTable tbody tr td[colspan]')
|
|
.length;
|
|
if (typeof $.fn.DataTable !== 'undefined' && hasData) {
|
|
$('#perangkatTable').DataTable({
|
|
autoWidth: false,
|
|
responsive: {
|
|
details: false
|
|
},
|
|
paging: true,
|
|
pageLength: 8,
|
|
lengthChange: false,
|
|
info: true,
|
|
ordering: true,
|
|
searching: false,
|
|
order: [
|
|
[0, 'asc']
|
|
],
|
|
language: {
|
|
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
|
|
infoFiltered: "(difilter dari _MAX_ total data)",
|
|
paginate: {
|
|
first: "Pertama",
|
|
last: "Terakhir",
|
|
next: "Selanjutnya",
|
|
previous: "Sebelumnya"
|
|
},
|
|
emptyTable: "Tidak ada data yang tersedia",
|
|
zeroRecords: "Tidak ada data yang cocok"
|
|
},
|
|
columnDefs: [{
|
|
targets: [1, 2],
|
|
className: 'text-nowrap'
|
|
},
|
|
{
|
|
targets: 1,
|
|
orderable: false,
|
|
searchable: false
|
|
}
|
|
],
|
|
dom: "rt<'row align-items-center mt-3'<'col-sm-6 text-center text-sm-start'i><'col-sm-6 d-flex justify-content-center justify-content-sm-end'p>>"
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|