@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/styles/choices.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/styles/choices.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<!-- Or for RTL support -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.rtl.min.css" />
<style>
@media (max-width: 767px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(calc(100% / 7));
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(calc(-100% / 7));
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
.carousel-control-prev {
transform: translateX(-100px);
width: 100px;
}
.carousel-control-next {
transform: translateX(100px);
width: 100px;
}
.carousel-item .hari-ini {
background-color: #71dd37 !important;
}
.table {
font-size: 12px !important;
}
.input-number {
width: 50px;
}
</style>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
//const flatpickr = require("flatpickr");
var checkInPicker = flatpickr("#check_in", {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true,
// allowInput: true,
// altInput: true,
// onClose(dates, currentdatestring, picker){
// picker.setDate(picker.altInput.value, true, picker.config.dateFormat)
// }
});
var checkOutPicker = flatpickr("#check_out", {
enableTime: true,
dateFormat: "Y-m-d H:i",
time_24hr: true,
// allowInput: true,
// altInput: true,
// onClose(dates, currentdatestring, picker){
// picker.setDate(picker.altInput.value, true, picker.config.dateFormat)
// }
});
document.addEventListener('focusin', (e) => {
if (e.target.closest(".flatpickr-calendar") !== null) {
e.stopImmediatePropagation();
}
});
// const karyawan = document.getElementById('pilih_karyawan_id');
// const karyawanChoices = new Choices(karyawan);
const perusahaan = document.getElementById('perusahaan_id');
const perusahaanChoices = new Choices(perusahaan);
const lokasiKerja = document.getElementById('lokasi_kerja_id');
const lokasiKerjaChoices = new Choices(lokasiKerja);
$(document).ready(function() {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$.noConflict();
$("#pilih_karyawan_id").select2({
theme: 'bootstrap-5',
ajax: {
url: "/ajax/pilih-karyawan",
type: 'POST',
dataType: 'json',
delay: 250,
data: function(params) {
return {
_token: CSRF_TOKEN,
q: params.term, // search term
page: params.current_page,
perusahaan_id: $('#perusahaan_id').val(),
departemen_id: $('#departemen_id').val(),
lokasi_kerja_id: $('#lokasi_kerja_id').val(),
};
},
processResults: function(data, params) {
params.current_page = params.current_page || 1;
return {
results: data.data,
pagination: {
more: (params.current_page * 30) < data.total
}
};
},
autoWidth: true,
cache: true
},
// placeholder: 'Search for a karyawan',
// minimumInputLength: 1,
templateResult: formatProduct,
templateSelection: formatProductSelection
})
function formatProduct(product) {
if (product.loading) {
return product.text;
}
var $container = $(
"<div class='select2-result-product clearfix'>" +
"<div class='select2-result-product__title'></div>" +
"<div class='select2-result-product__description'></div>" +
"</div>" +
"</div>" +
"</div>"
);
$container.find(".select2-result-product__title").text(product.nama);
$container.find(".select2-result-product__description").text(product.email);
return $container;
}
function formatProductSelection(product) {
return product.nama || product.text;
}
});
let items = document.querySelectorAll('.carousel .carousel-item');
items.forEach((el) => {
const minPerSlide = 7
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
var form = document.querySelector('#filter-form ');
var inputs = form.querySelectorAll('input,select');
inputs.forEach((el) => {
el.addEventListener('change', function() {
form.submit();
});
});
document.getElementById('simpan-absen').addEventListener('click', function() {
let form = document.querySelector('#form-absen');
let data = new FormData(form);
let url = form.getAttribute('action');
let method = form.getAttribute('method');
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function() {
if (xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
if (response.status === 'success') {
showToast('Berhasil', response.message, 'bg-success');
} else {
showToast('Gagal', response.message, 'bg-danger');
}
} else {
showToast('Gagal', 'Terjadi kesalahan', 'bg-danger');
}
};
xhr.send(data);
});
const formAbsen = document.getElementById("modalAbsenForm");
const karaywanId = document.getElementById("karyawan_id");
const tanggal = document.getElementById("tanggal");
const checkIn = document.getElementById("check_in");
const checkOut = document.getElementById("check_out");
const keteranganCi = document.getElementById("keterangan_check_in");
const keteranganCo = document.getElementById("keterangan_check_out");
const statusCi = document.getElementById("status_absen_check_in");
const statusCo = document.getElementById("status_absen_check_out");
const selectLokasiCi = document.getElementById("lokasi_absen_id_check_in");
const selectLokasiCo = document.getElementById("lokasi_absen_id_check_out");
const selectUnit = document.getElementById("unit_id");
const lembur = document.getElementById("lembur");
var tombolHapus = document.getElementById("hapus");
tombolHapus.addEventListener('click', function() {
var ok = confirm(`Ingin menghapus absensi untuk tanggal ${tanggal.value} ?`);
if (ok) {
let form = document.querySelector('#hapusAbsen');
if (this.dataset.id) {
form.setAttribute('action', "{{ url('absensi') }}/" + this.dataset.id);
form.submit();
}
}
});
formAbsen.addEventListener('submit', function(e) {
e.preventDefault();
if (document.getElementById("jadwal_kerja_id").value == "") {
alert("Silahkan pilih jadwal kerja");
return;
}
let data = new FormData(formAbsen);
let url = formAbsen.getAttribute('action');
let method = formAbsen.getAttribute('method');
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function() {
if (xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
if (response.status === 'success') {
showToast('Berhasil', response.message, 'bg-success');
var tombol = document.getElementById("tombol-modalAbsen-" + response.data
.tanggal_absen + "-" + response.data.karyawan_id);
tombol.classList.remove("btn-warning");
tombol.classList.add("btn-primary");
let riwayat = response.data.riwayat_absensi;
let riwayatAbsensi = document.getElementById("riwayat-absensi");
let rowRiwayat = ``;
var no = 1;
if (riwayat) {
riwayat.forEach((el) => {
rowRiwayat += `<tr>
<td>${no++}</td>
<td>${el.jadwal_kerja.nama_jadwal}</td>
<td>${el.jenis_absen}</td>
<td>${el.waktu_absen}</td>
<td>${el.lokasi_absen.nama_lokasi}</td>
<td>${el.keterangan}</td>
</tr>`;
});
riwayatAbsensi.innerHTML = rowRiwayat;
}
} else {
showToast('Gagal', response.message, 'bg-danger');
}
} else {
showToast('Gagal', 'Terjadi kesalahan', 'bg-danger');
}
};
xhr.send(data);
});
const chekIn = document.getElementById("check_in");
chekIn.addEventListener('change', function() {
if (this.value != "") {
document.getElementById("status_absen").value = "h";
checkOutPicker.set("minDate", `${tanggal.value} ${this.value}`);
} else {
document.getElementById("status_absen").value = "";
checkOutPicker.set("minDate", null);
}
});
let riwayatAbsensi = document.getElementById("riwayat-absensi");
let selectJadwal = document.getElementById("jadwal_kerja_id");
selectJadwal.addEventListener("change", function() {
// formAbsen.reset();
defaultValue(this.value);
});
function defaultValue(jadwal_kerja_id) {
checkIn.value = null;
keteranganCi.value = null;
selectLokasiCi.value = null;
checkOut.value = null;
keteranganCo.value = null;
selectLokasiCo.value = null;
var json = JSON.parse(riwayatAbsensi.dataset.riwayat);
if (json) {
for (let i = 0; i < json.length; i++) {
const j = json[i];
if (j.jadwal_kerja_id == jadwal_kerja_id) {
if (j.jenis_absen == "check-in") {
// checkInPicker.set("defaultHour",moment(j.waktu_absen, "hh:mm:ss").format("HH"));
// checkInPicker.set("defaultMinute",moment(j.waktu_absen, "hh:mm:ss").format("mm"));
//checkIn.disabled = true;
checkIn.readOnly = true;
checkIn.value = moment(j.waktu_absen, "hh:mm:ss").format("HH:mm");
keteranganCi.value = j.keterangan;
selectLokasiCi.value = j.lokasi_absen_id;
statusCi.value = j.status_waktu;
if (j.unit_id != null) {
selectUnit.value = j.unit_id;
}
} else if (j.jenis_absen == "check-out") {
// checkOutPicker.set("defaultDate",moment(j.waktu_absen, "hh:mm:ss").format("mm"));
// checkOutPicker.set("defaultHour",moment(j.waktu_absen, "hh:mm:ss").format("HH"));
// checkOutPicker.set("defaultMinute",j.tanggal_absen);
//checkOut.disabled = true;
checkOut.readOnly = true;
checkOut.value = j.tanggal_absen + " " + moment(j.waktu_absen, "hh:mm:ss").format("HH:mm");
keteranganCo.value = j.keterangan;
statusCo.value = j.status_waktu;
selectLokasiCo.value = j.lokasi_absen_id;
console.log(j.lembur);
lembur.checked = j.lembur;
}
}
}
}
}
const tombolModalAbsen = document.querySelectorAll('.tombol-modalAbsen');
var absensiJson;
tombolModalAbsen.forEach((el) => {
el.addEventListener('click', function() {
//ajax to get data absensi.ajax.get-detail-absen
let karyawan_id = this.dataset.karyawan_id;
let tgl = this.dataset.tanggal;
let url = "{{ url('ajax/absensi') }}/" + karyawan_id + "/" + tgl;
console.log(url);
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if (xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
if (response.status === 'success') {
absensiJson = response.data;
let lokasi = absensiJson.lokasi;
let absen_id = absensiJson.absen_id;
let absensi = absensiJson.absensi;
let riwayat = absensiJson.riwayat_absensi;
let unit = absensiJson.unit;
let jadwal = absensiJson.jadwal;
formAbsen.reset();
karaywanId.value = karyawan_id;
tanggal.value = tgl;
riwayatAbsensi.dataset.riwayat = JSON.stringify(riwayat);
if (absensi) {
tombolHapus.dataset.id = absensi.id;
document.getElementById("status_absen").value = absensi.status_absen;
}
document.getElementById("modalAbsenTitle").innerHTML = "Absen " + tanggal
.value;
document.getElementById("detail").setAttribute("href",
`{{ url('absensi/show') }}/${karyawan_id}/${absen_id}?tanggal=${tanggal.value}`
);
let optionLokasi = `<option value="" selected>Tidak Ada Lokasi</option>`;
lokasi.forEach((el) => {
optionLokasi +=
`<option value="${el.id}" >${el.nama_lokasi}</option>`;
});
selectLokasiCi.innerHTML = optionLokasi;
selectLokasiCo.innerHTML = optionLokasi;
let optionUnit = `<option value="" selected>Tidak Ada Unit</option>`;
unit.forEach((el) => {
optionUnit +=
`<option value="${el.id}">${el.kode_unit}</option>`;
});
selectUnit.innerHTML = optionUnit;
if (jadwal.length > 0) {
defaultValue(jadwal[0].id);
}
let optionJadwal = ``;
jadwal.forEach((el) => {
optionJadwal +=
`<option value="${el.id}" >${el.nama_jadwal}</option>`;
});
selectJadwal.innerHTML = optionJadwal;
riwayatAbsensi.innerHTML = "";
let rowRiwayat = ``;
var no = 1;
if (riwayat) {
riwayat.forEach((el) => {
rowRiwayat += `<tr>
<td>${no++}</td>
<td>${el.jadwal_kerja.nama_jadwal}</td>
<td>${el.jenis_absen}</td>
<td>${el.waktu_absen}</td>
<td>${el.lokasi_absen.nama_lokasi}</td>
<td>${el.keterangan}</td>
</tr>`;
});
riwayatAbsensi.innerHTML = rowRiwayat;
}
// let rowRiwayat = ``;
// var no = 1;
// if (riwayat) {
// riwayat.forEach((el) => {
// rowRiwayat += `<tr>
// <td>${no++}</td>
// <td>${el.jenis_absen}</td>
// <td>${el.waktu_absen}</td>
// <td>${el.lokasi_absen.nama_lokasi}</td>
// <td>${el.keterangan}</td>
// </tr>`;
// });
// riwayatAbsensi.innerHTML = rowRiwayat;
// }
// if (absensi) {
// document.getElementById("karyawan_id").value = absensi.karyawan_id;
// document.getElementById("tanggal_absen").value = absensi.tanggal_absen;
// document.getElementById("status_absen").value = absensi.status_absen;
// document.getElementById("jadwal_kerja_id").value = absensi.jadwal_kerja_id;
// document.getElementById("keterangan").value = absensi.keterangan;
// document.getElementById("id").value = absensi.id;
// document.getElementById("hapus").dataset.id = absensi.id;
// defaultValue(absensi.jadwal_kerja_id);
// }
} else {
showToast('Gagal', response.message, 'bg-danger');
}
} else {
showToast('Gagal', 'Terjadi kesalahan', 'bg-danger');
}
};
xhr.send();
});
});
</script>
@endpush
@section('content')
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Absen /</span> Data Absensi</h4>
<div class="card mb-3">
{{-- <h5 class="card-header">Tanggal Absensi</h5> --}}
<div class="card-body">
<form action="" class="form" id="filter-form">
<div class="row mb-4">
<div class="col-md-4">
<div class="form-group">
<label for="perusahaan_id">Perusahaan</label>
<select class="form-control" id="perusahaan_id" name="perusahaan_id">
<option value="0">Semua Perusahaan</option>
@foreach ($perusahaans as $item)
<option value="{{ $item->id }}" @if (request()->perusahaan_id == $item->id) selected @endif>
{{ $item->nama_perusahaan }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="pilih_karyawan_id">Karyawan</label>
<select class="form-control" id="pilih_karyawan_id" name="karyawan_id">
<option value="0">Semua Karyawan</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lokasi_kerja_id">Lokasi Kerja</label>
<select class="form-control" id="lokasi_kerja_id" name="lokasi_kerja_id">
<option value="0">Semua Lokasi</option>
@foreach ($lokasiKerjas as $item)
<option value="{{ $item->id }}" @if (request()->lokasi_kerja_id == $item->id) selected @endif>
{{ $item->nama_lokasi }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="periode_awal">Periode Awal</label>
<input type="date" class="form-control" placeholder="Periode Awal..."
aria-label="Periode Awal" name="periode_awal" id="periode_awal"
value="{{ request()->periode_awal ?? date('Y-m-20', strtotime('-1 month')) }}">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="periode_akhir">Periode Akhir</label>
<input type="date" class="form-control" placeholder="Periode Akhir..."
aria-label="Periode Akhir" name="periode_akhir" id="periode_akhir"
value="{{ request()->periode_akhir ?? date('Y-m-20') }}">
</div>
</div>
{{-- <div class="col-md-4">
<div class="form-group">
<label for="tanggal">Tanggal</label>
<input type="date" name="tanggal" class="form-control" id="tanggal"
value="{{ $tanggal }}">
</div>
</div> --}}
</div>
<div class="row">
<div class="col-md-10 mx-auto">
<div id="recipeCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner" role="listbox">
@php
$hari = cal_days_in_month(CAL_GREGORIAN, date('m', strtotime($tanggal)), date('Y', strtotime($tanggal)));
$active = false;
@endphp
@for ($i = 0; $i < $hari; $i++)
<div class="carousel-item bg-primary @if (in_array((string) ($i + 1), $haris) && !$active) active @endif">
<div style="width:calc(100% / 7);">
<a class="card bg-transparent @if (in_array((string) ($i + 1), $haris) && !$active) active @endif @if (in_array((string) ($i + 1), $haris)) hari-ini @endif text-white text-center"
style="height:70px;border-radius:0;"
href="?tanggal={{ date('Y', strtotime($tanggal)) . '-' . date('m', strtotime($tanggal)) . '-' . sprintf('%02d', $i + 1) }}&perusahaan_id={{ request()->perusahaan_id }}&karyawan_id={{ request()->karyawan_id }}">
<div class="card-img-overlay">
{{ date('Y', strtotime($tanggal)) . '-' . date('m', strtotime($tanggal)) . '-' . sprintf('%02d', $i + 1) }}
</div>
</a>
</div>
</div>
@php
if (in_array((string) ($i + 1), $haris)) {
$active = true;
}
@endphp
@endfor
</div>
<a class="carousel-control-prev bg-secondary" href="#recipeCarousel" role="button"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-secondary" href="#recipeCarousel" role="button"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="card">
@csrf
<h5 class="card-header">Data Absensi Karyawan</h5>
<div class="card-body">
<div class="row mb-4">
<div class="col-md-6">
<form class="form row"
action="?perusahaan_id=0&search_terms=&departemen_id=0&search_terms=&lokasi_kerja_id=0&search_terms=&periode_awal=2022-08-20&periode_akhir=2022-09-26">
@foreach (request()->all() as $name => $req)
<input type="hidden" name="{{ $name }}" value="{{ $req }}">
@endforeach
<div class="col">
<input type="text" class="form-control" placeholder="Search..." aria-label="Search"
name="search" value="{{ request()->search }}">
</div>
<div class="col-md-2">
<select name="jumlah_baris" id="jumlah_baris" class="form-control">
<option value="10">10</option>
<option value="50">50</option>
<option value="50">100</option>
</select>
</div>
<div class="col">
<button class="btn btn-secondary">Search</button>
</div>
</form>
</div>
<div class="col-md-6 text-end">
@if ($akses['tambah'])
<div class="btn-group float-md-right" karyawan="group"
aria-label="Button group with nested dropdown">
{{-- <a href="{{ route('karyawan.create') }}" class="btn btn-primary"><i class="bx bx-plus"></i>
Tambah</a> --}}
<button type="button" id="simpan-absen" class="btn btn-success"><i class="bx bx-save"></i>
Simpan</button>
</div>
@endif
</div>
</div>
<form action="{{ route('absensi.update-absen') }}" method="POST" id="form-absen">
@csrf
{{-- <input type="hidden" name="tanggal" value="{{ $tanggal }}"> --}}
<div class="table-responsive text-nowrap">
<table class="table table-striped">
<thead>
<tr>
<th rowspan="2">
No
</th>
<th rowspan="2">
NIK
</th>
<th rowspan="2" class="karyawan">
Nama
</th>
@foreach ($periods as $period)
<th colspan="3">
<center>{{ $period->format('Y/m/d') }}</center>
</th>
@endforeach
</tr>
<tr>
@foreach ($periods as $period)
<th>
RIT
</th>
<th>
HM
</th>
<th>
Absen
</th>
@endforeach
</tr>
</thead>
<tbody>
@foreach ($karyawans as $karyawan)
@php
$jadwalkerja = $karyawan->jadwal_kerja;
$haris = Helper::checkJadwal($karyawan, $periode_awal, $periode_akhir);
@endphp
<tr>
<td>{{ $karyawans->firstItem() + $loop->index }}</td>
<td>
{{ $karyawan->nik }}
</td>
<td class="karyawan">
{{ $karyawan->nama }}
</td>
@foreach ($periods as $key => $period)
@php
$absensi = $karyawan->absensi->where('tanggal_absen',$period->format('Y-m-d'))->first();
// $absensi = array_reduce($absensis, function ($carry, $item) use ($period) {
// if ($item['tanggal_absen'] == $period->format('Y-m-d')) {
// $carry = $item;
// }
// return $carry;
// });
@endphp
<td>
<input type="number"
name="rit[{{ $period->format('Y-m-d') }}][{{ $karyawan->id }}]"
class="input-number" value="{{ @$absensi->rit ?? 0 }}">
</td>
<td>
<input type="number"
name="hm[{{ $period->format('Y-m-d') }}][{{ $karyawan->id }}]"
class="input-number" value="{{ @$absensi->hm ?? 0 }}">
</td>
<td>
@php
$day_of_week = (int) $period->format('N');
$day_of_month = (int) $period->format('d');
$punyaJadwal = false;
$izins = $karyawan->izins->toArray();
$adaIzin = array_reduce($izins, function ($carry, $item) use ($period) {
if ($item['tanggal_izin'] == $period->format('Y-m-d') && $item['status'] == 'accept') {
$carry = $item;
}
return $carry;
});
$adaIzin = $adaIzin ? (object) $adaIzin : null;
//filter array with tanggal_izin and status=accept
// $adaIzin = Helper::checkIzin($karyawan->id, $period->format('Y-m-d'));
foreach ($jadwalkerja as $jadwal) {
$s = $haris[$jadwal->id][$key] ?? null;
if ($s && $s->status_kerja == 'work-day') {
$punyaJadwal = true;
break;
}
// if ($jadwal->jumlah_hari > 7) {
// $jadwal_detail = $jadwal
// ->jadwal_kerja_detail()
// ->where('hari', 'Day ' . $day_of_month)
// ->where('status_kerja', 'work-day')
// ->count();
// if ($jadwal_detail > 0) {
// $punyaJadwal = true;
// }
// } else {
// $jadwal_detail = $jadwal
// ->jadwal_kerja_detail()
// ->where('hari', 'Day ' . $day_of_week)
// ->where('status_kerja', 'work-day')
// ->count();
// if ($jadwal_detail > 0) {
// $punyaJadwal = true;
// }
// }
}
@endphp
@if ($punyaJadwal)
<button type="button"
class="btn btn-sm @if (isset($absensi)) btn-primary @else btn-warning @endif d-inline tombol-modalAbsen"
id="tombol-modalAbsen-{{ $period->format('Y-m-d') }}-{{ $karyawan->id }}"
{{-- data-absensi='{!! json_encode($absensi) !!}'
data-absen_id="{{ @$absensi->id ?? 0 }}" --}} data-karyawan_id="{{ $karyawan->id }}"
data-bs-toggle="modal" data-bs-target="#modalAbsen"
data-unit='{!! json_encode($karyawan->unit) !!}' {{-- data-lokasi='{!! json_encode($karyawan->lokasi_absen) !!}'
data-jadwal='{!! json_encode($jadwalkerja) !!}'
data-riwayat='{!! json_encode(@$absensi->riwayat_absensi) !!}' --}}
data-tanggal="{{ $period->format('Y-m-d') }}">
<i class="bx bx-time" style="font-size: 12px;"></i>
</button>
@elseif($adaIzin != null)
<a href="{{ route('izin.edit', $adaIzin->id) }}" class="text-info"
target="_blank">{{ @$adaIzin->jenis_izin_label }}</a>
@else
<span class="text-danger">-</span>
@endif
</td>
@endforeach
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="row mt-2">
<div class="col">
{{ $karyawans->appends(request()->query())->links() }}
</div>
{{-- <div class="col-md-12">
<ul>
<li>
<div class="badge bg-warning" style="width:10px;height:10px;">
<p></p>
</div> Belum Di Setujui
</li>
<li>
<div class="badge bg-danger" style="width:10px;height:10px;">
<p></p>
</div> Tidak Ada Jadwal
</li>
</ul>
</div> --}}
</div>
</form>
</div>
</div>
<div class="modal fade" id="modalAbsen" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<form method="POST" id="hapusAbsen" action="{{ url('absensi') }}">
@csrf
@method('DELETE')
</form>
<form class="modal-content" method="POST" id="modalAbsenForm" action="{{ route('absensi.store') }}">
<input type="hidden" name="tanggal" id="tanggal">
<input type="hidden" name="karyawan_id" id="karyawan_id">
@csrf
<div class="modal-header">
<h5 class="modal-title" id="modalAbsenTitle">Absen</h5>
<a href="" title="detail" id="detail" class="btn btn-sm btn-warning mx-3"><i
class="tf-icon bx bxs-detail "></i> Detail</a>
<button href="" title="hapus" type="button" id="hapus"
class="btn btn-sm btn-danger mx-3"><i class="tf-icon bx bxs-trash "></i> Hapus</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<div class="form-group">
<label for="status_absen" class="form-label">Status</label>
<select name="status_absen" class="form-control" id="status_absen">
<option value="">Tidak Ada Status</option>
@foreach ($status as $key => $item)
<option value="{{ $key }}">{{ $item }}</option>
@endforeach
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="unit_id" class="form-label">Unit</label>
<select name="unit_id" class="form-control" id="unit_id">
<option value="">Tidak Ada Unit</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="jadwal_kerja_id" class="form-label">Jadwal Kerja</label>
<select name="jadwal_kerja_id" class="form-control" id="jadwal_kerja_id">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5>Check In</h5>
</div>
<div class="col-md-6">
<h5>Check Out</h5>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row mb-3">
<div class="col-md-6">
<label for="check_in" class="form-label">Check In</label>
<input type="text" class="form-control" name="check_in" id="check_in">
</div>
<div class="col-md-6">
<label for="status_absen_check_in" class="form-label">Status Waktu</label>
<select name="status_absen_check_in" class="form-control" id="status_absen_check_in">
@foreach (['on-time', 'late', 'too-early'] as $item)
<option value="{{ $item }}">{{ $item }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row mb-3">
<div class="col-md-6">
<div class="form-group">
<label for="check_out" class="form-label">Check Out</label>
<input type="text" class="form-control" name="check_out" id="check_out">
</div>
</div>
<div class="col-md-6">
<label for="status_absen_check_out" class="form-label">Status Waktu</label>
<select name="status_absen_check_out" class="form-control"
id="status_absen_check_out">
@foreach (['on-time', 'late', 'too-early'] as $item)
<option value="{{ $item }}">{{ $item }}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="keterangan_check_in" class="form-label">Keterangan</label>
<input type="text" id="keterangan_check_in" class="form-control"
name="keterangan_check_in" placeholder="Keterangan Check In..." />
</div>
</div>
<div class="col-md-6">
<div class="form-check form-switch" id="pilihan-lembur">
<br>
<label class="form-check-label mx-2" for="lembur">Checkout Lembur?</label>
<input class="form-check-input" style="width: 3rem;height: 1.5rem;" type="checkbox"
name="lembur" value="true" id="lembur">
<br>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="lokasi_absen_id_check_in" class="form-label">Lokasi</label>
<select name="lokasi_absen_id_check_in" class="form-control"
id="lokasi_absen_id_check_in">
<option value="">Tidak Ada Lokasi</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lokasi_absen_id_check_out" class="form-label">Lokasi</label>
<select name="lokasi_absen_id_check_out" class="form-control"
id="lokasi_absen_id_check_out">
<option value="">Tidak Ada Lokasi</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="form-group">
<label for="keterangan_check_out" class="form-label">Keterangan</label>
<input type="text" id="keterangan_check_out" class="form-control"
name="keterangan_check_out" placeholder="Keterangan Check Out..." />
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<h5>Riwayat Absen</h5>
</div>
</div>
<div class="row ">
<div class="col">
<table class="table">
<thead>
<tr>
<th>
No
</th>
<th>
Jadwal Kerja
</th>
<th>
Jenis Absen
</th>
<th>
Waktu Absen
</th>
<th>
Lokasi
</th>
<th>
Keterangan
</th>
</tr>
</thead>
<tbody id="riwayat-absensi">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell