fix desain
This commit is contained in:
parent
c1848e0493
commit
5fe5273865
@ -110,414 +110,474 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada template</td>
|
||||
<td colspan="7" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada
|
||||
template</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Tambah Template -->
|
||||
@if (!isset($kategori))
|
||||
<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="bg-white rounded-lg shadow-lg w-full max-w-md z-50 flex flex-col max-h-[90vh]">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="p-4 border-b sticky top-0 bg-white z-10">
|
||||
<h5 class="text-lg font-medium">Tambah Template</h5>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<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
|
||||
|
||||
<!-- 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>
|
||||
<label class="block text-sm font-medium">Nama Template</label>
|
||||
<input type="text" name="nama_template" class="w-full p-2 border rounded" required
|
||||
value="{{ old('nama_template') }}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Kategori</label>
|
||||
<select name="kategori_id" id="kategoriSelectTambah" class="w-full p-2 border rounded">
|
||||
<option value="">-- Pilih Kategori --</option>
|
||||
@foreach ($kategoris as $kategoriItem)
|
||||
<option value="{{ $kategoriItem->id }}" @selected(old('kategori_id') == $kategoriItem->id)>
|
||||
{{ $kategoriItem->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@php
|
||||
$total = $templates->lastPage();
|
||||
$current = $templates->currentPage();
|
||||
@endphp
|
||||
|
||||
<!-- FITUR -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Fitur</label>
|
||||
<div id="fiturContainerTambah"
|
||||
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
||||
@foreach ($kategoriFiturs as $kategoriFitur)
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">
|
||||
{{ $kategoriFitur->deskripsi }}
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fiturs->where('kategori_fitur_id', $kategoriFitur->id) as $fitur)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="radio" name="fitur_id[{{ $kategoriFitur->id }}]"
|
||||
value="{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"
|
||||
@checked(old("fitur_id.$kategoriFitur->id") == $fitur->id)>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fitur->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
{{-- 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
|
||||
|
||||
@if ($fitursTanpaKategori->count())
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fitursTanpaKategori as $fitur)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="fitur_id[]"
|
||||
value="{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"
|
||||
{{ is_array(old('fitur_id')) && in_array($fitur->id, old('fitur_id')) ? 'checked' : '' }}>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fitur->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
{{-- Halaman 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
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Harga</label>
|
||||
<input type="text" name="harga" class="w-full p-2 border rounded" required
|
||||
min="0" value="{{ old('harga') }}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Foto (opsional)</label>
|
||||
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
||||
<small class="text-gray-500">Format: JPG, PNG, GIF. Maks 5MB.</small>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 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
|
||||
|
||||
<!-- 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"
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{-- 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
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Edit Template -->
|
||||
@foreach ($templates as $template)
|
||||
<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="bg-white rounded-lg shadow-lg w-full max-w-md z-50 flex flex-col max-h-[90vh]">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="p-4 border-b sticky top-0 bg-white z-10">
|
||||
<h5 class="text-lg font-medium">Edit Template</h5>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<label class="block text-sm font-medium">Nama Template</label>
|
||||
<input type="text" name="nama_template"
|
||||
value="{{ old('nama_template', $template->nama_template) }}"
|
||||
class="w-full p-2 border rounded" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Kategori</label>
|
||||
<select name="kategori_id" id="kategoriSelectEdit{{ $template->id }}"
|
||||
class="w-full p-2 border rounded">
|
||||
<option value="">-- Pilih Kategori --</option>
|
||||
@foreach ($kategoris as $kategoriItem)
|
||||
<option value="{{ $kategoriItem->id }}" @selected($kategoriItem->id == old('kategori_id', $template->kategori_id))>
|
||||
{{ $kategoriItem->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<!-- Modal Tambah Template -->
|
||||
@if (!isset($kategori))
|
||||
<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="bg-white rounded-lg shadow-lg w-full max-w-md z-50 flex flex-col max-h-[90vh]">
|
||||
|
||||
<!-- FITUR -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Fitur</label>
|
||||
<div id="fiturContainerEdit{{ $template->id }}"
|
||||
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
||||
@foreach ($kategoriFiturs as $kategoriFitur)
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">
|
||||
{{ $kategoriFitur->deskripsi }}
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fiturs->where('kategori_fitur_id', $kategoriFitur->id) as $fiturItem)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="radio" name="fitur_id[{{ $kategoriFitur->id }}]"
|
||||
value="{{ $fiturItem->id }}"
|
||||
data-harga="{{ $fiturItem->harga }}"
|
||||
{{ old("fitur_id.$kategoriFitur->id") == $fiturItem->id || $template->fiturs->contains($fiturItem->id) ? 'checked' : '' }}>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fiturItem->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fiturItem->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<div class="p-4 border-b sticky top-0 bg-white z-10">
|
||||
<h5 class="text-lg font-medium">Tambah Template</h5>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<label class="block text-sm font-medium">Nama Template</label>
|
||||
<input type="text" name="nama_template" class="w-full p-2 border rounded" required
|
||||
value="{{ old('nama_template') }}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Kategori</label>
|
||||
<select name="kategori_id" id="kategoriSelectTambah" class="w-full p-2 border rounded">
|
||||
<option value="">-- Pilih Kategori --</option>
|
||||
@foreach ($kategoris as $kategoriItem)
|
||||
<option value="{{ $kategoriItem->id }}" @selected(old('kategori_id') == $kategoriItem->id)>
|
||||
{{ $kategoriItem->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- FITUR -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Fitur</label>
|
||||
<div id="fiturContainerTambah" class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
||||
@foreach ($kategoriFiturs as $kategoriFitur)
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">
|
||||
{{ $kategoriFitur->deskripsi }}
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fiturs->where('kategori_fitur_id', $kategoriFitur->id) as $fitur)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="radio" name="fitur_id[{{ $kategoriFitur->id }}]"
|
||||
value="{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"
|
||||
@checked(old("fitur_id.$kategoriFitur->id") == $fitur->id)>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fitur->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@if ($fitursTanpaKategori->count())
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fitursTanpaKategori as $fitur)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="fitur_id[]"
|
||||
value="{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"
|
||||
{{ (is_array(old('fitur_id')) && in_array($fitur->id, old('fitur_id'))) || $template->fiturs->contains($fitur->id) ? 'checked' : '' }}>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fitur->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Harga</label>
|
||||
<input type="text" name="harga" value="{{ old('harga', $template->harga) }}"
|
||||
class="w-full p-2 border rounded" required min="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Foto (opsional)</label>
|
||||
@if ($template->foto)
|
||||
<div class="mb-2">
|
||||
<small class="text-gray-500">Foto saat ini:</small>
|
||||
<div
|
||||
class="w-20 h-20 mt-1 overflow-hidden rounded bg-gray-100 flex items-center justify-center border">
|
||||
<img src="{{ asset('storage/' . $template->foto) }}" alt="foto"
|
||||
class="max-w-full max-h-full object-contain">
|
||||
@if ($fitursTanpaKategori->count())
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fitursTanpaKategori as $fitur)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="fitur_id[]"
|
||||
value="{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"
|
||||
{{ is_array(old('fitur_id')) && in_array($fitur->id, old('fitur_id')) ? 'checked' : '' }}>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fitur->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- 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"
|
||||
data-id="{{ $template->id }}">Batal</button>
|
||||
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Harga</label>
|
||||
<input type="text" name="harga" class="w-full p-2 border rounded" required
|
||||
min="0" value="{{ old('harga') }}">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Foto (opsional)</label>
|
||||
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
||||
<small class="text-gray-500">Format: JPG, PNG, GIF. Maks 5MB.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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"
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Modal Edit Template -->
|
||||
@foreach ($templates as $template)
|
||||
<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="bg-white rounded-lg shadow-lg w-full max-w-md z-50 flex flex-col max-h-[90vh]">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="p-4 border-b sticky top-0 bg-white z-10">
|
||||
<h5 class="text-lg font-medium">Edit Template</h5>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<label class="block text-sm font-medium">Nama Template</label>
|
||||
<input type="text" name="nama_template"
|
||||
value="{{ old('nama_template', $template->nama_template) }}"
|
||||
class="w-full p-2 border rounded" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Kategori</label>
|
||||
<select name="kategori_id" id="kategoriSelectEdit{{ $template->id }}"
|
||||
class="w-full p-2 border rounded">
|
||||
<option value="">-- Pilih Kategori --</option>
|
||||
@foreach ($kategoris as $kategoriItem)
|
||||
<option value="{{ $kategoriItem->id }}" @selected($kategoriItem->id == old('kategori_id', $template->kategori_id))>
|
||||
{{ $kategoriItem->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- FITUR -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Fitur</label>
|
||||
<div id="fiturContainerEdit{{ $template->id }}"
|
||||
class="space-y-3 max-h-64 overflow-auto p-2 border rounded">
|
||||
@foreach ($kategoriFiturs as $kategoriFitur)
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">
|
||||
{{ $kategoriFitur->deskripsi }}
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fiturs->where('kategori_fitur_id', $kategoriFitur->id) as $fiturItem)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="radio" name="fitur_id[{{ $kategoriFitur->id }}]"
|
||||
value="{{ $fiturItem->id }}"
|
||||
data-harga="{{ $fiturItem->harga }}"
|
||||
{{ old("fitur_id.$kategoriFitur->id") == $fiturItem->id || $template->fiturs->contains($fiturItem->id) ? 'checked' : '' }}>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fiturItem->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fiturItem->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@if ($fitursTanpaKategori->count())
|
||||
<div>
|
||||
<p class="font-semibold text-gray-700 mb-1">Fitur Lainnya</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach ($fitursTanpaKategori as $fitur)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="fitur_id[]"
|
||||
value="{{ $fitur->id }}" data-harga="{{ $fitur->harga }}"
|
||||
{{ (is_array(old('fitur_id')) && in_array($fitur->id, old('fitur_id'))) || $template->fiturs->contains($fitur->id) ? 'checked' : '' }}>
|
||||
<span class="text-sm">
|
||||
{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
|
||||
(Rp {{ number_format($fitur->harga, 0, ',', '.') }})
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Harga</label>
|
||||
<input type="text" name="harga" value="{{ old('harga', $template->harga) }}"
|
||||
class="w-full p-2 border rounded" required min="0">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Foto (opsional)</label>
|
||||
@if ($template->foto)
|
||||
<div class="mb-2">
|
||||
<small class="text-gray-500">Foto saat ini:</small>
|
||||
<div
|
||||
class="w-20 h-20 mt-1 overflow-hidden rounded bg-gray-100 flex items-center justify-center border">
|
||||
<img src="{{ asset('storage/' . $template->foto) }}" alt="foto"
|
||||
class="max-w-full max-h-full object-contain">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- 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"
|
||||
data-id="{{ $template->id }}">Batal</button>
|
||||
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// =========================
|
||||
// Modal Tambah
|
||||
// =========================
|
||||
const openTambahModal = document.getElementById('openTambahModal');
|
||||
const modalTambah = document.getElementById('modalTambah');
|
||||
const closeTambahBtn = document.getElementById('closeTambahBtn');
|
||||
const closeTambahOverlay = document.getElementById('closeTambahModal');
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// =========================
|
||||
// Modal Tambah
|
||||
// =========================
|
||||
const openTambahModal = document.getElementById('openTambahModal');
|
||||
const modalTambah = document.getElementById('modalTambah');
|
||||
const closeTambahBtn = document.getElementById('closeTambahBtn');
|
||||
const closeTambahOverlay = document.getElementById('closeTambahModal');
|
||||
|
||||
if (openTambahModal) {
|
||||
openTambahModal.addEventListener('click', () => {
|
||||
modalTambah.classList.remove('hidden');
|
||||
modalTambah.classList.add('flex');
|
||||
});
|
||||
}
|
||||
if (closeTambahBtn) {
|
||||
closeTambahBtn.addEventListener('click', () => {
|
||||
modalTambah.classList.add('hidden');
|
||||
modalTambah.classList.remove('flex');
|
||||
});
|
||||
}
|
||||
if (closeTambahOverlay) {
|
||||
closeTambahOverlay.addEventListener('click', () => {
|
||||
modalTambah.classList.add('hidden');
|
||||
modalTambah.classList.remove('flex');
|
||||
});
|
||||
}
|
||||
|
||||
// =========================
|
||||
// Modal Edit
|
||||
// =========================
|
||||
const openEditBtns = document.querySelectorAll('.openEditModalBtn');
|
||||
const closeEditBtns = document.querySelectorAll('.closeEditBtn');
|
||||
const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
|
||||
|
||||
openEditBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.dataset.id;
|
||||
const modal = document.getElementById('modalEdit' + id);
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
modal.classList.add('flex');
|
||||
}
|
||||
});
|
||||
if (openTambahModal) {
|
||||
openTambahModal.addEventListener('click', () => {
|
||||
modalTambah.classList.remove('hidden');
|
||||
modalTambah.classList.add('flex');
|
||||
});
|
||||
|
||||
closeEditBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.dataset.id;
|
||||
const modal = document.getElementById('modalEdit' + id);
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (closeTambahBtn) {
|
||||
closeTambahBtn.addEventListener('click', () => {
|
||||
modalTambah.classList.add('hidden');
|
||||
modalTambah.classList.remove('flex');
|
||||
});
|
||||
|
||||
closeEditOverlays.forEach(overlay => {
|
||||
overlay.addEventListener('click', () => {
|
||||
const id = overlay.dataset.id;
|
||||
const modal = document.getElementById('modalEdit' + id);
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (closeTambahOverlay) {
|
||||
closeTambahOverlay.addEventListener('click', () => {
|
||||
modalTambah.classList.add('hidden');
|
||||
modalTambah.classList.remove('flex');
|
||||
});
|
||||
}
|
||||
|
||||
// =========================
|
||||
// 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');
|
||||
// =========================
|
||||
// Modal Edit
|
||||
// =========================
|
||||
const openEditBtns = document.querySelectorAll('.openEditModalBtn');
|
||||
const closeEditBtns = document.querySelectorAll('.closeEditBtn');
|
||||
const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
|
||||
|
||||
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');
|
||||
};
|
||||
|
||||
if (closeDeleteTemplateModal) {
|
||||
closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
|
||||
}
|
||||
if (deleteTemplateOverlay) {
|
||||
deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
|
||||
}
|
||||
|
||||
// =========================
|
||||
// Fitur: Hitung Harga Otomatis + Format ribuan
|
||||
// =========================
|
||||
function formatRibuan(x) {
|
||||
if (!x) return '';
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
||||
}
|
||||
|
||||
function hitungHarga(container) {
|
||||
let total = 0;
|
||||
|
||||
// Hitung checkbox (fitur tanpa kategori)
|
||||
container.querySelectorAll('input[type="checkbox"][name="fitur_id[]"]:checked')
|
||||
.forEach(cb => {
|
||||
total += parseInt(cb.dataset.harga) || 0;
|
||||
});
|
||||
|
||||
// Hitung radio (fitur per kategori)
|
||||
container.querySelectorAll('input[type="radio"]:checked')
|
||||
.forEach(radio => {
|
||||
total += parseInt(radio.dataset.harga) || 0;
|
||||
});
|
||||
|
||||
const inputHarga = container.querySelector('input[name="harga"]');
|
||||
if (inputHarga && !inputHarga.dataset.manual) {
|
||||
inputHarga.value = formatRibuan(total);
|
||||
openEditBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.dataset.id;
|
||||
const modal = document.getElementById('modalEdit' + id);
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
modal.classList.add('flex');
|
||||
}
|
||||
}
|
||||
|
||||
// Format harga manual + tetap auto ribuan
|
||||
document.querySelectorAll('input[name="harga"]').forEach(input => {
|
||||
input.classList.add("harga-input"); // pastikan ada class
|
||||
input.addEventListener('input', (e) => {
|
||||
let value = e.target.value.replace(/\D/g, ''); // hanya angka
|
||||
e.target.value = formatRibuan(value);
|
||||
e.target.dataset.manual = "true"; // flag manual
|
||||
});
|
||||
});
|
||||
|
||||
// Modal Tambah
|
||||
if (modalTambah) {
|
||||
const inputs = modalTambah.querySelectorAll('input[name="fitur_id[]"], input[type="radio"]');
|
||||
const inputHarga = modalTambah.querySelector('input[name="harga"]');
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('change', () => hitungHarga(modalTambah));
|
||||
});
|
||||
|
||||
if (inputHarga) {
|
||||
inputHarga.addEventListener('input', () => {
|
||||
inputHarga.dataset.manual = "true";
|
||||
});
|
||||
}
|
||||
|
||||
// Hitung awal kalau ada yang sudah tercentang
|
||||
hitungHarga(modalTambah);
|
||||
}
|
||||
|
||||
// Modal Edit (banyak)
|
||||
document.querySelectorAll('[id^="modalEdit"]').forEach(modal => {
|
||||
const inputs = modal.querySelectorAll('input[name="fitur_id[]"], input[type="radio"]');
|
||||
const inputHarga = modal.querySelector('input[name="harga"]');
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('change', () => hitungHarga(modal));
|
||||
});
|
||||
|
||||
if (inputHarga) {
|
||||
inputHarga.addEventListener('input', () => {
|
||||
inputHarga.dataset.manual = "true";
|
||||
});
|
||||
}
|
||||
|
||||
// Hitung awal kalau ada yang sudah tercentang
|
||||
hitungHarga(modal);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
closeEditBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.dataset.id;
|
||||
const modal = document.getElementById('modalEdit' + id);
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
closeEditOverlays.forEach(overlay => {
|
||||
overlay.addEventListener('click', () => {
|
||||
const id = overlay.dataset.id;
|
||||
const modal = document.getElementById('modalEdit' + id);
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// =========================
|
||||
// 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');
|
||||
};
|
||||
|
||||
if (closeDeleteTemplateModal) {
|
||||
closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
|
||||
}
|
||||
if (deleteTemplateOverlay) {
|
||||
deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
|
||||
}
|
||||
|
||||
// =========================
|
||||
// Fitur: Hitung Harga Otomatis + Format ribuan
|
||||
// =========================
|
||||
function formatRibuan(x) {
|
||||
if (!x) return '';
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
||||
}
|
||||
|
||||
function hitungHarga(container) {
|
||||
let total = 0;
|
||||
|
||||
// Hitung checkbox (fitur tanpa kategori)
|
||||
container.querySelectorAll('input[type="checkbox"][name="fitur_id[]"]:checked')
|
||||
.forEach(cb => {
|
||||
total += parseInt(cb.dataset.harga) || 0;
|
||||
});
|
||||
|
||||
// Hitung radio (fitur per kategori)
|
||||
container.querySelectorAll('input[type="radio"]:checked')
|
||||
.forEach(radio => {
|
||||
total += parseInt(radio.dataset.harga) || 0;
|
||||
});
|
||||
|
||||
const inputHarga = container.querySelector('input[name="harga"]');
|
||||
if (inputHarga && !inputHarga.dataset.manual) {
|
||||
inputHarga.value = formatRibuan(total);
|
||||
}
|
||||
}
|
||||
|
||||
// Format harga manual + tetap auto ribuan
|
||||
document.querySelectorAll('input[name="harga"]').forEach(input => {
|
||||
input.classList.add("harga-input"); // pastikan ada class
|
||||
input.addEventListener('input', (e) => {
|
||||
let value = e.target.value.replace(/\D/g, ''); // hanya angka
|
||||
e.target.value = formatRibuan(value);
|
||||
e.target.dataset.manual = "true"; // flag manual
|
||||
});
|
||||
});
|
||||
|
||||
// Modal Tambah
|
||||
if (modalTambah) {
|
||||
const inputs = modalTambah.querySelectorAll('input[name="fitur_id[]"], input[type="radio"]');
|
||||
const inputHarga = modalTambah.querySelector('input[name="harga"]');
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('change', () => hitungHarga(modalTambah));
|
||||
});
|
||||
|
||||
if (inputHarga) {
|
||||
inputHarga.addEventListener('input', () => {
|
||||
inputHarga.dataset.manual = "true";
|
||||
});
|
||||
}
|
||||
|
||||
// Hitung awal kalau ada yang sudah tercentang
|
||||
hitungHarga(modalTambah);
|
||||
}
|
||||
|
||||
// Modal Edit (banyak)
|
||||
document.querySelectorAll('[id^="modalEdit"]').forEach(modal => {
|
||||
const inputs = modal.querySelectorAll('input[name="fitur_id[]"], input[type="radio"]');
|
||||
const inputHarga = modal.querySelector('input[name="harga"]');
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('change', () => hitungHarga(modal));
|
||||
});
|
||||
|
||||
if (inputHarga) {
|
||||
inputHarga.addEventListener('input', () => {
|
||||
inputHarga.dataset.manual = "true";
|
||||
});
|
||||
}
|
||||
|
||||
// Hitung awal kalau ada yang sudah tercentang
|
||||
hitungHarga(modal);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user