@php
    $subscriptionId = $subscription->gateway_subscription_id;
@endphp

<button type="button" class="btn btn-danger text-white btn-xs cancel-subscription-btn"
    onclick="hanldeCancelSubscription('{{ $subscriptionId }}')">
    <i class="fas fa-times-circle me-1"></i> Cancel
</button>

<script>
    function hanldeCancelSubscription(subscriptionId) {
        const apiUrl = @json(admin_url('subscription/cancel'));

        Swal.fire({
            title: 'Cancel Subscription',
            text: 'Are you sure you want to cancel this user’s subscription?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#aaa',
            confirmButtonText: 'Yes, cancel it!'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Processing...',
                    text: 'Please wait while we cancel the subscription.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: apiUrl,
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        subscription_id: subscriptionId,
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Cancelled!',
                            html: `
                                <p>${response.message || 'Subscription cancelled successfully.'}</p>
                                <small class="text-muted" style="display:block;margin-top:8px;">
                                    The status will be updated within 1–2 minutes.
                                </small>
                            `,
                            icon: 'success',
                            confirmButtonColor: '#3085d6'
                        }).then(() => window.location.reload());
                    },
                    error: function(xhr) {
                        let msg = 'Something went wrong.';
                        if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;

                        if (xhr.responseJSON?.errors) {
                            const errors = xhr.responseJSON.errors.slice(0, 5);
                            const errorList = errors.map(e => `<li>${e}</li>`).join('');
                            Swal.fire({
                                title: 'Error',
                                html: `<p>${msg}</p><ul style="text-align:left;margin-top:10px;">${errorList}</ul>`,
                                icon: 'error',
                                confirmButtonColor: '#d33'
                            });
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: msg,
                                icon: 'error',
                                confirmButtonColor: '#d33'
                            });
                        }
                    }
                });
            }
        });
    }
</script>