<div>
    <!-- Download Proofs Button -->
    <button id="download-proofs" class="btn btn-success" disabled>
        <i class="fas fa-download me-1"></i> Download Proofs
    </button>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const downloadProofsButton = document.getElementById('download-proofs');

            downloadProofsButton.addEventListener('click', function () {
                const selectedIds = [];

                // Collect selected row IDs
                document.querySelectorAll('.row-checkbox:checked').forEach(function (checkbox) {
                    selectedIds.push(checkbox.value);
                });

                if (selectedIds.length > 0) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = "{{ $route }}";

                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = "{{ csrf_token() }}";
                    form.appendChild(csrfInput);

                    const idsInput = document.createElement('input');
                    idsInput.type = 'hidden';
                    idsInput.name = 'ids';
                    idsInput.value = JSON.stringify(selectedIds);
                    form.appendChild(idsInput);

                    const modelInput = document.createElement('input');
                    modelInput.type = 'hidden';
                    modelInput.name = 'model';
                    modelInput.value = "{{ $model ?? 'ActivitiesAttended' }}";
                    form.appendChild(modelInput);

                    document.body.appendChild(form);
                    form.submit();
                } else {
                    alert('No rows selected');
                }
            });

            // Enable/disable button based on row selection
            document.querySelectorAll('.row-checkbox').forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    const selectedRows = document.querySelectorAll('.row-checkbox:checked').length;
                    downloadProofsButton.disabled = selectedRows === 0;
                });
            });
        });
    </script>
</div>