337 lines
15 KiB
PHP
337 lines
15 KiB
PHP
@extends('template')
|
||
@section('title', 'Gaji Karyawan')
|
||
|
||
@section('content')
|
||
<div class="main-panel">
|
||
<div class="content">
|
||
<div class="container-fluid">
|
||
<div class="mb-4">
|
||
<h4 class="mb-1 fw-bold">Pencatatan Gaji Karyawan</h4>
|
||
</div>
|
||
<div class="shadow-sm card table-card">
|
||
|
||
<!-- FILTER BAR -->
|
||
<form method="GET" action="{{ route('gaji') }}" id="formFilter">
|
||
<div class="card-body border-bottom filter-bar">
|
||
<div class="row align-items-end g-2">
|
||
|
||
<div class="col-md-3 col-12">
|
||
<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>
|
||
|
||
<div class="col-md-2 col-6">
|
||
<label class="small text-muted">Bulan</label>
|
||
<select name="bulan" id="filterBulan" class="form-control form-control-sm">
|
||
<option value="">Semua</option>
|
||
@for ($i = 1; $i <= 12; $i++)
|
||
<option value="{{ $i }}"
|
||
{{ request('bulan') == $i ? 'selected' : '' }}>
|
||
{{ \Carbon\Carbon::create()->month($i)->translatedFormat('F') }}
|
||
</option>
|
||
@endfor
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-2 col-6">
|
||
<label class="small text-muted">Tahun</label>
|
||
<select name="tahun" id="filterTahun" class="form-control form-control-sm">
|
||
<option value="">Semua</option>
|
||
@foreach ([2024, 2025, 2026] as $th)
|
||
<option value="{{ $th }}"
|
||
{{ request('tahun') == $th ? 'selected' : '' }}>
|
||
{{ $th }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-2 col-6">
|
||
<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>
|
||
|
||
<div class="col-md-3 col-12 text-md-end">
|
||
<button type="button" class="btn btn-primary btn-sm w-100 w-md-auto"
|
||
data-toggle="modal" data-target="#modalTambahGaji">
|
||
<i class="la la-plus"></i> Tambah
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- TABEL -->
|
||
<div class="p-0 card-body">
|
||
<div class="table-responsive">
|
||
<table id="tabelGaji" class="table mb-0 table-standard">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-center" width="50">No</th>
|
||
<th>Nama Karyawan</th>
|
||
<th>Bulan</th>
|
||
<th>Tahun</th>
|
||
<th>Gaji Pokok</th>
|
||
<th>Tanggal Bayar</th>
|
||
<th class="text-center">Keterangan</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
@foreach ($gaji as $item)
|
||
<tr data-nama="{{ $item->karyawan->nama_karyawan }}"
|
||
data-bulan="{{ $item->bulan }}" data-tahun="{{ $item->tahun }}">
|
||
|
||
<td class="text-center">
|
||
{{ $gaji->firstItem() + $loop->index }}
|
||
</td>
|
||
|
||
<td>{{ $item->karyawan->nama_karyawan }}</td>
|
||
|
||
<td>
|
||
{{ \Carbon\Carbon::create()->month($item->bulan)->translatedFormat('F') }}
|
||
</td>
|
||
|
||
<td>{{ $item->tahun }}</td>
|
||
|
||
<td>Rp {{ number_format($item->gaji_pokok, 0, ',', '.') }}</td>
|
||
|
||
<td>
|
||
{{ \Carbon\Carbon::parse($item->tanggal_bayar)->translatedFormat('d F Y') }}
|
||
</td>
|
||
|
||
<td class="text-center">
|
||
<span class="badge badge-success">Dibayar</span>
|
||
</td>
|
||
|
||
</tr>
|
||
@endforeach
|
||
|
||
@if ($gaji->count() == 0)
|
||
<tr>
|
||
<td colspan="7" class="py-4 text-center text-muted">
|
||
Data gaji karyawan belum tersedia
|
||
</td>
|
||
</tr>
|
||
@endif
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER / PAGINATION-->
|
||
<div class="gap-2 card-body d-flex flex-column flex-md-row justify-content-between align-items-center">
|
||
|
||
<small class="text-muted">
|
||
@if ($gaji->count())
|
||
Menampilkan {{ $gaji->firstItem() }} – {{ $gaji->lastItem() }}
|
||
dari {{ $gaji->total() }} data
|
||
@else
|
||
Tidak ada data gaji
|
||
@endif
|
||
</small>
|
||
|
||
@if ($gaji->hasPages())
|
||
{{ $gaji->links() }}
|
||
@endif
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- MODAL TAMBAH GAJI --}}
|
||
<div class="modal fade" id="modalTambahGaji" 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 Data Gaji
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<form action="{{ route('gaji.store') }}" method="POST">
|
||
@csrf
|
||
<div class="modal-body">
|
||
|
||
<div class="form-group">
|
||
<label>Nama Karyawan</label>
|
||
<select name="karyawan_id" class="form-control @error('karyawan_id') is-invalid @enderror">
|
||
<option value="">-- Pilih Karyawan --</option>
|
||
@foreach ($karyawan as $row)
|
||
<option value="{{ $row->id }}"
|
||
{{ old('karyawan_id') == $row->id ? 'selected' : '' }}>
|
||
{{ $row->nama_karyawan }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
@error('karyawan_id')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<label>Bulan</label>
|
||
<select name="bulan" class="form-control @error('bulan') is-invalid @enderror">
|
||
<option value="">-- Bulan --</option>
|
||
@for ($i = 1; $i <= 12; $i++)
|
||
<option value="{{ $i }}" {{ old('bulan') == $i ? 'selected' : '' }}>
|
||
{{ \Carbon\Carbon::create()->month($i)->translatedFormat('F') }}
|
||
</option>
|
||
@endfor
|
||
</select>
|
||
@error('bulan')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label>Tahun</label>
|
||
<input type="number" name="tahun" min="2000" max="{{ date('Y') }}"
|
||
value="{{ old('tahun', date('Y')) }}"
|
||
class="form-control @error('tahun') is-invalid @enderror">
|
||
@error('tahun')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label>Gaji</label>
|
||
<input type="text" id="gaji_pokok" name="gaji_pokok" value="{{ old('gaji_pokok') }}"
|
||
class="form-control @error('gaji_pokok') is-invalid @enderror">
|
||
@error('gaji_pokok')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-2">
|
||
<label>Tanggal Pembayaran</label>
|
||
<input type="date" name="tanggal_bayar" max="{{ date('Y-m-d') }}"
|
||
value="{{ old('tanggal_bayar') }}"
|
||
class="form-control @error('tanggal_bayar') is-invalid @enderror">
|
||
@error('tanggal_bayar')
|
||
<small class="text-danger">{{ $message }}</small>
|
||
@enderror
|
||
</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>
|
||
@endsection
|
||
|
||
|
||
|
||
@section('scripts')
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
|
||
/*
|
||
FILTER OTOMATIS
|
||
*/
|
||
const form = document.getElementById("formFilter");
|
||
const search = document.getElementById("searchInput");
|
||
const bulan = document.getElementById("filterBulan");
|
||
const tahun = document.getElementById("filterTahun");
|
||
|
||
let timer;
|
||
|
||
if (search) {
|
||
search.addEventListener("keyup", function() {
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => form.submit(), 500);
|
||
});
|
||
}
|
||
|
||
if (bulan) {
|
||
bulan.addEventListener("change", function() {
|
||
form.submit();
|
||
});
|
||
}
|
||
|
||
if (tahun) {
|
||
tahun.addEventListener("change", function() {
|
||
form.submit();
|
||
});
|
||
}
|
||
|
||
|
||
/*
|
||
FORMAT RUPIAH GAJI
|
||
*/
|
||
const gajiInput = document.getElementById("gaji_pokok");
|
||
|
||
if (gajiInput) {
|
||
gajiInput.addEventListener("input", function() {
|
||
|
||
let angka = this.value.replace(/[^0-9]/g, '');
|
||
|
||
// BATAS MAKSIMAL 9.999.999
|
||
let max = 9999999;
|
||
|
||
if (angka) {
|
||
if (parseInt(angka) > max) {
|
||
angka = max.toString();
|
||
}
|
||
|
||
this.value = "Rp " + angka.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
||
} else {
|
||
this.value = "";
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
|
||
@if ($errors->any())
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('#modalTambahGaji').modal('show');
|
||
});
|
||
</script>
|
||
@endif
|
||
|
||
|
||
@if (session('success'))
|
||
<script>
|
||
Swal.fire({
|
||
icon: 'success',
|
||
title: 'Berhasil',
|
||
text: '{{ session('success') }}',
|
||
showConfirmButton: false,
|
||
timer: 2000
|
||
});
|
||
</script>
|
||
@endif
|
||
|
||
@endsection
|