[templete]
This commit is contained in:
parent
c53e42a12f
commit
c720cc460f
@ -21,7 +21,7 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Flash & Errors (sama seperti sebelumnya) -->
|
<!-- Flash & Errors -->
|
||||||
@if (session('success'))
|
@if (session('success'))
|
||||||
<div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
|
<div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
|
||||||
{{ session('success') }}
|
{{ session('success') }}
|
||||||
@ -67,8 +67,6 @@
|
|||||||
</td>
|
</td>
|
||||||
<td class="p-2 border border-gray-300 truncate">{{ $template->nama_template }}</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>
|
<td class="p-2 border border-gray-300 truncate">{{ $template->kategori->nama ?? '-' }}</td>
|
||||||
|
|
||||||
<!-- Tampilkan banyak fitur -->
|
|
||||||
<td class="p-2 border border-gray-300 align-top">
|
<td class="p-2 border border-gray-300 align-top">
|
||||||
<div class="flex flex-wrap gap-1">
|
<div class="flex flex-wrap gap-1">
|
||||||
@forelse($template->fiturs as $f)
|
@forelse($template->fiturs as $f)
|
||||||
@ -106,15 +104,13 @@
|
|||||||
data-name="{{ $template->nama_template }}">
|
data-name="{{ $template->nama_template }}">
|
||||||
<i class="bi bi-trash mr-1"></i> Hapus
|
<i class="bi bi-trash mr-1"></i> Hapus
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@empty
|
@empty
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="7" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada
|
<td colspan="7" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada template</td>
|
||||||
template</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
@endforelse
|
@endforelse
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -122,99 +118,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
|
||||||
<div class="flex space-x-1">
|
|
||||||
{{-- Tombol Previous --}}
|
|
||||||
@if ($templates->onFirstPage())
|
|
||||||
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Prev</span>
|
|
||||||
@else
|
|
||||||
<a href="{{ $templates->previousPageUrl() }}"
|
|
||||||
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Prev</a>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@php
|
|
||||||
$total = $templates->lastPage();
|
|
||||||
$current = $templates->currentPage();
|
|
||||||
@endphp
|
|
||||||
|
|
||||||
{{-- Selalu tampilkan halaman pertama --}}
|
|
||||||
@if ($current > 2)
|
|
||||||
<a href="{{ $templates->url(1) }}"
|
|
||||||
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">1</a>
|
|
||||||
@if ($current > 3)
|
|
||||||
<span class="px-3 py-1 text-gray-500">...</span>
|
|
||||||
@endif
|
|
||||||
@endif
|
|
||||||
|
|
||||||
{{-- Hanya tampilkan 3 halaman di tengah --}}
|
|
||||||
@for ($i = max(1, $current - 1); $i <= min($total, $current + 1); $i++)
|
|
||||||
@if ($i == $current)
|
|
||||||
<span
|
|
||||||
class="px-3 py-1 rounded-lg bg-blue-600 text-white font-semibold">{{ $i }}</span>
|
|
||||||
@else
|
|
||||||
<a href="{{ $templates->url($i) }}"
|
|
||||||
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $i }}</a>
|
|
||||||
@endif
|
|
||||||
@endfor
|
|
||||||
|
|
||||||
{{-- Selalu tampilkan halaman terakhir --}}
|
|
||||||
@if ($current < $total - 1)
|
|
||||||
@if ($current < $total - 2)
|
|
||||||
<span class="px-3 py-1 text-gray-500">...</span>
|
|
||||||
@endif
|
|
||||||
<a href="{{ $templates->url($total) }}"
|
|
||||||
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-blue-100">{{ $total }}</a>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
{{-- Tombol Next --}}
|
|
||||||
@if ($templates->hasMorePages())
|
|
||||||
<a href="{{ $templates->nextPageUrl() }}"
|
|
||||||
class="px-3 py-1 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300">Next</a>
|
|
||||||
@else
|
|
||||||
<span class="px-3 py-1 rounded-lg bg-gray-200 text-gray-500 cursor-not-allowed">Next</span>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Modal Tambah Template -->
|
<!-- Modal Tambah Template -->
|
||||||
@if (!isset($kategori))
|
@if (!isset($kategori))
|
||||||
<div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
|
<div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
|
||||||
<div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
|
<div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
|
||||||
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 flex flex-col max-h-[90vh]">
|
||||||
<form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data">
|
|
||||||
@csrf
|
<!-- Header -->
|
||||||
<div class="p-4 border-b">
|
<div class="p-4 border-b sticky top-0 bg-white z-10">
|
||||||
<h5 class="text-lg font-medium">Tambah Template</h5>
|
<h5 class="text-lg font-medium">Tambah Template</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 space-y-4">
|
|
||||||
|
<!-- Scrollable content -->
|
||||||
|
<div class="p-4 space-y-4 overflow-y-auto flex-1">
|
||||||
|
<form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data" class="h-full flex flex-col">
|
||||||
|
@csrf
|
||||||
|
<div class="flex-1 space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium">Nama Template</label>
|
<label class="block text-sm font-medium">Nama Template</label>
|
||||||
<input type="text" name="nama_template" class="w-full p-2 border rounded" required
|
<input type="text" name="nama_template" class="w-full p-2 border rounded" required
|
||||||
@ -237,8 +156,6 @@
|
|||||||
<label class="block text-sm font-medium">Fitur</label>
|
<label class="block text-sm font-medium">Fitur</label>
|
||||||
<div id="fiturContainerTambah"
|
<div id="fiturContainerTambah"
|
||||||
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
||||||
|
|
||||||
{{-- Fitur dengan kategori → radio --}}
|
|
||||||
@foreach ($kategoriFiturs as $kategoriFitur)
|
@foreach ($kategoriFiturs as $kategoriFitur)
|
||||||
<div>
|
<div>
|
||||||
<p class="font-semibold text-gray-700 mb-1">
|
<p class="font-semibold text-gray-700 mb-1">
|
||||||
@ -260,7 +177,6 @@
|
|||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
{{-- Fitur tanpa kategori → checkbox --}}
|
|
||||||
@if ($fitursTanpaKategori->count())
|
@if ($fitursTanpaKategori->count())
|
||||||
<div>
|
<div>
|
||||||
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
||||||
@ -293,7 +209,9 @@
|
|||||||
<small class="text-gray-500">Format: JPG, PNG, GIF. Maks 5MB.</small>
|
<small class="text-gray-500">Format: JPG, PNG, GIF. Maks 5MB.</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 border-t flex justify-end space-x-2">
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="p-4 border-t flex justify-end space-x-2 sticky bottom-0 bg-white z-10">
|
||||||
<button type="button" id="closeTambahBtn"
|
<button type="button" id="closeTambahBtn"
|
||||||
class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
|
class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
|
||||||
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
|
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
|
||||||
@ -301,20 +219,26 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<!-- Modal Edit Template -->
|
<!-- Modal Edit Template -->
|
||||||
@foreach ($templates as $template)
|
@foreach ($templates as $template)
|
||||||
<div id="modalEdit{{ $template->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
|
<div id="modalEdit{{ $template->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
|
||||||
<div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $template->id }}"></div>
|
<div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $template->id }}"></div>
|
||||||
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 flex flex-col max-h-[90vh]">
|
||||||
<form action="{{ route('templates.update', $template->id) }}" method="POST"
|
|
||||||
enctype="multipart/form-data">
|
<!-- Header -->
|
||||||
@csrf @method('PUT')
|
<div class="p-4 border-b sticky top-0 bg-white z-10">
|
||||||
<div class="p-4 border-b">
|
|
||||||
<h5 class="text-lg font-medium">Edit Template</h5>
|
<h5 class="text-lg font-medium">Edit Template</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 space-y-4">
|
|
||||||
|
<!-- Scrollable content -->
|
||||||
|
<div class="p-4 space-y-4 overflow-y-auto flex-1">
|
||||||
|
<form action="{{ route('templates.update', $template->id) }}" method="POST"
|
||||||
|
enctype="multipart/form-data" class="h-full flex flex-col">
|
||||||
|
@csrf @method('PUT')
|
||||||
|
<div class="flex-1 space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium">Nama Template</label>
|
<label class="block text-sm font-medium">Nama Template</label>
|
||||||
<input type="text" name="nama_template"
|
<input type="text" name="nama_template"
|
||||||
@ -339,8 +263,6 @@
|
|||||||
<label class="block text-sm font-medium">Fitur</label>
|
<label class="block text-sm font-medium">Fitur</label>
|
||||||
<div id="fiturContainerEdit{{ $template->id }}"
|
<div id="fiturContainerEdit{{ $template->id }}"
|
||||||
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
||||||
|
|
||||||
{{-- Fitur dengan kategori → radio --}}
|
|
||||||
@foreach ($kategoriFiturs as $kategoriFitur)
|
@foreach ($kategoriFiturs as $kategoriFitur)
|
||||||
<div>
|
<div>
|
||||||
<p class="font-semibold text-gray-700 mb-1">
|
<p class="font-semibold text-gray-700 mb-1">
|
||||||
@ -363,7 +285,6 @@
|
|||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
{{-- Fitur tanpa kategori → checkbox --}}
|
|
||||||
@if ($fitursTanpaKategori->count())
|
@if ($fitursTanpaKategori->count())
|
||||||
<div>
|
<div>
|
||||||
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
||||||
@ -405,7 +326,9 @@
|
|||||||
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 border-t flex justify-end space-x-2">
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="p-4 border-t flex justify-end space-x-2 sticky bottom-0 bg-white z-10">
|
||||||
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
|
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
|
||||||
data-id="{{ $template->id }}">Batal</button>
|
data-id="{{ $template->id }}">Batal</button>
|
||||||
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
|
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
|
||||||
@ -413,6 +336,7 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user