466 lines
20 KiB
PHP
466 lines
20 KiB
PHP
@extends('template')
|
||
@section('title', 'Data Karyawan')
|
||
|
||
@section('content')
|
||
<div class="main-panel">
|
||
<div class="content">
|
||
<div class="container-fluid">
|
||
<div class="mb-4">
|
||
<h4 class="mb-1 fw-bold">Data Karyawan</h4>
|
||
</div>
|
||
<div class="shadow-sm card">
|
||
<!-- FILTER -->
|
||
<form method="GET" action="{{ route('karyawan') }}" id="formFilter">
|
||
<div class="card-body border-bottom">
|
||
<div class="row g-2 align-items-end">
|
||
<!-- SEARCH -->
|
||
<div class="col-md-4">
|
||
<label class="small text-muted">Cari</label>
|
||
<input type="text" name="search" id="searchInput" value="{{ request('search') }}"
|
||
class="form-control form-control-sm" placeholder="Cari data...">
|
||
</div>
|
||
<!-- STATUS -->
|
||
<div class="col-md-3">
|
||
<label class="small text-muted">Status</label>
|
||
<select name="status" id="filterStatus" class="form-control form-control-sm">
|
||
<option value="">Semua</option>
|
||
<option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>
|
||
Aktif
|
||
</option>
|
||
<option value="nonaktif" {{ request('status') == 'nonaktif' ? 'selected' : '' }}>
|
||
Non Aktif
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<!-- PER PAGE -->
|
||
<div class="col-md-2">
|
||
<label class="small text-muted">Tampilkan</label>
|
||
<select name="perPage" onchange="this.form.submit()"
|
||
class="form-control form-control-sm">
|
||
<option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
|
||
<option value="25" {{ request('perPage') == 25 ? 'selected' : '' }}>25</option>
|
||
<option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
|
||
</select>
|
||
</div>
|
||
<!-- BUTTON -->
|
||
<div class="col-md-3 text-end">
|
||
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
|
||
data-target="#modalTambahKaryawan">
|
||
<i class="la la-plus"></i> Tambah
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!-- TABEL -->
|
||
<div class="p-0 card-body">
|
||
<div class="table-responsive">
|
||
<table class="table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-center" width="50">No</th>
|
||
<th>Nama Karyawan</th>
|
||
<th>No Hp</th>
|
||
<th>Alamat</th>
|
||
<th class="text-center">Status</th>
|
||
<th class="text-center" width="120">Aksi</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
@foreach ($data as $item)
|
||
<tr>
|
||
<td class="text-center">
|
||
{{ $data->firstItem() + $loop->index }}
|
||
</td>
|
||
|
||
<td>
|
||
<strong>{{ $item->nama_karyawan }}</strong><br>
|
||
|
||
@if ($item->user)
|
||
<small class="text-success">
|
||
<i class="la la-check-circle"></i> Memiliki Akun
|
||
</small>
|
||
@else
|
||
<small class="text-muted">
|
||
<i class="la la-times-circle"></i> Tidak Memiliki Akun
|
||
</small>
|
||
@endif
|
||
</td>
|
||
|
||
<td>{{ $item->no_hp }}</td>
|
||
<td>{{ $item->alamat ?? '-' }}</td>
|
||
|
||
<td class="text-center">
|
||
@if ($item->status_karyawan === 'aktif')
|
||
<span class="badge badge-success">Aktif</span>
|
||
@else
|
||
<span class="badge badge-secondary">Non Aktif</span>
|
||
@endif
|
||
</td>
|
||
|
||
<td class="text-center">
|
||
<!-- EDIT -->
|
||
<button class="text-white btn btn-warning btn-sm"
|
||
data-toggle="modal"
|
||
data-target="#modalEditKaryawan{{ $item->id }}">
|
||
<i class="la la-edit"></i>
|
||
</button>
|
||
|
||
<!-- AKTIF / NONAKTIF -->
|
||
@if ($item->status_karyawan === 'aktif')
|
||
<button class="btn btn-secondary btn-sm"
|
||
data-toggle="modal"
|
||
data-target="#modalNonaktifKaryawan{{ $item->id }}">
|
||
<i class="la la-ban"></i>
|
||
</button>
|
||
@else
|
||
<form action="{{ route('karyawan.aktifkan', $item->id) }}"
|
||
method="POST"
|
||
class="d-inline">
|
||
@csrf
|
||
@method('PATCH')
|
||
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="la la-check"></i>
|
||
</button>
|
||
</form>
|
||
@endif
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
|
||
@if ($data->count() == 0)
|
||
<tr>
|
||
<td colspan="6" class="py-4 text-center text-muted">
|
||
Data karyawan belum tersedia
|
||
</td>
|
||
</tr>
|
||
@endif
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- FOOTER -->
|
||
<div class="gap-2 card-body d-flex flex-column flex-md-row justify-content-between align-items-center">
|
||
<small class="text-muted">
|
||
@if ($data->count())
|
||
Menampilkan {{ $data->firstItem() }} – {{ $data->lastItem() }}
|
||
dari {{ $data->total() }} data
|
||
@endif
|
||
</small>
|
||
@if ($data->hasPages())
|
||
{{ $data->links() }}
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL TAMBAH -->
|
||
<div class="modal fade" id="modalTambahKaryawan" tabindex="-1">
|
||
<div class="modal-dialog modal-md modal-dialog-centered">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header modal-header-clean">
|
||
<h6 class="mb-0 modal-title">
|
||
<i class="mr-1 la la-plus-circle text-muted"></i>
|
||
Tambah Karyawan
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<form method="POST" action="{{ route('karyawan.store') }}">
|
||
@csrf
|
||
|
||
<input type="hidden" name="status_karyawan" value="aktif">
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label>Nama Lengkap</label>
|
||
<input type="text" name="nama_karyawan" value="{{ old('nama_karyawan') }}"
|
||
class="form-control @error('nama_karyawan') is-invalid @enderror">
|
||
|
||
@error('nama_karyawan')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label>No HP</label>
|
||
<input type="text" name="no_hp" value="{{ old('no_hp') }}" maxlength="13"
|
||
inputmode="numeric" pattern="[0-9]{10,13}"
|
||
oninput="this.value = this.value.replace(/[^0-9]/g,'').slice(0,13)"
|
||
class="form-control @error('no_hp') is-invalid @enderror" {{-- placeholder="Contoh: 081234567890" --}}>
|
||
|
||
@error('no_hp')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Alamat</label>
|
||
<input type="text" name="alamat" value="{{ old('alamat') }}"
|
||
class="form-control @error('alamat') is-invalid @enderror">
|
||
|
||
@error('alamat')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<label class="gap-2 d-flex align-items-center">
|
||
<input type="checkbox" id="toggleLogin" name="has_login"
|
||
{{ old('has_login') ? 'checked' : '' }}>
|
||
Berikan akses login ke sistem
|
||
</label>
|
||
|
||
<div id="formAkun" style="{{ old('has_login') ? '' : 'display:none;' }}">
|
||
<h6 class="mb-2 fw-bold">Akun Login</h6>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label>Email</label>
|
||
<input type="email" name="email" value="{{ old('email') }}"
|
||
class="form-control @error('email') is-invalid @enderror">
|
||
|
||
@error('email')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label>Password</label>
|
||
|
||
<div class="input-group">
|
||
<input type="password" id="passwordInput" name="password" maxlength="20"
|
||
minlength="6" oninput="this.value = this.value.slice(0,20)"
|
||
class="form-control @error('password') is-invalid @enderror">
|
||
|
||
<div class="input-group-append">
|
||
<button type="button" class="btn btn-outline-secondary"
|
||
id="togglePassword">
|
||
<i class="la la-eye"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<small class="text-muted">
|
||
Password minimal 6 dan maksimal 20 karakter
|
||
</small>
|
||
|
||
@error('password')
|
||
<small class="text-danger d-block">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
||
<button class="btn btn-primary">
|
||
<i class="la la-save"></i> Simpan
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL EDIT & NONAKTIF -->
|
||
@foreach ($data as $item)
|
||
<!-- MODAL EDIT -->
|
||
<div class="modal fade" id="modalEditKaryawan{{ $item->id }}" tabindex="-1">
|
||
<div class="modal-dialog modal-md modal-dialog-centered">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header modal-header-clean">
|
||
<h5 class="modal-title">
|
||
<i class="la la-edit"></i> Edit Karyawan
|
||
</h5>
|
||
<button class="close" data-dismiss="modal">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<form method="POST" action="{{ route('karyawan.update', $item->id) }}">
|
||
@csrf
|
||
@method('PUT')
|
||
|
||
<input type="hidden" name="id" value="{{ $item->id }}">
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label>Nama Lengkap</label>
|
||
<input type="text" name="nama_karyawan"
|
||
value="{{ old('nama_karyawan', $item->nama_karyawan) }}"
|
||
class="form-control @error('nama_karyawan') is-invalid @enderror">
|
||
|
||
@error('nama_karyawan')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label>No HP</label>
|
||
<input type="text" name="no_hp" value="{{ old('no_hp', $item->no_hp) }}"
|
||
maxlength="13" inputmode="numeric" pattern="[0-9]{10,13}"
|
||
oninput="this.value = this.value.replace(/[^0-9]/g,'').slice(0,13)"
|
||
class="form-control @error('no_hp') is-invalid @enderror">
|
||
|
||
@error('no_hp')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Alamat</label>
|
||
<input type="text" name="alamat" value="{{ old('alamat', $item->alamat) }}"
|
||
class="form-control @error('alamat') is-invalid @enderror">
|
||
|
||
@error('alamat')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
||
<button type="submit" class="text-white btn btn-warning">
|
||
<i class="la la-save"></i> Update
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- MODAL NONAKTIF -->
|
||
<div class="modal fade" id="modalNonaktifKaryawan{{ $item->id }}" tabindex="-1">
|
||
<div class="modal-dialog modal-sm modal-dialog-centered">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header modal-header-clean">
|
||
<h5 class="modal-title">
|
||
<i class="la la-ban"></i> Nonaktifkan Karyawan
|
||
</h5>
|
||
<button class="close" data-dismiss="modal">×</button>
|
||
</div>
|
||
|
||
<form method="POST" action="{{ route('karyawan.nonaktifkan', $item->id) }}">
|
||
@csrf
|
||
@method('PATCH')
|
||
|
||
<div class="text-center modal-body">
|
||
<p class="mb-0">
|
||
Yakin ingin menonaktifkan
|
||
<strong>{{ $item->nama_karyawan }}</strong>?
|
||
</p>
|
||
</div>
|
||
|
||
<div class="modal-footer justify-content-center">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
||
<button type="submit" class="text-white btn btn-warning">
|
||
Nonaktifkan
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
@endsection
|
||
|
||
@section('scripts')
|
||
|
||
<script>
|
||
$('#toggleLogin').on('change', function() {
|
||
$('#formAkun').toggle(this.checked);
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
$(document).on('click', '#togglePassword', function() {
|
||
let input = $('#passwordInput');
|
||
let icon = $(this).find('i');
|
||
|
||
if (input.attr('type') === 'password') {
|
||
input.attr('type', 'text');
|
||
icon.removeClass('la-eye').addClass('la-eye-slash');
|
||
} else {
|
||
input.attr('type', 'password');
|
||
icon.removeClass('la-eye-slash').addClass('la-eye');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
@if (session('success'))
|
||
<script>
|
||
Swal.fire({
|
||
icon: 'success',
|
||
title: 'Berhasil',
|
||
text: "{{ session('success') }}",
|
||
showConfirmButton: false,
|
||
timer: 1800
|
||
});
|
||
</script>
|
||
@endif
|
||
|
||
|
||
@if ($errors->any())
|
||
<script>
|
||
$(document).ready(function() {
|
||
|
||
@if (old('_method') == 'PUT' && old('id'))
|
||
$('#modalEditKaryawan{{ old('id') }}').modal('show');
|
||
@else
|
||
$('#modalTambahKaryawan').modal('show');
|
||
@endif
|
||
|
||
});
|
||
</script>
|
||
@endif
|
||
|
||
|
||
<script>
|
||
let timer;
|
||
|
||
$('#searchInput').on('keyup', function() {
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => {
|
||
$('#formFilter').submit();
|
||
}, 400);
|
||
});
|
||
|
||
$('#filterStatus').on('change', function() {
|
||
$('#formFilter').submit();
|
||
});
|
||
</script>
|
||
@endsection
|