{{-- Configuration Info Partial - Optimized with helper functions --}}
@php
    $isWindows = Str::contains(Str::lower($vmInfo['os'] ?? ''), 'windows') || 
                 Str::contains(Str::lower($invoice->invoiceItem->first()->os->osGroup->name ?? ''), 'windows');
    $vmIp = $vmInfo['ip_address'] ?? '103.42.56.177';
    $vmPort = $invoice->order->vmWare->first()->port ?? '3389';
    $vmUser = $isWindows ? 'administrator' : 'root';
    $osName = $invoice->invoiceItem->first()->os->osGroup->name ?? 'Unknown';
    $osVersion = $invoice->invoiceItem->first()->os->version ?? '';
    $vmCpu = $vmInfo['cpu'] ?? '3';
    $vmRam = $vmInfo['ram'] ?? '1 GB';
    $vmDisk = $vmInfo['disk'] ?? '25 GB';
    $addons = $invoice->invoiceItem->first()->addons;
@endphp

<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 Address --}}
        <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">{{ $vmIp }}</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">{{ $vmPort }}</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">{{ $vmUser }}</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 ? '' : '••••••••'">
                </span>
                <button type="button" @click="passwordVisible = !passwordVisible"
                    class="text-blue-600 hover:text-blue-800" title="{{ __('Toggle password visibility') }}">
                    <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" title="{{ __('Copy password') }}">
                    <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>

        {{-- Operating System --}}
        <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">
                {{ $osName }} {{ $osVersion }}
            </span>
        </div>

        {{-- Specifications --}}
        <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">
                {{ $vmCpu }} - {{ $vmRam }} - {{ $vmDisk }}
            </span>
        </div>

        {{-- Addons --}}
        @if ($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">
                                {{ $addons->count() }} {{ __('addons') }}
                            </flux:button>
                            <flux:menu>
                                @foreach ($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>