From 86bb1c25274a0762b68b9ada348e806aa00f65a1 Mon Sep 17 00:00:00 2001
From: pbao9 <pbao.business@gmail.com>
Date: Wed, 4 Feb 2026 13:43:10 +0700
Subject: [PATCH] update

---
 app/View/Components/FixedActionBar.php        |  26 +++
 resources/sass/app.scss                       |   1 +
 .../sass/components/_fixed-action-bar.scss    |  30 ++++
 .../pages/module/vcenter/edit.blade.php       | 160 +++++++++++++-----
 .../components/admin-breadcrumb.blade.php     |   2 +-
 .../views/components/button-c-r-m.blade.php   |  28 +--
 .../components/fixed-action-bar.blade.php     |   3 +
 7 files changed, 192 insertions(+), 58 deletions(-)
 create mode 100644 app/View/Components/FixedActionBar.php
 create mode 100644 resources/sass/components/_fixed-action-bar.scss
 create mode 100644 resources/views/components/fixed-action-bar.blade.php

diff --git a/app/View/Components/FixedActionBar.php b/app/View/Components/FixedActionBar.php
new file mode 100644
index 0000000..dbbd1c4
--- /dev/null
+++ b/app/View/Components/FixedActionBar.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class FixedActionBar extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.fixed-action-bar');
+    }
+}
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 63c0371..3642ea6 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -102,6 +102,7 @@
 @import "./components/auth";
 @import "./components/chat";
 @import "./components/email";
+@import "./components/fixed-action-bar";
 
 // 3rd-Party plugin overrides
 @import "./plugin-overrides/ace";
diff --git a/resources/sass/components/_fixed-action-bar.scss b/resources/sass/components/_fixed-action-bar.scss
new file mode 100644
index 0000000..acde8ce
--- /dev/null
+++ b/resources/sass/components/_fixed-action-bar.scss
@@ -0,0 +1,30 @@
+// Fixed Action Bar Component
+.fixed-action-bar {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  background: var(--#{$prefix}body-bg); // Use theme variable for background
+  border-top: 1px solid var(--#{$prefix}border-color);
+  padding: 1rem;
+  transition: margin .1s ease, width .1s ease; // Match sidebar transition
+
+  @media (min-width: 992px) {
+    margin-left: $sidebar-width-lg; // Align with main content
+    
+    // Handle folded sidebar scenario
+    .sidebar-folded & {
+       margin-left: $sidebar-folded-width;
+    }
+  }
+
+  // Ensure it sits above other content but below modals (z-index check)
+}
+
+// Utility for vertical border on medium+ screens
+@media (min-width: 768px) {
+  .border-md-end {
+    border-right: 1px solid var(--#{$prefix}border-color) !important;
+  }
+}
diff --git a/resources/views/administrator/pages/module/vcenter/edit.blade.php b/resources/views/administrator/pages/module/vcenter/edit.blade.php
index 5badee2..fd3dfc1 100644
--- a/resources/views/administrator/pages/module/vcenter/edit.blade.php
+++ b/resources/views/administrator/pages/module/vcenter/edit.blade.php
@@ -1,58 +1,122 @@
-@extends("administrator.layout.master")
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    @foreach (config('assets.datatable.css') as $datatable)
+        <link href="{{ asset($datatable) }}" rel="stylesheet" />
+    @endforeach
+@endpush
+
+@section('breadcrumb')
+    @php
+$breadcrumbItems = [
+    ['label' => 'Modules'],
+    ['label' => 'vCenter', 'url' => route('module.vcenter.index')],
+    ['label' => 'Edit vCenter', 'active' => true],
+];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section("content")
+    {{-- Page Header --}}
+    <div class="mb-4">
+        <h3 class="fw-bold fs-4 mb-2">Edit vCenter</h3>
+        <p class="text-muted mb-0">Manage connection information for this vCenter instance</p>
+    </div>
+
     @if(auth()->guard('admins')->user()->can("edit module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('module.vcenter.update',['id' => $server->id]) }}" method="post">
+
+
+        <form action="{{ route('module.vcenter.update', ['id' => $server->id]) }}" method="post" style="padding-bottom: 80px;">
             @csrf
             @method('put')
-            <div class="card-body">
-                <div class="row">
-                    <div class="col">
-                        {{--Server Host--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="host">vCenter Host</label>
-                            <div class="col-md-9">
-                                <input type="text" id="host" name="host" placeholder="103.42.xx.xxx"
-                                       value="{{ $server->host }}" class="form-control">
+            {{-- Connection Information --}}
+            <div class="card card-outline card-primary mb-4">
+                <div class="card-header bg-white py-3 border-bottom">
+                    <h5 class="card-title fw-bold mb-0">Connection Information</h5>
+                </div>
+                <div class="card-body p-4">
+                    <div class="row g-4">
+                        {{-- Left Column --}}
+                        <div class="col-12 col-md-6 border-md-end pe-md-4">
+                            <div class="mb-3">
+                                <label class="form-label fw-medium" for="host">vCenter Host</label>
+                                <div class="input-group">
+                                    <span class="input-group-text bg-light border-end-0">
+                                        <i data-lucide="server" width="18" height="18"></i>
+                                    </span>
+                                    <input type="text" id="host" name="host" class="form-control border-start-0 ps-3"
+                                        placeholder="e.g. 103.42.xx.xxx" value="{{ $server->host }}" required>
+                                </div>
+                            </div>
+
+                            <div class="mb-0">
+                                <label class="form-label fw-medium" for="user">User <span class="text-danger">*</span></label>
+                                <div class="input-group">
+                                    <span class="input-group-text bg-light border-end-0">
+                                        <i data-lucide="user" width="18" height="18"></i>
+                                    </span>
+                                    <input type="text" id="user" name="user" class="form-control border-start-0 ps-3"
+                                        placeholder="e.g. administrator@vsphere.local" value="{{ $server->user }}" required>
+                                </div>
                             </div>
                         </div>
-                        {{--User--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="user">User</label>
-                            <div class="col-md-9">
-                                <input type="text" id="user" name="user" placeholder="root"
-                                       value="{{ $server->user }}" class="form-control">
-                            </div>
-                        </div>
-                        {{--Password--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="password">Password</label>
-                            <div class="col-md-9">
-                                <input type="password" id="password" name="password" placeholder="*********"
-                                       value="" class="form-control">
-                            </div>
-                        </div>
-                        {{--Status--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="password">Status</label>
-                            <div class="col-md-9">
-                                <label>
-                                    <select class="custom-select" name="status">
-                                        <option value="1" @selected($server->status === 1)>Active</option>
-                                        <option value="0" @selected($server->status === 0)>No Active</option>
-                                    </select>
-                                </label>
+
+                        {{-- Right Column --}}
+                        <div class="col-12 col-md-6 ps-md-4">
+                            <div class="mb-0">
+                                <label class="form-label fw-medium" for="password">Password</label>
+                                <div class="input-group">
+                                    <span class="input-group-text bg-light border-end-0">
+                                        <i data-lucide="lock" width="18" height="18"></i>
+                                    </span>
+                                    <input type="password" id="password" name="password" class="form-control border-start-0 ps-3"
+                                        placeholder="Leave blank to keep current password">
+                                </div>
+                                <div class="form-text mt-2">
+                                    <i data-lucide="info" width="14" height="14" class="text-muted align-middle me-1"></i>
+                                    Leave blank to keep current password
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="card-footer">
-                <a href="{{ route('module.vcenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
+
+            {{-- Configuration --}}
+            <div class="card card-outline card-primary mb-4">
+                <div class="card-header bg-white py-3 border-bottom">
+                    <h5 class="card-title fw-bold mb-0">Configuration</h5>
+                </div>
+                <div class="card-body p-4">
+                    <div class="row">
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="status">Status</label>
+                            <div class="input-group flex-nowrap">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="activity" width="18" height="18"></i>
+                                </span>
+                                <select class="form-control select2 single__select border-start-0 ps-3" name="status" id="status"
+                                    style="width: 100%;">
+                                    @foreach(App\Enums\Status::getOptions() as $value => $label)
+                                        <option value="{{ $value }}" {{ $server->status === $value ? 'selected' : '' }}>{{ $label }}
+                                        </option>
+                                    @endforeach
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </form>
-    </div>
+
+            {{-- Fixed Bottom Actions --}}
+            <x-fixed-action-bar>
+                <x-button-c-r-m route="module.vcenter.index" variant="secondary" icon="arrow-left">
+                    Cancel
+                </x-button-c-r-m>
+                <x-button-c-r-m type="submit" variant="primary" icon="save">
+                    Save Changes
+                </x-button-c-r-m>
+            </x-fixed-action-bar>
+            </form>
     @else
         <div class="alert alert-danger alert-dismissible">
             <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
@@ -60,3 +124,13 @@
         </div>
     @endif
 @endsection
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+    <script>
+        $(document).ready(function () {
+            $('.select2').select2();
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/components/admin-breadcrumb.blade.php b/resources/views/components/admin-breadcrumb.blade.php
index 958dec0..3c5115a 100644
--- a/resources/views/components/admin-breadcrumb.blade.php
+++ b/resources/views/components/admin-breadcrumb.blade.php
@@ -1,7 +1,7 @@
 @props(['items' => []])
 
 <nav aria-label="breadcrumb">
-    <ol class="breadcrumb bg-white shadow-sm p-3 rounded-3 d-flex align-items-center mb-4">
+    <ol class="breadcrumb card bg-white shadow-sm p-3 rounded-3 d-flex flex-row align-items-center mb-4">
         <li class="breadcrumb-item">
             <a href="{{ route('dashboard') }}"
                 class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
diff --git a/resources/views/components/button-c-r-m.blade.php b/resources/views/components/button-c-r-m.blade.php
index 0952723..5e4acad 100644
--- a/resources/views/components/button-c-r-m.blade.php
+++ b/resources/views/components/button-c-r-m.blade.php
@@ -1,19 +1,19 @@
 @php
-        $tag = 'button';
-        $href = null;
+    $tag = 'button';
+    $href = null;
 
-        if ($route) {
-            $href = route($route, $params);
-            $tag = 'a';
-        } elseif ($url) {
-            $href = $url;
-            $tag = 'a';
-        } elseif ($attributes->has('href')) {
-            $href = $attributes->get('href');
-            $tag = 'a';
-        }
+    if ($route) {
+        $href = route($route, $params);
+        $tag = 'a';
+    } elseif ($url) {
+        $href = $url;
+        $tag = 'a';
+    } elseif ($attributes->has('href')) {
+        $href = $attributes->get('href');
+        $tag = 'a';
+    }
 
-    $baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-md px-2 py-1 rounded-2';
+    $baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-lg px-3 py-2 rounded-pill';
 
     $variants = [
         'primary' => 'bg-primary',
@@ -37,7 +37,7 @@
     $variantClass = $variants[$variant] ?? $variants['primary'];
     $sizeClass = $sizes[$size] ?? $sizes['default'];
 
-        $classes = "{$baseClasses} {$variantClass} {$sizeClass}";
+    $classes = "{$baseClasses} {$variantClass} {$sizeClass}";
 @endphp
 
 @if($tag === 'a')
diff --git a/resources/views/components/fixed-action-bar.blade.php b/resources/views/components/fixed-action-bar.blade.php
new file mode 100644
index 0000000..525b60c
--- /dev/null
+++ b/resources/views/components/fixed-action-bar.blade.php
@@ -0,0 +1,3 @@
+<div {{ $attributes->merge(['class' => 'fixed-action-bar d-flex justify-content-end gap-2']) }}>
+    {{ $slot }}
+</div>