{# web/subscription/subscription_success_modal.html #}
{# This content will be loaded into the turbo-frame on successful subscription. #}
{# It uses the native <dialog> element for accessibility and simplicity. #}

{# IMPORTANT: Wrap the entire modal content in a turbo-frame with the matching ID #}
<turbo-frame id="main-content">
    <dialog id="subscription-success-modal" class="modal modal-bottom sm:modal-middle"
            data-redirect-url="{{ dashboard_url }}"> {# Using dashboard_url as default redirect on close #}
        <div class="modal-box text-center">
            <h3 class="font-bold text-lg text-green-600">অভিনন্দন!</h3>
            <p class="py-4 text-gray-700">{{ message }}</p>
            <div class="modal-action flex justify-center gap-4">
                <a href="{{ home_url }}" data-turbo-frame="_top" class="btn btn-outline btn-success">হোম</a>
                <a href="{{ dashboard_url }}" data-turbo-frame="_top" class="btn btn-success">ড্যাশবোর্ড</a>
            </div>
        </div>
    </dialog>

    {# Add a script to automatically show the dialog when it's loaded within a Turbo Frame #}
    {# This is good for self-contained frame content, even with the base.html listener #}
    <script>
        document.addEventListener('turbo:load', () => {
            const modal = document.getElementById('subscription-success-modal');
            if (modal && !modal.open) {
                modal.showModal();
            }
        });
    </script>
</turbo-frame>