203 lines
7.8 KiB
PHP
203 lines
7.8 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('title', 'Home')
|
||
|
||
@push('styles')
|
||
<style>
|
||
.soft-card {
|
||
border: 0;
|
||
border-radius: 16px;
|
||
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
||
}
|
||
|
||
.form-control[readonly] {
|
||
background: #fff;
|
||
color: #111;
|
||
opacity: 1
|
||
}
|
||
|
||
.form-control:disabled {
|
||
background: #fff;
|
||
color: #111;
|
||
opacity: 1
|
||
}
|
||
|
||
.proof-img {
|
||
max-width: 360px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 6px 18px rgba(16, 24, 40, .12)
|
||
}
|
||
|
||
/* Lightbox overlay */
|
||
.lightbox-modal {
|
||
display: none;
|
||
/* awalnya tersembunyi */
|
||
position: fixed;
|
||
z-index: 1050;
|
||
/* di atas konten lain */
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
/* scroll jika gambar terlalu besar */
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
/* Gambar di dalam modal, center & responsif */
|
||
.lightbox-content {
|
||
margin: auto;
|
||
display: block;
|
||
max-width: 90%;
|
||
max-height: 80%;
|
||
margin-top: 5%;
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* Tombol close (×) */
|
||
.lightbox-close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 30px;
|
||
color: #fff;
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.lightbox-close:hover {
|
||
color: #ddd;
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
|
||
|
||
@section('content')
|
||
<div class="card soft-card">
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<h4 class="mb-0">Detail Pengajuan Izin</h4>
|
||
<small style="color: #0f766e">Anggota aktif</small>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-12 col-lg-10">
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-12 col-md-2">Nama</div>
|
||
<div class="col-12 col-md-10"><input type="text" class="form-control"
|
||
value="{{ $data->user->name }}" readonly></div>
|
||
|
||
<div class="col-12 col-md-2">Jabatan</div>
|
||
<div class="col-12 col-md-10"><input type="text" class="form-control"
|
||
value="{{ $data->user->role }}" readonly></div>
|
||
|
||
<div class="col-12 col-md-2">Tanggal</div>
|
||
<div class="col-12 col-md-10"><input type="text" class="form-control" value="{{ $data->date }}"
|
||
readonly></div>
|
||
|
||
<div class="col-12 col-md-2">Keterangan</div>
|
||
<div class="col-12 col-md-10"><input type="text" class="form-control"
|
||
value="{{ $data->keterangan }}" readonly></div>
|
||
|
||
<div class="col-12 col-md-2">Bukti</div>
|
||
<div class="col-12 col-md-10">
|
||
<img src="{{ Storage::disk('public')->url($data->url_bukti) }}" alt="Bukti"
|
||
class="img-fluid proof-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-center gap-2 mt-5">
|
||
<a href="{{ route('admin.pengajuan') }}" class="btn btn-light border px-4">Kembali</a>
|
||
|
||
@if ($data->status === 'diajukan')
|
||
<form action="{{ route('admin.pengajuan.updateStatus', ['id' => $data->id]) }}" method="POST"
|
||
class="d-flex align-items-center gap-2">
|
||
@csrf
|
||
<input type="hidden" name="aksi" value="disetujui">
|
||
<select name="jenis_pengajuan" class="form-select" style="min-width: 160px;" required>
|
||
<option value="" disabled {{ old('jenis_pengajuan') ? '' : 'selected' }}>Pilih Jenis</option>
|
||
<option value="izin" {{ old('jenis_pengajuan') === 'izin' ? 'selected' : '' }}>Izin</option>
|
||
<option value="sakit" {{ old('jenis_pengajuan') === 'sakit' ? 'selected' : '' }}>Sakit</option>
|
||
</select>
|
||
<button type="submit" class="btn btn-success px-5">Disetujui</button>
|
||
</form>
|
||
|
||
<button type="button" class="btn btn-danger px-5" data-bs-toggle="modal"
|
||
data-bs-target="#tolakModal">Ditolak</button>
|
||
@endif
|
||
</div>
|
||
|
||
@error('jenis_pengajuan')
|
||
<div class="text-center text-danger small mt-2">{{ $message }}</div>
|
||
@enderror
|
||
|
||
<!-- Modal alasan penolakan -->
|
||
<div class="modal fade" id="tolakModal" tabindex="-1" aria-labelledby="tolakModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="tolakModalLabel">Alasan Penolakan</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<form action="{{ route('admin.pengajuan.updateStatus', ['id' => $data->id]) }}" method="POST">
|
||
@csrf
|
||
<input type="hidden" name="aksi" value="ditolak">
|
||
<div class="modal-body">
|
||
<div class="mb-3">
|
||
<label for="alasan" class="form-label">Alasan</label>
|
||
<textarea id="alasan" name="alasan" class="form-control" rows="4" placeholder="Tulis alasan..."></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
|
||
<button type="submit" class="btn btn-danger">Kirim</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Lightbox Modal -->
|
||
<div id="lightboxModal" class="lightbox-modal">
|
||
<span class="lightbox-close">×</span>
|
||
<img class="lightbox-content" id="lightboxImage" src="" alt="Preview Bukti">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
@endsection
|
||
@push('scripts')
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const modal = document.getElementById('lightboxModal');
|
||
const modalImg = document.getElementById('lightboxImage');
|
||
const closeBtn = modal.querySelector('.lightbox-close');
|
||
|
||
// Saat gambar diklik
|
||
document.querySelectorAll('.proof-img').forEach(img => {
|
||
img.style.cursor = 'pointer';
|
||
img.addEventListener('click', () => {
|
||
modal.style.display = 'block';
|
||
modalImg.src = img.src;
|
||
});
|
||
});
|
||
|
||
// Tutup saat tombol × diklik
|
||
closeBtn.addEventListener('click', () => {
|
||
modal.style.display = 'none';
|
||
});
|
||
|
||
// Tutup saat klik di luar gambar
|
||
modal.addEventListener('click', e => {
|
||
if (e.target === modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|