{{-- Restart 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-red-300">
    
    <button x-data
        @click="
            fetch('{{ route('service.reboot.vm') }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: new URLSearchParams({ product_id: '{{ $invoice->vm_id }}' })
            })
            .then(res => res.json())
            .then(data => {
                showNotification(data.message);
                setTimeout(() => {
                    window.location.reload();
                }, 300);
            });
        "
        class="flex flex-col items-center w-full cursor-pointer">
        <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>
        {{ __('Khởi động lại VM') }}
    </button>
</div>