From 53554a0260a355e3bb3d4ed88f674d4001fcc3ef Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 2 Jan 2026 18:28:10 +0700
Subject: [PATCH] feat: Conditionally display category description and image
 fields based on selected type.

---
 app/Livewire/Studio/Master/Category.php       |  8 +++
 .../studio/master/categories.blade.php        | 50 ++++++++++---------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/app/Livewire/Studio/Master/Category.php b/app/Livewire/Studio/Master/Category.php
index 8549c9a..441214c 100644
--- a/app/Livewire/Studio/Master/Category.php
+++ b/app/Livewire/Studio/Master/Category.php
@@ -2,6 +2,7 @@
 
 namespace App\Livewire\Studio\Master;
 
+use App\Enums\CategoryType;
 use App\Livewire\Forms\Studio\Master\CategoryForm;
 use App\Models\Category as CategoryModel;
 use App\Traits\Authorization\WithAuthorization;
@@ -27,6 +28,8 @@ class Category extends Component
 
     public string $modalTitle = '';
 
+    public bool $showDescriptionAndImage = true;
+
     public function create(): void
     {
         $this->canOrAbort('create category');
@@ -92,6 +95,11 @@ public function openModal(string $method, string $modalTitle, ?string $id = null
         $id && $this->form->setCategory(CategoryModel::byHashOrFail($id));
     }
 
+    public function updatedFormType(string $value): void
+    {
+        $this->showDescriptionAndImage = $value == CategoryType::PERFUME->value;
+    }
+
     public function render(): View
     {
         return view('livewire.studio.master.categories', [
diff --git a/resources/views/livewire/studio/master/categories.blade.php b/resources/views/livewire/studio/master/categories.blade.php
index e161efe..3c96a42 100644
--- a/resources/views/livewire/studio/master/categories.blade.php
+++ b/resources/views/livewire/studio/master/categories.blade.php
@@ -36,13 +36,9 @@
                 <flux:error name="form.name" />
             </flux:field>
 
-            <flux:editor label="Keterangan" wire:model="form.description"
-                placeholder="Aromaterapi merupakan wewangian yang dapat membantu meredakan stress dan meredakan perasaan sakit kepala."
-                auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" />
-
             <flux:field>
                 <flux:label>Jenis <span class="text-red-500 ms-1">*</span></flux:label>
-                <flux:radio.group wire:model="form.type" variant="buttons" class="w-full *:flex-1">
+                <flux:radio.group wire:model.live="form.type" variant="buttons" class="w-full *:flex-1">
                     @foreach (\App\Enums\CategoryType::cases() as $item)
                         <flux:radio value="{{ $item->value }}">
                             {{ $item->label() }}
@@ -52,26 +48,32 @@
                 <flux:error name="form.type" />
             </flux:field>
 
-            <div class="space-y-3">
-                <h3 class="text-sm font-medium">Gambar</h3>
-                <div class="dropzone-wrapper">
-                    <livewire:dropzone wire:model="form.image" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="1" :key="'image'"
-                        :files="$form->image ?? []" />
-                    @error('form.image')
-                        <div role="alert" aria-live="polite" aria-atomic="true"
-                            class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
-                            <svg class="shrink-0 [:where(&amp;)]:size-5 inline" data-flux-icon=""
-                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true" data-slot="icon">
-                                <path fill-rule="evenodd"
-                                    d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-                                    clip-rule="evenodd"></path>
-                            </svg>
-                            {{ $message }}
-                        </div>
-                    @enderror
+            @if ($showDescriptionAndImage)
+                <flux:editor label="Keterangan" wire:model="form.description"
+                    placeholder="Aromaterapi merupakan wewangian yang dapat membantu meredakan stress dan meredakan perasaan sakit kepala."
+                    auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" />
+
+                <div class="space-y-3">
+                    <h3 class="text-sm font-medium">Gambar</h3>
+                    <div class="dropzone-wrapper">
+                        <livewire:dropzone wire:model="form.image" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="1" :key="'image'"
+                            :files="$form->image ?? []" />
+                        @error('form.image')
+                            <div role="alert" aria-live="polite" aria-atomic="true"
+                                class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
+                                <svg class="shrink-0 [:where(&amp;)]:size-5 inline" data-flux-icon=""
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                    aria-hidden="true" data-slot="icon">
+                                    <path fill-rule="evenodd"
+                                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+                                        clip-rule="evenodd"></path>
+                                </svg>
+                                {{ $message }}
+                            </div>
+                        @enderror
+                    </div>
                 </div>
-            </div>
+            @endif
 
             <div class="flex">
                 <flux:spacer />