add news & update

app/Http/Controllers/MasterFileController.php

@@ -106,16 +106,4 @@ class MasterFileController extends Controller
 
         return redirect()->back()->with('error', 'File processing failed.');
     }
-
-    private function readTxt($filePath, $format, $ac, $sizeRow, $notSplit)
-    {
-        // Implement file reading and SQL generation logic
-        // This method should return an array of SQL packs
-    }
-
-    private function generatePatchCode($sqlPack)
-    {
-        // Implement patch code generation logic
-        // This method should return a string of patch code
-    }
 }

app/Http/Controllers/NewsController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class NewsController extends Controller
+{
+    public function index()
+    {
+        $menu = 'News';
+        $currentContent = 'News';
+        return view('home', compact('menu', 'currentContent'));
+    }
+
+}

app/Http/Controllers/TestController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\ConfSmartupdate;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class TestController extends Controller
+{
+    //
+
+    public function  index() {
+
+      
+            $numServerSubquery = DB::table('conf_server_pendding as p2')
+                ->select(DB::raw('count(p2.ServerID) as NUMSERVER'), 'p2.PatchID')
+                ->groupBy('p2.PatchID');
+
+            // Query หลัก
+            $query = ConfSmartupdate::from('conf_smartupdate as p1')
+                ->select('p1.PID', 'p1.PATCHNAME', 'p1.PDESC', 'p1.PDATE', 'p1.PLEVEL', 'p1.Remark', 'p3.NUMSERVER')
+                ->leftJoinSub($numServerSubquery, 'p3', function ($join) {
+                    $join->on('p1.PID', '=', 'p3.PatchID');
+                });
+
+            // if ($this->searchSelected && $this->keyword) {
+            //     $query->where($this->searchSelected, 'LIKE', '%' . $this->keyword . '%');
+            // }
+            $query->orderBy('p1.PID', 'DESC');
+            $results = $query->paginate(10);
+      
+        return view('test' , compact('results'));
+    }
+}
+ 
\ No newline at end of file

app/Http/Livewire/Pages/FormatFileMaster/FileEdit.php

@@ -7,7 +7,7 @@ use App\Models\Role;
 use App\Models\Permission;
 use Illuminate\Http\Request;
 
-class FormatFileEdit extends Component
+class FileEdit extends Component
 {
     public $editRoleId;
     public $permissions;

app/Http/Livewire/Pages/News/NewsCreate.php

+<?php
+
+namespace App\Http\Livewire\Pages\News;
+
+use App\Models\Shippingnetnews;
+use App\Models\Shippingnetnewstype;
+use App\Models\Shippingnetservergroup;
+use Livewire\Component;
+use App\Models\User;
+use Livewire\WithFileUploads;
+use Illuminate\Support\Facades\Hash;
+use Str;
+
+class NewsCreate extends Component
+{
+
+    use WithFileUploads;
+
+    public $topic, $topicColor, $category, $type, $content, $issueDate, $expireDate,  $authorDate, $description;
+    public $image ,$imageTmp;
+    public $uploadFilePathName1;
+    public $uploadFilePathName2;
+    public $categories = [], $types = [];
+    protected $rules = [
+        'topic' => 'required|string|max:255',
+        'description' => 'nullable|string',
+        'content' => 'nullable|string',
+        'issueDate' => 'nullable|date',
+        'expireDate' => 'nullable|date',
+        'topicColor' => 'nullable|string',
+        'uploadFilePathName1' => 'nullable|file|max:10240', // 10MB Max
+        'uploadFilePathName2' => 'nullable|file|max:10240', // 10MB Max
+    ];
+    public function mount()
+    {
+        $this->types = Shippingnetnewstype::all()->pluck('newstype', 'id');
+        $this->categories = Shippingnetservergroup::all()->pluck('groupname', 'groupID');
+    }
+    // public function updatedContent($value)
+    // {
+    //     $this->content = $value;
+    // }
+
+    public function uploadImage()
+    {
+        $this->validate([
+            'imageTmp' => 'image|max:2048', // ขนาดไฟล์สูงสุด 2MB
+        ]);
+
+        $imagePath = $this->imageTmp->store('livewire-tmp', 'public');
+        $uploadedImageUrl = asset('storage/' . $imagePath); // สร้าง URL
+
+        // ส่ง URL กลับไปยัง JavaScript
+        $this->emit('imageUploaded', $uploadedImageUrl);
+    }
+
+    public function submitForm()
+    {
+
+        $this->validate();
+        if ($this->uploadFilePathName1) {
+            $filePath1 = $this->uploadFilePathName1->store('runtime/news', 'public');
+        }
+
+        if ($this->uploadFilePathName2) {
+            $filePath2 = $this->uploadFilePathName2->store('runtime/news', 'public');
+        }
+
+        Shippingnetnews::create([
+            'topic' => $this->topic,
+            'groupID' => $this->category,
+            'newstype' => $this->type,
+            'description' => $this->description,
+            'content' => $this->content, // Quill Editor HTML content
+            'issueDate' => $this->issueDate,
+            'expireDate' => $this->expireDate,
+            'authorDate' => date("Y-m-d"),
+            'topiccolor' => $this->topicColor,
+            'uploadFilePathName1' => $filePath1 ?? '',
+            'uploadFilePathName2' => $filePath2 ?? '',
+            'uploadFileName1' => $filePath1 ?? '',
+            'uploadFileName2' => $filePath2 ?? '',
+        ]);
+
+        $this->resetForm();
+
+        if (auth()->guest()) {
+            return redirect()->route('login');
+        }
+        $this->emit('showNewsList', 'News successfully created.');
+    }
+    public function removeFile($fileName)
+    {
+        $this->$fileName = null;
+    }
+    public function resetForm()
+    {
+        $this->reset([
+            'topic',
+            'category',
+            'type',
+            'description',
+            'content',
+            'issueDate',
+            'expireDate',
+            'authorDate',
+            'topicColor',
+            'uploadFilePathName1',
+            'uploadFilePathName2'
+        ]);
+    }
+    public function goBack()
+    {
+        if (auth()->guest()) {
+            return redirect()->route('login');
+        }
+        $this->emit('showNewsList');
+    }
+
+    public function render()
+    {
+        return view('livewire.pages.news.news-create');
+    }
+}

app/Http/Livewire/Pages/News/NewsEdit.php

+<?php
+
+namespace App\Http\Livewire\Pages\News;
+
+use App\Models\Shippingnetnews;
+use App\Models\Shippingnetnewstype;
+use App\Models\Shippingnetservergroup;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+
+class NewsEdit extends Component
+{
+    use WithFileUploads;
+
+    public $newsId, $topic, $topicColor, $category, $type, $content, $issueDate, $expireDate, $authorDate, $description;
+    public $uploadFilePathName1;
+    public $uploadFilePathName2;
+    public $categories = [], $types = [];
+    protected $rules = [
+        'topic' => 'required|string|max:255',
+        'description' => 'nullable|string',
+        'content' => 'nullable|string',
+        'issueDate' => 'nullable|date',
+        'expireDate' => 'nullable|date',
+        'topicColor' => 'nullable|string',
+        'uploadFilePathName1' => 'nullable|file|max:10240', // 10MB Max
+        'uploadFilePathName2' => 'nullable|file|max:10240', // 10MB Max
+    ];
+
+    public function mount($editNewsId)
+    {
+        $news = Shippingnetnews::findOrFail($editNewsId);
+        $this->newsId = $editNewsId;
+        $this->topic = $news->topic;
+        $this->topicColor = $news->topiccolor;
+        $this->category = $news->groupID;
+        $this->type = $news->newstype;
+        $this->description = $news->description;
+        $this->content = $news->content;
+        $this->issueDate = $news->issueDate;
+        $this->expireDate = $news->expireDate;
+        $this->types = Shippingnetnewstype::all()->pluck('newstype', 'id');
+        $this->categories = Shippingnetservergroup::all()->pluck('groupname', 'groupID');
+    }
+
+    public function uploadImage($file)
+    {
+
+
+        $path = $file->store('images', 'public');
+        
+        return asset('storage/' . $path);
+    }
+
+    public function submitForm()
+    {
+        $this->validate();
+
+        $news = Shippingnetnews::findOrFail($this->newsId);
+
+        if ($this->uploadFilePathName1) {
+            $filePath1 = $this->uploadFilePathName1->store('runtime/news', 'public');
+        }
+
+        if ($this->uploadFilePathName2) {
+            $filePath2 = $this->uploadFilePathName2->store('runtime/news', 'public');
+        }
+
+        // Update the existing record
+        $news->update([
+            'topic' => $this->topic,
+            'groupID' => $this->category,
+            'newstype' => $this->type,
+            'description' => $this->description,
+            'content' => $this->content,
+            'issueDate' => $this->issueDate,
+            'expireDate' => $this->expireDate,
+            'authorDate' => $this->authorDate ?? date("Y-m-d"),
+            'topiccolor' => $this->topicColor,
+            'uploadFilePathName1' => $filePath1 ?? $news->uploadFilePathName1,
+            'uploadFilePathName2' => $filePath2 ?? $news->uploadFilePathName2,
+            'uploadFileName1' => $filePath1 ?? $news->uploadFileName1,
+            'uploadFileName2' => $filePath2 ?? $news->uploadFileName2,
+        ]);
+
+        $this->resetForm();
+        $this->emit('showNewsList', 'News successfully updated.');
+    }
+
+    public function removeFile($fileName)
+    {
+        $this->$fileName = null;
+    }
+
+    public function resetForm()
+    {
+        $this->reset([
+            'topic',
+            'category',
+            'type',
+            'description',
+            'content',
+            'issueDate',
+            'expireDate',
+            'authorDate',
+            'topicColor',
+            'uploadFilePathName1',
+            'uploadFilePathName2'
+        ]);
+    }
+
+    public function goBack()
+    {
+        $this->emit('showNewsList');
+    }
+
+    public function render()
+    {
+        return view('livewire.pages.news.news-edit');
+    }
+}

app/Http/Livewire/Pages/News/NewsIndex.php

+<?php
+
+namespace App\Http\Livewire\Pages\News;
+
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Validator;
+use App\Models\Shippingnetnews;
+use App\Models\Shippingnetnewstype;
+use App\Models\Shippingnetservergroup;
+use Livewire\WithPagination;
+
+class NewsIndex extends Component
+{
+    use WithPagination;
+    protected $paginationTheme = 'bootstrap';
+    public $perPage = 10;
+    public $url;
+    public $searchSelected = 'topic' , $searchCateSelected , $searchTypeSelected;
+    public $editNewsId;
+    public $deleteNewsId;
+    public $keyword = '';
+    public $selectedOption = 'topic';
+    public $searchBy;
+    public $action = 'list';
+    public $message;
+    public $selectedNews = [] , $searchCategory= [], $searchType = [];
+    public $showDeleteListModal = false;
+    public $showNoPermissionModal = false;
+    public $showMessage = false;
+    protected $listeners = ['showUserList', 'deleteItem', 'deleteSelected', 'setShowMessageFalse'];
+
+    public function mount()
+    {
+        $this->searchBy = [
+            'topic' => 'Topic',
+            'issueDate' => 'Issue Date',
+            'expireDate' => 'Expire Date',
+            'authorDate' => 'Author Date',
+        ];
+
+        $this->searchType = Shippingnetnewstype::all()->pluck('newstype','id');
+        $this->searchCategory = Shippingnetservergroup::all()->pluck('groupname','groupID');
+  
+    }
+    public function search()
+    {
+        $this->resetPage();
+    }
+
+    public function showNewsAddForm()
+    {
+        // if (!Auth::user()->hasPermissions(['add-news'])) {
+        //     $this->showNoPermissionModal = TRUE;
+        //     return;
+        // }
+        $this->action = 'create';
+    }
+
+    public function showNewsEditForm($newsId)
+    {
+        // if (!Auth::user()->hasPermissions(['edit-news'])) {
+        //     $this->showNoPermissionModal = TRUE;
+        //     return;
+        // }
+        $this->action = 'edit';
+        $this->editNewsId = $newsId;
+    }
+
+    public function hideMessage()
+    {
+        $this->showMessage = false;
+    }
+    public function showNewsList($message = null)
+    {
+        $this->action = 'list';
+        $this->resetPage();
+        $this->message = $message;
+        if ($this->message) {
+            $this->dispatchBrowserEvent('show-message', ['message' => $this->message]);
+        }
+    }
+
+    public function paginationView()
+    {
+        return 'paginate-custom';
+    }
+    public function deleteItem($deleteNewsId)
+    {
+        if (!Auth::user()->hasPermissions(['delete-user'])) {
+            $this->showNoPermissionModal = TRUE;
+            return;
+        }
+        $news = Shippingnetnews::find($deleteNewsId);
+
+        if ($news) {
+            $news->delete();
+            $message = "Deleted Successfully";
+            $this->message = $message;
+            if ($this->message) {
+                $this->dispatchBrowserEvent('show-message', ['message' => $this->message]);
+            }
+        }
+    }
+
+    
+    public function render()
+    {
+
+        // \Log::info('searchSelected:', ['searchSelected' => $this->searchSelected]);
+        $query = Shippingnetnews::query();
+        if(!empty($this->searchCateSelected)) {
+            $query->where('groupID', $this->searchCateSelected);
+        }
+
+        if(!empty($this->searchTypeSelected)) {
+            $query->where('newstype',$this->searchTypeSelected);
+        }
+
+        $results = $this->searchSelected && $this->keyword
+            ? $query->where($this->searchSelected, 'LIKE', '%' . $this->keyword . '%')->orderBy('shippingnetnews_ID' , 'desc')->paginate($this->perPage)
+            : $query->orderBy('shippingnetnews_ID' , 'desc')->paginate($this->perPage);
+
+        return view('livewire.pages.news.news-index', [
+            'results' => $results,
+            'selectedNews' => $this->selectedNews,
+            'showDeleteListModal' => $this->showDeleteListModal
+        ]);
+    }
+
+
+    // public function deleteSelected($selectedUsers)
+    // {
+    //     if (!Auth::user()->hasPermissions(['delete-user'])) {
+    //         $this->showNoPermissionModal = TRUE;
+    //         return;
+    //     }
+    //     $userDeleted = User::whereIn("id", $selectedUsers)->pluck('name')->toArray();
+    //     $userStr = implode(",", $userDeleted);
+    //     User::destroy($selectedUsers);
+    //     $message = "Deleted : (" . $userStr . " )Successfully";
+    //     $this->message = $message;
+    //     $this->selectedUsers = [];
+    //     if ($this->message) {
+    //         $this->dispatchBrowserEvent('show-message', ['message' => $this->message]);
+    //     }
+    // }
+}

app/Http/Livewire/Pages/SendPatch/DeleteMultiPatchBox.php

@@ -13,8 +13,8 @@ class DeleteMultiPatchBox extends Component
 {
 
     protected $listeners = ['updateServerkey' , 'updateDeletedPatches'];
-
-    public $selectedPatches = [];
+    public  $isLoading = false;
+        public $selectedPatches = [];
     public $selectedPatchName = [];
     public $serverkey = '', $serverId,  $showSearch = false, $searchInProgress, $reponseMessages = [];
     public $showProgressModal = false;

app/Http/Livewire/Pages/SendPatch/SendPatchIndex.php

@@ -36,6 +36,7 @@ class SendPatchIndex extends Component
     {
           $results = [];
         if ($this->action == 'list') {
+            DB::table('conf_server_pendding')->index(['ServerID', 'PatchID']);
             $numServerSubquery = DB::table('conf_server_pendding as p2')
                 ->select(DB::raw('count(p2.ServerID) as NUMSERVER'), 'p2.PatchID')
                 ->groupBy('p2.PatchID');
@@ -48,7 +49,7 @@ class SendPatchIndex extends Component
                 });
 
             if ($this->searchSelected && $this->keyword) {
-                $query->where($this->searchSelected, 'LIKE', '%' . $this->keyword . '%');
+                $query->where($this->searchSelected, 'LIKE', $this->keyword . '%');
             }
             $query->orderBy('p1.PID', 'DESC');
             $results = $query->paginate($this->perPage);

app/Models/ConfSmartupdate.php

@@ -43,4 +43,9 @@ class ConfSmartupdate extends Model
     {
         return $this->hasMany(ConfServerPendding::class, 'PatchID', 'PID');
     }
+
+    public function servers()
+{
+    return $this->hasMany(ConfServerPendding::class, 'PatchID', 'PID');
+}
 }

app/Models/Shippingnetnews.php

@@ -7,6 +7,8 @@ use Illuminate\Database\Eloquent\Model;
 class Shippingnetnews extends Model
 {
     protected $table = 'shippingnetnews';
+    public $timestamps = false;
+    protected $primaryKey = 'shippingnetnews_ID';
     protected $fillable = [
         'shippingnetnews_ID',
         'groupID',
@@ -16,11 +18,20 @@ class Shippingnetnews extends Model
         'expireDate',
         'authorDate',
         'topic',
-        'newstype',
+        'newstype', 
         'uploadFilePathName1',
         'uploadFilePathName2',
         'uploadFileName1',
         'uploadFileName2',
         'topiccolor',
     ];
+
+
+    public function group() {
+       return $this->belongsTo(Shippingnetservergroup::class, 'groupID', 'groupID');
+    }
+
+    public function type() {
+        return $this->belongsTo(Shippingnetnewstype::class, 'id', 'newstype');
+     }
 }

config/livewire.php

@@ -95,7 +95,8 @@ return [
     */
 
     'temporary_file_upload' => [
-        'disk' => null,        // Example: 'local', 's3'              Default: 'default'
+        'enabled' => true,
+        'disk' =>'public',     // Example: 'local', 's3'              Default: 'default'
        'rules' => ['required', 'file', 'max:100000'],  // Example: ['file', 'mimes:png,jpg']  Default: ['required', 'file', 'max:12288'] (12MB)
         'directory' => null,   // Example: 'tmp'                      Default  'livewire-tmp'
         'middleware' => null,  // Example: 'throttle:5,1'             Default: 'throttle:60,1'

package.json

@@ -25,6 +25,7 @@
         "@alpinejs/intersect": "^3.11.1",
         "@alpinejs/persist": "^3.11.1",
         "@caneara/iodine": "^8.3.0",
+        "@ckeditor/ckeditor5-build-classic": "^43.1.0",
         "@fortawesome/fontawesome-free": "^6.3.0",
         "@popperjs/core": "^2.11.6",
         "alpinejs": "^3.11.1",
@@ -42,7 +43,7 @@
         "highlight.js": "^11.7.0",
         "jquery": "^3.7.1",
         "prismjs": "^1.29.0",
-        "quill": "^1.3.7",
+        "quill": "^2.0.2",
         "simplebar": "^6.2.1",
         "sortablejs": "^1.15.0",
         "supervisor": "^0.12.0",

resources/js/app.js

@@ -24,7 +24,7 @@ import * as FilePond from 'filepond';
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
 import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
 //import Quill from 'quill/dist/quill.min';
-import Quill from 'quill/dist/quill.min.js';
+import Quill from 'quill/dist/quill.js';
 import 'quill/dist/quill.snow.css';
 
 import flatpickr from 'flatpickr';
@@ -35,6 +35,7 @@ import 'prismjs/themes/prism.css';
 import 'prismjs/components/prism-diff.min.js';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
 // Helper Functions
 import * as helpers from './utils/helpers';
@@ -72,6 +73,7 @@ window.Alpine = Alpine;
 window.helpers = helpers;
 window.pages = pages;
 window.$ = $;
+window.ClassicEditor= ClassicEditor;
 
 Alpine.directive('tooltip', tooltip);
 Alpine.directive('input-mask', inputMask);

resources/views/livewire/main-container.blade.php

 <div class="bg-main-container mt-1 z-0 ">
 
     <link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
-    <div wire:loading.class="" wire:loading.class.remove="hidden"
+    <div wire:loading.delay wire:loading.class.remove="hidden"
         class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
         <div class="flex justify-center items-center ">
             <div class="items-center h-100vh" style="align-content: center;">
@@ -13,37 +13,70 @@
 
     {{-- end loading --}}
     <div wire:loading.remove class="bg-main-container mx-4">
-        @if ($currentContent === 'Role')
-            <livewire:pages.role.role-index />
-        @elseif ($currentContent === 'User')
-            <livewire:pages.user.user-index />
-        @elseif ($currentContent === 'Company')
-            <livewire:pages.company.company-index />
-        @elseif ($currentContent === 'Group')
-            <livewire:pages.group.group-index />
-        @elseif ($currentContent === 'ServerLicense')
-            <livewire:pages.server-license.server-license-index />
-        @elseif ($currentContent === 'SendPatch')
-            <livewire:pages.send-patch.send-patch-index />
-        @elseif ($currentContent === 'SendMultiPatch')
-            <livewire:pages.send-patch.send-multi-patch-list />
-        @elseif ($currentContent === 'DeleteMultiPatch')
-            <livewire:pages.send-patch.delete-multi-patch />
-        @elseif ($currentContent === 'Patch')
-            <livewire:pages.patch.patch-index />
-        @elseif ($currentContent === 'Parameter')
-            <livewire:pages.parameter.parameter-index />
-        @elseif ($currentContent === 'ExchangeRate')
-            <livewire:pages.exchangerate.exchangerate-index />
-        @elseif ($currentContent === 'DischargePort')
-            <livewire:pages.dischargeport.dischargeport-index />
-        @elseif ($currentContent === 'MasterFile')
-            <livewire:pages.patch.patch-master-file/>
-        @elseif ($currentContent === 'FormatFileMaster')
-            <livewire:pages.format-file-master.file-index />
-        @else
-            @livewire('code-comparer')
-        @endif
+        @switch($currentContent)
+            @case('Role')
+                <livewire:pages.role.role-index wire:init />
+            @break
+
+            @case('User')
+                <livewire:pages.user.user-index wire:init />
+            @break
+
+            @case('Company')
+                <livewire:pages.company.company-index wire:init />
+            @break
+
+            @case('Group')
+                <livewire:pages.group.group-index wire:init />
+            @break
+
+            @case('ServerLicense')
+                <livewire:pages.server-license.server-license-index wire:init />
+            @break
+
+            @case('SendPatch')
+                <livewire:pages.send-patch.send-patch-index wire:init />
+            @break
+
+            @case('SendMultiPatch')
+                <livewire:pages.send-patch.send-multi-patch-list wire:init />
+            @break
+
+            @case('DeleteMultiPatch')
+                <livewire:pages.send-patch.delete-multi-patch wire:init />
+            @break
+
+            @case('Patch')
+                <livewire:pages.patch.patch-index wire:init />
+            @break
+
+            @case('Parameter')
+                <livewire:pages.parameter.parameter-index wire:init />
+            @break
+
+            @case('News')
+                <livewire:pages.news.news-index wire:init />
+            @break
+
+            @case('ExchangeRate')
+                <livewire:pages.exchangerate.exchangerate-index wire:init />
+            @break
+
+            @case('DischargePort')
+                <livewire:pages.dischargeport.dischargeport-index wire:init />
+            @break
+
+            @case('MasterFile')
+                <livewire:pages.patch.patch-master-file wire:init />
+            @break
+
+            @case('FormatFileMaster')
+                <livewire:pages.format-file-master.file-index wire:init />
+            @break
+
+            @default
+                @livewire('code-comparer')
+        @endswitch
     </div>
     <script>
         // document.addEventListener('livewire:load', function () {

resources/views/livewire/navbar.blade.php

@@ -54,6 +54,14 @@
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                 <a href="/format-file-master">Format File Master</a>
             </li>
+            {{-- <li x-data="{ open: false }"
+                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
+                <a href="/test">Test</a>
+            </li> --}}
+            <li x-data="{ open: false }"
+                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
+                <a href="/news">News & Update</a>
+            </li>
             <li x-data="{ open: false }"
                 class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                 <a href="/parameter">Parameter</a>

resources/views/livewire/pages/news/news-create.blade.php

+<div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
+    <style>
+        .ql-container {
+            height: 15rem;
+        }
+    </style>
+    <form wire:submit.prevent="submitForm" x-data x-init="const quill = new Quill($refs.editor, {
+        modules: {
+            toolbar: {
+                container: [
+                    ['bold', 'italic', 'underline', 'strike'],
+                    ['blockquote', 'code-block'],
+                    [{ header: 1 }, { header: 2 }],
+                    [{ list: 'ordered' }, { list: 'bullet' }],
+                    [{ script: 'sub' }, { script: 'super' }],
+                    [{ indent: '-1' }, { indent: '+1' }],
+                    [{ direction: 'rtl' }],
+                    [{ size: ['small', false, 'large', 'huge'] }],
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    [{ color: [] }, { background: [] }],
+                    [{ font: [] }],
+                    [{ align: [] }],
+                    ['clean'], // remove formatting button
+                    ['image'], // Add image upload button
+                ],
+                handlers: {
+                    image: function() {
+                        const input = document.createElement('input');
+                        input.setAttribute('type', 'file');
+                        input.setAttribute('accept', 'image/*');
+                        input.click();
+    
+                        input.onchange = () => {
+                            const file = input.files[0];
+                            if (file) {
+                                const reader = new FileReader();
+                                reader.onload = (e) => {
+                                    const img = new Image();
+                                    img.src = e.target.result;
+                                    img.onload = () => {
+                                        const canvas = document.createElement('canvas');
+                                        const ctx = canvas.getContext('2d');
+                                        const MAX_WIDTH = 800;
+                                        const MAX_HEIGHT = 600;
+                                        let width = img.width;
+                                        let height = img.height;
+    
+                                        if (width > MAX_WIDTH) {
+                                            height *= MAX_WIDTH / width;
+                                            width = MAX_WIDTH;
+                                        }
+    
+                                        if (height > MAX_HEIGHT) {
+                                            width *= MAX_HEIGHT / height;
+                                            height = MAX_HEIGHT;
+                                        }
+    
+                                        canvas.width = width;
+                                        canvas.height = height;
+                                        ctx.drawImage(img, 0, 0, width, height);
+                                        const resizedImage = canvas.toDataURL('image/jpeg', 0.7); // Adjust quality
+                                        const range = quill.getSelection();
+                                        quill.insertEmbed(range.index, 'image', resizedImage);
+                                    };
+                                };
+                                reader.readAsDataURL(file);
+                            }
+                        };
+                    }
+                }
+            }
+        },
+        placeholder: 'Enter your content...',
+        theme: 'snow',
+    });
+    
+    $refs.submitButton.addEventListener('click', function() {
+        @this.set('content', quill.root.innerHTML);
+    });">
+        @csrf
+        <div class="mb-6">
+            <h2
+                class="font-medium flex items-center tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
+                <i class="fa-solid fa-edit text-primary"></i> Create Update Form
+            </h2>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="mb-2">
+                <label for="topic" class="block text-sm font-medium text-gray-700">Topic:</label>
+                <input type="text" wire:model.defer="topic" id="topic"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
+                    placeholder="Enter Topic">
+                @error('topic')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="topicColor" class="block text-sm font-medium text-gray-700">Topic Color:</label>
+                <input type="color" wire:model.defer="topicColor" id="topicColor"
+                    class="mt-1 block w-full px-4 py-2 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
+                @error('topicColor')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="category" class="block text-sm font-medium text-gray-700">Category:</label>
+                <select id="category" wire:model.defer="category" class="w-full p-2 border border-gray-300 rounded-md">
+                    @foreach ($categories as $key => $cate)
+                        <option value="{{ $key }}">
+                            {{ $cate }}</option>
+                    @endforeach
+                </select>
+                @error('category')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+            <div class="mb-2">
+                <label for="type" class="block text-sm font-medium text-gray-700">Type:</label>
+                <select id="type" wire:model.defer="type" class="w-full p-2 border border-gray-300 rounded-md">
+                    @foreach ($types as $key2 => $type)
+                        <option value="{{ $key2 }}">
+                            {{ $type }}</option>
+                    @endforeach
+                </select>
+                @error('type')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="md:col-span-2 mb-2">
+                <label for="description" class="block text-sm font-medium text-gray-700">Description:</label>
+                <textarea wire:model.defer="description" id="description" rows="3"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
+                    placeholder="Enter Description"></textarea>
+                @error('description')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+            <div class="md:col-span-2 mb-2" wire:ignore>
+                <label for="content" class="block text-sm font-medium text-gray-700">Content:</label>
+                <div x-ref="editor" class="h-60 max-h-60 overflow-y-auto"></div>
+                @error('content')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="issueDate" class="block text-sm font-medium text-gray-700">Issue Date:</label>
+                <input type="datetime-local" wire:model.defer="issueDate" id="issueDate"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
+                @error('issueDate')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="expireDate" class="block text-sm font-medium text-gray-700">Expire Date:</label>
+                <input type="datetime-local" wire:model.defer="expireDate" id="expireDate"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
+                @error('expireDate')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                @if ($uploadFilePathName1)
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
+                        Uploaded File 1: {{ $uploadFilePathName1->getClientOriginalName() }}
+                        <button wire:click.prevent="removeFile('uploadFilePathName1')"
+                            class="ml-1 text-red-600 hover:text-red-800">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                @else
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
+                        Uploaded File 1
+                    </div>
+                @endif
+
+                <span wire:loading wire:target="uploadFilePathName1">
+                    <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg" fill="none"
+                        viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                            stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        </path>
+                    </svg>
+                </span>
+                <label for="file-upload-1"
+                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
+                    aria-label="Upload File 1">
+                    <input tabindex="-1" id="file-upload-1" type="file" wire:model="uploadFilePathName1"
+                        class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
+                    <div class="flex items-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                        </svg>
+                        <span>Choose File</span>
+                    </div>
+                    @error('uploadFilePathName1')
+                        <span class="error">{{ $message }}</span>
+                    @enderror
+                </label>
+            </div>
+            <div class="mb-2">
+                @if ($uploadFilePathName2)
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
+                        Uploaded File 2: {{ $uploadFilePathName2->getClientOriginalName() }}
+                        <button wire:click.prevent="removeFile('uploadFilePathName2')"
+                            class="ml-1 text-red-600 hover:text-red-800">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
+                                viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                @else
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
+                        Uploaded File 2
+                    </div>
+                @endif
+
+                <span wire:loading wire:target="uploadFilePathName2">
+                    <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg"
+                        fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                            stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        </path>
+                    </svg>
+                </span>
+                <label for="file-upload-2"
+                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
+                    aria-label="Upload File 1">
+                    <input tabindex="-1" id="file-upload-2" type="file" wire:model="uploadFilePathName2"
+                        class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
+                    <div class="flex items-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                        </svg>
+                        <span>Choose File</span>
+                    </div>
+                    @error('uploadFilePathName2')
+                        <span class="error">{{ $message }}</span>
+                    @enderror
+                </label>
+
+            </div>
+        </div>
+
+        <div class="flex justify-end space-x-4 mt-4">
+            <button type="button" wire:click="goBack"
+                class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</button>
+            <button type="submit" x-ref="submitButton"
+                class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
+        </div>
+    </form>
+</div>

resources/views/livewire/pages/news/news-edit.blade.php

+<div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
+    <style>
+        .ql-container {
+            height: 15rem;
+        }
+    </style>
+    <form wire:submit.prevent="submitForm" x-data x-init="const quill = new Quill($refs.editor, {
+        modules: {
+            toolbar: {
+                container: [
+                    ['bold', 'italic', 'underline', 'strike'],
+                    ['blockquote', 'code-block'],
+                    [{ header: 1 }, { header: 2 }],
+                    [{ list: 'ordered' }, { list: 'bullet' }],
+                    [{ script: 'sub' }, { script: 'super' }],
+                    [{ indent: '-1' }, { indent: '+1' }],
+                    [{ direction: 'rtl' }],
+                    [{ size: ['small', false, 'large', 'huge'] }],
+                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                    [{ color: [] }, { background: [] }],
+                    [{ font: [] }],
+                    [{ align: [] }],
+                    ['clean'], // remove formatting button
+                    ['image'], // Add image upload button
+                ],
+                handlers: {
+                    image: function() {
+                        const input = document.createElement('input');
+                        input.setAttribute('type', 'file');
+                        input.setAttribute('accept', 'image/*');
+                        input.click();
+    
+                        input.onchange = () => {
+                            const file = input.files[0];
+                            if (file) {
+                                const reader = new FileReader();
+                                reader.onload = (e) => {
+                                    const range = quill.getSelection();
+                                    quill.insertEmbed(range.index, 'image', e.target.result);
+                                };
+                                reader.readAsDataURL(file);
+                            }
+                        };
+                    }
+                }
+            }
+        },
+        placeholder: 'Enter your content...',
+        theme: 'snow',
+        
+    });
+    quill.clipboard.dangerouslyPasteHTML(@js($content));
+    $refs.submitButton.addEventListener('click', function() {
+        @this.set('content', quill.root.innerHTML);
+    });">
+        @csrf
+        <div class="mb-6">
+            <h2
+                class="font-medium flex items-center tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
+                <i class="fa-solid fa-edit text-primary"></i> Create Update Form
+            </h2>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="mb-2">
+                <label for="topic" class="block text-sm font-medium text-gray-700">Topic:</label>
+                <input type="text" wire:model.defer="topic" id="topic"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
+                    placeholder="Enter Topic">
+                @error('topic')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="topicColor" class="block text-sm font-medium text-gray-700">Topic Color:</label>
+                <input type="color" wire:model.defer="topicColor" id="topicColor"
+                    class="mt-1 block w-full px-4 py-2 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
+                @error('topicColor')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="category" class="block text-sm font-medium text-gray-700">Category:</label>
+                <select id="category" wire:model.defer="category" class="w-full p-2 border border-gray-300 rounded-md">
+                    @foreach ($categories as $key => $cate)
+                        <option value="{{ $key }}">
+                            {{ $cate }}</option>
+                    @endforeach
+                </select>
+                @error('category')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+            <div class="mb-2">
+                <label for="type" class="block text-sm font-medium text-gray-700">Type:</label>
+                <select id="type" wire:model.defer="type" class="w-full p-2 border border-gray-300 rounded-md">
+                    @foreach ($types as $key2 => $type)
+                        <option value="{{ $key2 }}">
+                            {{ $type }}</option>
+                    @endforeach
+                </select>
+                @error('type')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+            <div class="md:col-span-2 mb-2">
+                <label for="description" class="block text-sm font-medium text-gray-700">Description:</label>
+                <textarea wire:model.defer="description" id="description" rows="3"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
+                    placeholder="Enter Description"> </textarea>
+                @error('description')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+            <div class="md:col-span-2 mb-2" wire:ignore>
+                <label for="content" class="block text-sm font-medium text-gray-700">Content:</label>
+                <div x-ref="editor" class="h-60 max-h-60 overflow-y-auto"></div>
+                @error('content')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="issueDate" class="block text-sm font-medium text-gray-700">Issue Date:</label>
+                <input type="datetime-local" wire:model.defer="issueDate" id="issueDate"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
+                @error('issueDate')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                <label for="expireDate" class="block text-sm font-medium text-gray-700">Expire Date:</label>
+                <input type="datetime-local" wire:model.defer="expireDate" id="expireDate"
+                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
+                @error('expireDate')
+                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
+                @enderror
+            </div>
+
+            <div class="mb-2">
+                @if ($uploadFilePathName1)
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
+                        Uploaded File 1: {{ $uploadFilePathName1->getClientOriginalName() }}
+                        <button wire:click.prevent="removeFile('uploadFilePathName1')" class="ml-1 text-red-600 hover:text-red-800">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                @else
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
+                        Uploaded File 1
+                    </div>
+                @endif
+
+                <span wire:loading wire:target="uploadFilePathName1">
+                    <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg" fill="none"
+                        viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                            stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        </path>
+                    </svg>
+                </span>
+                <label for="file-upload-1"
+                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
+                    aria-label="Upload File 1">
+                    <input tabindex="-1" id="file-upload-1" type="file" wire:model="uploadFilePathName1"
+                        class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
+                    <div class="flex items-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                        </svg>
+                        <span>Choose File</span>
+                    </div>
+                    @error('uploadFilePathName1')
+                        <span class="error">{{ $message }}</span>
+                    @enderror
+                </label>
+            </div>
+            <div class="mb-2">
+                @if ($uploadFilePathName2)
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4 flex items-center">
+                        Uploaded File 2: {{ $uploadFilePathName2->getClientOriginalName() }}
+                        <button wire:click.prevent="removeFile('uploadFilePathName2')" class="ml-1 text-red-600 hover:text-red-800">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                @else
+                    <div class="mt-2 text-sm text-slate-600 dark:text-slate-300 mr-4">
+                        Uploaded File 2
+                    </div>
+                @endif
+
+                <span wire:loading wire:target="uploadFilePathName2">
+                    <svg class="animate-spin h-5 w-5 text-primary m-3" xmlns="http://www.w3.org/2000/svg"
+                        fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                            stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        </path>
+                    </svg>
+                </span>
+                <label for="file-upload-2"
+                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
+                    aria-label="Upload File 1">
+                    <input tabindex="-1" id="file-upload-2" type="file" wire:model="uploadFilePathName2"
+                        class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
+                    <div class="flex items-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                        </svg>
+                        <span>Choose File</span>
+                    </div>
+                    @error('uploadFilePathName2')
+                        <span class="error">{{ $message }}</span>
+                    @enderror
+                </label>
+
+            </div>
+        </div>
+
+        <div class="flex justify-end space-x-4 mt-4">
+            <button type="button" wire:click="goBack"
+                class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</button>
+            <button type="submit" x-ref="submitButton"
+                class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
+        </div>
+    </form>
+</div>

resources/views/livewire/pages/news/news-index.blade.php

+<div class="border-0 shadow-none">
+    ` <div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
+        class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
+        <div class="flex justify-center items-center ">
+            <div class="items-center h-100vh" style="align-content: center;">
+                <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+
+        </div>
+    </div>
+    <div class="m-2">
+        {{-- <div wire:loading.class="flex" wire:loading.class.remove="hidden"
+                class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
+                <div class="flex justify-center items-center ">
+                    <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+                </div>
+            </div> --}}
+        @if ($action === 'list')
+            @if ($message)
+                <div class="alert alert-success">
+                    <div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)"
+                        x-show.transition.duration.500ms="show"
+                        class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
+                        {{ $message }}
+                    </div>
+                </div>
+            @endif
+            <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-main-container rounded-md" x-data="{ showDeleteListModal : false}">
+                <div class="my-1 flex h-8 items-center justify-between px-4 sm:px-5">
+                    <h2 class="text-2xl  text-black ">
+                        News & Update
+                    </h2>
+                </div>
+                <div class="pb-4 pt-5 bg-white rounded-lg  shadow-lg">
+                    <div class="flex justify-between">
+                        <div class="px-2 ml-4">
+                            <button type="button"
+                                class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
+                                wire:click="showNewsAddForm">Add</button>
+                        </div>
+                        <div class="inline-flex flex-initial">
+                            <div x-data="{ isInputActive: true }">
+                                <div class="flex gap-4 px-5 items-center">
+                                    <button @click="isInputActive = !isInputActive"
+                                        class="btn  h-8 w-10 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container primary-focus hover:text-main-container active:text-main-container focus:text-main-container  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
+                                            viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                        </svg>
+                                    </button>
+                                    <span class="w-52" x-show="isInputActive === true">
+                                        <select wire:model.defer="searchTypeSelected"
+                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
+                                            @foreach ($searchType as $key => $by)
+                                                <option value="{{ $key }}">{{ $by }}</option>
+                                            @endforeach
+                                        </select>
+                                    </span>
+                                    <span class="w-52" x-show="isInputActive === true">
+                                        <select wire:model.defer="searchCateSelected"
+                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
+                                            @foreach ($searchCategory as $key => $by)
+                                                <option value="{{ $key }}">{{ $by }}</option>
+                                            @endforeach
+                                        </select>
+                                    </span>
+
+                                    <span class="w-64" x-show="isInputActive === true">
+                                        <input
+                                            class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2  placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
+                                            placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
+                                    </span>
+                                    <span class="w-52" x-show="isInputActive === true">
+                                        <select wire:model.defer="searchSelected"
+                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
+                                            @foreach ($searchBy as $key => $by)
+                                                <option value="{{ $key }}">{{ $by }}</option>
+                                            @endforeach
+                                        </select>
+                                    </span>
+                                    <button type="button"
+                                        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
+                                        wire:click="search">Search</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mx-3 mt-3 px-4">
+                        <div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
+                            <table class="is-hoverable table w-full text-left border-b">
+                                <thead>
+                                    <tr>
+                                        <th
+                                            class="whitespace-nowrap rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            #
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            Topic
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            Category
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            Author Date
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            Issue Date
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            Expire Date
+                                        </th>
+                                        <th
+                                            class="whitespace-nowrap rounded-tr-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+
+                                    @foreach ($results as $news)
+                                        <tr
+                                            class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
+                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">
+                                                <label class="inline-flex items-center space-x-2">
+                                                    <input @change="toggleGroup($event)"
+                                                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
+                                                        type="checkbox" wire:model.defer="selectedNews"
+                                                        value="{{ $news->shippingnetnews_ID }}" />
+                                                </label>
+                                            </td>
+                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">
+                                                {{ \Illuminate\Support\Str::limit($news->topic, 70) }}</td>
+                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->group->groupname??"" }}</td>
+                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->authorDate }}
+                                            </td>
+                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->issueDate }}</td>
+                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $news->expireDate }}
+                                            </td>
+                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">
+                                                <div class="flex justify-center space-x-2">
+                                                    <a wire:click="showNewsEditForm({{ $news->shippingnetnews_ID }})"
+                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
+                                                        <i class="fa fa-edit"></i>
+                                                    </a>
+                                                    <a @click="$wire.emit('showDeleteModal', {{ $news->shippingnetnews_ID }})"
+                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
+                                                        <i class="fa fa-trash"></i>
+                                                    </a>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    @endforeach
+                                </tbody>
+                            </table>
+                        </div>
+                        <template x-if="showDeleteListModal">
+                            <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
+                                @keydown.window.escape="showDeleteListModal = false">
+                                <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
+                                    @click="showDeleteListModal = false"></div>
+                                <div
+                                    class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="inline h-28 w-28 text-error"
+                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
+                                        </path>
+                                    </svg>
+                                    <div class="mt-4 mx-5">
+                                        <h2 class="text-2xl text-slate-700 dark:text-navy-100">
+                                            Are you sure <br> you want to delete <span
+                                                x-text="selectedUsersAlpine.length"></span> users?
+                                        </h2>
+                                        <p class="mt-2"></p>
+                                        <button @click="showDeleteListModal = false"
+                                            class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">
+                                            Close
+                                        </button>
+                                        <button
+                                            @click="$wire.emitSelf('deleteSelected', selectedUsers ); showDeleteListModal = false"
+                                            class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
+                                            Confirm
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+
+                        <livewire:delete-modal />
+                        {{ $results->links('livewire.paginate-custom') }}
+
+                    </div>
+                </div>
+            </div>
+        @elseif($action === 'create')
+            <livewire:pages.news.news-create wire:key="news-create" />
+        @elseif($action === 'edit')
+            <livewire:pages.news.news-edit :editNewsId="$editNewsId" wire:key="news-edit" />
+        @else
+            <div></div>
+        @endif
+    </div>
+</div>

resources/views/livewire/pages/send-patch/delete-multi-patch.blade.php

@@ -9,7 +9,7 @@
                             <div class="flex flex-col">
                                 <input type="text"
                                     class="form-input h-9 peer  w-64 rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                                    wire:model.debounce.500ms="serverkey" placeholder="Search for a server key">
+                                    wire:model="serverkey" placeholder="Search for a server key">
                                 @if (!empty($serverkey) && $showSearch)
                                     <ul
                                         class="z-50 border  border-gray-200 top-14 rounded-md max-h-64 w-64 overflow-auto absolute bg-white  mt-1">