update layout control vm

app/Http/Controllers/frontend/ServiceController.php

@@ -794,6 +794,60 @@ class ServiceController extends Controller
         }
     }
 
+    /**
+     * Renew service for selected months
+     */
+    public function renew(Request $request)
+    {
+        try {
+            $user = customer();
+            if (!$user) {
+                return response()->json([
+                    'error' => true,
+                    'message' => __('Chưa đăng nhập. Vui lòng đăng nhập để sử dụng tính năng này.'),
+                ], 401);
+            }
+
+            $validated = FacadesValidator::make($request->all(), [
+                'product_id' => 'required|string|max:255',
+                'plan' => 'required|string|in:3,6,12,24,other',
+                'months' => 'nullable|integer|min:1|max:60',
+            ]);
+
+            if ($validated->fails()) {
+                return response()->json([
+                    'error' => true,
+                    'message' => __('Dữ liệu không hợp lệ'),
+                    'errors' => $validated->errors(),
+                ], 422);
+            }
+
+            $months = $request->plan === 'other' ? (int) ($request->months ?? 1) : (int) $request->plan;
+            $productId = $this->sanitizeInput($request->product_id);
+
+            Log::info('Khách yêu cầu gia hạn dịch vụ', [
+                'user_id' => $user->id,
+                'product_vmware_id' => $productId,
+                'months' => $months,
+            ]);
+
+            // TODO: implement actual renewal billing/workflow
+            return response()->json([
+                'error' => false,
+                'message' => __('Yêu cầu gia hạn đã được ghi nhận'),
+            ]);
+        } catch (\Exception $e) {
+            Log::error('Lỗi renew', [
+                'user_id' => customer()?->id,
+                'error' => $e->getMessage(),
+            ]);
+            return response()->json([
+                'error' => true,
+                'message' => __('Có lỗi xảy ra khi gia hạn'),
+            ], 500);
+        }
+    }
+
     /**
      * Secure remove snapshot using session authentication - NO BEARER TOKEN
      */

resources/views/frontend/service/partials/control-buttons/renewal-button.blade.php

@@ -1,13 +1,14 @@
-{{-- Renewal Button Component --}}
-<div class="bg-gray-50 hover:bg-gray-100 rounded-lg p-4 text-center cursor-pointer transition-colors duration-200 border border-gray-200 hover:border-orange-300"
-    @click="showNotification('{{ __('Chức năng đang phát triển') }}', 'info')">
-    <div class="flex flex-col items-center">
-        <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-3">
-            <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
+{{-- Renewal Button Trigger --}}
+<flux:modal.trigger name="renewal-modal">
+    <div class="bg-gray-50 hover:bg-gray-100 rounded-lg p-4 text-center cursor-pointer transition-colors duration-200 border border-gray-200 hover:border-orange-300 w-full">
+        <div class="flex flex-col items-center">
+            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-3">
+                <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </div>
+            <span class="text-sm font-medium text-gray-700">{{ __('Gia hạn') }}</span>
         </div>
-        <span class="text-sm font-medium text-gray-700">{{ __('Gia hạn') }}</span>
     </div>
-</div> 
+</flux:modal.trigger>

resources/views/frontend/service/partials/renewal-modal.blade.php

@@ -0,0 +1,43 @@
+@props(['invoice'])
+
+<flux:modal name="renewal-modal" class="md:w-[28rem]">
+    <div class="space-y-6" x-data="{ submitting: false, plan: '12', months: 12 }">
+        <div>
+            <flux:heading size="lg">{{ __('Gia hạn dịch vụ') }}</flux:heading>
+            <flux:text class="mt-2">{{ __('Chọn thời hạn gia hạn hoặc nhập số tháng mong muốn.') }}</flux:text>
+        </div>
+
+        <form x-on:submit.prevent="if (submitting) return; submitting = true; $el.submit()" method="POST" action="{{ route('service.renew') }}">
+            @csrf
+            <input type="hidden" name="product_id" value="{{ $invoice->vm_id }}">
+
+            <flux:field>
+                <flux:label>{{ __('Chọn thời hạn') }}</flux:label>
+                <flux:select x-model="plan" name="plan">
+                    <flux:select.option value="3">{{ __('3 tháng') }}</flux:select.option>
+                    <flux:select.option value="6">{{ __('6 tháng') }}</flux:select.option>
+                    <flux:select.option value="12">{{ __('12 tháng') }}</flux:select.option>
+                    <flux:select.option value="24">{{ __('24 tháng') }}</flux:select.option>
+                    <flux:select.option value="other">{{ __('Khác...') }}</flux:select.option>
+                </flux:select>
+            </flux:field>
+
+            <div x-show="plan === 'other'" class="mt-2">
+                <flux:field>
+                    <flux:label>{{ __('Số tháng') }}</flux:label>
+                    <flux:input x-model.number="months" name="months" type="number" min="1" max="60" placeholder="{{ __('Nhập số tháng') }}" />
+                    <flux:description>{{ __('Nhập số tháng muốn gia hạn (tối đa 60).') }}</flux:description>
+                </flux:field>
+            </div>
+
+            <div class="flex gap-2 justify-end mt-6">
+                <flux:modal.close>
+                    <flux:button variant="ghost">{{ __('Hủy') }}</flux:button>
+                </flux:modal.close>
+                <flux:button type="submit" variant="primary" color="orange" x-bind:disabled="submitting">{{ __('Đồng ý') }}</flux:button>
+            </div>
+        </form>
+    </div>
+</flux:modal>
+
+

resources/views/frontend/service/partials/vm-control-panel.blade.php

@@ -63,6 +63,7 @@
         ])
         @include('frontend.service.partials.change-ip-modal', ['invoice' => $invoice])
         @include('frontend.service.partials.change-remote-port-modal', ['invoice' => $invoice]) 
+        @include('frontend.service.partials.renewal-modal', ['invoice' => $invoice])
     @endif
 </div>
 </div>

routes/web.php

@@ -522,6 +522,7 @@ Route::middleware("CustomerLoginCheck")->group(function () {
         Route::post('secure/reset-vm-password', 'resetVMPassword')->name('service.reset.vm.password');
         Route::post('secure/change-remote-port', 'changeRemotePort')->name('service.change.remote.port');
         Route::post('secure/change-ip', 'changeIP')->name('service.change.ip');
+        Route::post('secure/renew', 'renew')->name('service.renew');
         Route::post('secure/start-vm', 'startVM')->name('service.start.vm');
         Route::post('secure/stop-vm', 'stopVM')->name('service.stop.vm');
         Route::post('secure/reboot-vm', 'rebootVM')->name('service.reboot.vm');