{{-- Stop 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.stop.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="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>
        {{ __('Tắt nguồn') }}
    </button>
</div>