@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