MIF_E31230910_MP-HRIS-WEB/resources/views/presensi/edit.blade.php

109 lines
6.0 KiB
PHP

@extends('layouts.app')
@section('title', 'Koreksi Presensi')
@section('content')
<div class="space-y-6 max-w-4xl mx-auto">
<div class="flex items-center gap-4">
<a href="{{ route('presensi.index', ['tanggal' => $presensi->tanggal]) }}" class="p-2 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors text-slate-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
</a>
<x-page-header title="Koreksi Presensi" subtitle="Ubah data kehadiran pegawai secara manual (HRD/Admin)" />
</div>
@if(session('error'))
<div class="p-4 bg-rose-50 text-rose-800 border border-rose-200 rounded-xl flex items-center gap-3">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<p class="text-sm font-medium">{{ session('error') }}</p>
</div>
@endif
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-6 bg-slate-50 border-b border-slate-200 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center">
<div class="flex items-center gap-4">
<x-avatar :name="$presensi->user->nama_lengkap" class="w-12 h-12 text-lg" />
<div>
<h3 class="font-bold text-slate-900 text-lg">{{ $presensi->user->nama_lengkap }}</h3>
<p class="text-slate-500 text-sm">{{ $presensi->user->nik }} {{ $presensi->user->divisi->nama_divisi ?? '-' }}</p>
</div>
</div>
<div class="text-left md:text-right bg-white p-3 rounded-xl border border-slate-200 shadow-sm w-full md:w-auto">
<div class="text-xs text-slate-500 font-semibold mb-1 uppercase tracking-wider">Tanggal Presensi</div>
<div class="font-bold text-slate-800">{{ \Carbon\Carbon::parse($presensi->tanggal)->translatedFormat('l, d F Y') }}</div>
</div>
</div>
<form action="{{ route('presensi.updateManual', $presensi->id_presensi) }}" method="POST" class="p-6 md:p-8 space-y-8" id="formPresensiEdit">
@csrf
@method('PUT')
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-1">
<label class="block text-sm font-semibold text-slate-700">Status Kehadiran <span class="text-red-500">*</span></label>
<x-select name="id_status" id="statusSelect" required onchange="toggleTimeInputs()">
@foreach($statuses as $status)
<option value="{{ $status->id_status }}" {{ old('id_status', $presensi->id_status) == $status->id_status ? 'selected' : '' }}>
{{ $status->nama_status }}
</option>
@endforeach
</x-select>
@error('id_status') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
</div>
<div class="hidden md:block"></div>
<div class="space-y-1" id="wrapJamMasuk">
@php $jm = $presensi->jam_masuk ? \Carbon\Carbon::parse($presensi->jam_masuk)->format('H:i') : ''; @endphp
<x-input label="Jam Masuk" type="time" name="jam_masuk" value="{{ old('jam_masuk', $jm) }}" id="jamMasuk" />
</div>
<div class="space-y-1" id="wrapJamPulang">
@php $jp = $presensi->jam_pulang ? \Carbon\Carbon::parse($presensi->jam_pulang)->format('H:i') : ''; @endphp
<x-input label="Jam Pulang" type="time" name="jam_pulang" value="{{ old('jam_pulang', $jp) }}" id="jamPulang" />
</div>
<div class="space-y-1 md:col-span-2 mt-4">
<label class="block text-sm font-semibold text-slate-700">Catatan Koreksi (Wajib)</label>
<textarea name="alasan_telat" rows="2" required class="w-full rounded-xl border-slate-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 transition-all text-sm" placeholder="Contoh: Koreksi jam masuk karena HRD salah input opsi cuti, dll.">{{ old('alasan_telat', $presensi->alasan_telat) }}</textarea>
<p class="text-xs text-slate-500 mt-1">Status Validasi akan otomatis diset menjadi <strong>Disetujui</strong> setelah dikoreksi.</p>
</div>
</div>
<div class="flex items-center justify-end pt-4 border-t border-slate-100 gap-3">
<a href="{{ route('presensi.index', ['tanggal' => $presensi->tanggal]) }}" class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-700 font-semibold hover:bg-slate-50 transition-colors text-sm">Batal</a>
<x-button type="submit" variant="primary" class="px-6 py-2.5 shadow-md shadow-primary/20" id="submitBtnEdit">
Simpan Perubahan
</x-button>
</div>
</form>
</div>
</div>
@endsection
@section('script')
<script>
function toggleTimeInputs() {
const select = document.getElementById('statusSelect');
const jamMasuk = document.getElementById('wrapJamMasuk');
const jamPulang = document.getElementById('wrapJamPulang');
const showTime = select.value == '1' || select.value == '2';
if (showTime) {
jamMasuk.classList.remove('hidden');
jamPulang.classList.remove('hidden');
} else {
jamMasuk.classList.add('hidden');
jamPulang.classList.add('hidden');
}
}
document.addEventListener('DOMContentLoaded', toggleTimeInputs);
</script>
<script src="{{ asset('js/form-handler.js') }}"></script>
@endsection