350 lines
17 KiB
PHP
350 lines
17 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Administrator')
|
|
|
|
@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: auto;
|
|
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: auto;
|
|
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;
|
|
}
|
|
.wrap-image i{
|
|
margin-block: 20px;
|
|
}
|
|
|
|
.password-box {
|
|
position: relative;
|
|
}
|
|
.password-box input {
|
|
padding-right: 40px;
|
|
}
|
|
.password-box .toggle-password {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
color: #aaa;
|
|
font-size: 15px;
|
|
z-index: 5;
|
|
transition: color .2s;
|
|
}
|
|
.password-box .toggle-password:hover {
|
|
color: #555;
|
|
}
|
|
</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 data ini?</p>
|
|
<form id="FormDelete" method="POST" action="">
|
|
@csrf
|
|
@method('DELETE')
|
|
<input type="hidden" name="id" id="delete_id">
|
|
<button type="submit" class="btn btn-danger">Hapus</button>
|
|
</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">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editUserModalLabel">Tambah Data</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/user-admin" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('POST')
|
|
<div class="form-group">
|
|
<label for="name" class="form-label">Nama</label>
|
|
<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="masukkan nama admin" name="name" value="{{ old('name') }}">
|
|
@error('name')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="masukkan email admin" name="email" value="{{ old('email') }}">
|
|
@error('email')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="username" class="form-label">Username</label>
|
|
<input type="text" class="form-control @error('username') is-invalid @enderror" id="username" placeholder="masukkan username" name="username" value="{{ old('username') }}">
|
|
@error('username')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password" class="form-label">Password</label>
|
|
<div class="password-box">
|
|
<input type="password" class="form-control @error('password') is-invalid @enderror" id="password" placeholder="buat password atau kosongi untuk password default" name="password" value="{{ old('password') }}">
|
|
<i class="fa-solid fa-eye-slash toggle-password" data-target="password"></i>
|
|
</div>
|
|
@error('password')
|
|
<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</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="editnama" class="form-label">Nama</label>
|
|
<input type="text" class="form-control @error('name') is-invalid @enderror" id="editnama" placeholder="masukkan nama admin" name="name" value="{{ old('name') }}">
|
|
@error('name')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editemail" class="form-label">Email</label>
|
|
<input type="email" class="form-control @error('email') is-invalid @enderror" id="editemail" placeholder="masukkan email admin" name="email" value="{{ old('email') }}">
|
|
@error('email')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editusername" class="form-label">Username</label>
|
|
<input type="text" class="form-control @error('username') is-invalid @enderror" id="editusername" placeholder="masukkan username" name="username" value="{{ old('username') }}">
|
|
@error('username')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editpassword" class="form-label">Password</label>
|
|
<div class="password-box">
|
|
<input type="password" class="form-control @error('password') is-invalid @enderror" id="editpassword" placeholder="kosongi jika tidak ingin merubah password" name="password" value="{{ old('password') }}">
|
|
<i class="fa-solid fa-eye-slash toggle-password" data-target="editpassword"></i>
|
|
</div>
|
|
@error('password')
|
|
<div class="invalid-feedback">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
</div>
|
|
<input type="hidden" id="edit_id">
|
|
</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>Pengguna Admin</h1>
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Create">Admin 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" style="width: 60px" class="sort asc" data-sort="no">#</th>
|
|
<th scope="col" class="sort" data-sort="nama">Nama</th>
|
|
<th scope="col" class="sort" data-sort="username">Username</th>
|
|
<th scope="col" class="sort" data-sort="email">Email</th>
|
|
<th scope="col" style="text-align: center; width: 120px">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list">
|
|
<style>
|
|
tbody td{
|
|
vertical-align: middle!important;
|
|
}
|
|
</style>
|
|
@foreach($data as $item)
|
|
<tr>
|
|
<td valign="middle" scope="row" class="no">{{ $loop->iteration }}</td>
|
|
<td valign="middle" class="nama" scope="row">{{ $item->name }}</td>
|
|
<td valign="middle" class="username" scope="row">{{ $item->username }}</td>
|
|
<td valign="middle" class="email" scope="row">{{ $item->email }}</td>
|
|
<td 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-pen-to-square"></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 src="{{ asset('library/listjs/list.min.js') }}"></script>
|
|
<script>
|
|
const options = {
|
|
valueNames: ['no', 'nama', 'username', 'email'],
|
|
page: 10,
|
|
pagination: true
|
|
};
|
|
|
|
const tableList = new List('id-table', options);
|
|
|
|
$(document).on('click', '.edit-data', function(e) {
|
|
e.preventDefault();
|
|
let id = $(this).data('id');
|
|
|
|
let nama = $(this).closest('tr').find('td:nth-child(2)').text();
|
|
let username = $(this).closest('tr').find('td:nth-child(3)').text();
|
|
let email = $(this).closest('tr').find('td:nth-child(4)').text();
|
|
|
|
$('#editnama').val(nama);
|
|
$('#editusername').val(username);
|
|
$('#editemail').val(email);
|
|
|
|
$("#FormEdit").attr('action', `/admin/user-admin/${id}`);
|
|
});
|
|
|
|
$(document).on('click', '.delete-data', function(e) {
|
|
let id = $(this).data('id');
|
|
$('#delete_id').val(id);
|
|
$("#FormDelete").attr('action',
|
|
`/admin/user-admin/${id}`);
|
|
});
|
|
|
|
// Toggle show/hide password
|
|
$(document).on('click', '.toggle-password', function () {
|
|
const targetId = $(this).data('target');
|
|
const input = $('#' + targetId);
|
|
if (input.attr('type') === 'password') {
|
|
input.attr('type', 'text');
|
|
$(this).removeClass('fa-eye-slash').addClass('fa-eye');
|
|
} else {
|
|
input.attr('type', 'password');
|
|
$(this).removeClass('fa-eye').addClass('fa-eye-slash');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Page Specific JS File -->
|
|
@endpush
|