<div id="reject-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/40" data-reject-close></div>
    <div class="relative max-w-lg mx-auto mt-24 bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <div>
                <h3 class="text-lg font-bold text-gray-800">Reject Article</h3>
                <p class="text-sm text-gray-500 mt-1">Tell the writer what needs to be fixed before approval.</p>
            </div>
            <button type="button" class="text-gray-400 hover:text-gray-700 text-2xl leading-none" data-reject-close>&times;</button>
        </div>
        <form id="reject-form" method="POST" class="p-6 space-y-4">
            @csrf
            @method('PATCH')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Rejection reason and required updates</label>
                <textarea name="review_note" rows="6" required class="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm" placeholder="Example: The intro is strong, but please add a clearer visa process section, correct the Canada intake dates, and break long paragraphs into smaller sections."></textarea>
            </div>
            <div class="flex gap-3 justify-end">
                <button type="button" class="px-4 py-2.5 rounded-lg bg-gray-100 text-gray-700 text-sm font-semibold" data-reject-close>Cancel</button>
                <button type="submit" class="px-4 py-2.5 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold">Reject Article</button>
            </div>
        </form>
    </div>
</div>

<script>
(() => {
    const modal = document.getElementById('reject-modal');
    const form = document.getElementById('reject-form');
    if (!modal || !form) return;

    document.querySelectorAll('[data-reject-action]').forEach((btn) => {
        btn.addEventListener('click', () => {
            form.action = btn.dataset.rejectAction;
            const textarea = form.querySelector('textarea[name="review_note"]');
            if (textarea) textarea.value = '';
            modal.classList.remove('hidden');
            setTimeout(() => textarea?.focus(), 20);
        });
    });

    modal.querySelectorAll('[data-reject-close]').forEach((el) => {
        el.addEventListener('click', () => modal.classList.add('hidden'));
    });
})();
</script>
