update layout control vm

app/Http/Controllers/frontend/ServiceController.php

@@ -825,16 +825,35 @@ class ServiceController extends Controller
             $months = $request->plan === 'other' ? (int) ($request->months ?? 1) : (int) $request->plan;
             $productId = $this->sanitizeInput($request->product_id);
 
+            // Fetch product price based on invoice item link
+            $invoiceItem = InvoiceItem::whereHas('invoice', function ($q) use ($user) {
+                    $q->where('customer_id', $user->id);
+                })
+                ->where('product_type', 4) // VPS
+                ->whereHas('invoice', fn($q) => $q->where('status', '!=', 0))
+                ->first();
+
+            $product = $invoiceItem?->getProductAttribute();
+            $unitPrice = (int) ($product?->price_sale ?? $product?->price ?? 0);
+            $total = $unitPrice * max($months, 1);
+
             Log::info('Khách yêu cầu gia hạn dịch vụ', [
                 'user_id' => $user->id,
                 'product_vmware_id' => $productId,
                 'months' => $months,
+                'unit_price' => $unitPrice,
+                'total' => $total,
             ]);
 
             // TODO: implement actual renewal billing/workflow
             return response()->json([
                 'error' => false,
                 'message' => __('Yêu cầu gia hạn đã được ghi nhận'),
+                'data' => [
+                    'unit_price' => $unitPrice,
+                    'months' => $months,
+                    'total' => $total,
+                ],
             ]);
         } catch (\Exception $e) {
             Log::error('Lỗi renew', [

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

@@ -1,7 +1,14 @@
 @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 class="space-y-6" x-data="{ submitting: false, plan: '12', months: 12, unitPrice: 0, total: 0 }" x-init="
+        (() => {
+            const p = {{ (int) ($invoice->invoiceItem->first()?->getProductAttribute()?->price_sale ?? $invoice->invoiceItem->first()?->getProductAttribute()?->price ?? 0) }};
+            unitPrice = p; total = p * months;
+            $watch('plan', value => { months = (value === 'other') ? months : parseInt(value); total = unitPrice * months; });
+            $watch('months', value => { if (plan === 'other') { total = unitPrice * (parseInt(value) || 0); } });
+        })()
+    ">
         <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>
@@ -30,6 +37,11 @@
                 </flux:field>
             </div>
 
+            <div class="mt-4 text-sm text-gray-700">
+                <div class="flex justify-between"><span>{{ __('Đơn giá / tháng') }}</span><span x-text="new Intl.NumberFormat('vi-VN').format(unitPrice) + ' đ'"></span></div>
+                <div class="flex justify-between font-semibold"><span>{{ __('Tổng tiền') }}</span><span x-text="new Intl.NumberFormat('vi-VN').format(total) + ' đ'"></span></div>
+            </div>
+
             <div class="flex gap-2 justify-end mt-6">
                 <flux:modal.close>
                     <flux:button variant="ghost">{{ __('Hủy') }}</flux:button>