From c53e42a12f44e638f3676459c6de3d777da8dd89 Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Thu, 18 Sep 2025 11:48:45 +0700
Subject: [PATCH] [Fix templete harga]

---
 .../views/admin/templates/index.blade.php     | 738 +++++++++---------
 1 file changed, 367 insertions(+), 371 deletions(-)

diff --git a/backend/resources/views/admin/templates/index.blade.php b/backend/resources/views/admin/templates/index.blade.php
index 3a6aae8..63cba52 100644
--- a/backend/resources/views/admin/templates/index.blade.php
+++ b/backend/resources/views/admin/templates/index.blade.php
@@ -204,400 +204,396 @@
         @endif
 
 
-    <!-- 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 overflow-hidden">
-            <form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data">
-                @csrf
-                <div class="p-4 border-b">
-                    <h5 class="text-lg font-medium">Tambah Template</h5>
-                </div>
-                <div class="p-4 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">
-
-                            {{-- Fitur dengan kategori → radio --}}
-                            @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
-
-                            {{-- Fitur tanpa kategori → checkbox --}}
-                            @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
+        <!-- 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 overflow-hidden">
+                    <form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data">
+                        @csrf
+                        <div class="p-4 border-b">
+                            <h5 class="text-lg font-medium">Tambah Template</h5>
                         </div>
-                    </div>
+                        <div class="p-4 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>
 
-                    <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>
-                <div class="p-4 border-t flex justify-end space-x-2">
-                    <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>
-@endif
+                            <!-- 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">
 
-<!-- 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 overflow-hidden">
-            <form action="{{ route('templates.update', $template->id) }}" method="POST"
-                  enctype="multipart/form-data">
-                @csrf @method('PUT')
-                <div class="p-4 border-b">
-                    <h5 class="text-lg font-medium">Edit Template</h5>
-                </div>
-                <div class="p-4 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 dengan kategori → radio --}}
+                                    @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
 
-                    <!-- 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">
-
-                            {{-- Fitur dengan kategori → radio --}}
-                            @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
-
-                            {{-- Fitur tanpa kategori → checkbox --}}
-                            @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="number" 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">
+                                    {{-- Fitur tanpa kategori → checkbox --}}
+                                    @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>
-                        @endif
-                        <input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
-                    </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>
+                        <div class="p-4 border-t flex justify-end space-x-2">
+                            <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 class="p-4 border-t flex justify-end space-x-2">
-                    <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>
+        @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 overflow-hidden">
+                    <form action="{{ route('templates.update', $template->id) }}" method="POST"
+                        enctype="multipart/form-data">
+                        @csrf @method('PUT')
+                        <div class="p-4 border-b">
+                            <h5 class="text-lg font-medium">Edit Template</h5>
+                        </div>
+                        <div class="p-4 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">
+
+                                    {{-- Fitur dengan kategori → radio --}}
+                                    @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
+
+                                    {{-- Fitur tanpa kategori → checkbox --}}
+                                    @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>
+                        <div class="p-4 border-t flex justify-end space-x-2">
+                            <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>
+                    </form>
                 </div>
-            </form>
-        </div>
-    </div>
-@endforeach
+            </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');
-        });
-    }
+                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');
+                // =========================
+                // 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');
-            }
-        });
-    });
+                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');
+                        }
+                    });
+                });
 
-    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');
-            }
-        });
-    });
+                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');
-            }
-        });
-    });
+                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');
+                // =========================
+                // 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');
-        });
-    });
+                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');
-    };
+                const closeDeleteModalTemplate = () => {
+                    deleteTemplateModal.classList.add('hidden');
+                    deleteTemplateModal.classList.remove('flex');
+                };
 
-    if (closeDeleteTemplateModal) {
-        closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
-    }
-    if (deleteTemplateOverlay) {
-        deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
-    }
+                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, ".");
-    }
+                // =========================
+                // 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;
+                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 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);
+                });
             });
-
-        // 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>
+        </script>
 
 
     </div>