progress master menu

app/Http/Controllers/KlasifikasiMenuController.php

@@ -126,4 +126,20 @@ class KlasifikasiMenuController extends Controller
     public function datatable(){
         return KlasifikasiMenu::where('statusenabled', true)->get();
     }
+
+    public function optionKlasifikasi(){
+        $search =  request('search');
+        $query = KlasifikasiMenu::where('statusenabled', true);
+
+        if(!empty($search)){
+            $query->where('nama_kategori_diet', 'ILIKE', '%' . $search . '%');
+        }else{
+            $query->take(30);
+        }
+        $data = $query->select('kategori_diet_id', 'nama_kategori_diet')->get();
+        return response()->json([
+            'error' => 0,
+            'data' => $data
+        ]);
+    }
 }

public/assets/css/demo.css

@@ -127,3 +127,6 @@
 .swal2-backdrop-show {
   z-index: 9998 !important;
 }
+.tagify__dropdown {
+  z-index: 99999 !important;
+}

public/js/menu/action.js

@@ -1,9 +1,8 @@
-
 document.addEventListener('DOMContentLoaded', function () {
   const formSetsContainer = document.getElementById('form-sets-container');
   const btnTambahForm = document.getElementById('btnTambahForm');
 
-  // Auto-expand untuk textarea
+  // Auto-expand textarea
   function autoExpand(textarea) {
     textarea.addEventListener('input', function () {
       this.style.height = 'auto';
@@ -11,46 +10,58 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
-  // Inisialisasi Tagify
+  // Inisialisasi Selectize
-  function initTagifyAll() {
+  function initSelectizeAll(context = document) {
-    document.querySelectorAll('input.tags-input').forEach(input => {
+    $(context).find('.tags-menu').selectize(selectizeConfigTagsMenu);
-      if (!input._tagify) {
+    $(context).find('.date-input').selectize(selectizeConfigDateInput);
-        new Tagify(input);
   }
+
+  // Destroy semua selectize sebelum clone
+  function destroySelectize(context) {
+    context.querySelectorAll('select').forEach(select => {
+      const instance = select.selectize;
+      if (instance) instance.destroy();
     });
   }
 
   // Inisialisasi awal
   document.querySelectorAll('.auto-expand').forEach(autoExpand);
-  initTagifyAll();
+  initSelectizeAll();
 
   // Tambah form-set
   btnTambahForm.addEventListener('click', function () {
     const lastFormSet = formSetsContainer.querySelector('.form-set:last-of-type');
+
+    // Destroy selectize sebelum clone
+    destroySelectize(lastFormSet);
+
     const clone = lastFormSet.cloneNode(true);
 
-    // Bersihkan field
+    // Bersihkan input dan textarea
-    clone.querySelectorAll('input, textarea, select').forEach(el => {
+    clone.querySelectorAll('input, textarea').forEach(el => {
       if (el.type === 'file') {
         el.value = null;
       } else {
         el.value = '';
       }
-
-      if (el._tagify) el._tagify.destroy();
     });
 
-    clone.querySelectorAll('.tagify').forEach(el => el.remove());
+    // Bersihkan select (hapus .selectize dan reset element <select>)
+    clone.querySelectorAll('select').forEach(select => {
+      const wrapper = select.parentElement.querySelector('.selectize-control');
+      if (wrapper) wrapper.remove();
+      select.innerHTML = ''; // Kosongkan option, bisa diisi ulang lewat AJAX
+    });
 
-    // Show tombol hapus
+    // Tampilkan tombol hapus
     clone.querySelector('.btn-remove-form').classList.remove('d-none');
 
-    // Tambah ke container
+    // Tambahkan ke DOM
     formSetsContainer.appendChild(clone);
 
-    // Inisialisasi ulang
+    // Inisialisasi ulang textarea & Selectize untuk elemen baru
     clone.querySelectorAll('.auto-expand').forEach(autoExpand);
-    initTagifyAll();
+    initSelectizeAll();
   });
 
   // Hapus form-set
@@ -65,3 +76,52 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   });
 });
+
+// CONFIG SELECTIZE
+
+const selectizeConfigTagsMenu = {
+  valueField: 'kategori_diet_id',
+  labelField: 'nama_kategori_diet',
+  searchField: ['nama_kategori_diet', 'kategori_diet_id'],
+  create: false,
+  placeholder: "Cari item kalibrasi...",
+  maxItems: null,
+  load: function(query, callback) {
+    if (!query.length) return callback();
+    $.ajax({
+      url: '/dashboard/option/klasifikasi-menu',
+      data: { search: query },
+      success: function(response) {
+        if (response.error === 0 && Array.isArray(response.data)) {
+          callback(response.data);
+        } else {
+          callback();
+        }
+      },
+      error: function() {
+        callback();
+      }
+    });
+  },
+  render: {
+    option: function(item, escape) {
+      return `
+        <div class="p-1">
+          <div class="fw-semibold" style="font-size: 0.85rem;">
+            ${escape(item.nama_kategori_diet)}
+          </div>
+        </div>`;
+    },
+    item: function(item, escape) {
+      return `<div>${escape(item.nama_kategori_diet)}</div>`;
+    }
+  }
+};
+
+const selectizeConfigDateInput = {
+  valueField: 'tgl',
+  labelField: 'tgl',
+  searchField: 'tgl',
+  create: true,
+  placeholder: "Masukkan Tanggal...",
+};

resources/views/dashboard/layouts/main.blade.php

@@ -62,6 +62,16 @@
     {{-- Tagify --}}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css">
     <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
+
+    {{-- Selectize --}}
+    <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
+    integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+    />
+
   </head>
 
   <body>
@@ -117,6 +127,13 @@
     <!-- Page JS -->
     <script src="{{ ver('/assets/js/dashboards-analytics.js') }}"></script>
 
+       <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
+    integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+    ></script>
+
     <!-- Place this tag in your head or just before your close body tag. -->
     <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>

resources/views/dashboard/master/menu/modal/add.blade.php

@@ -30,20 +30,27 @@
                     </div>
                   </div>
 
-                  <div class="col-md-6">
+                  <div class="col-md-4">
                     <div class="form-floating">
-                      <input type="text" class="form-control" name="data[0][harga_public]" placeholder="Jenis" required>
+                      <input type="text" class="form-control" name="data[0][harga_public]" placeholder="Harga" required>
                       <label>Harga Publik</label>
                     </div>
                   </div>
 
-                  <div class="col-md-6">
+                  <div class="col-md-4">
                     <div class="form-floating">
                       <input type="number" step="0.01" class="form-control" name="data[0][harga_karyawan]" placeholder="Harga" required>
                       <label>Harga Karyawan</label>
                     </div>
                   </div>
 
+                  <div class="col-md-4">
+                    <div class="form-floating">
+                      <input type="number" step="0.01" class="form-control" name="data[0][harga_keluarga_pasien]" placeholder="Harga" required>
+                      <label>Harga Keluarga Pasien / Pasien</label>
+                    </div>
+                  </div>
+
                   <div class="col-md-12">
                     <div class="form-floating">
                       <select class="form-select" name="data[0][jenis_menu]" required>
@@ -72,7 +79,27 @@
 
                   <div class="col-md-12">
                     <label for="tags" class="form-label">Tag Menu</label>
-                    <input name="data[0][tags]" class="form-control tags-input" placeholder="Ketik lalu enter (ex: pedas, vegan)">
+                    <select class="tags-menu" multiple name="kategori_diet_id[]"></select>
+                  </div>
+
+                  <div class="col-md-12">
+                        <label for="exampleInputEmail1" class="form-label">Jenis Menu</label>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="jenis_customer" id="radio_karyawan" value="Karyawan RSAB Harapan Kita" required>
+                                <label class="form-check-label" for="radio_karyawan" >
+                                    Some Day
+                                </label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="radio" name="jenis_customer" id="radio_kp" value="Keluarga Pasien / Penunggu Pasien" required>
+                                <label class="form-check-label" for="radio_kp">
+                                    Menu Normal
+                                </label>
+                            </div>
+                  </div>
+                    <div class="col-md-12">
+                        <label for="tags" class="form-label">Tanggal Menu Tersedia</label>
+                         <select class="date-input" multiple name="tanggal[]"></select>
                     </div>
                 </div>
               </div>

routes/web.php

@@ -25,6 +25,7 @@ Route::group(['middleware' => ['auth']], function(){
 
         Route::resource('/klasifikasi-menu', KlasifikasiMenuController::class);
         Route::get('/datatable/klasifikasi-menu', [KlasifikasiMenuController::class, 'datatable']);
+        Route::get('/option/klasifikasi-menu', [KlasifikasiMenuController::class, 'optionKlasifikasi']);
 
         Route::resource('/karbohidrat', KarbohidratController::class);
         Route::get('/datatable/karbohidrat', [KarbohidratController::class, 'datatable']);