fix desain

This commit is contained in:
Muzakki Parsaoran Siregar 2025-09-12 15:34:43 +07:00
parent 6febfcfe9a
commit 342ad702e3

View File

@ -62,7 +62,9 @@
<tbody>
@forelse($templates as $key => $template)
<tr>
<td class="p-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
<td class="p-2 border border-gray-300 text-center">
{{ ($templates->currentPage() - 1) * $templates->perPage() + $key + 1 }}
</td>
<td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</td>
<td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
@ -100,9 +102,13 @@
class="inline" onsubmit="return confirm('Hapus template ini?')">
@csrf
@method('DELETE')
<button class="text-red-600 hover:underline flex items-center">
<button
class="text-red-600 hover:underline flex items-center btn-delete-template"
data-action="{{ route('templates.destroy', $template->id) }}"
data-name="{{ $template->nama_template }}">
<i class="bi bi-trash mr-1"></i> Hapus
</button>
</form>
</div>
</td>
@ -118,6 +124,30 @@
</div>
</div>
<!-- Modal Konfirmasi Hapus Template -->
<div id="modalDeleteTemplate" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50" id="modalDeleteTemplateOverlay"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<form id="deleteTemplateForm" method="POST">
@csrf
@method('DELETE')
<div class="p-4 border-b">
<h5 class="text-lg font-medium">Hapus Template</h5>
</div>
<div class="p-4">
Apakah Anda yakin ingin menghapus template <strong id="deleteTemplateName"></strong>?
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" id="closeDeleteTemplateModal"
class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
<button type="submit" class="bg-red-600 text-white px-3 py-1 rounded">Ya, Hapus</button>
</div>
</form>
</div>
</div>
<!-- Pagination -->
@if ($templates->hasPages())
<div class="p-4 flex justify-center">
@ -377,6 +407,31 @@
}
});
});
// Modal Delete Template
const deleteTemplateModal = document.getElementById('modalDeleteTemplate');
const deleteTemplateOverlay = document.getElementById('modalDeleteTemplateOverlay');
const closeDeleteTemplateModal = document.getElementById('closeDeleteTemplateModal');
const deleteTemplateForm = document.getElementById('deleteTemplateForm');
const deleteTemplateName = document.getElementById('deleteTemplateName');
document.querySelectorAll('.btn-delete-template').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault(); // cegah form langsung submit
deleteTemplateForm.action = btn.dataset.action;
deleteTemplateName.textContent = btn.dataset.name || 'template ini';
deleteTemplateModal.classList.remove('hidden');
deleteTemplateModal.classList.add('flex');
});
});
const closeDeleteModalTemplate = () => {
deleteTemplateModal.classList.add('hidden');
deleteTemplateModal.classList.remove('flex');
};
closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
});
</script>
</div>