618 lines
32 KiB
PHP
618 lines
32 KiB
PHP
<x-AppLayout>
|
|
|
|
<div class="pb-8 lg:py-0 lg:fixed lg:top-4 z-[50]">
|
|
<p class="text-3xl poppins-bold pb-1">Pengajuan</p>
|
|
<p class="poppins-regular">Ini adalah semua data pengajuan</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<form id="filterForm" method="GET" action="{{ route('submission.index') }}"
|
|
class="md:flex justify-end space-x-0 space-y-1 md:space-y-0 md:space-x-1">
|
|
<!-- Dropdown Type -->
|
|
<div class="flex justify-end items-center flex-1 md:flex-grow-0">
|
|
<select id="typeFilter" name="type"
|
|
class="border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-blue-300 focus:border-blue-300 block w-full sm:max-w-60 md:max-w-none md:w-auto p-2.5">
|
|
<option value="">Semua Jenis</option>
|
|
<option value="KTP" {{ request('type') == 'KTP' ? 'selected' : '' }}>KTP</option>
|
|
<option value="KIA" {{ request('type') == 'KIA' ? 'selected' : '' }}>KIA</option>
|
|
<option value="Kartu Keluarga" {{ request('type') == 'Kartu Keluarga' ? 'selected' : '' }}>Kartu
|
|
Keluarga</option>
|
|
<option value="Surat Pindah" {{ request('type') == 'Surat Pindah' ? 'selected' : '' }}>Surat Pindah
|
|
</option>
|
|
<option value="Akta Kelahiran" {{ request('type') == 'Akta Kelahiran' ? 'selected' : '' }}>Akta
|
|
Kelahiran</option>
|
|
<option value="Akta Kematian" {{ request('type') == 'Akta Kematian' ? 'selected' : '' }}>Akta
|
|
Kematian</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Dropdown Status -->
|
|
<div class="flex justify-end items-center flex-1 md:flex-grow-0">
|
|
<select id="statusFilter" name="status"
|
|
class="border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-blue-300 focus:border-blue-300 block w-full sm:max-w-60 md:max-w-none md:w-auto p-2.5">
|
|
<option value="">Semua Status</option>
|
|
<option value="Disetujui" {{ request('status') == 'Disetujui' ? 'selected' : '' }}>Disetujui
|
|
</option>
|
|
<option value="Ditolak" {{ request('status') == 'Ditolak' ? 'selected' : '' }}>Ditolak</option>
|
|
<option value="Diproses" {{ request('status') == 'Diproses' ? 'selected' : '' }}>Diproses</option>
|
|
<option value="Selesai" {{ request('status') == 'Selesai' ? 'selected' : '' }}>Selesai</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Input Search dengan Ikon -->
|
|
<div class="flex justify-end items-center space-x-2">
|
|
<div class="relative sm:max-w-60 max-w-none w-full">
|
|
<input type="text" id="searchFilter" name="name" placeholder="Cari Pengajuan..."
|
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
|
|
focus:border-blue-500 block w-full p-2.5 pr-10">
|
|
<!-- Ikon Search -->
|
|
<button id="searchBtn" type="submit"
|
|
class="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700 transition">
|
|
<svg class="w-5 h-5" aria-hidden="true" fill="none" viewBox="0 0 20 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Ambil elemen filter
|
|
const filterForm = document.getElementById("filterForm");
|
|
const typeFilter = document.getElementById("typeFilter");
|
|
const statusFilter = document.getElementById("statusFilter");
|
|
const searchFilter = document.getElementById("searchFilter");
|
|
|
|
// Event listener untuk dropdown Type
|
|
typeFilter.addEventListener("change", function() {
|
|
filterForm.submit();
|
|
});
|
|
|
|
// Event listener untuk dropdown Status
|
|
statusFilter.addEventListener("change", function() {
|
|
filterForm.submit();
|
|
});
|
|
|
|
// Event listener untuk input search (tekan Enter untuk cari)
|
|
searchFilter.addEventListener("keypress", function(event) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault(); // Mencegah reload halaman default
|
|
filterForm.submit();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<div class=" w-full h-auto bg-gray-200 rounded-t-xl">
|
|
<div class="p-4">
|
|
<p class="poppins-semibold text-[#06275A] text-xl pl-2">Daftar Pengajuan</p>
|
|
</div>
|
|
<div class="relative overflow-x-auto ">
|
|
<table class="w-full text-sm text-left rtl:text-right text-gray-500 ">
|
|
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3">No</th>
|
|
<th scope="col" class="px-6 py-3">Pemohon</th>
|
|
<th scope="col" class="px-6 py-3">Jenis</th>
|
|
<th scope="col" class="text-center px-6 py-3">Tanggal</th>
|
|
<th scope="col" class="text-center px-6 py-3">User</th>
|
|
<th scope="col" class="text-center px-6 py-3">Status</th>
|
|
<th scope="col" class="text-center px-6 py-3">Notes</th>
|
|
<th scope="col" class="text-center px-6 py-3">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
@forelse($submissions as $submission)
|
|
<tr class="bg-white border-b border-gray-200">
|
|
<td class="px-6 py-4">{{ $submissions->firstItem() + $loop->index }}</td>
|
|
<td class="px-6 py-4">{{ $submission->name ?? 'Tidak Diketahui' }}</td>
|
|
<td class="px-6 py-4">{{ $submission->type ?? 'Tidak Diketahui' }}</td>
|
|
<td class="px-6 py-4">{{ $submission->created_at ?? 'Tidak Diketahui' }}</td>
|
|
<td class="px-6 py-4">{{ $submission->user->name ?? 'Tidak Diketahui' }}</td>
|
|
|
|
|
|
<td class="text-center px-6 py-4">
|
|
<span
|
|
class="{{ $submission->status == 'Disetujui'
|
|
? 'bg-blue-200 text-blue-800'
|
|
: ($submission->status == 'Selesai'
|
|
? 'bg-green-200 text-green-800'
|
|
: ($submission->status == 'Ditolak'
|
|
? 'bg-red-200 text-red-800'
|
|
: 'bg-yellow-200 text-yellow-800')) }} px-2 py-1 rounded">
|
|
{{ $submission->status }}
|
|
</span>
|
|
|
|
</td>
|
|
<td class="px-6 py-4">{{ $submission->notes ?? 'Kosong' }}</td>
|
|
|
|
<td class="text-center items-center px-6 py-4">
|
|
<div class="flex justify-center space-x-2">
|
|
<button data-modal-target="info-modal-{{ $submission->id }}"
|
|
data-modal-toggle="info-modal-{{ $submission->id }}" type="button"
|
|
class="p-1 flex-shrink-0">
|
|
<img class="w-auto h-6 lg:h-6 object-contain"
|
|
src="{{ asset('img/info-icon.png') }}" alt="Detail">
|
|
</button>
|
|
<button data-modal-target="modal-update-{{ $submission->id }}"
|
|
data-modal-toggle="modal-update-{{ $submission->id }}" type="button"
|
|
class="p-1 flex-shrink-0">
|
|
<img class="w-auto h-6 lg:h-7 object-contain"
|
|
src="{{ asset('img/edit-icon.png') }}" alt="Edit">
|
|
</button>
|
|
|
|
<button data-modal-target="delete-modal-{{ $submission->id }}"
|
|
data-modal-toggle="delete-modal-{{ $submission->id }}" type="button"
|
|
class="p-1 flex-shrink-0">
|
|
<img class="w-auto h-5 lg:h-6 object-contain"
|
|
src="{{ asset('img/delete-icon.png') }}" alt="Delete">
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-4 text-center">Tidak ada data</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="mt-4 px-4">
|
|
{{ $submissions->links() }}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- UPDATE MODAL --}}
|
|
@forelse ($submissions as $update)
|
|
<!-- Main modal -->
|
|
<div id="modal-update-{{ $update->id }}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true"
|
|
class="hidden fixed inset-0 z-[999] justify-center items-center w-full h-screen bg-gray-900 bg-opacity-50">
|
|
<div class="relative p-4 w-full max-w-2xl">
|
|
<!-- Modal content -->
|
|
<div class="bg-white rounded-lg shadow-sm">
|
|
<!-- Modal header -->
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<h3 class="text-xl font-semibold text-gray-900">Update Status</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-900"
|
|
data-modal-hide="modal-update-{{ $update->id }}">
|
|
✖
|
|
</button>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- Informasi Nama dan Jenis -->
|
|
<div class="space-y-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Nama</label>
|
|
<p class="text-sm text-gray-900">{{ $update->name }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">NIK</label>
|
|
<p class="text-sm text-gray-900">{{ $update->data['nik'] ?? '-'}}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Jenis</label>
|
|
<p class="text-sm text-gray-900">{{ $update->type }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form untuk Update Status -->
|
|
<form action="{{ route('submission.update', $update->id) }}" method="POST"
|
|
class="mt-4 space-y-4" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Pilihan Status -->
|
|
<div>
|
|
<label for="status" class="block text-sm font-medium text-gray-700">Pilih
|
|
Status</label>
|
|
<select id="status-{{ $update->id }}" name="status"
|
|
data-type="{{ $update->type }}"
|
|
onchange="handleStatusChange({{ $update->id }})"
|
|
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="Disetujui" {{ $update->status == 'Disetujui' ? 'selected' : '' }}>
|
|
Disetujui</option>
|
|
<option value="Diproses" {{ $update->status == 'Diproses' ? 'selected' : '' }}>
|
|
Diproses</option>
|
|
<option value="Ditolak" {{ $update->status == 'Ditolak' ? 'selected' : '' }}>
|
|
Ditolak</option>
|
|
<option value="Selesai" {{ $update->status == 'Selesai' ? 'selected' : '' }}>
|
|
Selesai</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Input Tanggal (Hanya jika Disetujui) -->
|
|
<div id="date-field-{{ $update->id }}" class="hidden">
|
|
<label for="date" class="block text-sm font-medium text-gray-700">Tanggal
|
|
Persetujuan</label>
|
|
<input type="date" id="date-{{ $update->id }}" name="date"
|
|
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
<!-- Input Catatan -->
|
|
<div id="notes-field-{{ $update->id }}">
|
|
<label for="notes" class="block text-sm font-medium text-gray-700">Catatan</label>
|
|
|
|
<!-- Teks Statis untuk Status 'Selesai' -->
|
|
<p id="notes-text-{{ $update->id }}"
|
|
class="{{ $update->status == 'Selesai' ? '' : 'hidden' }}">
|
|
{{ $update->status == 'Selesai' ? 'Dokumen telah selesai pada tanggal ' . now()->format('d F Y') : '' }}
|
|
</p>
|
|
|
|
<!-- Textarea untuk Status 'Disetujui' dan 'Ditolak' -->
|
|
<textarea id="notes-textarea-{{ $update->id }}" name="notes"
|
|
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 {{ $update->status == 'Selesai' ? 'hidden' : '' }}"
|
|
rows="3">{{ $update->status == 'Selesai' ? '' : $update->notes }}</textarea>
|
|
|
|
<!-- Input Hidden untuk Menyimpan Nilai Notes -->
|
|
<input type="hidden" id="notes-hidden-{{ $update->id }}" name="notes"
|
|
value="{{ $update->status == 'Selesai' ? 'Dokumen telah selesai pada tanggal ' . now()->format('d F Y') : $update->notes }}">
|
|
|
|
<!-- File Upload untuk Status 'Selesai' -->
|
|
<div id="file-upload-{{ $update->id }}" class="mt-4 {{ $update->status == 'Selesai' ? '' : 'hidden' }}">
|
|
<label for="proof_file-{{ $update->id }}" class="block text-sm font-medium text-gray-700">Bukti Pengambilan Dokumen</label>
|
|
<input type="file" id="proof_file-{{ $update->id }}" name="proof_file" accept="image/*"
|
|
class="mt-1 block w-full text-sm text-gray-500
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded-md file:border-0
|
|
file:text-sm file:font-semibold
|
|
file:bg-blue-50 file:text-blue-700
|
|
hover:file:bg-blue-100">
|
|
<p class="mt-1 text-sm text-gray-500">Upload foto bukti pengambilan dokumen (JPG, PNG, atau GIF)</p>
|
|
</div>
|
|
|
|
<!-- Pilihan Alasan Penolakan -->
|
|
<div id="rejection-reasons-{{ $update->id }}"
|
|
class="mt-2 {{ $update->status == 'Ditolak' ? '' : 'hidden' }}">
|
|
<p class="text-sm font-medium text-gray-700">Pilih Alasan:</p>
|
|
<ul class="space-y-1">
|
|
<li class="cursor-pointer w-auto text-red-600 hover:underline"
|
|
onclick="setNotes({{ $update->id }}, 'Dokumen tidak lengkap.')">📌
|
|
Dokumen yang diunggah kurang jelas.</li>
|
|
<li class="cursor-pointer w-auto text-red-600 hover:underline"
|
|
onclick="setNotes({{ $update->id }}, 'Data yang diberikan tidak valid.')">
|
|
📌 Data yang diberikan tidak valid.</li>
|
|
<li class="cursor-pointer w-auto text-red-600 hover:underline"
|
|
onclick="setNotes({{ $update->id }}, 'Pengajuan tidak memenuhi syarat.')">
|
|
📌 Pengajuan tidak memenuhi syarat.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Tombol Submit -->
|
|
<button type="submit"
|
|
class="w-full px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
|
|
Update Status
|
|
</button>
|
|
</form>
|
|
|
|
<script>
|
|
function handleStatusChange(id) {
|
|
let statusElement = document.getElementById(`status-${id}`);
|
|
let status = statusElement.value;
|
|
let type = statusElement.dataset.type;
|
|
|
|
let notesField = document.getElementById(`notes-field-${id}`);
|
|
let rejectionReasons = document.getElementById(`rejection-reasons-${id}`);
|
|
let dateField = document.getElementById(`date-field-${id}`);
|
|
let notesText = document.getElementById(`notes-text-${id}`);
|
|
let notesTextarea = document.getElementById(`notes-textarea-${id}`);
|
|
let notesHiddenInput = document.getElementById(`notes-hidden-${id}`);
|
|
let dateInput = document.getElementById(`date-${id}`);
|
|
let fileUpload = document.getElementById(`file-upload-${id}`);
|
|
|
|
if (status === 'Ditolak') {
|
|
notesField.classList.remove('hidden');
|
|
rejectionReasons.classList.remove('hidden');
|
|
dateField.classList.add('hidden');
|
|
notesText.classList.add('hidden');
|
|
notesTextarea.classList.remove('hidden');
|
|
notesTextarea.disabled = false;
|
|
notesHiddenInput.value = "";
|
|
fileUpload.classList.add('hidden');
|
|
} else if (status === 'Disetujui') {
|
|
notesField.classList.remove('hidden');
|
|
rejectionReasons.classList.add('hidden');
|
|
dateField.classList.remove('hidden');
|
|
notesTextarea.disabled = true;
|
|
notesTextarea.value = "";
|
|
notesTextarea.placeholder = "Boleh di Kosongkan";
|
|
|
|
if (type === 'KK' || type === 'KTP') {
|
|
notesText.classList.remove('hidden');
|
|
notesTextarea.classList.add('hidden');
|
|
notesTextarea.disabled = true;
|
|
dateInput.addEventListener('input', function () {
|
|
updateApprovalText(id, type);
|
|
});
|
|
}else {
|
|
// Selain KK dan KTP
|
|
notesText.classList.add('hidden');
|
|
notesTextarea.classList.remove('hidden');
|
|
notesTextarea.disabled = false;
|
|
notesHiddenInput.value = notesTextarea.value;
|
|
dateField.classList.add('hidden'); // Gak perlu tanggal
|
|
// Update hidden input ketika textarea diubah
|
|
notesTextarea.addEventListener('input', function() {
|
|
notesHiddenInput.value = notesTextarea.value;
|
|
});
|
|
}
|
|
fileUpload.classList.add('hidden');
|
|
} else if (status === 'Selesai') {
|
|
notesField.classList.remove('hidden');
|
|
rejectionReasons.classList.add('hidden');
|
|
dateField.classList.add('hidden');
|
|
fileUpload.classList.remove('hidden');
|
|
|
|
// Ubah bagian ini agar textarea ditampilkan untuk input nama pengambil
|
|
notesText.classList.add('hidden');
|
|
notesTextarea.classList.remove('hidden');
|
|
notesTextarea.disabled = false;
|
|
|
|
// Set placeholder untuk textarea
|
|
notesTextarea.placeholder = "Masukkan Catatan Untuk Pengaju";
|
|
|
|
// Set nilai awal untuk textarea jika belum ada
|
|
if (!notesTextarea.value || notesTextarea.value.indexOf("Dokumen telah di ambil oleh") === -1) {
|
|
notesTextarea.value = "Dokumen telah di ambil oleh ";
|
|
}
|
|
|
|
// Update hidden input ketika textarea diubah
|
|
notesTextarea.addEventListener('input', function() {
|
|
notesHiddenInput.value = notesTextarea.value;
|
|
});
|
|
|
|
// Set nilai awal untuk hidden input
|
|
notesHiddenInput.value = notesTextarea.value;
|
|
} else {
|
|
notesField.classList.add('hidden');
|
|
rejectionReasons.classList.add('hidden');
|
|
dateField.classList.add('hidden');
|
|
notesText.classList.add('hidden');
|
|
notesTextarea.classList.add('hidden');
|
|
notesTextarea.disabled = true;
|
|
notesHiddenInput.value = "";
|
|
fileUpload.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function updateApprovalText(id, type) {
|
|
let dateInput = document.getElementById(`date-${id}`);
|
|
let notesText = document.getElementById(`notes-text-${id}`);
|
|
let notesHiddenInput = document.getElementById(`notes-hidden-${id}`);
|
|
|
|
if (dateInput.value) {
|
|
let selectedDate = new Date(dateInput.value).toLocaleDateString('id-ID', {
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
|
|
if (type === 'KK') {
|
|
notesText.innerText = `Dokumen dapat diambil pada tanggal ${selectedDate}`;
|
|
notesHiddenInput.value = `Dokumen dapat diambil pada tanggal ${selectedDate}`;
|
|
} else if (type === 'KTP') {
|
|
notesText.innerText = `Silahkan datang di kantor kecamatan pada tanggal ${selectedDate}`;
|
|
notesHiddenInput.value = `Silahkan datang di kantor kecamatan pada tanggal ${selectedDate}`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function setNotes(id, text) {
|
|
let textarea = document.getElementById(`notes-textarea-${id}`);
|
|
let hiddenInput = document.getElementById(`notes-hidden-${id}`);
|
|
textarea.value = text;
|
|
hiddenInput.value = text;
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let statusFields = document.querySelectorAll("[id^=status-]");
|
|
statusFields.forEach(field => {
|
|
let id = field.id.split('-')[1];
|
|
handleStatusChange(id);
|
|
});
|
|
|
|
let dateInputs = document.querySelectorAll("[id^=date-]");
|
|
dateInputs.forEach(dateInput => {
|
|
let id = dateInput.id.split('-')[1];
|
|
let type = document.getElementById(`status-${id}`).dataset.type;
|
|
if (dateInput.value && type === 'KK') {
|
|
updateApprovalText(id, type);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <script>
|
|
document.getElementById('status-{{ $update->id }}').addEventListener('change', function() {
|
|
var notesField = document.getElementById('notes-field-{{ $update->id }}');
|
|
notesField.classList.toggle('hidden', this.value !== 'Ditolak');
|
|
});
|
|
|
|
function setNotes(id, text) {
|
|
document.getElementById('notes-' + id).value = text;
|
|
}
|
|
</script> --}}
|
|
@empty
|
|
@endforelse
|
|
|
|
|
|
{{-- DELETE MODAL --}}
|
|
@forelse ($submissions as $delete)
|
|
<!-- Modal Delete -->
|
|
<div id="delete-modal-{{ $delete->id }}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true"
|
|
class="hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-[calc(100%-1rem)] max-h-full">
|
|
<div class="relative p-4 w-full max-w-md max-h-full">
|
|
<!-- Modal content -->
|
|
<div class="relative bg-white rounded-lg shadow-sm">
|
|
<!-- Modal header -->
|
|
<div class="flex items-center justify-between p-4 border-b rounded-t border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
Konfirmasi Hapus
|
|
</h3>
|
|
<button type="button"
|
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
|
|
data-modal-hide="delete-modal-{{ $delete->id }}">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
|
</svg>
|
|
<span class="sr-only">Tutup modal</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal body -->
|
|
<div class="p-4">
|
|
<p class="text-sm text-gray-700">Apakah Anda yakin ingin menghapus data berikut?</p>
|
|
<p class="text-sm font-medium text-gray-900 mt-2">{{ $delete->name }} - {{ $delete->type }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Modal footer -->
|
|
<div class="flex justify-end p-4 border-t border-gray-200">
|
|
<button data-modal-hide="delete-modal-{{ $delete->id }}" type="button"
|
|
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
Batal
|
|
</button>
|
|
<form action="{{ route('submission.destroy', $delete->id) }}" method="POST" class="ml-2">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
@endforelse
|
|
|
|
{{-- INFO MODAL --}}
|
|
@forelse ($submissions as $info)
|
|
<!-- Modal Info -->
|
|
<div id="info-modal-{{ $info->id }}" data-modal-backdrop="static" tabindex="-1" aria-hidden="true"
|
|
class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-black/50">
|
|
|
|
<div class="relative p-4 w-full max-w-md bg-white rounded-lg shadow-lg">
|
|
<!-- Modal Header -->
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<div class="flex flex-col space-y-2">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
Syarat Pembuatan {{ $info->type }}
|
|
</h3>
|
|
<h2 class="text-lg font-semibold text-gray-800">
|
|
{{ $info->subtype }}
|
|
</h2>
|
|
</div>
|
|
|
|
<button type="button"
|
|
class="text-gray-400 hover:bg-gray-200 hover:text-gray-900
|
|
rounded-lg text-sm w-8 h-8 flex justify-center items-center"
|
|
data-modal-hide="info-modal-{{ $info->id }}">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 14 14">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M1 1l6 6m0 0l6 6M7 7l6-6M7 7L1 13" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="p-4 space-y-4 max-h-96 overflow-y-auto">
|
|
@if (!empty($info->data))
|
|
@foreach ($info->data as $label => $value)
|
|
@php
|
|
$extension = pathinfo($value, PATHINFO_EXTENSION);
|
|
$isImage = in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
|
|
@endphp
|
|
|
|
<div class="flex items-center gap-4 p-2 border border-gray-200 rounded-lg">
|
|
@if ($isImage)
|
|
<img src="{{ asset('storage/' . $value) }}" alt="{{ $label }}"
|
|
class="w-16 h-16 rounded-lg border border-gray-300 shadow-sm object-cover cursor-pointer"
|
|
onclick="openImageModal('{{ asset('storage/' . $value) }}')">
|
|
@else
|
|
<div class="w-16 h-16 rounded-lg border border-gray-300 shadow-sm flex items-center justify-center bg-gray-100 text-gray-500 text-sm" hidden>
|
|
|
|
</div>
|
|
@endif
|
|
|
|
<div>
|
|
<p class="text-gray-800 text-sm font-medium">{{ $label }}</p>
|
|
@if (!$isImage)
|
|
<p class="text-gray-600 text-sm">{{ $value }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<p class="text-gray-500 text-center">Tidak ada data yang tersedia.</p>
|
|
@endif
|
|
|
|
@if ($info->proof_file)
|
|
<p class="text-gray-500 text-center">Berikut Lampirannya</p>
|
|
<img src="{{ asset('storage/' . $info->proof_file) }}" alt="Proof" class="w-full h-auto">
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="flex justify-end p-4 border-t border-gray-200 gap-2">
|
|
<button data-modal-hide="info-modal-{{ $info->id }}" type="button"
|
|
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
Batal
|
|
</button>
|
|
<button data-modal-target="modal-update-{{ $info->id }}"
|
|
data-modal-toggle="modal-update-{{ $info->id }}" type="button"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-4 focus:ring-blue-300">
|
|
Update Status
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<p class="text-gray-500 text-center">Belum ada data pengajuan.</p>
|
|
@endforelse
|
|
|
|
<!-- MODAL UNTUK MENAMPILKAN GAMBAR FULL-SCREEN -->
|
|
<div id="image-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
|
|
<button class="absolute top-5 right-5 text-white text-3xl hover:text-gray-300"
|
|
onclick="closeImageModal()">×</button>
|
|
<img id="modal-image" class="max-w-full max-h-screen object-contain">
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT UNTUK MODAL GAMBAR -->
|
|
<script>
|
|
function openImageModal(imageSrc) {
|
|
document.getElementById('modal-image').src = imageSrc;
|
|
document.getElementById('image-modal').classList.remove('hidden');
|
|
}
|
|
function closeImageModal() {
|
|
document.getElementById('image-modal').classList.add('hidden');
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</x-AppLayout> |