491 lines
34 KiB
PHP
491 lines
34 KiB
PHP
@extends('frontend.layouts.master')
|
|
|
|
@push('viewStyles')
|
|
<link rel="stylesheet" href="{{ asset('lib/sweetalert/sweetalert.css') }}">
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="min-h-screen py-8" x-data="serviceControl()">
|
|
<div class="container mx-auto px-4 max-w-full">
|
|
<!-- Service Info Cards -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<!-- Product Icon & Name -->
|
|
<div class="bg-gray-100 rounded-lg shadow-lg p-8 flex flex-col items-center justify-center">
|
|
<div class="bg-white rounded-lg p-6 mb-4 shadow-md">
|
|
<svg class="w-16 h-16 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-gray-800 text-center mb-2">
|
|
{{ $invoice->invoiceItem->first()->server_name ?? 'Cloud VPS' }}
|
|
</h1>
|
|
<p class="text-sm text-gray-600 text-center">
|
|
{{ $invoice->invoiceItem->first()->server_name ?? 'N/A' }}
|
|
</p>
|
|
<div class="mt-4">
|
|
@if ($vmInfo && $vmInfo['status'] == 'POWERED_ON')
|
|
<span class="bg-green-500 text-white px-4 py-2 rounded-full text-sm font-medium">RUNNING</span>
|
|
@elseif($vmInfo && $vmInfo['status'] == 'POWERED_OFF')
|
|
<span class="bg-red-500 text-white px-4 py-2 rounded-full text-sm font-medium">STOPPED</span>
|
|
@else
|
|
<span class="bg-gray-500 text-white px-4 py-2 rounded-full text-sm font-medium">UNKNOWN</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Info -->
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-lg font-semibold text-blue-600 mb-4 border-b border-blue-100 pb-2">
|
|
{{ __('Thông tin cấu hình') }}
|
|
</h2>
|
|
<div class="space-y-4">
|
|
<!-- IP -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">IP</span>
|
|
<span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">
|
|
@if ($vmInfo)
|
|
{{ $vmInfo['ip'] ?? '103.42.56.177' }}
|
|
@else
|
|
103.42.56.177
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Port -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">Port</span>
|
|
<span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">
|
|
@if (Str::contains(Str::lower($vmInfo['os'] ?? ''), 'windows') ||
|
|
Str::contains(Str::lower($invoice->invoiceItem->first()->os->osGroup->name ?? ''), 'windows'))
|
|
3389
|
|
@else
|
|
22
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<!-- User -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">User</span>
|
|
<span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded">
|
|
@if (Str::contains(Str::lower($vmInfo['os'] ?? ''), 'windows') ||
|
|
Str::contains(Str::lower($invoice->invoiceItem->first()->os->osGroup->name ?? ''), 'windows'))
|
|
administrator
|
|
@else
|
|
root
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">Password</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-mono text-sm bg-gray-100 px-2 py-1 rounded"
|
|
x-text="passwordVisible ? 'TGS@123' : '••••••••'">
|
|
</span>
|
|
<button type="button" @click="passwordVisible = !passwordVisible"
|
|
class="text-blue-600 hover:text-blue-800">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
<button type="button" @click="copyPassword()" class="text-blue-600 hover:text-blue-800">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OS -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">OS</span>
|
|
<span class="text-sm bg-gray-100 px-2 py-1 rounded">
|
|
{{ $invoice->invoiceItem->first()->os->osGroup->name ?? 'Unknown' }}
|
|
{{ $invoice->invoiceItem->first()->os->version ?? '' }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Specs -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Chi tiết') }} (CPU - RAM - DISK)</span>
|
|
<span class="text-sm bg-blue-50 text-blue-700 px-2 py-1 rounded">
|
|
@if ($vmInfo)
|
|
{{ $vmInfo['cpu'] ?? '3' }} - {{ $vmInfo['ram'] ?? '1 GB' }} -
|
|
{{ $vmInfo['disk'] ?? '25 GB' }}
|
|
@else
|
|
3 - 1 GB - 25 GB
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Addons Dropdown -->
|
|
@if ($invoice->invoiceItem->first()->addons->count() > 0)
|
|
<div class="relative">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Addons') }}</span>
|
|
<div class="relative">
|
|
<flux:dropdown>
|
|
<flux:button icon:trailing="chevron-down">
|
|
{{ $invoice->invoiceItem->first()->addons->count() }} {{ __('addons') }}
|
|
</flux:button>
|
|
<flux:menu>
|
|
@foreach ($invoice->invoiceItem->first()->addons as $addon)
|
|
<flux:menu.item>
|
|
{{ $addon->addonItems->name }} -
|
|
{{ $addon->qty }} {{ $addon->addonItems->prefix }}
|
|
- {{ number_format($addon->price, 0, ',', '.') }} đ
|
|
</flux:menu.item>
|
|
@endforeach
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Info -->
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-lg font-semibold text-blue-600 mb-4 border-b border-blue-100 pb-2">
|
|
{{ __('Thông tin giao dịch') }}
|
|
</h2>
|
|
<div class="space-y-4">
|
|
<!-- Ngày đăng ký -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Ngày đăng ký') }}</span>
|
|
<span class="text-sm">
|
|
{{ $invoice->date ? \Carbon\Carbon::parse($invoice->date)->format('d/m/Y') : 'N/A' }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Thanh toán lần đầu -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Thanh toán lần đầu') }}</span>
|
|
<span class="text-sm">
|
|
{{ number_format($invoice->total ?? 0, 0, ',', '.') }} đ
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Số tiền thanh toán định kỳ -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Số tiền thanh toán định kỳ') }}</span>
|
|
<span class="text-sm">
|
|
{{ number_format($invoice->total ?? 0, 0, ',', '.') }} đ
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Hạn sử dụng -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Hạn sử dụng') }}</span>
|
|
<span class="text-sm">
|
|
@if ($invoice->status == 1)
|
|
<span
|
|
class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">{{ __('Hết hạn') }}</span>
|
|
@else
|
|
<span
|
|
class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">{{ __('Hoạt động') }}</span>
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Ngày hết hạn -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Ngày hết hạn') }}</span>
|
|
<span class="text-sm">
|
|
{{ $invoice->due_date ? \Carbon\Carbon::parse($invoice->due_date)->format('d/m/Y') : 'N/A' }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Trạng thái gia hạn tự động -->
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 font-medium">{{ __('Trạng thái gia hạn tự động') }}</span>
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">OFF</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Sidebar - Điều khiển VM -->
|
|
<div class="lg:col-span-3">
|
|
@if ($vmInfo)
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4">
|
|
</path>
|
|
</svg>
|
|
{{ __('Điều khiển VM') }}
|
|
</h2>
|
|
|
|
<!-- VM Control Grid -->
|
|
<div class="grid grid-cols-6 gap-4">
|
|
<!-- Row 1 -->
|
|
<!-- Gia hạn -->
|
|
<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>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Gia hạn') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Khởi động lại -->
|
|
<div id="restartVMButton"
|
|
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-red-300">
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Khởi động lại') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tạm dừng -->
|
|
<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-red-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-red-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Tạm dừng') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tắt nguồn -->
|
|
@if ($vmInfo['status'] == 'POWERED_OFF')
|
|
<div id="startVMButton"
|
|
class="bg-green-50 hover:bg-green-100 rounded-lg p-4 text-center cursor-pointer transition-colors duration-200 border border-green-200 hover:border-green-400">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div
|
|
class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-green-600" fill="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" />
|
|
</svg>
|
|
</div>
|
|
<span class="font-medium text-green-700">{{ __('Khởi động máy ảo') }}</span>
|
|
</div>
|
|
</div>
|
|
@elseif ($vmInfo['status'] == 'POWERED_ON')
|
|
<div id="stopVMButton"
|
|
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-red-300">
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-red-600" fill="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Tắt nguồn') }}</span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
<!-- Thêm cấu hình -->
|
|
<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-blue-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-blue-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Thêm cấu hình') }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- Cài lại -->
|
|
<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-green-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-green-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Cài lại') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2 -->
|
|
<!-- Snapshots -->
|
|
@if ($vmInfo['status'] == 'POWERED_ON')
|
|
<form method="POST" action="{{ route('service.create.snapshots') }}"
|
|
class="inline-block" id="snapshotForm">
|
|
@csrf
|
|
<input type="hidden" name="product_id" value="{{ $invoice->vm_id }}">
|
|
<button type="submit"
|
|
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-purple-300 w-full"
|
|
onclick="handleSnapshotSubmit(event)">
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-gray-700">{{ __('Tạo Snapshot') }}</span>
|
|
</div>
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
<!-- Mở Console -->
|
|
<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-gray-400"
|
|
@click="window.open('{{ route('service.vm.console', ['invoice_id' => $invoice->id]) }}', '_blank')">
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Mở Console') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reset Mật Khẩu -->
|
|
<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-blue-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-blue-100 rounded-full flex items-center justify-center mb-3">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1 1 21 9z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">{{ __('Reset Mật Khẩu') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="mt-6 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
|
<div class="text-sm text-blue-700">
|
|
<div class="font-medium mb-2 flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{{ __('Lưu ý:') }}
|
|
</div>
|
|
<ul class="text-xs space-y-1 ml-5">
|
|
<li>• {{ __('Các thao tác có thể mất vài giây để hoàn thành') }}</li>
|
|
<li>• {{ __('VM sẽ được khởi động lại sau khi thay đổi cấu hình') }}</li>
|
|
<li>• {{ __('Vui lòng đợi thao tác hoàn thành trước khi thực hiện tiếp') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z">
|
|
</path>
|
|
</svg>
|
|
Thông báo
|
|
</h2>
|
|
|
|
<div class="text-center">
|
|
<div class="text-gray-500 mb-3">
|
|
<svg class="w-12 h-12 mx-auto text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-600 text-sm">Dịch vụ này chưa có thông tin VM hoặc đang trong quá trình
|
|
khởi tạo.</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
@include('frontend.service.list-snapshot')
|
|
</div>
|
|
@endsection
|
|
|
|
@push('viewScripts')
|
|
<script>
|
|
window.invoiceId = {{ $invoice->id }};
|
|
window.vmId = '{{ $vmInfo['vm_id'] ?? '' }}';
|
|
window.vmHostname = '{{ $vmInfo['hostname'] ?? '' }}';
|
|
window.csrfToken = '{{ csrf_token() }}';
|
|
|
|
function serviceControl() {
|
|
return {
|
|
passwordVisible: false,
|
|
|
|
copyPassword() {
|
|
navigator.clipboard.writeText('TGS@123').then(() => {
|
|
showNotification('{{ __('Password copied to clipboard!') }}', 'success');
|
|
}).catch(() => {
|
|
showNotification('{{ __('Failed to copy password') }}', 'error');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="{{ asset('js/service/service.js') }}"></script>
|
|
<script src="{{ asset('lib/sweetalert/sweetalert.min.js') }}"></script>
|
|
@endpush
|